/* =========================================
   الهوية العامة
========================================= */

:root {
    --primary: #075e50;
    --primary-dark: #04483d;
    --primary-hover: #08725f;
    --primary-light: #e8f3ef;
    --gold: #c7a451;

    --background: #f3f7f5;
    --surface: #ffffff;
    --text: #203b32;
    --muted: #6d8077;
    --border: #dce7e1;

    --danger: #b42332;
    --radius: 16px;
    --sidebar-width: 270px;
    --shadow: 0 6px 24px rgb(20 60 40 / 5%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    direction: rtl;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.8;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--primary);
    text-underline-offset: 4px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

/* =========================================
   الوصول إلى المحتوى
========================================= */

.skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 200;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--primary);
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* =========================================
   الهيكل العام
========================================= */

.app-layout {
    min-height: 100vh;
    min-height: 100dvh;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin-inline-start: var(--sidebar-width);
}

.page-content {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
}

/* =========================================
   القائمة الجانبية
========================================= */

.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    padding: 22px 16px;
    overflow-y: auto;
    background: linear-gradient(
        165deg,
        var(--primary),
        #043e33
    );
    color: #ffffff;
    box-shadow: -4px 0 24px rgb(0 40 28 / 8%);
    scrollbar-width: thin;
    scrollbar-color: #ffffff45 transparent;
}

.sidebar-brand {
    display: block;
    padding: 8px 12px 22px;
    border-bottom: 1px solid #ffffff24;
    color: #ffffff;
    text-decoration: none;
}

.ministry-logo {
    width: 100%;
    height: auto;
    max-height: 82px;
    margin: 0 auto 20px;
    object-fit: contain;
}

.sidebar-app {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-app img {
    flex-shrink: 0;
    object-fit: contain;
}

.sidebar-app span {
    font-size: 12px;
    font-weight: 700;
}

.sidebar-caption {
    margin: 24px 14px 12px;
    color: #b9d4c9;
    font-size: 11px;
}

.sidebar-navigation {
    flex: 1;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #eaf4ef;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.sidebar-link svg {
    flex-shrink: 0;
    color: #b9d6c8;
}

.sidebar-link:hover {
    background: #ffffff12;
    color: #ffffff;
}

.sidebar-link.is-active {
    border-inline-start: 3px solid var(--gold);
    background: #eff7f2;
    color: var(--primary);
    font-weight: 700;
}

.sidebar-link.is-active svg {
    color: var(--primary);
}

.sidebar-bottom {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #ffffff24;
}

.sidebar-department {
    display: grid;
    gap: 5px;
    padding: 0 12px 16px;
}

.sidebar-department span {
    color: #b9d4c9;
    font-size: 11px;
}

.sidebar-department strong {
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.sidebar-logout {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #ffffff30;
    border-radius: 10px;
    background: #ffffff0a;
    color: #ffffff;
}

.sidebar-logout:hover {
    background: #ffffff1c;
}

.sidebar-toggle {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

/* =========================================
   الشريط العلوي
========================================= */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 100px;
    padding: 20px 32px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.topbar-system {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 11px;
}

.topbar h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-user img {
    border-radius: 12px;
    object-fit: contain;
}

.topbar-user > div {
    display: grid;
    gap: 3px;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
}

.user-role {
    color: var(--muted);
    font-size: 11px;
}

/* =========================================
   البطاقات والعناوين
========================================= */

.card {
    min-width: 0;
    margin-bottom: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
}

.card-header h2 {
    margin: 0;
    font-size: 17px;
}

.card-body {
    padding: 24px;
}

.section-heading {
    margin: 0 0 18px;
    font-size: 19px;
}

.text-muted {
    color: var(--muted);
}

.empty-state {
    padding: 44px 20px;
    color: var(--muted);
    text-align: center;
}

/* =========================================
   الأزرار
========================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.6;
    transition:
        background-color 160ms ease,
        border-color 160ms ease;
}

.btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    border-color: var(--primary-hover);
    background: var(--primary-hover);
}

.btn-outline {
    border-color: var(--border);
    background: var(--surface);
    color: var(--primary);
}

.btn-outline:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.btn-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* =========================================
   النماذج
========================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-group {
    min-width: 0;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.form-control {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.form-control:focus {
    border-color: var(--primary);
    outline: 2px solid #075e5020;
    outline-offset: 1px;
}

textarea.form-control {
    min-height: 130px;
    resize: vertical;
}

.form-control:disabled {
    background: #eef2ef;
    color: var(--muted);
}

.form-control[aria-invalid="true"] {
    border-color: var(--danger);
}

.form-help {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.form-error {
    margin: 6px 0 0;
    color: var(--danger);
    font-size: 12px;
}

/* =========================================
   الجداول
========================================= */

.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.data-table th,
.data-table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table th {
    background: #edf5f0;
    color: #345c49;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.data-table td {
    font-size: 13px;
}

.data-table tbody tr:hover {
    background: #f7faf8;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.badge-success {
    background: #e7f4ec;
    color: #14673c;
}

.badge-muted {
    background: #edf0ee;
    color: #66776e;
}

/* =========================================
   الرسائل المؤقتة
========================================= */

.flash-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.flash-content {
    display: grid;
    gap: 4px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.flash-success {
    border-color: #c6e4d2;
    background: #edf8f1;
    color: #175f38;
}

.flash-error {
    border-color: #f0ccd0;
    background: #fff1f2;
    color: #972a37;
}

.flash-warning {
    border-color: #ead9ae;
    background: #fff8e8;
    color: #765715;
}

.flash-info {
    border-color: #c8dfe9;
    background: #eef7fb;
    color: #245c75;
}

.flash-close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 24px;
}

.flash-close:hover {
    background: rgb(0 0 0 / 5%);
}

/* =========================================
   الفوتر
========================================= */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 32px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
}

/* =========================================
   تقليل الحركة حسب إعداد المستخدم
========================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   لوحة التحكم
========================================= */

.dashboard-page {
    display: grid;
    gap: 24px;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    border: 1px solid #d5e5dc;
    border-radius: 18px;
    background: linear-gradient(
        110deg,
        #ffffff,
        #e8f3ed
    );
}

.dashboard-eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.dashboard-welcome h2 {
    margin: 7px 0 9px;
    font-size: 23px;
    line-height: 1.7;
}

.dashboard-welcome p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-welcome p span {
    margin-inline: 8px;
}

.dashboard-welcome img {
    flex-shrink: 0;
    object-fit: contain;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 220px), 1fr)
    );
    gap: 20px;
}

.dashboard-stat {
    position: relative;
    min-width: 0;
    padding: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-stat::before {
    position: absolute;
    inset-block: 22px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
    content: "";
}

.dashboard-stat:nth-child(2)::before {
    background: var(--gold);
}

.dashboard-stat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-stat-heading h3 {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.dashboard-stat-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary);
}

.dashboard-stat:nth-child(2) .dashboard-stat-icon {
    background: #fbf5e8;
    color: #947222;
}

.dashboard-stat-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dashboard-stat-value {
    display: block;
    margin: 14px 0 2px;
    color: var(--text);
    font-size: 34px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.dashboard-stat-caption {
    color: var(--muted);
    font-size: 11px;
}

.dashboard-account {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.dashboard-section-heading h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.dashboard-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 24px;
}

.dashboard-details > div {
    min-width: 0;
}

.dashboard-details dt {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
}

.dashboard-details dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .dashboard-page {
        gap: 18px;
    }

    .dashboard-welcome {
        gap: 14px;
        padding: 22px 18px;
    }

    .dashboard-welcome h2 {
        font-size: 19px;
    }

    .dashboard-welcome img {
        width: 55px;
        height: 55px;
    }

    .dashboard-details {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
    }

    .dashboard-section-heading {
        padding: 18px 20px;
    }
}

/* =========================================
   أحدث المعاملات في لوحة التحكم
========================================= */

.dashboard-transactions {
    margin-bottom: 0;
}

.dashboard-transactions .card-body {
    padding: 0;
}

.dashboard-transactions .table-responsive {
    border-radius: 0 0 var(--radius) var(--radius);
}

.dashboard-transactions .empty-state {
    padding: 42px 18px;
}

.dashboard-transactions .empty-state strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.dashboard-transactions .empty-state p {
    margin: 8px 0 0;
    font-size: 12px;
}

/* =========================================
   صفحة الأقسام — ترتيب مشابه لموعدي
========================================= */

.departments-page {
    display: grid;
    gap: 22px;
}

.departments-page > .flash-message {
    margin: 0;
    align-items: center;
}

.departments-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.departments-toolbar h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.departments-toolbar p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.departments-table-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* =========================================
   جدول الأقسام
========================================= */

.departments-table th,
.departments-table td {
    padding: 18px 20px;
}

.departments-table thead th {
    background: #f0f6f3;
    font-size: 12px;
}

.departments-table tbody th[scope="row"] {
    min-width: 230px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    white-space: normal;
}

.departments-table th:nth-child(n + 3),
.departments-table td:nth-child(n + 3) {
    text-align: center;
}

.department-number {
    width: 65px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* =========================================
   زر وحدات القسم
========================================= */

.department-units-cell {
    display: grid;
    justify-items: center;
    gap: 6px;
}

.department-units-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #19845f;
    border-radius: 9px;
    background: #ffffff;
    color: #127450;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.department-units-button svg {
    flex-shrink: 0;
}

.department-units-button:hover {
    background: #19845f;
    color: #ffffff;
}

.department-unit-count {
    color: var(--muted);
    font-size: 11px;
}

.department-count {
    display: inline-block;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 7px;
    background: #f0f4f2;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* =========================================
   حالة القسم
========================================= */

.department-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    white-space: nowrap;
}

.department-status.is-active {
    background: #e7f5ee;
    color: #158458;
}

.department-status.is-inactive {
    background: #edf0ee;
    color: #6c7972;
}

.department-status-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* =========================================
   أزرار العرض والتعديل والحذف
========================================= */

.departments-table .department-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.department-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #ffffff;
    text-decoration: none;
}

.department-action-button svg {
    flex-shrink: 0;
}

/* عرض تفاصيل القسم */

.department-action-button.action-view {
    color: #12805b;
}

.department-action-button.action-view:hover {
    border-color: #b7dfca;
    background: #eaf6ef;
}

/* تعديل القسم */

.department-action-button.action-edit {
    color: #2473c6;
}

.department-action-button.action-edit:hover {
    border-color: #b8d3ec;
    background: #edf5ff;
}

/* فتح صفحة تأكيد الحذف */

.department-action-button.action-delete {
    border-color: #f0ccd2;
    color: #c53446;
}

.department-action-button.action-delete:hover {
    border-color: #e9aeb9;
    background: #fff0f2;
}

/* =========================================
   التنقل بلوحة المفاتيح
========================================= */

.department-units-button:focus-visible,
.department-action-button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* =========================================
   الجوال
========================================= */

@media (max-width: 640px) {
    .departments-toolbar {
        align-items: flex-start;
    }

    .departments-toolbar .btn {
        width: 100%;
    }

    .departments-table {
        min-width: 760px;
    }

    .departments-table th,
    .departments-table td {
        padding: 15px;
    }

    .department-action-button {
        width: 44px;
        height: 44px;
    }

    .department-units-button {
        min-height: 44px;
    }
}

/* =========================================
   ضبط جدول المستخدمين
========================================= */

.users-table {
    width: 100%;
    min-width: 950px;
    table-layout: auto;
}

.users-table th,
.users-table td {
    padding: 16px 18px;
    text-align: center;
    vertical-align: middle;
}

/* عمود الاسم */

.users-table th:first-child,
.users-table td:first-child {
    min-width: 180px;
    text-align: start;
}

/* اسم المستخدم داخل الصف ليس عنوانًا للجدول */

.users-table tbody th[scope="row"] {
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* رؤوس الأعمدة */

.users-table thead th {
    background: #edf5f0;
    color: #345c49;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* اسم المستخدم */

.users-table tbody td:nth-child(2) {
    direction: ltr;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* القسم */

.users-table th:nth-child(4),
.users-table td:nth-child(4) {
    min-width: 180px;
}

/* الحالة */

.users-table .badge {
    white-space: nowrap;
}

/* الإجراءات */

.users-table th:last-child,
.users-table td:last-child {
    min-width: 220px;
}

.users-table .department-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.users-table .department-actions .btn {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.users-table tbody tr:hover {
    background: #f5faf7;
}

@media (max-width: 640px) {
    .users-table th,
    .users-table td {
        padding: 14px;
    }

    .users-table .department-actions .btn {
        min-height: 44px;
    }
}

/* محاذاة أيقونات إجراءات المستخدمين */

.users-table th:last-child,
.users-table td:last-child {
    min-width: 160px;
}

.users-table .department-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* تفاصيل المعاملة */

.transaction-details p,
.transaction-details h2 {
    overflow-wrap: anywhere;
}

.transaction-details .form-group > p {
    margin: 0;
}

.transaction-subject {
    margin-bottom: 24px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f4f8f5;
}

.transaction-subject > p {
    margin: 0;
    line-height: 1.9;
}


/* نموذج إضافة المعاملة وتعديلها */

.transaction-form-card {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

.transaction-form-card .card-header h2 {
    margin: 0;
}

.transaction-form-card textarea {
    resize: vertical;
    line-height: 1.8;
}

.transaction-upload-box {
    min-width: 0;
    padding: 20px;
    border: 1px dashed #9cbdaf;
    border-radius: 12px;
    background: #f4f9f6;
}

.transaction-upload-box input[type="file"] {
    max-width: 100%;
    padding: 10px;
    background: #fff;
}

.transaction-upload-box input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--primary, #075e50);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.transaction-upload-box .form-help {
    margin-bottom: 0;
    line-height: 1.9;
}

@media (max-width: 640px) {
    .transaction-upload-box {
        padding: 14px;
    }
}

/* تفاصيل المعاملة والمرفقات */

.transaction-view-page .card-header {
    flex-wrap: wrap;
    gap: 14px;
}

.transaction-view-page .card-header h2 {
    margin: 0;
}

.transaction-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.transaction-info-table th,
.transaction-info-table td {
    padding: 15px 18px;
    border: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.transaction-info-table th {
    width: 210px;
    background: #edf5f0;
    color: var(--text);
    font-weight: 700;
}

.transaction-info-table td {
    background: var(--surface, #fff);
}

.transaction-view-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.transaction-attachments-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.transaction-attachments-table th,
.transaction-attachments-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: middle;
}

.transaction-attachments-table thead th {
    background: #edf5f0;
    color: var(--text);
    font-size: 12px;
}

.transaction-attachments-table tbody tr:last-child td {
    border-bottom: 0;
}

.transaction-attachments-table tbody tr:hover {
    background: #f8fbf9;
}

.attachment-file-name {
    display: block;
    max-width: 320px;
    color: var(--text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.attachment-file-meta {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
}

.attachment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-actions form {
    margin: 0;
}

.attachment-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.attachment-status.is-signed {
    background: #e5f4eb;
    color: #13774e;
}

.attachment-status.is-unsigned {
    background: #fff4db;
    color: #946b12;
}

.attachment-signature {
    display: grid;
    justify-items: start;
    gap: 8px;
    min-width: 180px;
}

.attachment-signature img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: 90px;
    padding: 8px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.attachment-signature-name {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.attachment-signature-date,
.attachment-signature-empty {
    color: var(--muted);
    font-size: 11px;
}

.transaction-attachments-empty {
    padding: 32px 16px;
    color: var(--muted);
    text-align: center;
}

.transaction-view-page .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* نافذة إرسال المعاملة بالبريد */

.transaction-email-dialog {
    width: min(640px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface, #fff);
    color: var(--text);
    box-shadow: 0 24px 80px rgb(0 0 0 / 22%);
}

.transaction-email-dialog::backdrop {
    background: rgb(15 35 28 / 55%);
}

.transaction-email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: #edf5f0;
}

.transaction-email-header h2 {
    margin: 0;
    font-size: 18px;
}

.transaction-email-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}

.transaction-email-body {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.transaction-email-info {
    margin: 0;
    padding: 12px 15px;
    border-radius: 10px;
    background: #f1f7f3;
    line-height: 1.8;
}

.transaction-email-attachments {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fbf9;
}

.transaction-email-attachments label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.transaction-email-attachments input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 4px;
    accent-color: #08775b;
}

.transaction-email-attachments .form-help {
    margin-bottom: 0;
    line-height: 1.8;
}

.transaction-email-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
}

.transaction-view-page a:focus-visible,
.transaction-view-page button:focus-visible,
.transaction-email-dialog button:focus-visible,
.transaction-email-dialog input:focus-visible,
.transaction-email-dialog textarea:focus-visible {
    outline: 3px solid #b58a2b;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .transaction-info-table th,
    .transaction-info-table td {
        padding: 12px;
        font-size: 12px;
    }

    .transaction-info-table th {
        width: 115px;
    }

    .transaction-view-actions > .btn {
        width: 100%;
    }

    .transaction-email-header,
    .transaction-email-body,
    .transaction-email-footer {
        padding: 16px;
    }

    .transaction-email-header h2 {
        font-size: 16px;
    }

    .transaction-email-footer .btn {
        flex: 1;
    }
}

/* تحسين صفحة تفاصيل المعاملة */

.transaction-view-page {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.transaction-view-page > .card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface, #fff);
    box-shadow: 0 8px 28px rgb(20 70 48 / 5%);
}

.transaction-view-page .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(110deg, #fff, #edf6f0);
}

.transaction-view-page .card-header h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
}

.transaction-view-page .card-header .form-help {
    margin: 6px 0 0;
}

.transaction-view-page .card-body {
    padding: 24px;
}

.transaction-view-page .transaction-info-table {
    display: block;
    margin: 0 0 24px;
    border: 0;
}

.transaction-view-page .transaction-info-table tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.transaction-view-page .transaction-info-table tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #e0eae4;
    border-radius: 12px;
    background: #fbfdfb;
}

.transaction-view-page .transaction-info-table th,
.transaction-view-page .transaction-info-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    overflow-wrap: anywhere;
}

.transaction-view-page .transaction-info-table th {
    color: var(--muted, #708378);
    font-size: 12px;
    font-weight: 500;
}

.transaction-view-page .transaction-info-table td {
    color: var(--text, #173c30);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
}

/* الموضوع */

.transaction-view-page .transaction-info-table tr:nth-child(2) {
    grid-column: 1 / -1;
    border-inline-start: 4px solid #16805d;
    background: #f0f7f2;
}

/* الملاحظات */

.transaction-view-page .transaction-info-table tr:last-child {
    grid-column: 1 / -1;
}

.transaction-view-page .transaction-info-table tr:last-child td {
    font-weight: 400;
}

.transaction-view-page .transaction-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.transaction-view-page .transaction-view-actions .btn {
    min-height: 42px;
}

/* جدول المرفقات */

.transaction-view-page .transaction-attachments-table thead th {
    padding-block: 17px;
    background: #f0f6f2;
}

.transaction-view-page .transaction-attachments-table td {
    padding-block: 20px;
}

.transaction-view-page .attachment-file-name {
    font-size: 13px;
    line-height: 1.8;
}

.transaction-view-page .attachment-file-meta {
    line-height: 1.8;
}

.transaction-view-page .attachment-signature img {
    width: 170px;
    height: 85px;
    border-radius: 12px;
}

@media (max-width: 1100px) {
    .transaction-view-page .transaction-info-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .transaction-view-page .card-header,
    .transaction-view-page .card-body {
        padding: 18px;
    }

    .transaction-view-page .transaction-info-table tbody {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .transaction-view-page .transaction-info-table tr {
        padding: 15px;
    }

    .transaction-view-page .transaction-view-actions .btn {
        width: 100%;
    }
}

/* لوحة التوقيع الإلكتروني */

.signature-pad-container {
    overflow: hidden;
    margin-block: 14px;
    border: 2px dashed #a8c4b6;
    border-radius: 14px;
    background: #fff;
}

#attachment-signature-pad {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.signature-pad-container.is-drawing {
    border-color: #14805b;
}

#signature-pad-message {
    min-height: 24px;
    line-height: 1.8;
}

#attachment-signature-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

#attachment-signature-form .form-actions {
    margin-top: 0;
}

@media (max-width: 640px) {
    #attachment-signature-pad {
        aspect-ratio: 5 / 2;
    }

    #attachment-signature-form .form-actions .btn {
        width: 100%;
    }
}

/* =========================================
   قائمة المعاملات
========================================= */

.transactions-page {
    min-width: 0;
}

.transactions-table-card {
    min-width: 0;
    overflow: hidden;
}

.transactions-table-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
}

.transactions-table-card > .card-header h2 {
    margin: 0;
    font-size: 17px;
}

.transactions-total {
    padding: 5px 12px;
    border-radius: 8px;
    background: #f0f6f2;
    color: #426653;
    font-size: 12px;
}

.transactions-table-card .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table.transactions-table {
    width: 100%;
    min-width: 1050px;
    table-layout: auto;
    border-collapse: collapse;
}

.data-table.transactions-table th,
.data-table.transactions-table td {
    padding: 18px 16px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
    line-height: 1.8;
}

.data-table.transactions-table thead th {
    background: #edf5f0;
    color: #345c49;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.data-table.transactions-table tbody td {
    color: var(--text);
    font-size: 13px;
}

/* إزالة خلفية عنوان العمود عن خلية الموضوع */

.data-table.transactions-table tbody th[scope="row"] {
    min-width: 230px;
    max-width: 360px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* رقم المعاملة */

.data-table.transactions-table th:first-child,
.data-table.transactions-table td:first-child {
    min-width: 130px;
    font-variant-numeric: tabular-nums;
}

.transactions-table .transaction-number-cell {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* النوع */

.data-table.transactions-table th:nth-child(3),
.data-table.transactions-table td:nth-child(3) {
    min-width: 90px;
}

.transactions-table .transaction-type-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.transactions-table .transaction-type-label[data-type="incoming"] {
    background: #eaf5f0;
    color: #137352;
}

.transactions-table .transaction-type-label[data-type="outgoing"] {
    background: #edf2fb;
    color: #365e99;
}

/* القسم */

.data-table.transactions-table th:nth-child(4),
.data-table.transactions-table td:nth-child(4) {
    min-width: 180px;
    max-width: 250px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* التاريخ */

.data-table.transactions-table th:nth-child(5),
.data-table.transactions-table td:nth-child(5) {
    min-width: 115px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.transactions-table time {
    display: inline-block;
    direction: ltr;
}

/* الحالة */

.data-table.transactions-table th:nth-child(6),
.data-table.transactions-table td:nth-child(6) {
    min-width: 135px;
}

.transactions-table .badge {
    white-space: nowrap;
}

.transactions-table .badge[data-status="new"] {
    background: #eaf2ff;
    color: #245d9e;
}

.transactions-table .badge[data-status="in_progress"] {
    background: #fff3dc;
    color: #946711;
}

.transactions-table .badge[data-status="pending_approval"] {
    background: #f1eafa;
    color: #7446a0;
}

.transactions-table .badge[data-status="completed"] {
    background: #e7f4ec;
    color: #14673c;
}

/* الإجراءات */

.data-table.transactions-table th:last-child,
.data-table.transactions-table td:last-child {
    min-width: 155px;
}

.transactions-table .department-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.transactions-table .department-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
}

.transactions-table .action-view {
    color: #12805b;
}

.transactions-table .action-view:hover {
    border-color: #b7dfca;
    background: #eaf6ef;
}

.transactions-table .action-edit {
    color: #2473c6;
}

.transactions-table .action-edit:hover {
    border-color: #b8d3ec;
    background: #edf5ff;
}

.transactions-table .action-delete {
    color: #d94657;
}

.transactions-table .action-delete:hover {
    border-color: #f1bac1;
    background: #fff0f2;
}

.transactions-table .department-action-button:focus-visible {
    outline: 3px solid #b58a2b;
    outline-offset: 3px;
}

/* الصفوف والحالة الفارغة */

.data-table.transactions-table tbody tr:hover {
    background: #f5faf7;
}

.data-table.transactions-table tbody tr:last-child > th,
.data-table.transactions-table tbody tr:last-child > td {
    border-bottom: 0;
}

.data-table.transactions-table .empty-state {
    padding: 36px 20px;
    color: var(--muted);
    text-align: center;
}

/* عدد النتائج والتنقل */

.transactions-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: #fbfdfb;
}

.transactions-results {
    color: var(--muted);
    font-size: 12px;
}

.transactions-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
}

.transactions-pagination .btn {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .transactions-table-card > .card-header,
    .transactions-table-footer {
        padding: 16px;
    }

    .data-table.transactions-table th,
    .data-table.transactions-table td {
        padding: 14px 12px;
    }

    .transactions-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.transactions-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .transactions-toolbar-actions {
        width: 100%;
    }

    .transactions-toolbar-actions .btn {
        width: 100%;
    }
}

/* مراسلات الأقسام */

.correspondences-page {
    min-width: 0;
}

.correspondence-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.correspondence-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #426653;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.correspondence-tab:hover {
    background: #edf6f0;
}

.correspondence-tab.is-active {
    border-color: #075e50;
    background: #075e50;
    color: #fff;
}

.correspondence-tab:focus-visible {
    outline: 3px solid #b58a2b;
    outline-offset: 3px;
}

.data-table.correspondences-table {
    min-width: 1100px;
}

.data-table.correspondences-table th,
.data-table.correspondences-table td {
    padding: 18px 16px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.8;
}

.data-table.correspondences-table tbody th[scope="row"] {
    min-width: 240px;
    max-width: 360px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

.correspondences-table th:first-child,
.correspondences-table td:first-child {
    min-width: 130px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.correspondences-table th:nth-child(3),
.correspondences-table td:nth-child(3),
.correspondences-table th:nth-child(4),
.correspondences-table td:nth-child(4) {
    min-width: 190px;
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.correspondences-table time {
    display: inline-block;
    direction: ltr;
    white-space: nowrap;
}

.correspondences-table .badge {
    white-space: nowrap;
}

.correspondences-table .badge[data-status="new"] {
    background: #eaf2ff;
    color: #245d9e;
}

.correspondences-table .badge[data-status="in_progress"] {
    background: #fff3dc;
    color: #946711;
}

.correspondences-table .badge[data-status="pending_approval"] {
    background: #f1eafa;
    color: #7446a0;
}

.correspondences-table .badge[data-status="completed"] {
    background: #e7f4ec;
    color: #14673c;
}

.data-table.correspondences-table tbody tr:last-child > th,
.data-table.correspondences-table tbody tr:last-child > td {
    border-bottom: 0;
}

.correspondences-table .empty-state {
    padding: 36px 20px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 640px) {
    .correspondence-tabs {
        gap: 8px;
    }

    .correspondence-tab {
        flex: 1;
        padding-inline: 12px;
    }

    .data-table.correspondences-table th,
    .data-table.correspondences-table td {
        padding: 14px 12px;
    }
}

/* تفاصيل مراسلات الأقسام */

.correspondence-view-page .transaction-info-table tr:nth-last-child(2) {
    grid-column: 1 / -1;
}

.correspondence-view-page .transaction-info-table tr:nth-last-child(2) td {
    font-weight: 400;
}

.correspondence-history-table {
    min-width: 1100px;
}

.correspondence-history-table th,
.correspondence-history-table td {
    padding: 16px;
    text-align: center;
    vertical-align: top;
    line-height: 1.9;
}

.correspondence-history-table td:nth-child(6) {
    min-width: 230px;
    max-width: 350px;
    text-align: start;
    overflow-wrap: anywhere;
}

.correspondence-history-table td:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* لوحة توقيع مرفقات مراسلات الأقسام */

#correspondence-signature-pad {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

#correspondence-signature-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

#correspondence-signature-form .form-actions {
    margin-top: 0;
}

#correspondence-signature-message {
    min-height: 24px;
    line-height: 1.8;
}

@media (max-width: 640px) {
    #correspondence-signature-form .form-actions .btn {
        width: 100%;
    }
}

/* المراسلات الداخلية */

.internal-mail-page {
    min-width: 0;
}

.internal-mail-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.internal-mail-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #426653;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.internal-mail-tab:hover {
    background: #edf6f0;
}

.internal-mail-tab.is-active {
    border-color: #075e50;
    background: #075e50;
    color: #fff;
}

.internal-mail-table-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.internal-mail-count {
    padding: 5px 12px;
    border-radius: 8px;
    background: #f0f6f2;
    color: #426653;
    font-size: 12px;
}

.data-table.internal-mail-table {
    min-width: 1150px;
}

.data-table.internal-mail-table th,
.data-table.internal-mail-table td {
    padding: 18px 16px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.8;
}

.data-table.internal-mail-table tbody th[scope="row"] {
    min-width: 230px;
    max-width: 350px;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
}

.internal-mail-table td:nth-child(3),
.internal-mail-table td:nth-child(4) {
    min-width: 140px;
    overflow-wrap: anywhere;
}

.internal-mail-table td:nth-child(5) {
    min-width: 180px;
    max-width: 240px;
    overflow-wrap: anywhere;
}

.internal-mail-table time {
    display: inline-block;
    direction: ltr;
    white-space: nowrap;
}

.internal-mail-table .badge {
    white-space: nowrap;
}

.internal-mail-table .badge[data-status="new"] {
    background: #eaf2ff;
    color: #245d9e;
}

.internal-mail-table .badge[data-status="in_progress"] {
    background: #fff3dc;
    color: #946711;
}

.internal-mail-table .badge[data-status="completed"] {
    background: #e7f4ec;
    color: #14673c;
}

.internal-mail-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    color: #12805b;
    text-decoration: none;
}

.internal-mail-view-button:hover {
    border-color: #b7dfca;
    background: #eaf6ef;
}

.internal-mail-tab:focus-visible,
.internal-mail-view-button:focus-visible {
    outline: 3px solid #b58a2b;
    outline-offset: 3px;
}

.data-table.internal-mail-table tbody tr:last-child > th,
.data-table.internal-mail-table tbody tr:last-child > td {
    border-bottom: 0;
}

.internal-mail-table .empty-state {
    padding: 36px 20px;
    color: var(--muted);
    text-align: center;
}

.internal-mail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: #fbfdfb;
    color: var(--muted);
    font-size: 12px;
}

.internal-mail-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .internal-mail-tab {
        flex: 1;
        padding-inline: 12px;
    }

    .data-table.internal-mail-table th,
    .data-table.internal-mail-table td {
        padding: 14px 12px;
    }

    .internal-mail-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }
}

.correspondence-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .correspondence-toolbar-actions {
        width: 100%;
    }

    .correspondence-toolbar-actions .btn {
        width: 100%;
    }
}

/* نموذج المراسلات الداخلية */

.internal-mail-form-card {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

.internal-mail-form-card .card-header h2 {
    margin: 0;
}

.internal-mail-form-card textarea {
    resize: vertical;
    line-height: 1.8;
}

.internal-mail-upload-box {
    min-width: 0;
    padding: 20px;
    border: 1px dashed #9cbdaf;
    border-radius: 12px;
    background: #f4f9f6;
}

.internal-mail-upload-box input[type="file"] {
    max-width: 100%;
    padding: 10px;
    background: #fff;
}

.internal-mail-upload-box input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: #075e50;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.internal-mail-upload-box .form-help {
    margin-bottom: 0;
    line-height: 1.9;
}

@media (max-width: 640px) {
    .internal-mail-upload-box {
        padding: 14px;
    }
}

/* تفاصيل المراسلات الداخلية */

.internal-mail-view-page {
    min-width: 0;
}

.internal-mail-view-page .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.internal-mail-view-page .card-header h2 {
    margin: 0;
}

.internal-mail-subject,
.internal-mail-text {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fbf9;
    overflow-wrap: anywhere;
}

.internal-mail-subject {
    border-inline-start: 4px solid #16805d;
    background: #f0f7f2;
}

.internal-mail-subject h3,
.internal-mail-text h3 {
    margin: 0 0 10px;
    font-size: 13px;
}

.internal-mail-subject p,
.internal-mail-text p {
    margin: 0;
    line-height: 1.9;
}

.internal-mail-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}

.internal-mail-details > div {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fbfdfb;
}

.internal-mail-details dt {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.internal-mail-details dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.internal-mail-view-actions,
.internal-mail-attachment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.internal-mail-view-actions {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.internal-mail-status,
.internal-mail-attachment-status {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.internal-mail-status[data-status="new"] {
    background: #eaf2ff;
    color: #245d9e;
}

.internal-mail-status[data-status="in_progress"] {
    background: #fff3dc;
    color: #946711;
}

.internal-mail-status[data-status="completed"],
.internal-mail-attachment-status.is-signed {
    background: #e7f4ec;
    color: #14673c;
}

.internal-mail-attachment-status.is-unsigned {
    background: #fff3dc;
    color: #946711;
}

.internal-mail-attachments-table {
    min-width: 900px;
}

.internal-mail-attachments-table th,
.internal-mail-attachments-table td,
.internal-mail-history-table th,
.internal-mail-history-table td {
    padding: 18px;
    vertical-align: middle;
    line-height: 1.8;
}

.internal-mail-file-name {
    display: block;
    max-width: 300px;
    overflow-wrap: anywhere;
}

.internal-mail-file-meta {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
}

.internal-mail-signature {
    display: grid;
    justify-items: start;
    gap: 7px;
    min-width: 170px;
    font-size: 12px;
}

.internal-mail-signature img {
    display: block;
    width: 170px;
    height: 85px;
    padding: 8px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.internal-mail-signature > span {
    color: var(--muted);
    font-size: 11px;
}

.internal-mail-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
}

.internal-mail-action.is-view {
    color: #12805b;
}

.internal-mail-action.is-edit {
    color: #2473c6;
}

.internal-mail-action.is-delete {
    color: #d94657;
}

.internal-mail-action:hover {
    background: #f0f6f2;
}

.internal-mail-action:focus-visible {
    outline: 3px solid #b58a2b;
    outline-offset: 3px;
}

.internal-mail-history-table {
    min-width: 850px;
}

.internal-mail-history-table td:nth-child(4) {
    min-width: 230px;
    max-width: 350px;
    overflow-wrap: anywhere;
}

.internal-mail-history-table td:last-child {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .internal-mail-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .internal-mail-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .internal-mail-view-actions .btn {
        width: 100%;
    }
}

/* لوحة توقيع المراسلات الداخلية */

.internal-mail-signature-container {
    overflow: hidden;
    margin-block: 14px;
    border: 2px dashed #a8c4b6;
    border-radius: 14px;
    background: #fff;
}

.internal-mail-signature-container.is-drawing {
    border-color: #14805b;
}

#internal-mail-signature-pad {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

#internal-mail-signature-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

#internal-mail-signature-form .form-actions {
    margin-top: 0;
}

#internal-mail-signature-message {
    min-height: 24px;
    line-height: 1.8;
}

.internal-mail-signature-consent {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fbf9;
}

.internal-mail-signature-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.8;
    cursor: pointer;
}

.internal-mail-signature-consent input {
    flex-shrink: 0;
    margin-top: 5px;
    accent-color: #08775b;
}

@media (max-width: 640px) {
    #internal-mail-signature-form .form-actions .btn {
        width: 100%;
    }
}

/* أزرار قائمة المراسلات الداخلية */

.internal-mail-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .internal-mail-toolbar-actions {
        width: 100%;
    }

    .internal-mail-toolbar-actions .btn {
        flex: 1 1 180px;
        justify-content: center;
    }
}

/* =========================================
   صفحة الإشعارات
========================================= */

.notifications-page {
    min-width: 0;
}

.notifications-read-all-form,
.notification-open-form {
    margin: 0;
}

.notifications-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.notifications-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.notifications-tab:hover {
    border-color: #a9cdbf;
    background: #edf6f1;
    color: #075b4c;
}

.notifications-tab.is-active {
    border-color: #075b4c;
    background: #075b4c;
    color: #ffffff;
}

.notifications-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 24px;
    padding: 2px 7px;
    border-radius: 7px;
    background: #eaf3ee;
    color: #075b4c;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.notifications-tab.is-active .notifications-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.notifications-card {
    min-width: 0;
    overflow: hidden;
}

.notifications-card > .card-header {
    flex-wrap: wrap;
    gap: 12px;
}

.notifications-card > .card-header h2 {
    margin: 0;
}

.notifications-total {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.notifications-list {
    display: grid;
    min-width: 0;
}

.notification-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.is-unread {
    border-inline-start: 4px solid #158458;
    background: #f2f9f5;
    padding-inline-start: 20px;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #edf2ef;
    color: #647c71;
}

.notification-item.is-unread .notification-icon {
    background: #dcefe4;
    color: #08734f;
}

.notification-content {
    min-width: 0;
}

.notification-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 7px;
}

.notification-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.notification-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    background: #dcefe4;
    color: #08734f;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.notification-category {
    display: block;
    color: #547568;
    font-size: 11px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.notification-message {
    margin: 12px 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.notification-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.8;
}

.notification-meta time {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.notification-open-form {
    align-self: center;
}

.notification-open-form .btn {
    white-space: nowrap;
}

.notifications-empty {
    padding: 55px 20px;
    text-align: center;
}

.notifications-empty h3 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 16px;
}

.notifications-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
}

.notifications-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.notifications-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.notifications-tab:focus-visible,
.notifications-page .btn:focus-visible {
    outline: 3px solid #c49c37;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .notification-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 14px;
    }

    .notification-icon {
        width: 42px;
        height: 42px;
    }

    .notification-open-form {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .notifications-page .departments-toolbar {
        align-items: flex-start;
    }

    .notifications-read-all-form {
        width: 100%;
    }

    .notifications-read-all-form .btn {
        width: 100%;
        justify-content: center;
    }

    .notifications-tabs {
        gap: 8px;
    }

    .notifications-tab {
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 12px;
    }

    .notification-item {
        gap: 12px;
        padding: 18px 14px;
    }

    .notification-item.is-unread {
        padding-inline-start: 10px;
    }

    .notification-heading h3 {
        font-size: 14px;
    }

    .notification-message {
        font-size: 12px;
    }

    .notification-meta {
        gap: 6px 12px;
    }

    .notifications-footer {
        justify-content: center;
        padding: 16px;
        text-align: center;
    }

    .notifications-pagination {
        width: 100%;
    }
}

/* عدّاد الإشعارات في السايدبار */

.sidebar-link-label {
    flex: 1;
    min-width: 0;
}

.sidebar .sidebar-link > svg {
    flex-shrink: 0;
}

.sidebar-notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 25px;
    min-height: 25px;
    padding: 3px 7px;
    border-radius: 8px;
    background: #f1d68a;
    color: #193e31;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.sidebar-link.is-active .sidebar-notification-count {
    background: #075b4c;
    color: #ffffff;
}

/* =========================================
   التقارير والإحصائيات
========================================= */

.reports-page {
    min-width: 0;
}

.reports-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.reports-page .card-header {
    flex-wrap: wrap;
    gap: 12px;
}

.reports-page .card-header h2 {
    margin: 0;
}

.reports-filter-card .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reports-filter-card .form-group {
    min-width: 0;
}

.reports-filter-card [hidden] {
    display: none !important;
}

.reports-filter-card .form-control[readonly] {
    background: #f2f6f3;
    color: #547568;
}

/* بطاقات الملخص */

.reports-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.reports-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-width: 0;
    min-height: 145px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.reports-stat-card::before {
    position: absolute;
    inset-block: 22px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
    background: #075b4c;
    content: "";
}

.reports-stat-card > span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.reports-stat-card > strong {
    color: #075b4c;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.reports-stat-1::before {
    background: #14825f;
}

.reports-stat-1 > strong {
    color: #14825f;
}

.reports-stat-2::before {
    background: #c28c25;
}

.reports-stat-2 > strong {
    color: #976714;
}

.reports-stat-3::before {
    background: #357ac3;
}

.reports-stat-3 > strong {
    color: #357ac3;
}

/* المخططات الدائرية */

.reports-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.reports-chart-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.reports-chart-card > .card-body {
    display: grid;
    align-content: start;
    gap: 18px;
}

.reports-chart-container {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 270px;
}

.reports-chart-container canvas {
    display: block;
    width: 100%;
    height: 270px;
}

.reports-chart-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reports-chart-legend > li {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e4ede7;
    border-radius: 10px;
    background: #f8fbf9;
    color: var(--text);
    font-size: 12px;
    line-height: 1.7;
}

.reports-legend-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.reports-chart-legend > li > span:not(.reports-legend-dot) {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.reports-chart-legend strong {
    flex-shrink: 0;
    color: #173d35;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.reports-chart-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* جدول التقرير */

.reports-table-card {
    min-width: 0;
    overflow: hidden;
}

.reports-total {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.reports-table-card .table-responsive {
    overflow-x: auto;
}

.reports-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.reports-table th,
.reports-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.8;
}

.reports-table thead th {
    background: #edf5f0;
    color: #075b4c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.reports-table tbody th[scope="row"] {
    min-width: 220px;
    max-width: 380px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

.reports-table tbody td {
    background: transparent;
    color: var(--text);
}

.reports-table tbody tr:nth-child(even) {
    background: #f8fbf9;
}

.reports-table tbody tr:hover {
    background: #f0f7f3;
}

.reports-table tbody tr:last-child > * {
    border-bottom: none;
}

.reports-table time {
    display: inline-block;
    direction: ltr;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.reports-table th:last-child,
.reports-table td:last-child {
    width: 75px;
    text-align: center;
}

.reports-table .empty-state {
    padding: 45px 20px;
    text-align: center;
    color: var(--muted);
}

/* حالات السجلات */

.reports-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 4px 11px;
    border-radius: 20px;
    background: #edf1ef;
    color: #547568;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.reports-status[data-status="new"] {
    background: #e9f2fc;
    color: #286aaf;
}

.reports-status[data-status="in_progress"] {
    background: #fcf3df;
    color: #946a18;
}

.reports-status[data-status="pending_approval"] {
    background: #f1ebf8;
    color: #7855a5;
}

.reports-status[data-status="completed"] {
    background: #e3f3ea;
    color: #127650;
}

/* ترقيم الصفحات */

.reports-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.reports-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.reports-page .btn:focus-visible,
.reports-page .table-responsive:focus-visible {
    outline: 3px solid #c49c37;
    outline-offset: 3px;
}

/* الشاشات المتوسطة */

@media (max-width: 1200px) {
    .reports-filter-card .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-chart-legend {
        grid-template-columns: 1fr;
    }
}

/* الجوال والأجهزة اللوحية */

@media (max-width: 800px) {
    .reports-charts-grid {
        grid-template-columns: 1fr;
    }

    .reports-chart-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .reports-page .departments-toolbar {
        align-items: flex-start;
    }

    .reports-toolbar-actions {
        width: 100%;
    }

    .reports-toolbar-actions .btn {
        flex: 1 1 130px;
        justify-content: center;
    }

    .reports-filter-card .form-grid {
        grid-template-columns: 1fr;
    }

    .reports-stat-grid {
        gap: 12px;
    }

    .reports-stat-card {
        min-height: 125px;
        gap: 16px;
        padding: 18px;
    }

    .reports-stat-card > span {
        font-size: 11px;
    }

    .reports-stat-card > strong {
        font-size: 26px;
    }

    .reports-charts-grid {
        gap: 16px;
    }

    .reports-chart-legend {
        grid-template-columns: 1fr;
    }

    .reports-table th,
    .reports-table td {
        padding: 14px;
    }

    .reports-table-footer {
        justify-content: center;
        padding: 16px;
        text-align: center;
    }

    .reports-pagination {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .reports-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   الإعدادات وبيانات الحساب
========================================= */

.settings-page {
    min-width: 0;
}

.settings-page .card-header {
    flex-wrap: wrap;
    gap: 14px;
}

.settings-page .card-header h2 {
    margin: 0;
}

.settings-account-card,
.settings-form-card,
.settings-option-card {
    min-width: 0;
    overflow: hidden;
}

.settings-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e3f3ea;
    color: #127650;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.settings-active-badge > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.settings-account-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.settings-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: #e7f3ed;
    color: #075b4c;
}

.settings-account-summary > div:last-child {
    min-width: 0;
}

.settings-account-summary h3 {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 19px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.settings-account-summary p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.settings-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin: 0;
}

.settings-detail {
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid #e6eee9;
}

.settings-detail dt {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.settings-detail dd {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.settings-account-note {
    margin: 22px 0 0;
    padding: 13px 16px;
    border: 1px solid #dcebe2;
    border-radius: 11px;
    background: #f2f8f4;
    color: #547568;
    font-size: 12px;
    line-height: 1.9;
}

.settings-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.settings-option-card > .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    box-sizing: border-box;
}

.settings-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #e7f3ed;
    color: #075b4c;
}

.settings-option-card h2 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.8;
}

.settings-option-card p {
    flex: 1;
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.settings-option-card .btn {
    margin-top: auto;
}

.settings-form-card .form-group {
    min-width: 0;
}

.settings-form-card .form-control[readonly] {
    background: #f2f6f3;
    color: #547568;
}

.settings-form-card input[type="email"] {
    text-align: left;
}

.settings-form-card input[type="password"] {
    direction: ltr;
    text-align: start;
}

.settings-page .btn:focus-visible {
    outline: 3px solid #c49c37;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .settings-options-grid,
    .settings-details {
        grid-template-columns: 1fr;
    }

    .settings-options-grid {
        gap: 16px;
    }

    .settings-account-summary {
        gap: 12px;
    }

    .settings-account-icon {
        width: 54px;
        height: 54px;
        border-radius: 15px;
    }

    .settings-account-summary h3 {
        font-size: 17px;
    }

    .settings-detail {
        padding: 15px 0;
    }
}

@media (max-width: 480px) {
    .settings-option-card .btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .settings-form-card .card-header > .btn {
        width: 100%;
        justify-content: center;
    }

    .settings-account-note {
        padding: 12px;
        font-size: 11px;
    }
}

/* =========================================
   النسخ الاحتياطي والصيانة والأمان
========================================= */

.settings-backup-page,
.settings-security-page {
    min-width: 0;
}

/* بطاقات الإحصائيات */

.settings-backup-stats,
.settings-security-stats {
    display: grid;
    gap: 18px;
}

.settings-backup-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-security-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-backup-stats > .card,
.settings-security-stats > .card {
    min-width: 0;
    overflow: hidden;
}

.settings-backup-stats .card-body,
.settings-security-stats .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 135px;
    box-sizing: border-box;
}

.settings-backup-stats .card-body > span,
.settings-security-stats .card-body > span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.settings-backup-stats .card-body > strong,
.settings-security-stats .card-body > strong {
    color: #075b4c;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.settings-backup-create-form {
    margin: 0;
}

/* فحص حالة النظام */

.settings-health-grid,
.settings-security-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-health-item,
.settings-security-policy {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: #f8fbf9;
}

.settings-health-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.settings-health-heading h3,
.settings-security-policy h3 {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.8;
}

.settings-health-item p,
.settings-security-policy p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.settings-health-status,
.settings-security-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.settings-health-status.is-ok,
.settings-security-result.is-success {
    background: #e3f3ea;
    color: #127650;
}

.settings-health-status.is-error,
.settings-security-result.is-failed {
    background: #fcebec;
    color: #b13d47;
}

/* بطاقات سياسة الأمان */

.settings-security-policy > strong {
    display: block;
    margin-top: 12px;
    color: #075b4c;
    font-size: 17px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* الجداول */

.settings-backup-table-card,
.settings-security-table-card {
    min-width: 0;
    overflow: hidden;
}

.settings-backup-table-card .table-responsive,
.settings-security-table-card .table-responsive {
    overflow-x: auto;
}

.settings-backup-table,
.settings-security-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

.settings-backup-table th,
.settings-backup-table td,
.settings-security-table th,
.settings-security-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: middle;
    font-size: 12px;
    line-height: 1.8;
}

.settings-backup-table thead th,
.settings-security-table thead th {
    background: #edf5f0;
    color: #075b4c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.settings-backup-table tbody td,
.settings-security-table tbody td {
    background: transparent;
    color: var(--text);
}

.settings-backup-table tbody tr:nth-child(even),
.settings-security-table tbody tr:nth-child(even) {
    background: #f8fbf9;
}

.settings-backup-table tbody tr:hover,
.settings-security-table tbody tr:hover {
    background: #f0f7f3;
}

.settings-backup-table tbody tr:last-child > *,
.settings-security-table tbody tr:last-child > * {
    border-bottom: none;
}

.settings-backup-table td:first-child {
    overflow-wrap: anywhere;
}

.settings-backup-table td:last-child,
.settings-backup-table th:last-child {
    text-align: center;
}

.settings-backup-table time,
.settings-security-table [dir="ltr"] {
    display: inline-block;
    direction: ltr;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.settings-backup-table .empty-state,
.settings-security-table .empty-state {
    padding: 40px 20px;
    color: var(--muted);
    text-align: center;
}

/* ترقيم صفحات سجل الدخول */

.settings-security-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.settings-security-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* بطاقات الإعدادات الإدارية */

.settings-option-card.is-admin .settings-option-icon {
    background: #fbf3df;
    color: #946a18;
}

.settings-admin-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background: #fbf3df;
    color: #946a18;
    font-size: 10px;
    font-weight: 700;
}

/* الشاشات المتوسطة والجوال */

@media (max-width: 1100px) {
    .settings-security-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .settings-backup-stats {
        grid-template-columns: 1fr;
    }

    .settings-health-grid,
    .settings-security-policy-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .settings-security-stats {
        grid-template-columns: 1fr;
    }

    .settings-backup-stats,
    .settings-security-stats {
        gap: 12px;
    }

    .settings-backup-stats .card-body,
    .settings-security-stats .card-body {
        min-height: 110px;
    }

    .settings-health-item,
    .settings-security-policy {
        padding: 16px;
    }

    .settings-backup-table th,
    .settings-backup-table td,
    .settings-security-table th,
    .settings-security-table td {
        padding: 14px;
    }

    .settings-security-footer {
        justify-content: center;
        padding: 16px;
        text-align: center;
    }

    .settings-security-pagination {
        width: 100%;
    }
}

/* تبويبات المستخدمين */

.users-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.users-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: #075b4c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    text-decoration: none;
}

.users-tab:hover {
    background: #edf6f1;
    border-color: #a9cdbf;
}

.users-tab.is-active {
    background: #075b4c;
    border-color: #075b4c;
    color: #ffffff;
}

.users-tab:focus-visible {
    outline: 3px solid #c49c37;
    outline-offset: 3px;
}

.users-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

.users-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 640px) {
    .users-tabs {
        gap: 8px;
    }

    .users-tab {
        flex: 1 1 160px;
        padding: 10px 12px;
        text-align: center;
    }

    .users-list-footer {
        justify-content: center;
        text-align: center;
    }

    .users-pagination {
        width: 100%;
    }
}