@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* =========================================
   1. GLOBAL VARIABLES & RESET
   ========================================= */
:root {
    --primary: #0d6efd;
    --primary-dark: #0a58ca;
    --secondary: #6c757d;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --light: #f8f9fa;
    --dark: #212529;
    --white: #ffffff;

    --sidebar-width: 280px;
    --header-height: 70px;

    --font-main: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media screen and (max-width: 768px) {
    #prof-content-attachments .att-actions-row .att-file-btn {
        flex: 0 0 auto !important;
        min-width: 116px !important;
    }
    #prof-content-attachments .att-actions-row .att-camera-btn {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

.clinic-form-toggle-icon {
    display: none !important;
}

body.is-apk-tablet.is-apk-landscape #checkup-form-header,
body.is-apk-tablet.is-apk-landscape #lab-form-header,
body.is-apk-tablet.is-apk-landscape #nursing-form-header,
body.is-apk-tablet.is-apk-landscape #booking-form-header,
body.is-apk-tablet.is-apk-landscape #employee-form-header,
body.is-apk-tablet.is-apk-landscape #records-patient-form-header,
body.is-apk-tablet.is-apk-landscape #expense-form-header,
body.is-apk-tablet.is-apk-landscape #revenue-form-header,
body.is-apk-tablet.is-apk-landscape #task-form-header {
    cursor: pointer !important;
    user-select: none !important;
}

body.is-apk-tablet.is-apk-landscape .clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-form-header {
    margin-bottom: 0 !important;
}

body.is-apk-tablet.is-apk-landscape .clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-collapsible-form-body {
    display: none !important;
}

.clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-form-header button[id^="mic-btn-"] {
    display: none !important;
}

/* ===== FINAL UI FIXES (Tablet/Mobile/Dark) ===== */

/* Offcanvas active item (light mode) */
.hc-offcanvas-nav li.active-page a {
    background: linear-gradient(90deg, #0e1d59, #051b73) !important;
}

/* Keep card spacing in landscape tablet */
body.is-apk-landscape .common-dashboard-card {
    margin-bottom: 10px !important;
}

/* Expense form card gradient in dark mode */
body.dark-mode #fin-view-expenses > .common-dashboard-card:first-child {
    background: linear-gradient(179deg, #3d251d 0%, #040303 80%) !important;
}

/* Patient records alignment centered on tablet portrait + landscape */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    #tab-records .clinic-table th,
    #tab-records .clinic-table td {
        text-align: center !important;
        vertical-align: middle !important;
    }
    #tab-records .clinic-table td[data-label="المريض"] > div {
        justify-content: center !important;
    }
}

/* Finance + Employees sequence column: plain numbers (no circles) */
@media screen and (max-width: 1400px) {
    #tab-employees .emp-table td[data-label="#"],
    #tab-finance .emp-table td[data-label="#"],
    #tab-finance #report-table-body td[data-label="#"],
    #tab-finance #expenses-table-body td[data-label="#"],
    #tab-finance #revenues-table-body td[data-label="#"] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 12px !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #tab-employees .emp-table td[data-label="#"]::before,
    #tab-finance .emp-table td[data-label="#"]::before,
    #tab-finance #report-table-body td[data-label="#"]::before,
    #tab-finance #expenses-table-body td[data-label="#"]::before,
    #tab-finance #revenues-table-body td[data-label="#"]::before {
        display: none !important;
    }
}

/* Sidebar/offcanvas lab+nursing alert badges: red filled circle with number */
.sidebar .lab-ref-badge,
.sidebar .nursing-ref-badge,
.hc-offcanvas-nav .lab-ref-badge,
.hc-offcanvas-nav .nursing-ref-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: none !important;
}

/* Profile: change-password button gray/white gradient */
#prof-content-personal #btn-change-pwd {
    background: linear-gradient(145deg, #f8fafc 0%, #e5e7eb 100%) !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
body.dark-mode #prof-content-personal #btn-change-pwd {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Move copy/eye icons to the right side inside fields */
#prof-content-personal #info-id {
    padding-right: 40px !important;
    padding-left: 12px !important;
}
#prof-content-personal .btn-copy-id {
    right: 8px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
#prof-content-personal #info-password {
    padding-right: 44px !important;
    padding-left: 12px !important;
}
#prof-content-personal #btn-toggle-pwd,
#prof-content-personal .pwd-input-wrap .btn-toggle-pwd-inline {
    right: 8px !important;
    left: auto !important;
}

/* Better "عرض" button shape in profile history tables */
#prof-content-rx .prof-mobile-view-btn,
#prof-content-reports .prof-mobile-view-btn,
#prof-content-referrals .prof-mobile-view-btn,
#prof-content-visits .prof-mobile-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 92px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: linear-gradient(145deg, #ffffff 0%, #e5e7eb 100%) !important;
    color: #0e1d59 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
body.dark-mode #prof-content-rx .prof-mobile-view-btn,
body.dark-mode #prof-content-reports .prof-mobile-view-btn,
body.dark-mode #prof-content-referrals .prof-mobile-view-btn,
body.dark-mode #prof-content-visits .prof-mobile-view-btn {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Attachments: file/camera buttons gray-white gradient + no shadow */
#prof-content-attachments .att-file-btn,
#prof-content-attachments .att-camera-btn {
    background: linear-gradient(145deg, #ffffff 0%, #e5e7eb 100%) !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: none !important;
}
#prof-content-attachments .att-file-btn i,
#prof-content-attachments .att-camera-btn i {
    color: #334155 !important;
}
body.dark-mode #prof-content-attachments .att-file-btn,
body.dark-mode #prof-content-attachments .att-camera-btn {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Tablet: make attachment add section collapsible like mobile */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    #prof-content-attachments #att-form-header {
        cursor: pointer !important;
        user-select: none !important;
    }
    #prof-content-attachments #att-form-card.att-form-collapsed #att-form-body {
        display: none !important;
    }
}

/* Tablet portrait: file/camera/add in one row within card width */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #prof-content-attachments .att-actions-row {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 240px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    #prof-content-attachments .att-save-row {
        flex: 0 0 130px !important;
        width: 130px !important;
        margin-top: 0 !important;
    }
    #prof-content-attachments .att-save-row #att-save-btn {
        width: 100% !important;
        min-height: 38px !important;
    }
}

@media screen and (max-width: 991px) {
    /* Prevent circular style on finance total labels */
    #tab-finance .finance-total-row td:first-child,
    #tab-finance .finance-total-row td[colspan] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 12px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    #tab-finance .finance-total-row td:first-child::before,
    #tab-finance .finance-total-row td[colspan]::before {
        display: none !important;
    }
}

/* Dark mode: white # in checkup/lab/nursing/bookings tables */
body.dark-mode #tab-checkup .clinic-table td:first-child,
body.dark-mode #tab-lab .clinic-table td:first-child,
body.dark-mode #tab-nursing .clinic-table td:first-child,
body.dark-mode #tab-bookings .clinic-table td:first-child,
body.dark-mode #tab-lab .clinic-table td[data-label="التسلسل"],
body.dark-mode #tab-nursing .clinic-table td[data-label="التسلسل"] {
    color: #ffffff !important;
}

/* Dark mode: bookings pending color */
body.dark-mode #tab-bookings .status-badge-booking[style*="color:#475569"] {
    color: #99a5b5 !important;
}

/* Booking type look closer to status badge size/style */
#tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select {
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    min-height: 30px !important;
}
body.dark-mode #tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Remove dark action-cell background */
body.dark-mode .nursing-table td:last-child,
body.dark-mode .emp-table td:last-child,
body.dark-mode .clinic-table td:last-child,
body.dark-mode .drug-table td:last-child {
    background: transparent !important;
}

/* Remove white backgrounds for quick report cards in dark mode */
body.dark-mode #records-quick-reports-card,
body.dark-mode #bookings-quick-reports-card,
body.dark-mode .clinic-quick-reports-card {
    background: transparent !important;
    border-color: #334155 !important;
}

/* Dark mode: expenses filter text white */
body.dark-mode #fin-view-expenses .finance-filters-panel label,
body.dark-mode #fin-view-expenses .finance-filters-panel .form-control,
body.dark-mode #fin-view-expenses .finance-filters-panel .form-control::placeholder,
body.dark-mode #fin-view-expenses .finance-filters-panel select,
body.dark-mode #fin-view-expenses .finance-filters-panel option {
    color: #ffffff !important;
}

/* Dark mode: patient modern form background */
body.dark-mode .modern-patient-form {
    background: #08111e !important;
}

/* Dark mode: remove white top bar look from action bar */
body.dark-mode .action-bar {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Mobile profile card: hide role line */
@media screen and (max-width: 768px) {
    .nav-item-profile-row .mobile-profile-card #mobile-profile-role {
        display: none !important;
    }
}

/* Attachments (Dark Mode): blue gradients + white filter arrows */
body.dark-mode #prof-content-attachments .att-camera-btn,
body.dark-mode #prof-content-attachments .att-file-btn {
    background: linear-gradient(199deg, #3b82f6 0%, #1a4095 100%) !important;
    border-color: #2759b8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode #prof-content-attachments .att-camera-btn i,
body.dark-mode #prof-content-attachments .att-file-btn i {
    color: #ffffff !important;
}

body.dark-mode #prof-content-attachments .att-filters-row select.form-control:not([multiple]),
body.dark-mode #prof-content-attachments .att-filters-row select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important;
    background-size: 12px 8px !important;
}

body.is-apk-mobile .clinic-collapsible-mobile-card,
body.is-apk-tablet .clinic-collapsible-mobile-card {
    margin-bottom: 10px !important;
}

@media screen and (max-width: 1024px) {
    .clinic-collapsible-mobile-card {
        margin-bottom: 10px !important;
    }
}

/* Tablet: keep a small visual gap between add-card and filter-card in all tabs */
body.is-apk-tablet .clinic-collapsible-mobile-card + .mobile-filter-panel,
body.is-apk-tablet .clinic-collapsible-mobile-card + .booking-filters {
    margin-top: 8px !important;
}

/* Employees tab: ensure visible gap between "Add Employee" card and employee filter card */
body.is-apk-tablet #employee-form-card + #emp-list-view .booking-filters,
body.is-apk-mobile #employee-form-card + #emp-list-view .booking-filters,
#employee-form-card + #emp-list-view .booking-filters.mobile-filter-panel {
    margin-top: 8px !important;
}

/* Mobile + Tablet (portrait/landscape): profile pills show icon line then full text line */
body.is-apk-tablet .profile-pills .p-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
}
body.is-apk-tablet .profile-pills .pill-text-full {
    display: block !important;
}
body.is-apk-tablet .profile-pills .pill-text-short {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .profile-pills .p-pill {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    .profile-pills .pill-text-full {
        display: block !important;
    }
    .profile-pills .pill-text-short {
        display: none !important;
    }
}

body.is-apk-tablet.is-apk-landscape .clinic-form-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    #checkup-form-header,
    #lab-form-header,
    #nursing-form-header,
    #booking-form-header,
    #employee-form-header,
    #records-patient-form-header,
    #expense-form-header,
    #revenue-form-header,
    #task-form-header {
        cursor: pointer !important;
        user-select: none !important;
    }
    .clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-form-header {
        margin-bottom: 0 !important;
    }
    .clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-collapsible-form-body {
        display: none !important;
    }
    .clinic-collapsible-mobile-card.clinic-form-collapsed .clinic-form-header button[id^="mic-btn-"] {
        display: none !important;
    }
    .clinic-form-toggle-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

.mobile-filter-panel .mobile-filter-panel-header {
    display: none;
}

body.is-apk-tablet.is-apk-landscape .mobile-filter-panel .mobile-filter-panel-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
}

body.is-apk-tablet.is-apk-landscape .mobile-filter-panel .mobile-filter-panel-header .mobile-filter-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.is-apk-tablet.is-apk-landscape .mobile-filter-panel.mobile-filter-collapsed .mobile-filter-panel-header {
    margin-bottom: 0 !important;
}

body.is-apk-tablet.is-apk-landscape .mobile-filter-panel.mobile-filter-collapsed .mobile-filter-panel-body {
    display: none !important;
}

body.is-apk-portrait #tab-bookings .bookings-filter-grid > div.full-width-on-mobile {
    grid-column: 1 / -1 !important;
}

body.is-apk-tablet.is-apk-landscape #tab-bookings #booking-form-card {
    margin-bottom: 8px !important;
}

body.is-apk-tablet.is-apk-landscape #tab-bookings .booking-filters {
    margin-top: 8px !important;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    .mobile-filter-panel .mobile-filter-panel-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        user-select: none;
        color: #334155;
        font-size: 14px;
        font-weight: 800;
        margin-bottom: 10px;
    }
    .mobile-filter-panel .mobile-filter-panel-header .mobile-filter-title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .mobile-filter-panel.mobile-filter-collapsed .mobile-filter-panel-header {
        margin-bottom: 0 !important;
    }
    .mobile-filter-panel.mobile-filter-collapsed .mobile-filter-panel-body {
        display: none !important;
    }
}

/* مظاهر إضافية من لوحة التحكم — خلفيات متدرجة إلى الأبيض + نص بلون واضح (لا أبيض على فاتح) */
body.theme-blue {
    --primary: #0ea5e9;
    --primary-dark: #0284c7;
    --theme-text: #0f172a;
    --theme-bg-body: linear-gradient(160deg, #eff6ff 0%, #e0f2fe 40%, #f8fcff 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
    --theme-bg-card: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    --theme-border: #bae6fd;
    --theme-thead-bg: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 60%, #ffffff 100%);
}
body.theme-green {
    --primary: #10b981;
    --primary-dark: #059669;
    --theme-text: #0f172a;
    --theme-bg-body: linear-gradient(160deg, #ecfdf5 0%, #d1fae5 40%, #f8fdfb 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    --theme-bg-card: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    --theme-border: #a7f3d0;
    --theme-thead-bg: linear-gradient(180deg, #10b981 0%, #059669 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #d1fae5 0%, #ecfdf5 60%, #ffffff 100%);
}

/* نعناع منعش (Mint) */
body.theme-mint {
    --primary: #50C878;
    --primary-dark: #0B6E4F;
    --theme-text: #0f172a;
    --theme-bg-body: linear-gradient(160deg, #e8faf4 0%, #D1F2EB 40%, #f4fcf9 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #e8faf4 100%);
    --theme-bg-card: linear-gradient(180deg, #D1F2EB 0%, #ffffff 100%);
    --theme-border: #a3e9d4;
    --theme-thead-bg: linear-gradient(180deg, #50C878 0%, #0B6E4F 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #c8f0df 0%, #e0f8ef 60%, #ffffff 100%);
}

/* ياقوت أزرق (Sapphire) */
body.theme-sapphire {
    --primary: #0F52BA;
    --primary-dark: #000926;
    --theme-text: #0f172a;
    --theme-bg-body: linear-gradient(160deg, #eef4fa 0%, #D6E6F3 40%, #f8fafd 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #eef4fa 100%);
    --theme-bg-card: linear-gradient(180deg, #D6E6F3 0%, #ffffff 100%);
    --theme-border: #A6C5D7;
    --theme-thead-bg: linear-gradient(180deg, #0F52BA 0%, #000926 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #c5dceb 0%, #e0eaf2 60%, #ffffff 100%);
}

/* بنفسج ملكي — بنفسجي فاتح جداً */
body.theme-purple {
    --primary: #7c3aed;
    --primary-dark: #5b21b6;
    --theme-text: #1e1b4b;
    --theme-bg-body: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 35%, #fdf4ff 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
    --theme-bg-card: linear-gradient(180deg, #f3e8ff 0%, #ffffff 100%);
    --theme-border: #e9d5ff;
    --theme-thead-bg: linear-gradient(180deg, #7c3aed 0%, #5b21b6 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #ede9fe 0%, #f5f3ff 60%, #ffffff 100%);
}

/* أحمر حريري — مظهر أحمر قاتم مع كتابة بيضاء */
body.theme-crimson {
    --primary: #ef4444;
    --primary-dark: #991b1b;
    --theme-text: #fef2f2;
    --theme-bg-body: linear-gradient(160deg, #450a0a 0%, #3f0d12 50%, #2c0a0a 100%);
    --theme-bg-surface: linear-gradient(180deg, #1f0a0c 0%, #3f0d12 100%);
    --theme-bg-card: linear-gradient(180deg, #3f0d12 0%, #2c0a0a 100%);
    --theme-border: #7f1d1d;
    --theme-thead-bg: linear-gradient(180deg, #D72638 0%, #3F0D12 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #3f0d12 0%, #2c0a0a 60%, #1c0507 100%);
}

/* وردي نحاسي (Rose) */
body.theme-rose {
    --primary: #B66E79;
    --primary-dark: #8C4E4F;
    --theme-text: #1c1917;
    --theme-bg-body: linear-gradient(160deg, #fdf5f6 0%, #FADADD 40%, #fffbfc 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #fdf5f6 100%);
    --theme-bg-card: linear-gradient(180deg, #FADADD 0%, #ffffff 100%);
    --theme-border: #e8b8bc;
    --theme-thead-bg: linear-gradient(180deg, #B66E79 0%, #3B1F1B 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #f5d0d4 0%, #fce7e9 60%, #ffffff 100%);
}

/* شفق كهرماني (Aurora) */
body.theme-aurora {
    --primary: #E07C24;
    --primary-dark: #B85C18;
    --theme-text: #1c1917;
    --theme-bg-body: linear-gradient(160deg, #fffbf5 0%, #fff0e0 40%, #fffdf9 100%);
    --theme-bg-surface: linear-gradient(180deg, #ffffff 0%, #fffbf5 100%);
    --theme-bg-card: linear-gradient(180deg, #fff0e0 0%, #ffffff 100%);
    --theme-border: #e8c9a8;
    --theme-thead-bg: linear-gradient(180deg, #E07C24 0%, #B85C18 100%);
    --theme-sidebar-bg: linear-gradient(180deg, #ffe4cc 0%, #fff0e0 60%, #ffffff 100%);
}

body.theme-blue,
body.theme-green,
body.theme-mint,
body.theme-sapphire,
body.theme-purple,
body.theme-crimson,
body.theme-rose,
body.theme-aurora {
    background: var(--theme-bg-body) !important;
    color: var(--theme-text);
}
body.theme-blue .app-container,
body.theme-green .app-container,
body.theme-mint .app-container,
body.theme-sapphire .app-container,
body.theme-purple .app-container,
body.theme-crimson .app-container,
body.theme-rose .app-container,
body.theme-aurora .app-container {
    background: var(--theme-bg-body) !important;
    color: var(--theme-text);
}
body.theme-blue .sidebar,
body.theme-green .sidebar,
body.theme-mint .sidebar,
body.theme-sapphire .sidebar,
body.theme-purple .sidebar,
body.theme-crimson .sidebar,
body.theme-rose .sidebar,
body.theme-aurora .sidebar {
    background: var(--theme-sidebar-bg) !important;
    border-left-color: var(--theme-border);
}
body.theme-blue .sidebar-header,
body.theme-green .sidebar-header,
body.theme-mint .sidebar-header,
body.theme-sapphire .sidebar-header,
body.theme-purple .sidebar-header,
body.theme-crimson .sidebar-header,
body.theme-rose .sidebar-header,
body.theme-aurora .sidebar-header {
    background: var(--primary) !important;
}
body.theme-blue main.main-content,
body.theme-green main.main-content,
body.theme-mint main.main-content,
body.theme-sapphire main.main-content,
body.theme-purple main.main-content,
body.theme-crimson main.main-content,
body.theme-rose main.main-content,
body.theme-aurora main.main-content {
    background: var(--theme-bg-body) !important;
    color: var(--theme-text);
}
body.theme-blue .top-toolbar,
body.theme-green .top-toolbar,
body.theme-mint .top-toolbar,
body.theme-sapphire .top-toolbar,
body.theme-purple .top-toolbar,
body.theme-crimson .top-toolbar,
body.theme-rose .top-toolbar,
body.theme-aurora .top-toolbar {
    background: var(--theme-bg-surface) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-blue .tabs-header,
body.theme-green .tabs-header,
body.theme-mint .tabs-header,
body.theme-sapphire .tabs-header,
body.theme-purple .tabs-header,
body.theme-crimson .tabs-header,
body.theme-rose .tabs-header,
body.theme-aurora .tabs-header {
    background: var(--theme-bg-surface) !important;
    border-bottom-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-blue .tab-content-area,
body.theme-green .tab-content-area,
body.theme-mint .tab-content-area,
body.theme-sapphire .tab-content-area,
body.theme-purple .tab-content-area,
body.theme-crimson .tab-content-area,
body.theme-rose .tab-content-area,
body.theme-aurora .tab-content-area {
    background: var(--theme-bg-surface) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-blue .common-dashboard-card,
body.theme-blue .stat-card,
body.theme-green .common-dashboard-card,
body.theme-green .stat-card,
body.theme-mint .common-dashboard-card,
body.theme-mint .stat-card,
body.theme-sapphire .common-dashboard-card,
body.theme-sapphire .stat-card,
body.theme-purple .common-dashboard-card,
body.theme-purple .stat-card,
body.theme-crimson .common-dashboard-card,
body.theme-crimson .stat-card,
body.theme-rose .common-dashboard-card,
body.theme-rose .stat-card,
body.theme-aurora .common-dashboard-card,
body.theme-aurora .stat-card {
    background: var(--theme-bg-card) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text);
}
body.theme-blue .cp-card,
body.theme-green .cp-card,
body.theme-mint .cp-card,
body.theme-sapphire .cp-card,
body.theme-purple .cp-card,
body.theme-crimson .cp-card,
body.theme-rose .cp-card,
body.theme-aurora .cp-card {
    background: var(--theme-bg-surface) !important;
    border-color: var(--theme-border);
    color: var(--theme-text);
}
body.theme-blue table thead tr,
body.theme-blue table thead th,
body.theme-green table thead tr,
body.theme-green table thead th,
body.theme-mint table thead tr,
body.theme-mint table thead th,
body.theme-sapphire table thead tr,
body.theme-sapphire table thead th,
body.theme-purple table thead tr,
body.theme-purple table thead th,
body.theme-crimson table thead tr,
body.theme-crimson table thead th,
body.theme-rose table thead tr,
body.theme-rose table thead th,
body.theme-aurora table thead tr,
body.theme-aurora table thead th {
    background: var(--theme-thead-bg) !important;
    color: #fff !important;
    border-color: var(--primary-dark) !important;
}
body.theme-blue .table,
body.theme-green .table,
body.theme-mint .table,
body.theme-sapphire .table,
body.theme-purple .table,
body.theme-crimson .table,
body.theme-rose .table,
body.theme-aurora .table {
    border-color: var(--theme-border);
}
body.theme-blue .table td,
body.theme-blue .table th,
body.theme-green .table td,
body.theme-green .table th,
body.theme-mint .table td,
body.theme-mint .table th,
body.theme-sapphire .table td,
body.theme-sapphire .table th,
body.theme-purple .table td,
body.theme-purple .table th,
body.theme-crimson .table td,
body.theme-crimson .table th,
body.theme-rose .table td,
body.theme-rose .table th,
body.theme-aurora .table td,
body.theme-aurora .table th {
    border-color: var(--theme-border);
}
body.theme-blue .form-control:focus,
body.theme-green .form-control:focus,
body.theme-mint .form-control:focus,
body.theme-sapphire .form-control:focus,
body.theme-purple .form-control:focus,
body.theme-crimson .form-control:focus,
body.theme-rose .form-control:focus,
body.theme-aurora .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
}
body.theme-green .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25); }
body.theme-mint .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(80, 200, 120, 0.25); }
body.theme-sapphire .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(15, 82, 186, 0.25); }
body.theme-purple .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.25); }
body.theme-crimson .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(215, 38, 56, 0.25); }
body.theme-rose .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(182, 110, 121, 0.25); }
body.theme-aurora .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(224, 124, 36, 0.25); }
body.theme-blue .header-tools,
body.theme-green .header-tools,
body.theme-mint .header-tools,
body.theme-sapphire .header-tools,
body.theme-purple .header-tools,
body.theme-crimson .header-tools,
body.theme-rose .header-tools,
body.theme-aurora .header-tools {
    background: var(--theme-bg-surface) !important;
    border-color: var(--theme-border);
}
body.theme-blue .nav-item.active,
body.theme-green .nav-item.active,
body.theme-mint .nav-item.active,
body.theme-sapphire .nav-item.active,
body.theme-purple .nav-item.active,
body.theme-crimson .nav-item.active,
body.theme-rose .nav-item.active,
body.theme-aurora .nav-item.active {
    background: var(--primary) !important;
    border-right-color: var(--primary-dark);
    color: #fff !important;
}
body.theme-blue .nav-item.active i,
body.theme-green .nav-item.active i,
body.theme-mint .nav-item.active i,
body.theme-sapphire .nav-item.active i,
body.theme-purple .nav-item.active i,
body.theme-crimson .nav-item.active i,
body.theme-rose .nav-item.active i,
body.theme-aurora .nav-item.active i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
}

/* السايدبار: أيقونات ونص بلون معاكس لخلفية السايدبار (أزرق فاتح → أزرق قاتم) */
body.theme-blue .sidebar .nav-item:not(.active),
body.theme-blue .sidebar .nav-item:not(.active) i { color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; background: none !important; }
body.theme-green .sidebar .nav-item:not(.active),
body.theme-green .sidebar .nav-item:not(.active) i { color: #059669 !important; -webkit-text-fill-color: #059669 !important; background: none !important; }
body.theme-mint .sidebar .nav-item:not(.active),
body.theme-mint .sidebar .nav-item:not(.active) i { color: #0B6E4F !important; -webkit-text-fill-color: #0B6E4F !important; background: none !important; }
body.theme-sapphire .sidebar .nav-item:not(.active),
body.theme-sapphire .sidebar .nav-item:not(.active) i { color: #0F52BA !important; -webkit-text-fill-color: #0F52BA !important; background: none !important; }
body.theme-purple .sidebar .nav-item:not(.active),
body.theme-purple .sidebar .nav-item:not(.active) i { color: #5b21b6 !important; -webkit-text-fill-color: #5b21b6 !important; background: none !important; }
body.theme-crimson .sidebar .nav-item:not(.active),
body.theme-crimson .sidebar .nav-item:not(.active) i { color: #fef2f2 !important; -webkit-text-fill-color: #fef2f2 !important; background: none !important; }
body.theme-rose .sidebar .nav-item:not(.active),
body.theme-rose .sidebar .nav-item:not(.active) i { color: #8C4E4F !important; -webkit-text-fill-color: #8C4E4F !important; background: none !important; }
body.theme-aurora .sidebar .nav-item:not(.active),
body.theme-aurora .sidebar .nav-item:not(.active) i { color: #B85C18 !important; -webkit-text-fill-color: #B85C18 !important; background: none !important; }

body.theme-crimson .sidebar-header,
body.theme-crimson .sidebar-header * { color: #fff !important; }
body.theme-crimson .sidebar .about-dev-container,
body.theme-crimson .sidebar .about-dev-container * { color: #fecaca !important; }

/* أحمر حريري: وضوح كامل — السايدبار ورأس الجدول أبيض، والمحتوى الداخلي نص داكن على خلفية فاتحة */
body.theme-crimson .sidebar,
body.theme-crimson .sidebar a,
body.theme-crimson .sidebar span,
body.theme-crimson .sidebar i,
body.theme-crimson .sidebar .nav-item,
body.theme-crimson .sidebar .nav-item i,
body.theme-crimson .sidebar .nav-badge { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }
body.theme-crimson table thead tr,
body.theme-crimson table thead th,
body.theme-crimson table thead td,
body.theme-crimson table thead * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(255,255,255,0.2) !important; }

/* أحمر حريري: منطقة المحتوى — خلفية فاتحة ونص داكن لتفادي تشابه النص مع الخلفية */
body.theme-crimson .tab-content-area { background: #ffffff !important; }
body.theme-crimson .tab-content-area .common-dashboard-card,
body.theme-crimson .tab-content-area .stat-card,
body.theme-crimson .tab-content-area .cp-card,
body.theme-crimson .tab-content-area .card { background: #ffffff !important; color: #1f2937 !important; border-color: #e5e7eb !important; }
body.theme-crimson .tab-content-area .common-dashboard-card *,
body.theme-crimson .tab-content-area .stat-card *,
body.theme-crimson .tab-content-area .cp-card *,
body.theme-crimson .tab-content-area .card *:not(button):not(.btn) { color: inherit !important; -webkit-text-fill-color: inherit !important; }
body.theme-crimson .tab-content-area .common-dashboard-card .stat-icon,
body.theme-crimson .tab-content-area .stat-card .stat-icon,
body.theme-crimson .tab-content-area .stat-card i,
body.theme-crimson .tab-content-area .common-dashboard-card i { color: #374151 !important; -webkit-text-fill-color: #374151 !important; }
body.theme-crimson .tab-content-area .table,
body.theme-crimson .tab-content-area .table tbody { background: #ffffff !important; }
body.theme-crimson .tab-content-area .table tbody td,
body.theme-crimson .tab-content-area .table tbody th { color: #1f2937 !important; border-color: #e5e7eb !important; }
body.theme-crimson .tab-content-area .form-control,
body.theme-crimson .tab-content-area label,
body.theme-crimson .tab-content-area h1,
body.theme-crimson .tab-content-area h2,
body.theme-crimson .tab-content-area h3,
body.theme-crimson .tab-content-area h4,
body.theme-crimson .tab-content-area h5,
body.theme-crimson .tab-content-area .text-muted,
body.theme-crimson .tab-content-area p { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; }
body.theme-crimson .tab-content-area .text-muted { color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; }
body.theme-crimson .tab-content-area .form-control::placeholder { color: #6b7280 !important; }
body.theme-crimson .tab-content-area .form-control { background: #fff !important; color: #1f2937 !important; border-color: #d1d5db !important; }
body.theme-crimson .tab-content-area .btn-light,
body.theme-crimson .tab-content-area .btn-secondary { color: #374151 !important; }
body.theme-crimson .tab-content-area [class*="comparison"] label,
body.theme-crimson .tab-content-area [class*="period"] label { color: #1f2937 !important; }

/* نفس وضوح النص في المحتوى إن كان داخل main فقط */
body.theme-crimson main.main-content .common-dashboard-card,
body.theme-crimson main.main-content .stat-card,
body.theme-crimson main.main-content .cp-card,
body.theme-crimson main.main-content .card { background: #ffffff !important; color: #1f2937 !important; }
body.theme-crimson main.main-content .table tbody td,
body.theme-crimson main.main-content .table tbody th { color: #1f2937 !important; }
body.theme-crimson main.main-content .form-control,
body.theme-crimson main.main-content label,
body.theme-crimson main.main-content .text-muted { color: #1f2937 !important; }
body.theme-crimson main.main-content .form-control::placeholder { color: #6b7280 !important; }
body.theme-crimson main.main-content .stat-card i,
body.theme-crimson main.main-content .common-dashboard-card i { color: #374151 !important; }
body.theme-crimson .tab-content-area .checkup-empty-state,
body.theme-crimson .tab-content-area [class*="empty-state"],
body.theme-crimson .tab-content-area .alert { color: #374151 !important; }
body.theme-crimson .tab-content-area .table .btn-link i,
body.theme-crimson .tab-content-area .table i.icofont-pencil,
body.theme-crimson .tab-content-area .table i.icofont-trash { color: #374151 !important; }
body.theme-crimson .tab-content-area .badge { color: #1f2937 !important; }

* {
    box-sizing: border-box;
}

/* Hide English badges on all mobile and tablet devices */
@media screen and (max-width: 1200px) {

    .nav-badge,
    .hc-offcanvas-nav .nav-badge,
    .sidebar-nav .nav-badge,
    .sidebar .nav-badge {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* إخفاء المصطلحات الإنجليزية في عناوين البطاقات (تحاليل، تمريض، إحالة خارجية) على الموبايل وتطبيق الموبايل فقط */
@media screen and (max-width: 768px) {
    .label-en-desktop-only { display: none !important; }
}
body.is-capacitor-app .label-en-desktop-only { display: none !important; }

/* تطبيق الموبايل: تبويب الإحالات — نوع الإحالة سطر، التشخيص+المايك سطر، الطباعات سطر، زر المايك rounded */
body.is-capacitor-app #tab-referrals .report-header-row-premium {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
}
body.is-capacitor-app #tab-referrals .report-header-row-premium > .report-field-item:first-child {
    width: 100% !important;
    max-width: none !important;
}
body.is-capacitor-app #tab-referrals .report-header-row-premium > .report-field-item:nth-child(2) {
    width: 100% !important;
    flex: none !important;
}
body.is-capacitor-app #tab-referrals .report-header-row-premium .print-toggles-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
body.is-capacitor-app #tab-referrals #mic-btn-ref-diagnosis {
    border-radius: 10px !important;
}

/* سطح المكتب فقط (ويب + تطبيق كمبيوتر): زر المايك تشخيص الإحالة rounded corner */
@media screen and (min-width: 769px) {
    #tab-referrals #mic-btn-ref-diagnosis {
        border-radius: 10px !important;
    }
}

/* سطح المكتب فقط: بطاقة التحاليل المطلوبة — نوع الفحص + الوصف + إضافة في سطر واحد */
@media screen and (min-width: 769px) {
    body:not(.is-capacitor-app) #ref-sub-lab .ref-lab-form-row {
        flex-direction: row !important;
        align-items: flex-end;
        gap: 12px;
    }
    body:not(.is-capacitor-app) #ref-sub-lab .ref-lab-form-row .ref-lab-type {
        flex: 0 0 200px;
        min-width: 160px;
    }
    body:not(.is-capacitor-app) #ref-sub-lab .ref-lab-form-row .ref-lab-desc {
        flex: 1;
        min-width: 0;
    }
    body:not(.is-capacitor-app) #ref-sub-lab .ref-lab-form-row .ref-lab-add {
        width: 120px;
        min-width: 100px;
    }
    /* محاذاة زر إضافة مع الحقول: إظهار تسمية وهمية شفافة */
    body:not(.is-capacitor-app) #ref-sub-lab .ref-lab-add-label {
        opacity: 0;
        pointer-events: none;
        user-select: none;
    }
}
/* على الموبايل إخفاء التسمية الوهمية لزر الإضافة */
@media screen and (max-width: 768px) {
    #ref-sub-lab .ref-lab-add-label {
        display: none !important;
    }
}
body.is-capacitor-app #ref-sub-lab .ref-lab-add-label {
    display: none !important;
}

/* Force freeze horizontal scrolling on mobile menu */
.hc-offcanvas-nav .nav-content,
.hc-offcanvas-nav .nav-container,
.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav .nav-wrapper-0>.nav-content {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    background-color: #f0f2f5;
    /* Light gray background for contrast with white paper */
    color: var(--dark);
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
}

button {
    font-family: var(--font-main);
    cursor: pointer;
}

/* =========================================
   2. LAYOUT STRUCTURE
   ========================================= */
.app-container {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-left: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100%;
    z-index: 100;
    top: 0;
    right: 0;
    transition: transform 0.3s ease;
    overflow-x: hidden;
}

/* الشعار في طبقة أمامية (front) فوق منطقة sidebar-header — يختفي تدريجياً عند السكرول */
.sidebar-logo-wrap {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    min-height: var(--header-height);
    z-index: 2;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: opacity 0.35s ease;
    overflow: hidden;
    box-sizing: border-box;
}
body.dark-mode .sidebar-logo-wrap {
    background: rgba(15, 23, 42, 0.95);
}
.sidebar-logo-wrap .sidebar-logo-img {
    max-height: 80% !important;
    height: auto !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    object-fit: contain !important;
    flex-shrink: 1;
    min-width: 0;
}
body.dark-mode .sidebar-logo-wrap .logo-light { display: none !important; }
body.dark-mode .sidebar-logo-wrap .logo-dark { display: block !important; }
body.sidebar-logo-scrolled .sidebar-logo-wrap {
    opacity: 0;
    pointer-events: none;
}

.sidebar-header {
    position: relative;
    z-index: 1;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
}

.sidebar-header h2 i.icofont-pulse {
    animation: sidePulse 1.2s ease-in-out infinite;
    margin-left: 10px;
    display: inline-block;
}

@keyframes sidePulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.sidebar-nav {
    flex-grow: 1;
    padding: 10px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* سكرول السايدر: رصاصي فاتح — WebKit */
.sidebar-nav::-webkit-scrollbar {
    width: 10px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(203, 213, 225, 0.5);
    border-radius: 10px;
    margin: 6px 2px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #64748b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.sidebar-nav::-webkit-scrollbar-thumb:active {
    background: #475569;
}
/* Firefox */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 rgba(203, 213, 225, 0.5);
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: #000;
    text-decoration: none;
    transition: 0.2s;
    font-weight: 600;
    cursor: pointer;
    gap: 12px;
}

.nav-item:hover {
    background: #e9ecef;
    color: var(--primary);
    border-right: 4px solid var(--primary);
}

.nav-item.active {
    background: var(--primary);
    color: #ffffff;
    border-right: 4px solid var(--primary-dark);
}

.nav-item.active i {
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: #ffffff;
}

.nav-item i {
    font-size: 1.4rem;
    width: 28px;
    text-align: center;
    background: linear-gradient(135deg, #000000 0%, #2a5697 70%, #00adff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Developer Link Hover Animation */
.about-dev-container {
    padding: 15px;
    padding-bottom: 90px;
    text-align: center;
    border-top: 1px solid #dee2e6;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.about-dev-container:active {
    background: transparent !important;
}

.about-dev-container .about-dev-text {
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #555;
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .about-dev-container:hover .about-dev-text {
        background: linear-gradient(135deg, #000000 0%, #00adff 25%, #000000 50%, #8a2be2 75%, #000000 100%, #40e0d0 125%);
        background-size: 300% 300%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: glitterGradientText 4s ease-in-out infinite;
    }
}

@keyframes glitterGradientText {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 5px rgba(0, 173, 255, 0.2);
    }

    33% {
        background-position: 50% 50%;
        text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
    }

    66% {
        background-position: 100% 50%;
        text-shadow: 0 0 5px rgba(64, 224, 208, 0.2);
    }

    100% {
        background-position: 0% 50%;
        text-shadow: 0 0 5px rgba(0, 173, 255, 0.2);
    }
}

/* Main Content - كما في V.2: align-items: center لتدفق المحتوى من أعلى الدف */
.main-content {
    flex-grow: 1;
    margin-right: var(--sidebar-width);
    padding: 20px;
    padding-top: 90px;
    transition: margin 0.3s ease, opacity 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* إخفاء المحتوى حتى يُطبَّق التاب الصحيح (منع وميض تبويب الوصفة عند الرفرش) */
body.app-loading .main-content {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   وضع التابلت الموحّد (769px–1400px فقط — لا موبايل ≤768 ولا كمبيوتر ≥1401)
   تنسيقات متشابهة عند التبديل بين كل التبويبات. قياس أجهزة التابلت من الجدول.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1400px) {
    :root {
        --sidebar-width: 220px;
    }
    .sidebar {
        width: var(--sidebar-width) !important;
    }
    .main-content {
        margin-right: var(--sidebar-width) !important;
        padding: 16px !important;
        padding-top: 58px !important;
    }
    .tab-content-area {
        padding: 14px !important;
        max-width: 100% !important;
    }
    .top-toolbar {
        width: calc(100% - var(--sidebar-width)) !important;
    }
    /* بطاقات موحّدة في كل التبويبات */
    .common-dashboard-card,
    .stat-card,
    .cp-card,
    .tab-content-area .card {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .common-dashboard-card h5,
    .stat-card .stat-info span,
    .cp-card .cp-label {
        font-size: 13px !important;
    }
    .stat-card .stat-info h3 {
        font-size: 14px !important;
    }
    /* جداول موحّدة */
    .table td,
    .table th,
    .clinic-table td,
    .clinic-table th {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    .table thead th,
    .clinic-table thead th {
        font-size: 13px !important;
    }
    /* نماذج موحّدة */
    .form-control,
    .form-control-modern {
        min-height: 40px !important;
        font-size: 14px !important;
    }
    label,
    .form-label {
        font-size: 13px !important;
    }
    /* عناوين التبويبات */
    .tab-content-area h1,
    .tab-content-area h2,
    .tab-content-area h3,
    .main-content h1,
    .main-content h2,
    .main-content h3 {
        font-size: 1.15rem !important;
    }
    .tab-content-area h4,
    .main-content h4 {
        font-size: 1.05rem !important;
    }
    /* أزرار */
    .btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    .btn-sm {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    /* الإحصائيات: صف التحكم الزمني وصف العيون — سطر واحد مع سكرول يمين/يسار (كما الموبايل، يشمل 833×1184 وجميع قياسات التابلت) */
    .analytics-period-box .analytics-controls-row,
    .analytics-toggles-box .analytics-controls-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
    }
    .analytics-period-box .analytics-controls-row::-webkit-scrollbar,
    .analytics-toggles-box .analytics-controls-row::-webkit-scrollbar {
        display: none !important;
    }
    .analytics-period-box .analytics-controls-row .btn,
    .analytics-toggles-box .analytics-controls-row .btn {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    /* تابلت: تصغير الهيدر مع الإبقاء على المواقع الأصلية (يمين) وعدم تداخل البحث مع البروفايل */
    .mobile-app-header {
        height: calc(50px + env(safe-area-inset-top)) !important;
        min-height: calc(50px + env(safe-area-inset-top)) !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .mobile-app-header .open-menu {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }
    .mobile-app-header .open-menu i.icofont-navigation-menu { font-size: 18px !important; }
    .mobile-app-header #nav-theme-toggle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }
    .mobile-app-header #nav-theme-toggle i { font-size: 16px !important; }
    .mobile-app-header .header-notif-btn-wrap .header-notif-btn,
    .mobile-app-header #header-notif-wrap .header-notif-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }
    .mobile-app-header .header-notif-btn-wrap .header-notif-btn i,
    .mobile-app-header #header-notif-wrap .header-notif-btn i { font-size: 16px !important; }
    .mobile-app-header .header-profile-card.desktop-only {
        padding: 4px 8px !important;
        min-width: 0 !important;
        max-width: 96px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }
    .mobile-app-header .header-profile-card.desktop-only #header-profile-name {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .mobile-app-header .header-profile-card.desktop-only img {
        width: 26px !important;
        height: 26px !important;
    }
    /* تابلت: Flexbox للهيدر — إلغاء المواضع المطلقة لتدفق العناصر مع gap */
    .mobile-app-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        direction: rtl !important;
    }
    .mobile-app-header .open-menu,
    .mobile-app-header #nav-theme-toggle,
    .mobile-app-header .header-profile-card.desktop-only {
        position: static !important;
        transform: none !important;
        left: auto !important;
    }
    /* التابلت: القوائم تظهر أسفل الزر — الأغلفة التي تحتوي قائمة تحتاج position: relative */
    .mobile-app-header .header-notif-btn-wrap,
    .mobile-app-header #header-notif-wrap {
        position: relative !important;
        transform: none !important;
        left: auto !important;
    }
    .mobile-app-header .header-patient-search-box {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        height: 38px !important;
        padding: 4px 8px !important;
        min-width: 44px !important;
        width: 44px !important;
        max-width: 44px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        transition: width 0.25s ease, max-width 0.25s ease !important;
        flex-shrink: 0 !important;
    }
    /* عند الضغط/التركيز يتوسّع حقل البحث للكتابة والبحث عن المرضى (تابلت فقط) */
    .mobile-app-header .header-patient-search-box:focus-within {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }
    .mobile-app-header .header-patient-search-input-wrap {
        height: 30px !important;
        position: relative !important;
    }
    /* عندما يكون الحقل مطويًا: الإدخال يغطي الصندوق بالكامل لاستقبال النقر ثم يظهر عند التوسيع */
    .mobile-app-header .header-patient-search-box .header-search-input {
        font-size: 11px !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        opacity: 0 !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }
    .mobile-app-header .header-patient-search-box:focus-within .header-search-input {
        position: relative !important;
        padding: 0 12px 0 36px !important;
        opacity: 1 !important;
        cursor: text !important;
    }
    /* أيقونة البحث تبقى ظاهرة عند الطي (تحت طبقة الإدخال الشفافة) — في RTL على اليمين */
    .mobile-app-header .header-patient-search-input-wrap .header-search-icon-left {
        pointer-events: none !important;
        right: 12px !important;
        left: auto !important;
    }
}

/* تابلت لاندسكيب (769–1400) — تنسيقات أفقية + إخفاء زر القائمة + ترتيب الهيدر كما كان (مواضع ثابتة) */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    :root {
        --sidebar-width: 210px;
    }
    /* إخفاء الشعار في وضع التابلت لاندسكيب */
    .sidebar-logo-wrap {
        display: none !important;
    }
    .main-content {
        padding: 14px !important;
    }
    .tab-content-area {
        padding: 12px !important;
    }
    .common-dashboard-card,
    .stat-card {
        padding: 12px !important;
    }
    /* شبكات البطاقات: 3–4 أعمدة في اللاندسكيب */
    .analytics-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    .mobile-app-header .open-menu {
        display: none !important;
    }
    .main-content {
        padding-top: 58px !important;
    }
    /* إرجاع ترتيب أزرار الهيدر كما كان: مواضع ثابتة من اليمين (بدون Flex الذي يخربط الترتيب) */
    .mobile-app-header .logo {
        position: absolute !important;
        right: 14px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .mobile-app-header #nav-theme-toggle {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .mobile-app-header .header-notif-btn-wrap,
    .mobile-app-header #header-notif-wrap {
        position: absolute !important;
        left: 48px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .mobile-app-header .header-profile-card.desktop-only {
        position: absolute !important;
        left: 86px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .mobile-app-header .header-patient-search-box {
        position: absolute !important;
        left: 194px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 100px !important;
        max-width: 110px !important;
    }
    /* قائمة التنبيهات (كما في الصورة): أسفل الجرس، حافتها اليمنى محاذية للزر وتمتد إلى اليسار + محتوى بمحاذاة يمين */
    .mobile-app-header .header-notif-panel {
        right: 0 !important;
        left: auto !important;
        text-align: right !important;
        direction: rtl !important;
    }
    .mobile-app-header .header-notif-panel .header-notif-panel-title,
    .mobile-app-header .header-notif-panel .header-notif-list,
    .mobile-app-header .header-notif-panel .header-notif-item {
        text-align: right !important;
    }
}

/* نفس محاذاة قائمة التنبيهات عند 1401–1440px (مثل Laptop L) لاندسكيب */
@media (min-width: 1401px) and (max-width: 1440px) {
    .mobile-app-header .header-notif-panel {
        top: calc(100% + 8px) !important;
        left: auto !important;
        right: 0 !important;
        text-align: right !important;
        direction: rtl !important;
    }
}

/* نطاق 1280×853 تابلت لاندسكيب: قائمة التنبيهات نفس السلوك (أسفل الزر، حافة يمين محاذية، تمتد لليسار) */
@media (min-width: 1275px) and (max-width: 1285px) and (min-height: 848px) and (max-height: 858px) and (orientation: landscape) {
    .mobile-app-header .header-notif-panel {
        top: calc(100% + 8px) !important;
        left: auto !important;
        right: 0 !important;
        width: 360px !important;
        max-width: min(360px, calc(100vw - 24px)) !important;
        text-align: right !important;
        direction: rtl !important;
    }
    .mobile-app-header .header-notif-panel .header-notif-panel-title,
    .mobile-app-header .header-notif-panel .header-notif-list,
    .mobile-app-header .header-notif-panel .header-notif-item {
        text-align: right !important;
    }
}

/* إخفاء بحث المريض في الناف في الديسكتوب والتابلت لاندسكيب */
.nav-item-patient-search {
    display: none !important;
}

/* الموبايل: إظهار nav-item-patient-search (بحث عن مريض) في الناف */
@media (max-width: 768px) {
    #mobile-nav .nav-item-patient-search,
    .hc-offcanvas-nav .nav-item-patient-search {
        display: list-item !important;
    }
    .nav-item-patient-search {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .nav-item-patient-search .nav-patient-search-trigger {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 15px !important;
        text-align: right;
        color: inherit;
        text-decoration: none;
        font-size: 14px;
        transition: background 0.2s;
    }
    .nav-item-patient-search .nav-patient-search-trigger:hover {
        background: rgba(0, 113, 239, 0.06);
    }
    .nav-item-patient-search .nav-patient-search-trigger i {
        margin-left: 10px;
        color: #0071ef;
    }
}

/* موبايل: بطاقات إحالات مختبرية/تمريضية واردة — عنوان في سطر، وصف في سطر، زر في سطر، وجرس دائري طبيعي */
#lab-referrals-container,
#nursing-referrals-container {
    margin-bottom: 10px !important;
}

@media (max-width: 768px) {
    #lab-referrals-container .alert.alert-warning,
    #nursing-referrals-container .alert.alert-warning {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }
    #lab-referrals-container .alert.alert-warning > div:first-child,
    #nursing-referrals-container .alert.alert-warning > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        order: 1;
    }
    /* الجرس مع الدائرة: أبعاد ثابتة دون تمطيط */
    #lab-referrals-container .ref-bell-icon,
    #nursing-referrals-container .ref-bell-icon {
        flex-shrink: 0 !important;
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #lab-referrals-container .ref-bell-icon i,
    #nursing-referrals-container .ref-bell-icon i {
        font-size: 22px !important;
        flex-shrink: 0 !important;
    }
    /* العنوان في سطر */
    #lab-referrals-container .alert.alert-warning > div:first-child > div:last-child,
    #nursing-referrals-container .alert.alert-warning > div:first-child > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 100%;
    }
    #lab-referrals-container .alert.alert-warning strong,
    #nursing-referrals-container .alert.alert-warning strong {
        display: block !important;
        white-space: normal !important;
    }
    /* الزر في سطر مستقل بعرض كامل */
    #lab-referrals-container .alert.alert-warning > button.btn,
    #nursing-referrals-container .alert.alert-warning > button.btn {
        order: 2 !important;
        align-self: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        margin-right: 0 !important;
    }
}

/* تابلت بورتريت (769–1400) — تنسيقات عمودية + ترتيب الهيدر بدون تداخل */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    :root {
        --sidebar-width: 200px;
    }
    .main-content {
        padding: 14px !important;
    }
    .tab-content-area {
        padding: 12px !important;
    }
    /* شبكات البطاقات: 4 في سطر في البورتريت (ملخص هذا الشهر — 4 في 3) */
    .analytics-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    /* ——— التابلت بورتريت: الهيدر فيه فقط زر القائمة (يسار) + زر الإشعارات (يمين) بدون تداخل ——— */
    .mobile-app-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        direction: ltr !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        min-height: 52px !important;
        height: auto !important;
    }
    .mobile-app-header .logo {
        display: none !important;
    }
    /* إخفاء البروفايل وزر المظهر من الهيدر (موجودان في الناف) */
    .mobile-app-header .header-profile-card.desktop-only,
    .mobile-app-header #nav-theme-toggle,
    .mobile-app-header .nav-header-btn.desktop-only {
        display: none !important;
    }
    /* إخفاء بحث المريض من الهيدر (منقول إلى الناف) */
    .mobile-app-header .header-patient-search-box {
        display: none !important;
    }
    /* 1 يسار — open-menu (زر القائمة) مع مسافة عن زر التنبيهات */
    .mobile-app-header .open-menu {
        order: 1 !important;
        flex-shrink: 0 !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: rgba(0, 113, 239, 0.05) !important;
        border: 1px solid rgba(30, 58, 138, 0.5) !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .mobile-app-header .open-menu i.icofont-navigation-menu {
        font-size: 20px !important;
    }
    /* 2 يمين — زر الإشعارات بعيدًا عن زر القائمة */
    .mobile-app-header .header-notif-btn-wrap,
    .mobile-app-header #header-notif-wrap {
        order: 2 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    .mobile-app-header .header-notif-btn-wrap .header-notif-btn,
    .mobile-app-header #header-notif-wrap .header-notif-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
    }
    /* إلغاء المواضع المطلقة — مع إبقاء position: relative لأغلفة القوائم لظهورها أسفل الزر */
    .mobile-app-header .logo,
    .mobile-app-header .open-menu,
    .mobile-app-header #nav-theme-toggle,
    .mobile-app-header .header-profile-card.desktop-only {
        position: static !important;
        transform: none !important;
        left: auto !important;
    }
    .mobile-app-header .header-notif-btn-wrap,
    .mobile-app-header #header-notif-wrap {
        position: relative !important;
        transform: none !important;
        left: auto !important;
    }
    .mobile-app-header .header-patient-search-box {
        position: relative !important;
        transform: none !important;
        left: auto !important;
    }
    /* مسافة بين زر القائمة وزر التنبيهات */
    .mobile-app-header .open-menu {
        margin-right: 24px !important;
    }
    .mobile-app-header .header-notif-btn-wrap,
    .mobile-app-header #header-notif-wrap {
        margin-left: auto !important;
    }
    /* ——— بحث عن مريض في الناف: كأقرانه (عنوان مثل الإحصائيات) — يظهر في التابلت بورتريت فقط ——— */
    #mobile-nav .nav-item-patient-search,
    .hc-offcanvas-nav .nav-item-patient-search {
        display: list-item !important;
    }
    .nav-item-patient-search {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .nav-item-patient-search .nav-patient-search-trigger {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 15px !important;
        text-align: right;
        color: inherit;
        text-decoration: none;
        font-size: 14px;
        border-radius: 0;
        transition: background 0.2s;
    }
    .nav-item-patient-search .nav-patient-search-trigger:hover {
        background: rgba(0, 113, 239, 0.06);
    }
    .nav-item-patient-search .nav-patient-search-trigger i {
        margin-left: 10px;
        color: #0071ef;
    }
    .hc-offcanvas-nav .nav-item-patient-search .nav-patient-search-trigger {
        min-height: 42px !important;
        padding: 0 15px !important;
    }
    /* سجل ملفات المرضى — أزرار الإجراءات رموز فقط (بدون كتابة) */
    #tab-records td[data-label="إجراءات"] .btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
    }
    #tab-records td[data-label="إجراءات"] .btn i {
        font-size: 13px !important;
    }
    /* عمود المريض: الاسم الكامل أولاً ثم الصورة (وليس العكس)، وتصغير الصورة */
    #tab-records td[data-label="المريض"] > div {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    #tab-records td[data-label="المريض"] img {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        margin-left: 0 !important;
    }
    /* top-toolbar يبدأ من جهة اليمين */
    .top-toolbar {
        direction: rtl !important;
        justify-content: flex-start !important;
    }
}

/* Top Toolbar */
.top-toolbar {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

/* =========================================
   HEADER TOOLBAR ICONS (Custom)
   ========================================= */
.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.date-badge {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Tahoma', sans-serif;
}

.v-sep {
    width: 1px;
    height: 18px;
    background: #e0e0e0;
    margin: 0 5px;
}

.tool-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.tool-btn:hover {
    background: #f0f2f5;
    color: #0d6efd;
    transform: translateY(-2px);
}

.tool-btn:active {
    transform: translateY(0);
}

/* =========================================
   DARK MODE THEME
   ========================================= */
body.dark-mode {
    --primary: #38bdf8;
    --primary-dark: #0ea5e9;
    --secondary: #94a3b8;
    --bg-body: #0b1120;
    --bg-surface: #1e293b;
    --bg-surface-hover: #334155;
    --border-color: #334155;
    --text-main: #ffffff;
    --text-muted: #e2e8f0;
    background-color: var(--bg-body);
    color: var(--text-main);
    color-scheme: dark;
    font-size: 15px;
}
/* انتقال سلس عند تبديل الوضع (دارك/لايت) — تقليل اللاك */
body,
body.dark-mode {
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* تطبيق انتقال سلس على العناصر الشائعة عند تبديل الثيم */
body.dark-mode .tab-content-area,
body.dark-mode main.main-content,
body.dark-mode .common-dashboard-card,
body.dark-mode .stat-card,
body.dark-mode .analytics-period-box,
body.dark-mode .analytics-toggles-box {
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* طبقة انتقال الثيم — اتجاهان: إلى الدارك وإلى اللايت */
.theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: none;
}
/* الانتقال إلى الدارك: غسالة داكنة تظهر ثم تختفي مع تطبيق الثيم */
.theme-transition-overlay.to-dark {
    background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(15, 15, 37, 0.85) 0%, rgba(10, 10, 25, 0.92) 50%, rgba(5, 5, 15, 0.97) 100%);
}
.theme-transition-overlay.active.to-dark {
    animation: theme-to-dark 0.7s cubic-bezier(0.32, 0.72, 0.22, 1) forwards;
}
@keyframes theme-to-dark {
    0%   { opacity: 0; }
    40%  { opacity: 0.6; }
    100% { opacity: 0; }
}
/* الانتقال إلى اللايت: غسالة فاتحة تظهر ثم تختفي مع تطبيق الثيم */
.theme-transition-overlay.to-light {
    background: radial-gradient(ellipse 120% 80% at 50% 50%, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.98) 50%, rgba(241, 245, 249, 0.99) 100%);
}
.theme-transition-overlay.active.to-light {
    animation: theme-to-light 0.7s cubic-bezier(0.32, 0.72, 0.22, 1) forwards;
}
@keyframes theme-to-light {
    0%   { opacity: 0; }
    40%  { opacity: 0.5; }
    100% { opacity: 0; }
}
body.dark-mode .tab-content-area,
body.dark-mode main.main-content {
    font-size: 15px;
}
/* دارك مود على الكل: نصوص بيضاء للعناوين والتسميات */
body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .setting-title span,
body.dark-mode .card-label,
body.dark-mode #tab-report .report-field-item .setting-title span,
body.dark-mode #lbl-rep-to-ui,
body.dark-mode #lbl-rep-price-ui,
body.dark-mode #lbl-rep-print-price-ui,
body.dark-mode #tab-referrals .report-field-item .setting-title span,
body.dark-mode #tab-referrals .print-toggles-wrapper .setting-title span,
body.dark-mode #tab-prescription .report-header-row-premium .setting-title span,
body.dark-mode #fin-view-report .summary-stat-card .card-label,
body.dark-mode #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label {
    color: #fff !important;
}
body.dark-mode .summary-stat-card .card-value,
body.dark-mode #fin-view-report .summary-stat-card .card-value,
body.dark-mode #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
    color: #e2e8f0 !important;
}

body.dark-mode .app-container {
    background-color: var(--bg-body);
}

body.dark-mode .sidebar {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .sidebar-header {
    background: #1e293b;
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .nav-item {
    color: var(--text-muted);
}

body.dark-mode .nav-item:hover {
    background: var(--bg-surface-hover);
    color: var(--primary);
}

body.dark-mode .nav-item.active {
    background: rgba(56, 189, 248, 0.1);
    color: var(--primary);
    border-right-color: var(--primary);
}

body.dark-mode .nav-item.active i {
    color: var(--primary);
}

body.dark-mode small a {
    color: var(--text-muted) !important;
}

body.dark-mode .top-toolbar h3 {
    color: var(--text-main);
}

body.dark-mode .top-toolbar span {
    color: var(--text-muted) !important;
}

body.dark-mode .tabs-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .tab-btn {
    background: var(--bg-surface);
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
}

body.dark-mode .tab-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

body.dark-mode .tab-btn.active {
    background: var(--bg-surface);
    color: var(--primary);
    border-bottom-color: var(--primary);
}

body.dark-mode .tab-content-area {
    background: var(--bg-surface);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

body.dark-mode .form-label {
    color: var(--text-main);
}

body.dark-mode .form-control {
    background: #edf3ff;
    border-color: var(--border-color);
    color: #0f172a;
}
body.dark-mode .form-control::placeholder {
    color: #64748b;
}

body.dark-mode .form-control:focus {
    border-color: var(--primary);
}

body.dark-mode .patient-grid {
    background: #0f172a;
    border-color: var(--border-color);
}

body.dark-mode .p-label {
    background: #334155;
    color: #fff;
    border-color: #475569;
}

body.dark-mode .p-input {
    background: #edf3ff;
    border-color: #475569;
    color: #0f172a;
}

body.dark-mode .p-input::placeholder {
    color: #64748b;
}

/* Fix Date inputs and specific icons */
body.dark-mode input[type="date"] {
    color: #0f172a;
    background-color: #edf3ff;
    color-scheme: light;
}

body.dark-mode .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}

/* Patient Records specific fixes */
body.dark-mode #tab-records label {
    color: #fff !important;
}

body.dark-mode .records-filter-grid input,
body.dark-mode .records-filter-grid select {
    background-color: #edf3ff;
    border-color: #475569;
    color: #0f172a;
}

body.dark-mode table th {
    background: #334155;
    color: var(--text-main);
    border-color: var(--border-color);
}

/* الفوتر (صف المجموع) بنفس لون وسياق الهيدر - جداول clinic (كشف) */
.clinic-table tr.checkup-total-row {
    background: rgb(237, 243, 249) !important;
    border-bottom: 2px solid #cbd5e1;
}
.clinic-table tr.checkup-total-row td {
    border-left: 1px solid #e2e8f0;
    font-weight: 800;
    color: #0f172a;
}
.clinic-table tr.checkup-total-row td:last-child {
    border-left: none;
    min-width: 1px; /* امتداد الفوتر حتى نهاية الجدول (الحالة + تأكيد مراجعة + إجراءات) */
}
/* دارك: الفوتر نفس ستايل الهيدر بالضبط (لون، حدود، خط) */
body.dark-mode .clinic-table tr.checkup-total-row {
    background: linear-gradient(180deg, rgb(22 36 59) 0%, rgb(0 0 0) 100%) !important;
    border: none !important;
}
body.dark-mode .clinic-table tr.checkup-total-row td {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark-mode .clinic-table tr.checkup-total-row td:first-child {
    border-left: none !important;
}

/* الفوتر في باقي الجداول (مالية وغيرها) */
table tr.finance-total-row {
    background: #f8f9fa !important;
}
body.dark-mode table tr.finance-total-row,
body.dark-mode table tr.finance-total-row td {
    background: #1e293b !important;
}

body.dark-mode table td {
    border-color: var(--border-color);
    color: #e2e8f0;
    /* Brighter text in tables */
}

/* Update Action Icons in Table */
.btn-primary,
body.dark-mode .btn-primary {
    background: #336376;
    /* Update: User Requested Color - Removed !important to allow inline styles */
    border-color: #336376;
    color: #ffffff;
}

.btn-primary:hover,
body.dark-mode .btn-primary:hover {
    background: #2a5161 !important;
}

.btn-primary i,
body.dark-mode .btn-primary i {
    color: #ffffff !important;
}

/* Save & Print Button Specific Class (will add class in HTML next or target by attribute if needed, but easier to use a new class or style override) */
/* We will handle Save & Print color via inline style update in HTML tool */

/* --- UNIFIED GRADIENT BUTTONS (User Request) --- */
.btn-success,
.btn-add {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-success:hover,
.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
}

.btn-warning,
.btn-edit {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: white !important;
    /* Ensure text is white */
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-warning:hover,
.btn-edit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
}

.btn-danger,
.btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-danger:hover,
.btn-delete:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.4);
}

.btn-primary {
    background: linear-gradient(199deg, #3b82f6 0%, #1a4095 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

/* Ensure Icons inside buttons are white */
.btn-success i,
.btn-warning i,
.btn-danger i,
.btn-primary i {
    color: white !important;
}

body.dark-mode .btn-danger {
    /* Override dark mode specific flat colors with gradients */
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: transparent;
}

/* Sidebar Icons */
body.dark-mode .nav-item i {
    background: linear-gradient(135deg, #ffffff 0%, #a1c8ff 70%, #00adff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dark-mode .nav-item.active i {
    background: linear-gradient(135deg, #ffffff 0%, #a1c8ff 70%, #00adff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Header Icons in Toolbar */
body.dark-mode .header-tools i {
    color: #e2e8f0;
}

body.dark-mode .tool-btn:hover i {
    color: #38bdf8;
}

body.dark-mode .modal-box {
    background: var(--bg-surface);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

body.dark-mode .close-modal {
    color: var(--text-muted);
}

body.dark-mode h3,
body.dark-mode h5 {
    color: var(--text-main);
}

body.dark-mode .action-bar {
    background: var(--bg-surface);
    border-top-color: var(--border-color);
}

body.dark-mode .header-tools {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .date-badge {
    background: #0f172a;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Force Date Label White */
body.dark-mode .top-toolbar div[style*="color: #666"] {
    color: #ffffff !important;
}

body.dark-mode #current-date-display {
    color: #38bdf8 !important;
    /* Keep date itself blue or white? User just said "Date word" white. Let's make label white. */
}

/* Header Icons in Toolbar */
body.dark-mode .header-tools i {
    color: #e2e8f0;
}

body.dark-mode .tool-btn:hover i {
    color: #38bdf8;
}

body.dark-mode .modal-box {
    background: var(--bg-surface);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

body.dark-mode .close-modal {
    color: var(--text-muted);
}

body.dark-mode h3,
body.dark-mode h5 {
    color: var(--text-main);
}

body.dark-mode .action-bar {
    background: var(--bg-surface);
    border-top-color: var(--border-color);
}

body.dark-mode .header-tools {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

body.dark-mode .date-badge {
    background: #0f172a;
    color: #94a3b8;
}

body.dark-mode .v-sep {
    background: #334155;
}

body.dark-mode .tool-btn {
    color: #cbd5e1;
}

body.dark-mode .tool-btn:hover {
    background: #334155;
    color: #38bdf8;
}

/* ---- CRITICAL DARK MODE FIXES ---- */

/* 1. Patient Records Filter Area */
body.dark-mode #tab-records>div[style*="background: #f8f9fa"] {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* 2. Drug Input Area (The grey box with inputs) */
body.dark-mode .drug-input-grid,
body.dark-mode div[style*="background: #f1f3f5"] {
    background-color: var(--bg-surface) !important;
    color: #fff;
}

/* تبويب الوصفة: حقول الدواء (اسم، جرعة، تكرار، مدة) — النص أبيض في الدارك مود فقط */
/* حقول الدواء (أي تاب): لا نغيّر المظهر عند التعبئة، الخلفية والنص يبقى كما هو — الأسهم من القاعدة العامة في كل النظام */
body.dark-mode .drug-input-grid #d-name,
body.dark-mode .drug-input-grid #d-dose,
body.dark-mode .drug-input-grid #d-freq,
body.dark-mode .drug-input-grid #d-duration,
body.dark-mode .drug-input-grid #d-note {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color-scheme: light;
}
body.dark-mode .drug-input-grid #d-name::placeholder,
body.dark-mode .drug-input-grid #d-dose::placeholder,
body.dark-mode .drug-input-grid #d-freq::placeholder,
body.dark-mode .drug-input-grid #d-duration::placeholder,
body.dark-mode .drug-input-grid #d-note::placeholder {
    color: #64748b !important;
}

/* 3. Reports Editor */
/* Toolbar */
body.dark-mode #toolbar-container {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .ql-stroke {
    stroke: #e2e8f0;
}

body.dark-mode .ql-fill {
    fill: #e2e8f0;
}

body.dark-mode .ql-picker {
    color: #ffffff !important;
}

body.dark-mode .ql-picker-label {
    color: #ffffff !important;
}

body.dark-mode .ql-picker-options {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Editor Content (Paper) */
body.dark-mode #rep-editor {
    /* Keep paper white per user request, but ensure text is black */
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #334155 !important;
}

/* Ensure editor text inside is black */
body.dark-mode #rep-editor .ql-editor {
    color: #000000 !important;
}

/* Fix: Resize Quill Icons for Mobile */
@media screen and (max-width: 768px) {
    .ql-toolbar button svg {
        width: 16px !important;
        height: 16px !important;
    }

    .ql-toolbar button {
        padding: 2px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .ql-toolbar.ql-snow .ql-picker-label {
        padding-left: 4px;
    }
}

/* 4. Table Header Fixes */
body.dark-mode .drug-table thead tr {
    background-color: #1e293b !important;
    color: #fff !important;
}

body.dark-mode .drug-table {
    border-color: #334155 !important;
    background-color: transparent !important;
}

/* 5. General Inputs in Dark Mode */
body.dark-mode label,
body.dark-mode .form-label {
    color: #e2e8f0 !important;
}

/* Fix record table header specific inline style override */
body.dark-mode #tab-records table thead tr[style*="background:#f8f9fa"] {
    background-color: #1e293b !important;
}

body.dark-mode #tab-records table[style*="background:#fff"] {
    background-color: transparent !important;
    border-color: #334155 !important;
}



/* =========================================
   3. WORKSPACE & TABS
   ========================================= */
.tabs-header {
    width: 100%;
    max-width: 100%;
    background: #fff;
    border-radius: 12px 12px 0 0;
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: #fff;
    border-bottom: 3px solid transparent;
    font-weight: 700;
    font-size: 16px;
    color: #777;
    transition: 0.3s;
}

.tab-btn:hover {
    background: #f8f9fa;
}

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

.tab-btn.active i {
    color: #ffffff;
}

/* كما في V.2: height: auto — حدود الملف الطبي ضمن الدف (ضمن الشاشة) مع إمكانية السكرول الأفقي للمحتوى العريض */
.tab-content-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    min-height: 600px;
    height: auto !important;
    padding: 20px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 80px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
/* الدف الداخلي: بدون min-height كبير حتى لا يظهر فراغ فوق المحتوى — ضمن حدود الشاشة */
#tab-content-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
}

/* التابات غير النشطة: لا تحجز أي مساحة (إزالة الفراغ الكبير قبل محتوى التاب) */
.tab-section:not(.active) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* عند إخفاء نموذج المريض أو كتلة الإحصائيات لا يحجزان مساحة (يمنع الفراغ الكبير) */
#patient-info-form.collapsed-by-tab,
#analytics-top-card.collapsed-by-tab {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* Sections */
.tab-section {
    display: none;
    /* Hidden by default */
}

.tab-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
    visibility: visible !important;
}

/* إخفاء أزرار ملف المريض خارج صفحة الملف الطبي (جميع الشاشات) */
.action-bar button.btn-profile-action.action-bar-profile-hidden {
    display: none !important;
}

/* AI Agent tab needs flex layout when active */
#tab-ai-agent.active {
    display: flex !important;
}

/* موبايل: تبويب الذكاء الاصطناعي بعرض أكبر لعرض المزيد من المحتوى */
@media (max-width: 768px) {
    #tab-ai-agent {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
    }
    #tab-ai-agent > div:first-of-type {
        width: 100% !important;
        max-width: 100% !important;
    }
    #tab-ai-agent .ai-chat-main-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    #tab-ai-agent #ai-body-system,
    #tab-ai-agent #ai-body-inquiry {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 200px !important;
    }
    #tab-ai-agent #ai-chat-input-area {
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    #tab-ai-agent #ai-main-input {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 15px !important;
    }
}

/* AI Agent Tab Specific Styles */
.btn-ai-tab {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: #475569;
    font-weight: bold;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-ai-tab:hover {
    background: #e2e8f0;
}

.btn-ai-tab.active-system,
.btn-ai-tab.active-inquiry {
    background: white;
    color: #1e293b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.gradient-blue {
    background: linear-gradient(135deg, #0e1d59, #3c7a97);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-green {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* AI Agent Tab Dark Mode Overrides */
body.dark-mode #tab-ai-agent {
    --text-color: var(--text-main);
    --card-bg: var(--bg-surface);
    --border-color: #334155;
    --bg-color: var(--bg-body);
    --input-bg: var(--bg-body);
}

body.dark-mode #ai-sub-tabs-container {
    background: var(--bg-surface-hover) !important;
}

body.dark-mode .voice-mic-btn,
body.dark-mode #ai-attach-btn {
    background: var(--bg-surface-hover) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* دارك مود: زر المايك في الإحالات — اللون الأصلي (تدرج أزرق) */
body.dark-mode #mic-btn-ref-diagnosis {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode #ai-image-preview-area {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #ai-loading-overlay {
    background: rgba(11, 17, 32, 0.8) !important;
}

body.dark-mode .ai-message-agent p {
    color: var(--text-muted);
}

body.dark-mode .gradient-blue {
    background: linear-gradient(135deg, #c7cde3, #82d3f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.dark-mode .btn-ai-tab.active-system,
body.dark-mode .btn-ai-tab.active-inquiry,
body.dark-mode .ai-send-btn {
    background: linear-gradient(135deg, #c7cde3, #82d3f9) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-ai-tab {
    color: var(--text-muted);
}

body.dark-mode .btn-ai-tab:hover {
    background: var(--bg-surface);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   4. FORMS & INPUTS (DESIGN SYSTEM)
   ========================================= */
.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}

.form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-family: var(--font-main);
    font-size: 14px;
    transition: 0.2s;
}

.form-control:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Custom Patient Grid (Blue Labels Style) */
.patient-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 25px;
}

.p-row {
    display: flex;
    align-items: center;
    width: 100%;
    /* Spans full grid width */
}

.p-input-group {
    display: flex;
    flex: 1;
    align-items: stretch;
    height: 42px;
    min-width: 0;
    width: 100%;
}

/* Fix for Autocomplete Wrapper stretching */
.autocomplete-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Stretch to fill row */
}

.patient-grid .p-label {
    background: linear-gradient(135deg, #3c5285 0%, #2a3d66 100%) !important;
    color: #fff;
    padding: 0 15px;
    min-width: 120px;
    text-align: center;
    border-radius: 0 8px 8px 0 !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: none !important;
    box-shadow: 0 2px 5px rgba(42, 61, 102, 0.2);
}

.patient-grid .p-input {
    flex-grow: 1;
    width: 100%;
    /* Ensure input fills available group space */
    border: 2px solid #2a3d66;
    border-radius: 8px 0 0 8px !important;
    padding: 0 12px;
    font-family: inherit;
    font-weight: 600;
    outline: none;
    height: 100%;
}

/* LTR Override for Patient Grid Inputs */
.patient-grid.is-ltr .p-label {
    border-radius: 8px 0 0 8px !important;
    border-left: 2px solid #2a3d66;
    border-right: none;
}

.patient-grid.is-ltr .p-input {
    border-radius: 0 8px 8px 0 !important;
}

/* Specific Fix: Center Date Input in Arabic */
.patient-grid:not(.is-ltr) #p-date {
    text-align: center;
}

/* =========================================
   5. UNIVERSAL CLINIC TABLE SYSTEM
   ========================================= */

/* Use .clinic-table for any table you create */
.clinic-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 5px;
    background-color: transparent;
    border: 1px solid #cbd5e1;
    /* Gray 1px outdoor border */
    border-radius: 12px;
    overflow: hidden;
}

.clinic-table thead {
    background: #f1f5f9;
    background: rgb(237, 243, 249);
}

.clinic-table th {
    background: transparent;
    padding: 16px 15px;
    border-bottom: 2px solid #cbd5e1;
    border-left: 1px solid #e2e8f0;
    text-align: center;
    font-size: 14.5px;
    color: #0f172a;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clinic-table th:last-child {
    border-left: none;
}

.clinic-table td {
    padding: 12px 15px;
    background: transparent;
    color: #475569;
    vertical-align: middle;
    text-align: center;
    /* Center content under header */
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    /* Subtle column lines */
}

/* Specific alignment for Name column to keep it readable */
.clinic-table td:nth-child(2) {
    text-align: right;
}

.clinic-table td:last-child,
.clinic-table th:last-child {
    border-left: none;
}

.clinic-table tfoot td {
    border-top: 2px solid #cbd5e1;
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
}

.clinic-table tfoot td:last-child {
    border-left: none;
}

.lab-date-column {
    width: 110px;
    white-space: nowrap;
}

/* Rounded corners handled by table container overflow:hidden */
.clinic-table tr:hover td {
    background-color: rgba(0, 0, 0, 0.02);
}

/* The Container Card for Tables */
.clinic-table-card {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 20px;
    width: 100% !important;
}

.drug-table {
    width: 100% !important;
    border-collapse: separate !important;
}

/* Border logic for clinic-table-card */
.clinic-table-card .clinic-table {
    margin-top: 0 !important;
}

/* رسالة عدم وجود بيانات — تظهر على الموبايل بدل الجدول الفارغ */
.checkup-empty-state {
    display: none;
    margin: 0;
    padding: 0;
}

.rich-editor {
    width: 100%;
    min-height: 400px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 20px;
    direction: rtl;
    text-align: right;
    white-space: pre-wrap;
    background: #fff;
}

.rich-editor:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* =========================================
   6. FLOATING ACTION BAR
   ========================================= */
.action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    /* Full width for bar, content inside constrained */
    width: 100%;
    background: #fff;
    border-top: 1px solid #dee2e6;
    padding: 15px 30px;
    display: flex;
    justify-content: center;
    /* Center buttons */
    gap: 15px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    z-index: 900;
}

@media screen and (max-width: 768px) {
    .action-bar {
        flex-wrap: nowrap !important;
        padding: 10px;
        gap: 5px !important;
    }

    .action-bar .btn,
    .action-bar .btn-modern {
        flex: 1 1 auto !important;
        padding: 0 5px !important;
        font-size: 11px !important;
    }

    /* على الموبايل: إخفاء جدول الفحوصات عند الفراغ وإظهار رسالة فقط */
    #tab-checkup #checkup-table-card.empty {
        display: none !important;
    }
    #tab-checkup #checkup-empty-state.show {
        display: block !important;
        text-align: center;
        padding: 28px 20px;
        margin: 12px 0;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        color: #64748b;
        font-size: 15px;
        line-height: 1.6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* CRITICAL: Push content up so it's not hidden behind the tall footer */
    .tab-content-area {
        margin-bottom: 200px !important;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.2s;
    font-size: 15px;
}

.btn-primary {
    background: linear-gradient(199deg, #3b82f6 0%, #1a4095 100%) !important;
    color: #fff;
}

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

.btn-secondary {
    background: var(--secondary);
    color: #fff;
}

.btn-secondary:hover {
    background: #5c636a;
}

.btn-success {
    background: var(--success);
    color: #fff;
}

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

.btn-warning {
    background: var(--warning);
    color: #000;
}

.btn-outline {
    background: transparent;
    border: 2px solid #ddd;
    color: #555;
}

.btn-outline:hover {
    background: #f8f9fa;
    border-color: #333;
    color: #333;
}

.btn-success {
    background: var(--success);
    /* Green */
    color: #fff;
}

.btn-info {
    background: var(--info);
    /* Cyan */
    color: #fff;
}

/* =========================================
   7. PRINT SHEET STYLES (HIDDEN ON SCREEN)
   ========================================= */
.print-container {
    display: none;
    /* Hidden by default */
}

@media print {

    /* Hide everything except print container to remove layout space */
    body>*:not(.print-container) {
        display: none !important;
    }

    /* Reset HTML/Body for single page */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white;
    }

    /* Configure Print Container */
    .print-container {
        display: block !important;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        background: white;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }



    /* Make sure children are visible */
    .print-container * {
        visibility: visible;
    }

    /* RESET PAGE MARGINS */
    @page {
        margin: 0;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- The Sheet Layout --- */
    .sheet {
        width: 100%;
        max-width: 100%;
        font-family: 'Cairo', sans-serif;
        background-color: white !important;
        /* Force white bg */
        color: black !important;
        /* Force black text */
        /* Fallback */
        background-image: url('../images/print_pattern_optimized.jpg');
        background-repeat: repeat;
        background-size: auto;
        height: 296mm;
        overflow: hidden;
        position: relative;
    }

    .sheet.analytics-mode {
        height: auto;
        min-height: 296mm;
        overflow: visible;
        padding-bottom: 100px;
        /* Space for the absolute footer to not overlap */
    }

    /* FORCE LIGHT MODE COLORS IN PRINT */
    .sheet * {
        color: black !important;
        background-color: transparent !important;
        /* Let sheet bg show through */
        border-color: #dee2e6 !important;
        /* Light mode border color */
    }

    /* Exception for Header/Footer Images */
    .sheet-header img,
    .sheet-footer img {
        width: 100%;
        height: auto;
        display: block;
        background-color: transparent !important;
    }

    /* Exception for Table Headers (Light Gray Background) */
    .sheet table th,
    .sheet table thead tr {
        background-color: #f1f3f5 !important;
        /* Light mode gray */
        color: #333 !important;
        /* Dark text */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sheet-body {
        padding: 20px 50px;
        /* Internal Margins */
    }

    /* Absolute Footer Position (Relative to Sheet) */
    .sheet-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .sheet.analytics-mode .sheet-footer {
        position: absolute;
        bottom: 0px;
    }

    /* Patient Grid Print Styling */
    .print-patient-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        gap: 20px;
    }

    .print-group {
        display: flex;
        align-items: stretch;
        /* direction: inherit; - let it inherit */
    }

    .print-label {
        background: #2a3d66 !important;
        /* Force Blue Background */
        color: white !important;
        /* Force White Text */
        padding: 5px 15px;
        font-weight: bold;
        border: 2px solid #2a3d66 !important;
        border-radius: 0 6px 6px 0;
        /* RTL Default (Right) */
        display: flex;
        align-items: center;
        min-width: 120px;
        justify-content: center;
        white-space: nowrap;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-value {
        border: 2px solid #2a3d66 !important;
        border-right: none !important;
        /* RTL Default */
        padding: 5px 15px;
        border-radius: 6px 0 0 6px;
        /* RTL Default (Left) */
        font-weight: bold;
        min-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: black !important;
        /* Value is black */
    }

    /* LTR Overrides for English Print */
    [dir="ltr"] .print-group .print-label {
        border-radius: 6px 0 0 6px;
        /* Left for LTR */
    }

    [dir="ltr"] .print-group .print-value {
        border-radius: 0 6px 6px 0;
        /* Right for LTR */
        border-right: 2px solid #2a3d66 !important;
        border-left: none !important;
    }

    /* Content Area */
    .print-content {
        margin-top: 30px;
        font-size: 16px;
        line-height: 1.6;
        color: black !important;
    }

    /* Reports Specific */
    .report-title {
        text-align: center;
        font-weight: 900;
        text-decoration: underline;
        font-size: 20px;
        margin: 20px 0;
        color: black !important;
    }
}

/* =========================================
   8. MODALS
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    display: flex;
}

.modal-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    /* Wide for preview */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

.close-modal {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

/* Preview specific container */
#preview-render {
    border: 1px solid #ccc;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    transform: scale(0.85);
    /* Slight zoom for overview */
    transform-origin: top center;
    margin-top: 20px;
}

/* =========================================
   8.5 NEW UTILITY GRIDS
   ========================================= */
.drug-input-grid {
    display: grid;
    /* Drug | Dose | Freq | Duration | Notes | Add */
    grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 0.9fr 160px;
    gap: 10px;
    align-items: end;
    width: 100%;
}

.drug-input-grid .form-label {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
}

.drug-input-grid .form-control {
    height: 42px !important;
}

.drug-input-grid button {
    height: 42px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.records-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 0.8fr 0.8fr 0.8fr 1.2fr 1.2fr 1fr;
    /* 8 Items: Search, Type, Year, Month, Day, From, To, Sort */
    gap: 10px;
    margin-bottom: 20px;
}

.checkup-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1.2fr 1.2fr 1fr;
    /* 8 Items: Search, Status, Year, Month, Day, From, To, Sort */
    gap: 10px;
    margin-bottom: 20px;
}

.bookings-filter-grid {
    display: grid;
    /* 1 Action, 1 Search, 6 Dropdowns = 8 columns total */
    grid-template-columns: 1fr 1.5fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 20px;
    align-items: end;
}

.btn-booking-action {
    height: 35px;
    width: 100%;
    font-weight: bold;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    transition: all 0.2s;
}

@media (min-width: 992px) {
    .bookings-filter-grid>div:first-child {
        padding-bottom: 0;
    }
}

.lab-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.2fr 0.8fr 0.8fr 0.8fr 1fr 1fr 1fr;
    /* 9 Items: Name, Category, Type, Year, Month, Day, From, To, Sort */
    gap: 10px;
    margin-bottom: 20px;
}

.patient-main-filter {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.patient-main-filter .search-box-wrapper {
    flex: 1;
    position: relative;
}

.patient-main-filter .sort-box-wrapper {
    width: 150px;
}

.patient-main-filter .filter-label {
    font-weight: 700;
    font-size: 12px;
    display: block;
    margin-bottom: 4px;
    color: #475569;
}

@media screen and (max-width: 991px) {
    .patient-main-filter {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .patient-main-filter .sort-box-wrapper {
        width: 95px !important;
    }

    .patient-main-filter .search-box-wrapper input {
        padding-right: 30px !important;
        font-size: 12px !important;
    }
}

.emp-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr;
    gap: 10px;
    margin-bottom: 20px;
}

.nursing-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 0.8fr 0.8fr 0.8fr 1fr 1fr 1fr;
    /* 9 Items: Name, Cat, Service, Year, Month, Day, From, To, Sort */
    gap: 10px;
    margin-bottom: 20px;
}

.finance-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.checkup-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 0.8fr 1.2fr 1.2fr 1fr;
    /* 8 Items: Search, Status, Year, Month, Day, From, To, Sort */
    gap: 10px;
    margin-bottom: 20px;
}

/* --- CONTROL PANEL & INFOGRAPHIC DASHBOARD --- */
.common-dashboard-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #d1d5db;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.common-dashboard-card[style*="padding:0"] {
    border: 1px solid #d1d5db !important;
}

.booking-filters {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#bookings-quick-reports-card {
    background: #f8f9fa !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

#records-quick-reports-card {
    background: #f8f9fa !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 16px !important;
}

#records-quick-reports-card .quick-reports-row {
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}

.clinic-quick-reports-card {
    background: #f8f9fa !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
}

.clinic-quick-reports-card .quick-reports-row {
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

/* سجل المرضى: محاذاة حقل اسم المريض من اليمين إلى اليسار */
#tab-records #filter-search {
    direction: rtl !important;
    text-align: right !important;
}

#tab-records #filter-search::placeholder {
    direction: rtl;
    text-align: right;
}

.records-patient-add-grid {
    display: grid;
    grid-template-columns: 56px minmax(180px, 2fr) minmax(130px, 1.3fr) minmax(120px, 1fr) minmax(100px, 1fr) minmax(120px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.records-patient-add-grid .records-patient-actions {
    display: flex;
    align-items: end;
}

.records-patient-add-grid .records-patient-actions .btn {
    height: 45px;
    min-width: 130px;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    #tab-bookings #booking-form-card,
    #tab-bookings .booking-filters,
    #tab-bookings #bookings-quick-reports-card {
        margin-bottom: 10px !important;
    }
    #records-quick-reports-card {
        margin-bottom: 10px !important;
    }
    .records-patient-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .records-patient-add-grid .records-patient-photo-wrap,
    .records-patient-add-grid .records-patient-name-wrap,
    .records-patient-add-grid .records-patient-actions {
        grid-column: 1 / -1 !important;
    }
    .records-patient-add-grid .records-patient-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .records-patient-add-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .records-patient-add-grid .records-patient-photo-wrap,
    .records-patient-add-grid .records-patient-name-wrap,
    .records-patient-add-grid .records-patient-actions {
        grid-column: 1 / -1 !important;
    }
    .records-patient-add-grid .records-patient-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* التابلت + الكمبيوتر: أزرار (اليوم/الإعدادات) بعد "النوع" في نفس السطر ضمن الحضور والانصراف */
@media screen and (min-width: 769px) {
    #emp-view-attendance .att-filter-row-2 {
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
        grid-column: span 2 !important;
    }
    #emp-view-attendance .att-filter-row-2 > div:first-child {
        flex: 1 1 180px !important;
        min-width: 180px !important;
    }
    #emp-view-attendance .att-filter-row-2 > div:last-child {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
        white-space: nowrap !important;
    }
}

/* التابلت: أزرار quick reports تكون مرئية دائماً ضمن بطاقة منفصلة */
body.is-apk-tablet .clinic-quick-reports-card,
body.is-apk-tablet #bookings-quick-reports-card,
body.is-apk-tablet #records-quick-reports-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media screen and (max-width: 768px) {
    #tab-bookings #booking-form-body > div[style*="align-items: flex-end"] > div:last-child {
        flex: 1 1 100% !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #tab-bookings #booking-form-body > div[style*="align-items: flex-end"] > div:last-child .btn {
        width: 100% !important;
    }
}

@media screen and (max-width: 1400px) {
    #emp-view-tasks .kanban-body {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
    #emp-view-tasks .kanban-board {
        flex-direction: column !important;
        overflow-x: hidden !important;
    }
    #emp-view-tasks .kanban-col {
        width: 100% !important;
        min-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 10px !important;
    }
    #emp-view-tasks .kanban-body {
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
    #emp-view-tasks .kanban-card {
        overflow: visible !important;
        height: auto !important;
    }
    #emp-view-tasks .kanban-card .card-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
}

body.is-apk-tablet.is-apk-portrait #emp-view-tasks .kanban-board {
    flex-direction: column !important;
    overflow-x: hidden !important;
}
body.is-apk-tablet.is-apk-portrait #emp-view-tasks .kanban-col {
    width: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
}
body.is-apk-tablet.is-apk-portrait #emp-view-tasks .kanban-body {
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
}
body.is-apk-tablet.is-apk-portrait #emp-view-tasks .kanban-card {
    overflow: visible !important;
    height: auto !important;
}
body.is-apk-tablet.is-apk-portrait #emp-view-tasks .kanban-card .card-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Tablet landscape + desktop: prevent Kanban content clipping and show full cards */
body.is-apk-tablet.is-apk-landscape #emp-view-tasks .kanban-board,
body:not(.is-apk-tablet):not(.is-apk-mobile) #emp-view-tasks .kanban-board {
    align-items: stretch !important;
}
body.is-apk-tablet.is-apk-landscape #emp-view-tasks .kanban-col,
body:not(.is-apk-tablet):not(.is-apk-mobile) #emp-view-tasks .kanban-col {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}
body.is-apk-tablet.is-apk-landscape #emp-view-tasks .kanban-body,
body:not(.is-apk-tablet):not(.is-apk-mobile) #emp-view-tasks .kanban-body {
    max-height: none !important;
    min-height: 140px !important;
    height: auto !important;
    overflow: visible !important;
}
body.is-apk-tablet.is-apk-landscape #emp-view-tasks .kanban-card,
body:not(.is-apk-tablet):not(.is-apk-mobile) #emp-view-tasks .kanban-card {
    height: auto !important;
}

@media screen and (max-width: 1024px) {
    #tab-employees .emp-table td[data-label="#"],
    #tab-finance .emp-table td[data-label="#"] {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Fix: Table border logic inside rounded cards (Legacy support) */
.common-dashboard-card>.clinic-table,
.clinic-table-card .clinic-table {
    border: none !important;
    margin-top: 0 !important;
}

.common-dashboard-card>.drug-table th:first-child,
.common-dashboard-card>div>.drug-table th:first-child,
.common-dashboard-card>.clinic-table th:first-child,
.clinic-table-card th:first-child {
    border-top-right-radius: 0;
}

.common-dashboard-card.interactive-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.toggle-switch {
    width: 40px;
    height: 20px;
    background: #e2e8f0;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
}

body.dark-mode .common-dashboard-card {
    background: #1e293b;
    border-color: #334155;
    color: #fff;
}

/* =========================================
   9. MOBILE RESPONSIVENESS
   ========================================= */
@media screen and (max-width: 768px) {

    .records-filter-grid,
    .checkup-filter-grid,
    .lab-filter-grid,
    .nursing-filter-grid,
    .emp-filter-grid,
    .finance-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        /* Prevent overflow */
        gap: 5px !important;
        width: 100% !important;
    }

    .bookings-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    /* تبويب الحجوزات (موبايل): سطر1=بحث بالاسم+سنة+شهر+يوم، سطر2=الحالة+النوع+الترتيب، سطر3=تعديل الأرقام (ممتد) */
    #tab-bookings .bookings-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto auto auto !important;
        gap: 10px !important;
    }
    #tab-bookings .bookings-filter-grid > *:nth-child(1) { grid-row: 3 !important; grid-column: 1 / -1 !important; width: 100% !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(2),
    #tab-bookings .bookings-filter-grid > *:nth-child(3),
    #tab-bookings .bookings-filter-grid > *:nth-child(4),
    #tab-bookings .bookings-filter-grid > *:nth-child(5) { grid-row: 1 !important; min-width: 0; }
    #tab-bookings .bookings-filter-grid > *:nth-child(6),
    #tab-bookings .bookings-filter-grid > *:nth-child(7),
    #tab-bookings .bookings-filter-grid > *:nth-child(8) { grid-row: 2 !important; min-width: 0; }
    #tab-bookings .bookings-filter-grid > *:nth-child(6) { grid-column: 1 !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(7) { grid-column: 2 !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(8) { grid-column: 3 / -1 !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(1) .btn-booking-action { width: 100% !important; }
    #tab-bookings .bookings-filter-grid > div.full-width-on-mobile { grid-column: 1 / -1 !important; }
    #tab-bookings .full-width-on-mobile {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #tab-bookings .full-width-on-mobile .btn-booking-action {
        flex: 1 1 150px !important;
        min-width: 132px !important;
        font-size: 10px !important;
        padding: 0 10px !important;
    }

    /* بطاقات الملخص (إجمالي/مؤكدة/قيد الانتظار) في سطر واحد على الموبايل */
    #tab-bookings .bookings-summary-cards-row {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 8px !important;
        min-width: 0;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card {
        padding: 12px 6px !important;
        min-width: 0 !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label {
        font-size: 12px !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
        font-size: 18px !important;
    }

    .full-width-on-mobile {
        grid-column: 1 / -1 !important;
        margin-bottom: 10px;
    }

    /* مختبر: العدد + السعر + إضافة في سطر واحد على الموبايل */
    #tab-lab .common-dashboard-card > div[style*="flex-wrap"] > .lab-form-row-actions {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #tab-lab .lab-form-row-actions {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    #tab-lab .lab-form-row-actions > div:last-child {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    #tab-lab .lab-form-row-actions > div:last-child #n-add-btn {
        width: 100% !important;
    }

    .records-filter-grid select.form-control,
    .records-filter-grid input.form-control,
    .bookings-filter-grid select.form-control,
    .bookings-filter-grid input.form-control {
        font-size: 11px;
        /* Smaller font for mobile */
        padding: 4px;
        height: 32px !important;
    }
}

/* Mobile Toggle Button (Hidden on Desktop) */
/* Mobile Toggle Button (Old - to be hidden in toolbar) */
.mobile-toggle {
    display: none;
}

/* FIXED Mobile Header Bar */
.mobile-app-header {
    display: flex;
    /* Restored to visible on Web as requested */
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    direction: rtl;
    background: #fff;
    padding: env(safe-area-inset-top) 20px 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - var(--sidebar-width));
    /* Fit alongside sidebar on Desktop */
    height: calc(70px + env(safe-area-inset-top));
    z-index: 1000;
    overflow: visible !important; /* منع قص قائمة التنبيهات عند فتحها أسفل الهيدر */
}

/* Hide overlapping/redundant elements on Desktop (since sidebar has them) */
@media (min-width: 992px) {

    .mobile-app-header .logo,
    .mobile-app-header .open-menu {
        display: none !important;
    }
}

@media screen and (max-width: 991px) {
    .mobile-app-header {
        width: 100% !important;
        z-index: 10000 !important;
    }

    .mobile-app-header .logo,
    .mobile-app-header .open-menu {
        display: block !important;
    }
}

.mobile-app-header .logo img {
    max-height: 50px;
    width: auto;
}

.mobile-app-header .open-menu {
    font-size: 30px;
    cursor: pointer;
    color: var(--primary);
}

/* زر التنبيهات: بعد زر المظهر بفجوة 10px (لا تداخل) */
.header-notif-btn-wrap.header-notif-btn-wrap {
    position: absolute;
    left: 145px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
}
/* منع التداخل: بطاقة البروفايل وبحث المريض بعرض أقصى ومسافات ثابتة */
.mobile-app-header .header-profile-card.desktop-only { max-width: 200px; min-width: 0; }
.mobile-app-header .header-patient-search-box { min-width: 120px; }
/* كمبيوتر: عدم تداخل البروفايل مع بحث المريض (بروفايل left 210 + max 240 + فجوة 8) */
@media screen and (min-width: 992px) {
    .mobile-app-header .header-patient-search-box { left: 458px !important; width: 240px !important; max-width: 240px !important; }
}
/* كمبيوتر + تابلت لاندسكيب + بورتريه: إخفاء الدور (مطور النظام) لمساحة الاسم + زيادة عرض البطاقة */
@media screen and (min-width: 769px) {
    #header-profile-role { display: none !important; }
    .mobile-app-header .header-profile-card.desktop-only { max-width: 240px !important; }
}
/* بحث المريض: بجانب بطاقة البروفايل - نفس حجم البطاقة (200×57، border-radius 14px) */
/* بحث المريض: left بحيث لا يتداخل مع البروفايل (210 + 200 + 10) */
.header-patient-search-box {
    position: absolute;
    left: 420px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 101;
    width: 200px;
    height: 57px;
    padding: 4px 20px;
    border-radius: 14px;
    background: rgba(0, 113, 239, 0.05);
    border: 1px solid rgba(0, 113, 239, 0.1);
    box-shadow: 0 2px 8px rgba(0, 113, 239, 0.05);
    display: flex;
    align-items: center;
}
/* غلاف الحقل فقط: المكبرة داخله (بداخل حدود الـ input) */
.header-patient-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 47px;
    display: flex;
    align-items: center;
}
.header-patient-search-input-wrap .header-search-icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 16px;
    pointer-events: none;
}
.header-patient-search-box .header-search-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 12px 0 36px;
    font-size: 13px;
    text-align: center;
}
.header-patient-search-box .header-search-input::placeholder {
    color: #94a3b8;
}
.header-patient-search-box .header-search-input:focus {
    outline: none;
}
.header-patient-search-box:focus-within {
    border-color: rgba(0, 113, 239, 0.4);
    box-shadow: 0 0 0 2px rgba(0, 113, 239, 0.1);
}
.header-patient-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    min-width: 280px;
    max-width: 420px;
    width: max-content;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    z-index: 1003;
}
.header-patient-search-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: right;
    white-space: nowrap;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}
.header-patient-search-dropdown-item:hover {
    background: #f1f5f9;
}
.header-patient-search-dropdown-item:last-child {
    border-bottom: none;
}
body.dark-mode .header-patient-search-dropdown {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .header-patient-search-dropdown-item { color: #e2e8f0; }
body.dark-mode .header-patient-search-dropdown-item:hover { background: #334155; }
.header-notif-btn-wrap {
    position: relative;
}
.header-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.header-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 360px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(400px, calc(100vh - 100px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
    z-index: 1002;
    padding: 12px 0;
}

/* التابلت وحتى 1440px: قائمة التنبيهات أسفل الزر وحافتها اليمنى محاذية للزر (تمتد لليسار) */
@media (min-width: 769px) and (max-width: 1440px) {
    .mobile-app-header .header-notif-panel {
        top: calc(100% + 8px) !important;
        left: auto !important;
        right: 0 !important;
        width: 360px !important;
        max-width: min(360px, calc(100vw - 24px)) !important;
    }
}

/* تابلت لاندسكيب: إخفاء القائمة المنسدلة — الزر يفتح النافذة الكاملة للتنبيهات فقط */
@media (min-width: 769px) and (max-width: 1440px) and (orientation: landscape) and (max-height: 900px) {
    .mobile-app-header .header-notif-panel {
        display: none !important;
    }
}
.header-notif-panel-title {
    padding: 0 14px 10px;
    font-weight: 800;
    font-size: 14px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    flex-shrink: 0;
}
.header-notif-panel-title:hover { color: #3b82f6; }
.header-notif-list {
    padding: 4px 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* شريط تمرير واضح لقائمة التنبيهات عند الحاجة */
.header-notif-list::-webkit-scrollbar {
    width: 8px;
}
.header-notif-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.header-notif-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.header-notif-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.header-notif-item {
    display: block;
    width: 100%;
    padding: 12px 14px;
    text-align: right;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background 0.15s;
    border-bottom: 1px solid #f8fafc;
}
.header-notif-item:hover {
    background: #f1f5f9;
}
.header-notif-item:last-child {
    border-bottom: none;
}
.header-notif-list .header-notif-type-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: 11px; margin-left: 6px;
    vertical-align: middle;
}
.header-notif-list .header-notif-icon-bookings { background: rgba(14, 165, 233, 0.2); color: #0ea5e9; }
.header-notif-list .header-notif-icon-checkup { background: rgba(34, 197, 94, 0.2); color: #16a34a; }
.header-notif-list .header-notif-icon-lab { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
.header-notif-list .header-notif-icon-nursing { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.header-notif-empty {
    padding: 20px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}
body.dark-mode .header-notif-panel {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .header-notif-panel-title { color: #e2e8f0; }
body.dark-mode .header-notif-item { color: #cbd5e1; }
body.dark-mode .header-notif-item:hover { background: #334155; }
body.dark-mode .header-notif-empty { color: #64748b; }

/* نافذة كافة التنبيهات مع فلتر - responsive */
/* منع سكرول الخلفية عند فتح نافذة التنبيهات الكاملة */
body.notif-full-modal-open {
    overflow: hidden !important;
    touch-action: none;
}

/* ارتفاع الـ action bar لترك مساحة تحته — نافذة التنبيهات تنتهي قبله */
.header-notif-full-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: 80px; /* مساحة تحت النافذة قبل نهاية الـ action bar */
    box-sizing: border-box;
}
.header-notif-full-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 520px;
    max-height: min(85vh, calc(100vh - 96px)); /* لا تتجاوز المنطقة فوق الـ action bar */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.header-notif-full-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: rgba(0, 113, 239, 0.06);
}
.header-notif-full-title { margin: 0; font-size: 18px; font-weight: 800; color: #1e293b; }
.header-notif-full-close {
    width: 36px; height: 36px; border: none; background: transparent; font-size: 24px; color: #64748b;
    cursor: pointer; border-radius: 8px; line-height: 1; padding: 0;
}
.header-notif-full-close:hover { background: #f1f5f9; color: #1e293b; }
.header-notif-full-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9;
}
.header-notif-full-filters { flex-wrap: nowrap; }
/* خط أزرار الفترات (اليوم، أمس، ...) أكبر بدرجتين */
.header-notif-full-filters .header-notif-filter-btn {
    font-size: 13px; padding: 0 10px; white-space: nowrap;
}
.header-notif-full-custom-date {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9; background: #f8fafc;
}
.header-notif-apply-custom { margin-right: auto; }
.header-notif-filter-btn {
    height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff;
    font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.header-notif-filter-btn:hover { background: #f8fafc; border-color: #3b82f6; color: #3b82f6; }
.header-notif-filter-btn.active { background: rgba(0, 113, 239, 0.1); border-color: #3b82f6; color: #3b82f6; }
.header-notif-full-list {
    flex: 1; overflow-y: auto; padding: 8px 0; min-height: 120px;
}
.header-notif-full-item {
    display: block; width: 100%; padding: 12px 20px; text-align: right; border: none;
    background: transparent; cursor: pointer; font-size: 14px; color: #334155;
    transition: background 0.15s; border-bottom: 1px solid #f1f5f9;
}
.header-notif-full-item:hover { background: #f1f5f9; }
.header-notif-full-item:last-child { border-bottom: none; }
/* أيقونة القسم قبل التاريخ في قائمة التنبيهات (دائرة ملونة) */
.header-notif-type-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; font-size: 12px; margin-left: 8px;
    flex-shrink: 0; vertical-align: middle;
}
.header-notif-icon-bookings { background: rgba(14, 165, 233, 0.2); color: #0ea5e9; }
.header-notif-icon-checkup { background: rgba(34, 197, 94, 0.2); color: #16a34a; }
.header-notif-icon-lab { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
.header-notif-icon-nursing { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.header-notif-full-empty { padding: 24px 20px; text-align: center; color: #94a3b8; font-size: 14px; }

/* نافذة بحث عن مريض (من الناف — التابلت بورتريت) */
.nav-patient-search-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.nav-patient-search-modal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.nav-patient-search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: rgba(0, 113, 239, 0.06);
}
.nav-patient-search-modal-title { margin: 0; font-size: 18px; font-weight: 800; color: #1e293b; }
.nav-patient-search-modal-close {
    width: 36px; height: 36px; border: none; background: transparent; font-size: 24px; color: #64748b;
    cursor: pointer; border-radius: 8px; line-height: 1; padding: 0;
}
.nav-patient-search-modal-close:hover { background: #f1f5f9; color: #1e293b; }
.nav-patient-search-modal-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.nav-patient-search-modal-body .nav-patient-search-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
/* أيقونة المكبرة على اليمين مع مسافة ثابتة — لا تداخل مع مربع الكتابة */
.nav-patient-search-modal-body .nav-patient-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 18px;
    pointer-events: none;
    flex-shrink: 0;
}
/* مساحة كتابة واضحة: padding يمين لمنع تداخل النص مع المكبرة (في RTL) */
.nav-patient-search-modal-body .nav-patient-search-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 0 44px 0 14px;
    font-size: 15px;
    color: #1e293b;
    box-sizing: border-box;
}
.nav-patient-search-modal-body .nav-patient-search-input::placeholder { color: #94a3b8; }
.nav-patient-search-modal-body .nav-patient-search-input:focus { outline: none; }
.nav-patient-search-modal-body .nav-patient-search-dropdown {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
}
.nav-patient-search-modal-body .nav-patient-search-dropdown .header-patient-search-dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
}
.nav-patient-search-modal-body .nav-patient-search-dropdown .header-patient-search-dropdown-item:hover { background: #f1f5f9; }
.nav-patient-search-modal-body .nav-patient-search-dropdown .header-patient-search-dropdown-item:last-child { border-bottom: none; }
body.dark-mode .nav-patient-search-modal { background: #1e293b; border-color: #334155; }
body.dark-mode .nav-patient-search-modal-title { color: #f8fafc; }
body.dark-mode .nav-patient-search-modal-body .nav-patient-search-input-wrap { background: #334155; border-color: #475569; }
body.dark-mode .nav-patient-search-modal-body .nav-patient-search-input { color: #e2e8f0; }
body.dark-mode .nav-patient-search-modal-body .nav-patient-search-dropdown { background: #1e293b; border-color: #334155; }
body.dark-mode .nav-patient-search-modal-body .nav-patient-search-dropdown .header-patient-search-dropdown-item { color: #e2e8f0; border-bottom-color: #334155; }
body.dark-mode .nav-patient-search-modal-body .nav-patient-search-dropdown .header-patient-search-dropdown-item:hover { background: #334155; }

.header-notif-custom-select {
    height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff;
    font-family: 'Cairo', sans-serif; font-size: 14px; font-weight: 600; color: #334155; min-width: 70px;
    box-sizing: border-box;
}
.header-notif-apply-custom { height: 38px; padding: 0 14px; border-radius: 10px; box-sizing: border-box; }
@media (max-width: 768px) {
    .header-notif-full-modal { max-height: min(90vh, calc(100vh - 96px)); margin: 8px; }
    .header-notif-full-filters { padding: 10px 12px; gap: 6px; }
    .header-notif-filter-btn { height: 38px; padding: 0 10px; font-size: 12px; }
    .header-notif-custom-select, .header-notif-apply-custom { height: 38px; }
}
body.dark-mode .header-notif-full-modal { background: #1e293b; border-color: #334155; }
body.dark-mode .header-notif-full-header { background: rgba(255,255,255,0.05); border-color: #334155; }
body.dark-mode .header-notif-full-title { color: #e2e8f0; }
body.dark-mode .header-notif-full-item { color: #cbd5e1; }
body.dark-mode .header-notif-full-item:hover { background: #334155; }
body.dark-mode .header-notif-full-empty { color: #64748b; }
body.dark-mode .header-notif-icon-bookings { background: rgba(14, 165, 233, 0.35); color: #7dd3fc; }
body.dark-mode .header-notif-icon-checkup { background: rgba(34, 197, 94, 0.35); color: #86efac; }
body.dark-mode .header-notif-icon-lab { background: rgba(168, 85, 247, 0.35); color: #c084fc; }
body.dark-mode .header-notif-icon-nursing { background: rgba(236, 72, 153, 0.35); color: #f9a8d4; }
body.dark-mode .header-notif-full-custom-date { background: #0f172a; border-color: #334155; }
body.dark-mode .header-notif-custom-select { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* تابلت بورتريه فقط: فلتر حجوزات أصغر + زر تعديل تحت الفلتر + أيقونات أصغر + مسافة عادية قائمة-اشعارات */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-bookings #b-filter-year,
    #tab-bookings #b-filter-month,
    #tab-bookings #b-filter-day {
        max-width: none !important; width: 100% !important; min-width: 0 !important; height: 32px !important; font-size: 11px !important;
    }
    /* تعديل الرقم تحت الفلتر وليس فوقه */
    #tab-bookings .bookings-filter-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
    }
    #tab-bookings .bookings-filter-grid > *:nth-child(1) { grid-row: 2 !important; grid-column: 1 / -1 !important; width: 100% !important; box-sizing: border-box !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(2),
    #tab-bookings .bookings-filter-grid > *:nth-child(3),
    #tab-bookings .bookings-filter-grid > *:nth-child(4),
    #tab-bookings .bookings-filter-grid > *:nth-child(5),
    #tab-bookings .bookings-filter-grid > *:nth-child(6),
    #tab-bookings .bookings-filter-grid > *:nth-child(7),
    #tab-bookings .bookings-filter-grid > *:nth-child(8) { grid-row: 1 !important; min-width: 0 !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(1).full-width-on-mobile { display: block !important; }
    #tab-bookings .bookings-filter-grid > *:nth-child(1) .btn-booking-action { width: 100% !important; }
    #tab-bookings .booking-filters { overflow: visible !important; }
    #tab-bookings .booking-filters .bookings-filter-grid { overflow: visible !important; }
    #tab-bookings { overflow: visible !important; }
    /* أيقونات الإجراءات أصغر لظهور أيقونة المسح */
    #tab-bookings .booking-action-btn,
    #tab-bookings .booking-btn-announce,
    #tab-bookings .booking-btn-confirm,
    #tab-bookings .booking-btn-edit,
    #tab-bookings .booking-btn-email,
    #tab-bookings .booking-btn-delete {
        min-width: 26px !important; width: 26px !important; height: 26px !important; padding: 0 !important; font-size: 12px !important;
    }
    #tab-bookings .clinic-table .b-col-datetime .booking-date,
    #tab-bookings .clinic-table .b-col-datetime .booking-time { font-size: 11px !important; }
    /* أزرار الهيدر من القاعدة الموحّدة (تصغير + عدم تداخل) */
}
/* تابلت بورتريه: زر AI مثل الموبايل */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #ai-agent-fab {
        bottom: 120px !important;
        left: 0 !important;
        width: auto !important;
        height: 48px !important;
        border-radius: 0 25px 25px 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-left: none !important;
        flex-direction: row-reverse !important;
        padding: 0 16px 0 12px !important;
        gap: 8px !important;
        box-shadow: 4px 6px 20px rgba(6, 182, 212, 0.3) !important;
        justify-content: center !important;
        align-items: center !important;
    }
    #ai-agent-fab i {
        margin: 0 !important;
        font-size: 20px !important;
    }
    #ai-agent-fab .ai-text {
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }
}

/* تابلت لاندسكيب: جدول الحجوزات + أيقونات الإجراءات (أزرار الهيدر من القاعدة الموحّدة) */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    #tab-bookings .clinic-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    #tab-bookings .clinic-table { min-width: 880px !important; }
    /* نفس تابلت بورتريه: أيقونات 26px في سطرين */
    #tab-bookings .booking-actions-wrap {
        display: grid !important;
        grid-template-columns: repeat(3, auto) !important;
        gap: 0 !important;
        justify-content: start !important;
    }
    #tab-bookings .booking-actions-row1,
    #tab-bookings .booking-actions-row2 { display: contents !important; }
    #tab-bookings .booking-btn-label { display: none !important; }
    #tab-bookings .booking-action-btn,
    #tab-bookings .booking-btn-announce,
    #tab-bookings .booking-btn-confirm,
    #tab-bookings .booking-btn-edit,
    #tab-bookings .booking-btn-email,
    #tab-bookings .booking-btn-delete {
        min-width: 26px !important; width: 26px !important; height: 26px !important; padding: 0 !important; font-size: 12px !important;
    }
}

/* تابلت لاندسكيب (769–1400): إخفاء زر القائمة — التخطيط من Flexbox في القاعدة */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    .mobile-app-header .open-menu { display: none !important; }
}

/* تابلت بورتريت (769–1400): التخطيط من القاعدة Flexbox — بدون تداخل */
@media (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
}

/* تابلت بورتريه: تاب المختبر — حجم خط منطقي لجميع الجداول والنصوص */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-lab .clinic-table th,
    #tab-lab .clinic-table td {
        font-size: 15px !important;
    }
    #tab-lab .clinic-table th {
        font-size: 15px !important;
        padding: 10px 8px !important;
    }
    #tab-lab .clinic-table td {
        font-size: 15px !important;
        padding: 10px 8px !important;
    }
    #tab-lab .form-control,
    #tab-lab .form-control-sm,
    #tab-lab label {
        font-size: 14px !important;
    }
    #tab-lab .common-dashboard-card h5,
    #tab-lab .common-dashboard-card .font-weight-bold {
        font-size: 15px !important;
    }
}

/* زر المعالجة في جدول إحالات المختبر — منع اقتطاع النص */
#lab-ref-list-view .lab-ref-table td[data-label="اجراءات"] .btn {
    white-space: nowrap !important;
    overflow: visible !important;
}

/* تابلت بورتريه: جدول إحالات المختبر — خط، أعمدة (إجراءات أوسع، اسم المريض والملاحظات أضيق)، زر المعالجة */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #lab-ref-list-view .lab-ref-table th,
    #lab-ref-list-view .lab-ref-table td {
        font-size: 15px !important;
        padding: 10px 8px !important;
    }
    #lab-ref-list-view .lab-ref-table td[data-label="التاريخ"],
    #lab-ref-list-view .lab-ref-table th:nth-child(2) {
        font-size: 16px !important;
    }
    /* عمود المعالجة (الإجراءات) أوسع */
    #lab-ref-list-view .lab-ref-table th:nth-child(6),
    #lab-ref-list-view .lab-ref-table td[data-label="اجراءات"] {
        min-width: 150px !important;
        width: 150px !important;
    }
    /* اسم المريض أضيق */
    #lab-ref-list-view .lab-ref-table th:nth-child(3),
    #lab-ref-list-view .lab-ref-table td[data-label="اسم المريض"] {
        min-width: 0 !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* التشخيص / الملاحظات أضيق */
    #lab-ref-list-view .lab-ref-table th:nth-child(4),
    #lab-ref-list-view .lab-ref-table td[data-label="التشخيص / الملاحظات"] {
        min-width: 0 !important;
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #lab-ref-list-view .lab-ref-table td[data-label="اجراءات"] .btn {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 8px 14px !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(0, 113, 239, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        width: auto !important;
        overflow: visible !important;
    }
    #lab-ref-list-view .lab-ref-table td[data-label="اجراءات"] .btn i {
        margin-left: 6px !important;
    }
}

/* تابلت بورتريه: جدول سجل المختبر العام (تحت الإحالات) — تكبير الخط وعمود التاريخ */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-lab table:has(#lab-data-body) th,
    #lab-data-body td {
        font-size: 15px !important;
    }
    #lab-data-body td[data-label="التاريخ"] {
        font-size: 16px !important;
    }
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* TABLET & MOBILE STYLES */
@media screen and (max-width: 991px) {

    /* 1. Global Safe Widths */
    body,
    html {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .app-container,
    .main-content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 2. Sidebar Logic - HIDE DEFAULT SIDEBAR COMPLETELY */
    .sidebar {
        display: none !important;
    }

    /* HIDE SIDEBAR ITEMS ON MOBILE */
    .sidebar-header,
    .sidebar-nav {
        display: none !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 12px !important;
        padding-top: 0 !important;
        /* Titles behind header as requested */
        padding-bottom: 160px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-toggle {
        display: block;
    }

    /* 3. Top Toolbar */
    .mobile-app-header {
        display: flex;
    }

    .top-toolbar .mobile-toggle {
        display: none !important;
    }

    .top-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* 4. Form & Grid Stacking (The "Big Effort" Part) */
    .patient-grid,
    #patient-info-form.patient-grid {
        padding: 15px;
        padding-bottom: 42px;
        gap: 12px;
        height: 280px !important;
    }

    /* Force all flex rows in forms to stack */
    .p-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    /* تاريخ الميلاد والعمر في نفس السطر — مسافة أوضح بين التاريخ وتاريخ الميلاد */
    .patient-grid .p-row:nth-of-type(2) {
        margin-top: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 44px;
        align-items: start;
    }
    .patient-grid .p-row:nth-of-type(2) .p-input-group:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: 24px;
    }

    /* تابلت بورتريه فقط: التاريخ والعمر في نفس الصف + تقليل الارتفاع */
    @media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
        #patient-info-form.patient-grid {
            height: 200px !important;
        }
        #patient-info-form.patient-grid .p-row:nth-of-type(2) {
            grid-template-columns: 1fr 1fr 1fr !important;
            row-gap: 15px !important;
        }
        #patient-info-form.patient-grid .p-row:nth-of-type(2) .p-input-group:nth-child(3) {
            grid-column: auto !important;
            margin-top: 0 !important;
        }
    }

    /* Fix Patient Inputs */
    .p-input-group {
        width: 100%;
        flex-direction: column;
    }

    .patient-grid .p-label {
        width: 100%;
        border-radius: 8px 8px 0px 0px !important;
        min-width: unset;
        justify-content: flex-start;
        text-align: right;
    }

    .patient-grid .p-input {
        width: 100%;
        border-radius: 0px 0 8px 8px !important;
        border-top: none;
        border-right: 2px solid #2a3d66;
        /* Restore border */
    }

    .patient-grid.is-ltr .p-label {
        border-radius: 8px 8px 0px 0px !important;
    }

    .patient-grid.is-ltr .p-input {
        border-radius: 0 0px 8px 8px !important;
    }

    .patient-grid.is-ltr .name-input-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .patient-grid.is-ltr #p-name-en-badge {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        margin-top: -2px;
        text-align: center;
        padding: 6px !important;
        font-size: 13px !important;
        border-radius: 0 0 8px 8px !important;
        border: 1px solid #475569;
    }

    .patient-grid.is-ltr #p-name {
        padding-right: 45px !important;
        /* allow room for view btn */
        border-radius: 0 !important;
        /* middle piece */
        border-bottom: none !important;
    }

    /* Fix profile open button */
    #p-view-profile-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .patient-grid.is-ltr #p-view-profile-btn {
        top: 22.5px !important;
    }

    /* Stack any grid inside tabs */
    .tab-section div[style*="display: grid"],
    #tab-prescription div[style*="grid-template-columns"],
    .records-filter-grid,
    .bookings-filter-grid,
    .lab-filter-grid,
    .nursing-filter-grid,
    .finance-filter-grid,
    .checkup-filter-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* رزنامة الحجوزات: إبقاء 7 أعمدة (شكل طبيعي كما في الويب) */
    #tab-bookings .smart-calendar-grid-body,
    #tab-bookings .bookings-cal-header-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .drug-input-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .records-filter-grid>div,
    .bookings-filter-grid>div,
    .lab-filter-grid>div,
    .nursing-filter-grid>div,
    .finance-filter-grid>div,
    .checkup-filter-grid>div {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Referral Layout for Mobile */
    .referral-top-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .referral-top-row>div {
        width: 100% !important;
    }

    .referral-sub-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .referral-sub-row>div {
        flex: 1 !important;
    }

    /* 5. Responsive Tables (Card View) */
    .drug-table,
    .drug-table tbody,
    .drug-table th,
    .drug-table td,
    .drug-table tr {
        display: block;
        width: 100%;
    }

    .drug-table thead {
        display: none;
        /* Hide headers */
    }

    .drug-table tr {
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #fff;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    .drug-table td {
        border: none;
        padding: 5px 0;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #eee;
    }

    .drug-table td:last-child {
        border-bottom: none;
        justify-content: flex-end;
    }

    /* 6. Tabs Scroll */
    .tabs-header {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap;
        border-radius: 8px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .tab-btn {
        flex: 0 0 auto !important;
    }

    /* 7. Action Bar (Fixed Bottom) */
    .action-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 10px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px)) !important;
        background: #fff !important;
        border-top: 1px solid #dee2e6 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        z-index: 9999 !important;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        gap: 5px !important;
    }

    /* HIDE when on Landing Page */
    body.landing-active .action-bar {
        display: none !important;
    }



    /* Action Bar Layout: 2 buttons top, 1 full width bottom */
    .action-bar button {
        height: 52px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .action-bar button:nth-child(1),
    .action-bar button:nth-child(2),
    .action-bar button:nth-child(3) {
        flex: 1 1 calc(33.33% - 10px) !important;
        padding: 0 5px !important;
        font-size: 11px !important;
    }

    /* إخفاء أزرار ملف المريض خارج صفحة الملف الطبي (تجاوز display:flex !important) */
    .action-bar button.btn-profile-action.action-bar-profile-hidden {
        display: none !important;
    }

    /* إظهار الأزرار المفعّلة فقط — إخفاء المعطّلة على الموبايل */
    .action-bar button:disabled,
    .action-bar button[disabled] {
        display: none !important;
    }

    /* أزرار الإكشن بار: عرض النص العربي فقط على الموبايل (دارك ولايت) */
    .action-bar .action-bar-en {
        display: none !important;
    }

    /* حجوزات: إخفاء النص الإنجليزي في تسمية الحالة على الموبايل */
    #tab-bookings .b-filter-label-en {
        display: none !important;
    }

    /* حجوزات: زرّا حفظ وإلغاء في صف التعديل في نفس السطر */
    #bookings-table-body tr.editing-row td .booking-edit-actions {
        flex-direction: row !important;
    }

    /* Sidebar Navigation Tweaks */
    .hc-offcanvas-nav .nav-close-button {
        background: #0d1f54 !important;
        border-top: none !important;
    }

    .hc-offcanvas-nav li.nav-item {
        margin: 2px 10px !important;
        padding: 0 !important;
    }

    .hc-offcanvas-nav li.nav-item a {
        padding: 0 15px !important;
        /* Zero vertical padding */
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
    }



    #nav-settings {
        position: static !important;
        flex: 1 1 100% !important;
        order: 10;
        margin-top: 5px !important;
    }

    /* 8. Text Editor */
    #rep-editor {
        height: 350px !important;
    }
    /* زر المايك للتقرير الطبي أصبح داخل الـ toolbar */

    /* 8.5 Quill Toolbar Mobile Fix Removed - Handled Globally at End of File */


    /* 9. Report Form Stacking */
    #tab-report div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #tab-report .form-group {
        width: 100% !important;
    }

    /* Typography */
    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    input,
    select,
    button {
        min-height: 45px;
        font-size: 16px !important;
    }

    /* UTILITY: Mobile Only Visibility */
    .mobile-only {
        display: flex !important;
    }

    .desktop-only,
    #nav-theme-toggle {
        /* Targeting ID directly to force hide */
        display: none !important;
    }

    /* FORCE SIDEBAR VISIBILITY for Theme Button */
    a.nav-item.mobile-only {
        display: flex !important;
    }

}

/* Default Desktop Visibility */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: inline-flex !important;
}

@media (min-width: 992px) {
    #nav-theme-toggle {
        display: inline-flex !important;
    }
}

/* =========================================
   MOBILE HEADER & MENU REDESIGN (Match Index)
   ========================================= */

/* 1. Header Layout (Logo Right, Menu Left) */
@media screen and (max-width: 991px) {
    .mobile-app-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
        padding: env(safe-area-inset-top, 0px) 15px 0 15px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #eee;
        width: 100% !important;
        position: relative !important;
        /* Increase height to account for the status bar padding */
        height: auto !important;
        min-height: calc(70px + env(safe-area-inset-top, 0px)) !important;
        z-index: 1100 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-app-header .logo {
        margin: 0 !important;
        /* Logo stays on the right natively in RTL flex-start */
    }

    .mobile-app-header .logo img {
        max-height: 50px;
    }

    .mobile-app-header .open-menu {
        /* FORCE LEFT POSITIONING (Override any conflicting flex/absolute rules) */
        position: absolute !important;
        left: 20px !important;
        right: auto !important;
        /* Offset the translateY slightly if there's a safe-area inset */
        top: calc(50% + (env(safe-area-inset-top, 0px) / 2)) !important;
        transform: translateY(-50%) !important;

        cursor: pointer;
        font-size: 26px;
        color: #0071ef !important;
        background-color: #f8f9fa !important;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.3s ease;
        border: 1px solid #eee !important;
        margin: 0 !important;
        order: unset !important;
        /* Remove order logic as we use absolute */
    }

    .mobile-app-header .open-menu:hover {
        background-color: #0071ef !important;
        color: #ffffff !important;
    }
}

/* 2. Sidebar/Menu Styling (HC Offcanvas) */
.hc-offcanvas-nav .nav-container {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1) !important;
    overflow-x: hidden !important;
}

/* Hide scrollbar in sidebar content */
.hc-offcanvas-nav .nav-content {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    /* Firefox */
}

.hc-offcanvas-nav .nav-content::-webkit-scrollbar {
    display: none !important;
    /* Safari and Chrome */
}

.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav nav,
.hc-offcanvas-nav ul,
.hc-offcanvas-nav li,
.hc-offcanvas-nav .nav-content {
    background-color: transparent !important;
}

.hc-offcanvas-nav .nav-header {
    padding: 5px 20px !important;
    min-height: auto !important;
    border-bottom: 1px solid #eee;
}

.hc-offcanvas-nav {
    font-family: 'Cairo', sans-serif !important;
}

.hc-offcanvas-nav li.nav-item,
.hc-offcanvas-nav li {
    margin: 2px 10px;
    list-style: none;
    width: auto;
}

.hc-offcanvas-nav .nav-item-wrapper {
    width: 100% !important;
    display: block !important;
}

.nav-social-icons {
    display: flex;

    .nav-social-icons {
        display: none !important;
    }

    .nav-social-icons i {
        font-size: 22px !important;
        color: #666;
        transition: 0.3s;
        cursor: pointer;
        display: inline-block !important;
        width: 30px !important;
        height: 30px !important;
        text-align: center;
        line-height: 30px !important;
    }

    .nav-social-icons i:hover {
        color: var(--primary);
    }

    /* Fix Footer Text Visibility and Link Style */
    .hc-offcanvas-nav .nav-footer-text {
        font-size: 11px !important;
        color: #888 !important;
        /* Force Visible Gray */
        text-align: center;
        white-space: nowrap !important;
        padding-bottom: 20px;
        direction: rtl;
        width: 100%;
        overflow: hidden;
        line-height: normal !important;
    }

    .hc-offcanvas-nav .nav-footer-text a {
        color: #888 !important;
        font-family: 'Cairo', sans-serif !important;
        font-weight: normal !important;
        text-decoration: none !important;
        display: inline !important;
        /* Override Block/Flex */
        background: transparent !important;
        /* Remove Button BG */
        border: none !important;
        /* Remove Button Border */
        padding: 0 !important;
        /* Remove Button Padding */
        margin: 0 !important;
        width: auto !important;
        box-shadow: none !important;
    }
}

.hc-offcanvas-nav li a {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-radius: 10px;
    border: 1px solid #f5f5f5 !important;
    padding: 14px 20px !important;
    font-weight: 600;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    direction: rtl;
    /* Restore RTL for text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    text-decoration: none !important;
    justify-content: flex-start;
}

.hc-offcanvas-nav li a i {
    margin-left: 15px !important;
    font-size: 22px;
    color: #0071ef !important;
    width: 30px;
    text-align: center;
}

.hc-offcanvas-nav li a:hover {
    background-color: #f0f7ff !important;
    color: #0071ef !important;
    border-color: #dbeafe !important;
    transform: translateX(-5px);
}

.hc-offcanvas-nav li.active-page a {
    background-color: #0e1d59 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateX(-5px);
}

.hc-offcanvas-nav li.active-page a i {
    background: linear-gradient(135deg, #ffffff 0%, #a1c8ff 70%, #00adff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Settings Modal Tabs & Switch */
.s-tab {
    padding: 10px 15px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    color: #666;
    transition: 0.3s;
}

.s-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.s-tab:hover {
    color: var(--primary);
}

/* Switch Toggle (Dark Mode) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--primary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--primary);
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.hc-offcanvas-nav li.active-page a i {
    color: #ffffff !important;
}

.hc-offcanvas-nav .clinic-name {
    color: #0071ef !important;
    font-weight: 800;
    font-size: 16px;
}

/* FIX HC-OFFCANVAS Z-INDEX TO BE ABOVE ACTION BAR (Buttons are 9999) */
.hc-offcanvas-nav {
    z-index: 10001 !important;
}

/*.hc-offcanvas-nav-wrapper {
    z-index: 10001 !important;
}*/
/* Footer Dev Link Styles */
.about-dev-text {
    color: #555;
}

body.dark-mode .about-dev-text {
    color: #ffffff !important;
}

body.dark-mode .about-dev-text i {
    color: #ffffff !important;
}

/* About Modal Dark Mode */
body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: inline-block !important;
}

body.dark-mode .about-text-ar {
    color: #ffffff !important;
}

body.dark-mode .about-text-en {
    color: #cccccc !important;
    /* Light Gray */
}

/* White icons for About Modal in Dark Mode (Optional to match image provided?) 
   The image shows WhatsApp green and Insta pink, so we keep them colored. 
   Only the Web icon might need checked if it should be white or blue. 
   The request didn't specify changing icon colors, only text and logo. 
   Keeping colored social icons as they look premium on dark too.
*/

/* =========================================
   ABOUT MODAL ANIMATIONS (Shimmer/Shine)
   ========================================= */

/* 1. Image & Icon Sweep Effect */
#about-modal img,
#about-modal .about-social-icons a {
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
    /* Smooth corners for sweep */
}

/* The Light Beam */
#about-modal img::after,
#about-modal .about-social-icons a::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
}

/* Trigger Sweep */
#about-modal img:hover::after,
#about-modal .about-social-icons a:hover::after {
    animation: shineSweep 0.8s ease-in-out;
}

@keyframes shineSweep {
    0% {
        left: -150%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 150%;
        opacity: 0;
    }
}

/* Icon Bounciness */
.about-social-icons a i {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.about-social-icons a:hover i {
    transform: scale(1.15) translateY(-2px);
}

/* 2. Text Shimmer Effect */
/* Base Text Transition */
.about-text-ar,
.about-text-en {
    transition: all 0.3s ease;
    display: block;
    /* Ensure width for gradient */
    position: relative;
}

/* Hover State - Light Mode (Dark Text Shimmer) */
#about-modal:not([style*='display: none']) .about-text-ar:hover,
#about-modal:not([style*='display: none']) .about-text-en:hover {
    background: linear-gradient(90deg, #333 0%, #888 45%, #333 55%, #333 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 2s infinite linear;
    cursor: default;
}

/* Hover State - Dark Mode (White Text Shimmer) */
body.dark-mode #about-modal .about-text-ar:hover,
body.dark-mode #about-modal .about-text-en:hover {
    background: linear-gradient(90deg, #fff 0%, #999 45%, #fff 55%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 2s infinite linear;
}

@keyframes textShine {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -150% 0;
    }
}

/* --- FIXES FOR ICONS & LOGO SHINE --- */

/* 1. Logo Wrapper Shine (Replaces img shine) */
.logo-shine-wrapper {
    overflow: hidden;
    /* Necessary for sweep */
}

.logo-shine-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: none;
}


/* Updated: Continuous Slow Shine + Scale on Hover */
.logo-shine-wrapper::after {
    /* Define the animation here to run always */
    animation: shineSweep 3s infinite linear;
    /* Slow continuous loop */
}

.logo-shine-wrapper {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    /* Ensure transform works */
}

/* Hover: Slight Scale Up */
.logo-shine-wrapper:hover {
    transform: scale(1.05);
}

/* Override previous hover animation trigger since it's now always running */
.logo-shine-wrapper:hover::after {
    animation: shineSweep 3s infinite linear;
}

/* 2. Social Icon Fix (Prevent Clipping) */
/* Override previous overflow hidden on anchors if it was set */
#about-modal .about-social-icons a {
    overflow: visible !important;
    /* Allow icon to scale out */
    position: relative;
    /* We move the shine to a pseudo-element INSIDE, but masked? 
       Actually, simpler: Just give padding so icon stays inside. 
    */
    padding: 5px;
    margin: -5px;
    /* Offset margins to keep overall layout similar */
    overflow: hidden !important;
    /* Wait, we need overflow:hidden for the beam. So padding MUST satisfy the scale. */
}

/* The Shine on Icons works because of overflow:hidden. 
   If icon scales 1.15x, and padding is 0, it clips. 
   If we add padding, the container is bigger. 
*/
#about-modal .about-social-icons a {
    padding: 6px !important;
    margin: 0 5px !important;
    /* Adjust gap */
}

/* Ensure no cropping on the icon specifically */
#about-modal .about-social-icons a i {
    transform-origin: center center;
}

/* Cancel any 'overflow: hidden' on the 'i' itself if any */
#about-modal .about-social-icons a i {
    overflow: visible;
}

/* Disable Logo Shine in Dark Mode */
body.dark-mode .logo-shine-wrapper::after {
    display: none !important;
    animation: none !important;
}


/* =========================================
   DARK MODE SIDEBAR CSS (MOBILE & DESKTOP)
   ========================================= */

/* Mobile Sidebar (HC-Offcanvas) Dark Mode */
body.dark-mode .hc-offcanvas-nav .nav-container {
    background-color: rgba(26, 26, 46, 0.98) !important;
    /* Dark Navy Background */
    backdrop-filter: blur(10px) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .hc-offcanvas-nav ul {
    background: transparent !important;
}

body.dark-mode .hc-offcanvas-nav .nav-header {
    background: linear-gradient(135deg, #0e1d59, #1a1a2e) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #333 !important;
}

body.dark-mode .hc-offcanvas-nav .nav-header .nav-title {
    color: #fff !important;
}

/* Menu Items in Dark Mode */
body.dark-mode .hc-offcanvas-nav li.nav-item a {
    background: linear-gradient(90deg, #000412, #191b2e) !important;
    color: #eee !important;
    border: 1px solid #333 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px;
}

body.dark-mode .hc-offcanvas-nav li.nav-item a:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .hc-offcanvas-nav li.nav-item a i {
    color: #0071ef !important;
}

/* Active Item Dark Mode */
body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a {
    background: linear-gradient(90deg, #283e97, #0d1f54) !important;
    color: #fff !important;
    border: 1px solid #b4d3ff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a i {
    background: linear-gradient(135deg, #ffffff 0%, #a1c8ff 70%, #00adff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Mobile Footer/Copyright Dark Mode */
body.dark-mode .hc-offcanvas-nav .menu-header-text {
    border-bottom: 1px solid #333;
}

body.dark-mode .hc-offcanvas-nav .clinic-name {
    color: #aaa !important;
}

body.dark-mode .hc-offcanvas-nav .copyright-nav {
    background-color: #1a1a2e !important;
    border-top: 1px solid #333 !important;
}

body.dark-mode .hc-offcanvas-nav .copyright-item a {
    background: #252538 !important;
    color: #ccc !important;
    border: 1px solid #444 !important;
}

/* Fix for specific About Dev Text in Mobile Menu */
body.dark-mode .about-dev-text {
    color: #fff !important;
}

body.dark-mode .nav-footer-credit {
    border-top: 1px solid #43518f4d !important;
}

body.dark-mode .about-dev-text i {
    color: #fff !important;
}


/* Show Social Icons in Mobile Menu Dark Mode */
body.dark-mode .nav-social-icons {
    display: none !important;
}

body.dark-mode .nav-social-icons i {
    color: #ccc !important;
}

body.dark-mode .nav-social-icons i:hover {
    color: #fff !important;
}


/* Mobile Header Dark Mode Styles */
body.dark-mode .mobile-app-header {
    background-color: #1a1a2e !important;
    /* Dark Background */
    border-bottom: 1px solid #333 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .mobile-app-header .logo .logo-light {
    display: none !important;
}

body.dark-mode .mobile-app-header .logo .logo-dark {
    display: block !important;
    max-height: 50px;
    /* Match standard logo height */
    width: auto;
}

body.dark-mode .mobile-app-header .open-menu {
    background-color: #252538 !important;
    color: #0071ef !important;
    /* Keep blue accent */
    border: 1px solid #333 !important;
}

body.dark-mode .mobile-app-header .open-menu:hover {
    background-color: #333 !important;
}

/* =========================================
   USER REQUESTED UI POLISH (ROUNDED CORNERS)
   ========================================= */

/* 1. Main Content Containers */
.tab-content-area,
.settings-modal .modal-box,
.preview-modal .modal-box,
.about-modal .modal-box {
    border-radius: 12px !important;
    overflow: hidden;
    /* Ensure content obeys radius */
}

/* 2. Inputs & Selects */
.form-control,
select.form-control,
input[type='text'],
input[type='date'],
input[type='number'],
textarea {
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
}

/* 3. Buttons */
.btn {
    border-radius: 8px !important;
    /* Slightly softer buttons */
}

/* 4. Sidebar Items - Add subtle rounding on hover state usually, 
   but since they are full width, maybe round the active indicator side or just the item itself if it had margins.
   Current design has them full width. Let's add specific rounding for non-full width feel if desired, 
   but user asked for 'simple'. Let's round the Sidebar Footer/Header slightly? 
   No, usually internal elements.
*/

/* 5. Tables */
.table-container {
    border-radius: 10px;
    overflow: hidden;
}

/* 6. Header Tools / Action Bar */
.header-tools {
    border-radius: 20px !important;
    /* More pill-shaped */
}

.action-bar {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* 7. Modal Boxes (General) */
.modal-box {
    border-radius: 16px !important;
}

/* 8. Toast/Notifications */
#toast-container .toast {
    border-radius: 8px !important;
}


/* =========================================
   BACKGROUND PATTERN REPLACEMENT
   ========================================= */

/* Apply pattern to main white containers */
.sidebar,
.tab-content-area,
.modal-box,
input.form-control,
select.form-control,
textarea.form-control,
.header-tools,
.settings-modal .modal-box,
.btn-light {
    background-image: url('../images/print_pattern.jpg') !important;
    background-repeat: repeat !important;
    background-size: 300px auto !important;
    /* Larger scale for original pattern */
    background-color: #ffffff !important;
    background-blend-mode: normal;
    /* Normal blend for original look */
}

/* Ensure text on pattern is readable */


/* Fix for Dark Mode: Disable pattern */
body.dark-mode .sidebar,
body.dark-mode .tab-content-area,
body.dark-mode .modal-box,
body.dark-mode .settings-modal .modal-box,
body.dark-mode .header-tools,
body.dark-mode .btn-light {
    background-image: none !important;
    background-color: var(--bg-surface) !important;
}
body.dark-mode input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control {
    background-image: none !important;
    background-color: #edf3ff !important;
    color: #0f172a;
}
body.dark-mode input.form-control::placeholder,
body.dark-mode textarea.form-control::placeholder {
    color: #64748b;
}

/* =========================================
   CREATIVE HOVER EFFECTS (Request: Glitch & Moves)
   ========================================= */



/* Simple Hover Effect (No dimension change) */
.btn:hover {
    filter: brightness(1.1);
    /* Simple lightening */
    transform: translateY(-1px);
    /* Very subtle lift, no layout shift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Save / Update Button (Main) */
#btn-save:hover {
    background-color: #198754;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

/* Specific Delete Button Hover */
table td .btn-danger:hover {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Specific Edit Button Hover */
table td .btn-primary:hover,
table td .btn-info:hover {
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* Ensure Patient Labels/Inputs have NO hover effects */
.p-label:hover,
.p-input:hover {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* =========================================
   11. MOBILE TABLE STYLES
   ========================================= */
@media screen and (max-width: 768px) {
    .drug-table thead {
        display: none;
    }

    .drug-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    .drug-table tbody td {
        display: block;
        border: none;
        padding: 5px 0;
        text-align: right;
    }

    /* Index Column */
    .drug-table tbody td:nth-child(1) {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #253985;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        font-size: 12px;
        color: #ffffff;
        padding: 0;
    }

    /* Drug Name */
    .drug-table tbody td:nth-child(2) {
        font-size: 1.1rem;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 10px;
        padding-bottom: 10px;
        padding-right: 0;
    }

    /* Details (Dose, Freq, Dur) */
    .drug-table tbody td:nth-child(3),
    .drug-table tbody td:nth-child(4),
    .drug-table tbody td:nth-child(5) {
        display: inline-block;
        margin-left: 10px;
        background: #f9f9f9;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.9rem;
    }

    /* Actions */
    .drug-table tbody td:nth-child(6) {
        margin-top: 15px;
        text-align: left;
        border-top: 1px dashed #eee;
        padding-top: 10px;
    }

}

/* =========================================
   12. ANALYTICS DASHBOARD - PROFESSIONAL
   ========================================= */

/* 12.1 Section Headers */
#analytics-dashboard h4 {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    border-right: 4px solid var(--primary);
    padding-right: 15px;
    margin-bottom: 25px;
}

#analytics-dashboard h5,
#analytics-dashboard h6 {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    color: #555;
    position: relative;
}

/* 12.2 Stats Cards */
.analytics-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-bottom: 3px solid transparent;
    overflow: visible;
    /* Ensure content is never cut off */
    min-height: 100px;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card:nth-child(1) {
    border-color: #0d6efd;
}

/* Rx */
.stat-card:nth-child(2) {
    border-color: #00897b;
}

/* Reports */
.stat-card:nth-child(3) {
    border-color: #0dcaf0;
}

/* Visits */
.stat-card:nth-child(4) {
    border-color: #ffc107;
}

/* Bookings */
.stat-card:nth-child(5) {
    border-color: #9c27b0;
}

/* Age */
.stat-card:nth-child(6) {
    border-color: #fd7e14;
}





.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.stat-info h3 {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: 800;
    color: #2c3e50;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stat-info span {
    font-size: clamp(10px, 1.1vw, 13px);
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 12.3 Comparison Tool */
.comparison-container {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f0;
}

.comparison-inputs {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed #ced4da;
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 15px;
    /* Reduced gap */
    align-items: flex-end;
    /* Align bottom to match inputs */
    justify-content: center;
}

.comp-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 150px;
    /* Allow shrinking/growing with min-width */
    min-width: 140px;
}

.comp-group label {
    font-size: 13px;
    font-weight: bold;
    color: #495057;
    margin-bottom: 2px;
}

.comp-vs {
    font-weight: 900;
    color: #adb5bd;
    font-size: 16px;
    padding-bottom: 10px;
    /* Align with input center approx */
    padding-top: 0;
}

/* Specific button adjustment */
.comparison-inputs .btn {
    height: 38px;
    margin-top: 0;
    flex: 0 0 auto;
}

/* Professional Table */
.comp-table {
    width: 100%;
    margin-top: 30px;
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 0 0 1px #e9ecef;
    /* Border look */
}

.comp-table thead tr {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
}

.comp-table th {
    padding: 10px;
    /* Reduced from 15px */
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
}

.comp-table td {
    padding: 10px;
    /* Reduced from 15px */
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
    color: #333;
    font-size: 14px;
}

.comp-table tbody tr:last-child td {
    border-bottom: none;
}

.comp-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}

.comp-table tbody tr:hover {
    background-color: #f1f3f5;
}

.comp-val-win {
    color: #198754;
    font-weight: 700;
    background: rgba(25, 135, 84, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.comp-val-loss {
    color: #dc3545;
    font-weight: 700;
    background: rgba(220, 53, 69, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* 12.4 Charts */
.charts-row {
    margin-top: 30px;
}

.chart-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.simple-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 220px;
    /* Increased height */
    padding: 35px 10px 0 10px;
    /* Increased top padding */
    border-bottom: 2px solid #eee;
    position: relative;
    /* Clean grid lines pattern */
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 39px,
            #f8f9fa 40px);
}

.chart-bar-group {
    flex: 1;
    /* Distribute evenly */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    justify-content: flex-end;
}

.chart-bar {
    width: 60%;
    /* Adjusted width */
    max-width: 30px;
    background: var(--primary);
    border-radius: 6px 6px 0 0;
    transition: all 0.3s ease;
    min-height: 4px;
    position: relative;
    opacity: 0.9;
}

/* Hover Effect: Color Change */
.chart-bar:hover {
    opacity: 1;
    background: #0a58ca;
    /* Darker blue */
    transform: translateY(-2px);
    /* Lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.chart-label {
    margin-top: 10px;
    font-size: 11px;
    color: #6c757d;
    font-weight: 600;
    text-align: center;
}

/* Permanent Value Label (Replaces Tooltip) */
.chart-bar::after {
    content: attr(data-val);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #444;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Consolas', sans-serif;
    pointer-events: none;
}

/* Mobile Adjustments for Analytics */
@media screen and (max-width: 768px) {
    .analytics-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
        /* Smaller padding */
        flex-direction: column;
        /* Stack icon and text */
        text-align: center;
        gap: 10px;
    }

    .stat-icon {
        margin: 0 auto;
    }

    .stat-info h3 {
        font-size: 20px;
    }

    .comparison-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        /* Aggressively reduced */
    }

    .comp-group {
        width: 100%;
        margin-bottom: 0 !important;
        flex: 0 0 auto;
        /* Stop forcing height/width */
        min-height: 0;
        /* Reset constraints */
    }

    .comp-group input {
        margin-bottom: 0 !important;
    }

    .comp-vs {
        display: none;
    }

    .charts-row {
        grid-template-columns: 1fr !important;
    }

    .chart-label {
        font-size: 9px;
    }

    /* Ensure table scrolls */
    /* Ensure table scrolls */
    #comparison-results {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 10px;
        /* Reduced from 15px */
        border: 1px solid #eee;
        /* Visual cue */
        border-radius: 8px;
    }

    #comparison-results .comp-table {
        margin-top: 0 !important;
        /* Remove the desktop 30px margin */
    }

    /* Reduce table spacing on mobile */
    /* Reduce table spacing on mobile */
    #comparison-results .comp-table th,
    #comparison-results .comp-table td {
        padding: 5px 4px;
        /* Tight padding */
        font-size: 11px;
        line-height: 1.1;
    }

    /* Make chart cleaner on small screens */
    .simple-bar-chart {
        padding: 35px 5px 0 5px;
    }
}

/* 12.5 New Grid Layout (Compact View) */
/* 12.5 New Grid Layout (Compact View) */
.dashboard-lower-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin-top: 25px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Flex Items behaving like grid but expandable */
.comparison-container-wrapper,
.dashboard-column-wrapper {
    flex: 1 1 450px;
    /* Base width large, can grow/shrink */
    min-width: 0;
    max-width: 100%;
}

.charts-container-wrapper {
    flex: 1 1 650px;
    /* Base width larger */
    min-width: 0;
    max-width: 100%;
}

.dashboard-lower-section>.common-dashboard-card {
    flex: 1 1 100%;
    width: 100%;
}

@media screen and (max-width: 1300px) {

    .dashboard-lower-section>.comparison-container-wrapper,
    .dashboard-lower-section>.dashboard-column-wrapper,
    .dashboard-lower-section>.charts-container-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

.common-dashboard-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.analytics-top-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 16px;
}

/* ثلاثة أعمدة بعد ملخص الشهر: توزيع البطاقات (ويب/كمبيوتر) — ممتدة لعرض الصفحة كامل مثل ملخص الشهر */
.analytics-two-cols,
.analytics-three-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.analytics-two-cols .analytics-col-1,
.analytics-two-cols .analytics-col-2,
.analytics-col-1,
.analytics-col-2,
.analytics-col-3 {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.analytics-col-1 .common-dashboard-card,
.analytics-col-1 .charts-row,
.analytics-col-2 .common-dashboard-card,
.analytics-col-2 .charts-row,
.analytics-col-3 .common-dashboard-card,
.analytics-col-3 .charts-row {
    margin-bottom: 0;
}

.analytics-three-cols .analytics-col-1 > *:not(:first-child),
.analytics-three-cols .analytics-col-2 > *:not(:first-child),
.analytics-three-cols .analytics-col-3 > *:not(:first-child) {
    margin-top: 16px;
}

/* تابلت بورتريه وموبايل بورتريه: عمود واحد بعرض الصفحة — تعبئة الفراغ، لا مكان فارغ لأعمدة 2 و 3 */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait),
       screen and (max-width: 767px) {
    body.analytics-tablet-portrait #analytics-three-cols-wrapper.analytics-three-cols {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
    }
    body.analytics-tablet-portrait .analytics-col-1 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
        width: 100%;
        max-width: 100%;
    }
    body.analytics-tablet-portrait .analytics-col-1 > .tablet-full {
        grid-column: 1 / -1;
    }
    body.analytics-tablet-portrait .analytics-col-1 > .tablet-half {
        grid-column: span 1;
        min-width: 0;
    }
}

/* موبايل فقط: بعد ملخص هذا الشهر كل بطاقة في سطر (عمود واحد) */
@media screen and (max-width: 767px) {
    body.analytics-mobile-cols .analytics-col-1 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    body.analytics-mobile-cols .analytics-col-1 > .tablet-half {
        grid-column: 1 / -1 !important;
    }
    /* Normalize mobile analytics spacing: one consistent spacing between all cards */
    body.analytics-mobile-cols .analytics-col-1 > * {
        margin: 0 !important;
    }
    body.analytics-mobile-cols .analytics-col-1 > * + * {
        margin-top: 10px !important;
    }
    /* Hide empty chart row wrappers left after JS reordering on mobile */
    body.analytics-mobile-cols #analytics-charts-row-ratio:empty,
    body.analytics-mobile-cols #analytics-charts-row-age-dist:empty,
    body.analytics-mobile-cols #analytics-charts-row-finance:empty,
    body.analytics-mobile-cols #analytics-charts-row-1:empty,
    body.analytics-mobile-cols #analytics-charts-row-lab:empty,
    body.analytics-mobile-cols #analytics-charts-row-lab-activity:empty,
    body.analytics-mobile-cols #analytics-charts-row-nursing:empty,
    body.analytics-mobile-cols #analytics-charts-row-referrals:empty {
        display: none !important;
    }
}

/* رسبونسف الإحصائيات على الموبايل — منع overflow وتحسين العرض */
@media screen and (max-width: 767px) {
    #analytics-dashboard,
    #analytics-three-cols-wrapper,
    .analytics-three-cols {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.analytics-mobile-cols .dashboard-lower-section,
    body.analytics-mobile-cols #analytics-three-cols-wrapper,
    body.analytics-mobile-cols .analytics-col-1 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* Make every analytics card wrapper equal width on mobile (same as bookings calendar card) */
    body.analytics-mobile-cols .analytics-col-1 {
        align-items: stretch !important;
    }
    body.analytics-mobile-cols .analytics-col-1 > *,
    body.analytics-mobile-cols .analytics-col-1 .charts-row,
    body.analytics-mobile-cols .analytics-col-1 .charts-row > *,
    body.analytics-mobile-cols .analytics-col-1 .common-dashboard-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }
    #analytics-dashboard .common-dashboard-card,
    .analytics-col-1 .common-dashboard-card,
    .analytics-col-1 .charts-row,
    .analytics-col-1 > [id] {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #analytics-dashboard .common-dashboard-card {
        padding: 12px 10px !important;
    }
    .analytics-col-1 .common-dashboard-card {
        padding: 12px 10px !important;
    }
    .analytics-three-cols .analytics-col-1 {
        padding: 0 !important;
        gap: 10px !important;
    }
    /* الرسوم البيانية: منع الخروج عن العرض */
    #analytics-dashboard .chart-container,
    .analytics-col-1 .chart-container {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    #analytics-dashboard .chart-container canvas,
    .analytics-col-1 .chart-container canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    /* صفوف الرسوم: عمود واحد على الموبايل */
    #analytics-dashboard .charts-row,
    .analytics-col-1 .charts-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    /* ملخص الشهر: شبكة أصغر وهامش أقل */
    #month-summary-card {
        padding: 10px 8px !important;
    }
    #month-summary-card .analytics-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    #month-summary-card .stat-card {
        padding: 8px 6px !important;
        min-width: 0 !important;
    }
    #month-summary-card .stat-info h3 {
        font-size: 14px !important;
    }
    #month-summary-card .stat-info span {
        font-size: 10px !important;
    }
    /* جدول المقارنة: تمرير أفقي إن لزم */
    #comparison-card-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
    }
    #comparison-card-container .card-content,
    #comparison-card-container table {
        min-width: 0 !important;
    }
    /* تحليل الحالات وأحدث الحركات: منع كسر العرض */
    #chart-recent-patients-card,
    #chart-recent-activities-card,
    #chart-top-visitors-card {
        min-width: 0 !important;
    }
    .recent-patient-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 6px !important;
    }
    .rp-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 12px !important;
    }
}

@media screen and (max-width: 1200px) {
    .analytics-two-cols,
    .analytics-three-cols {
        grid-template-columns: 1fr 1fr;
    }
    .analytics-three-cols .analytics-col-3 {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 768px) {
    .analytics-two-cols,
    .analytics-three-cols {
        grid-template-columns: 1fr;
    }
    .analytics-three-cols .analytics-col-3 {
        grid-column: 1;
    }
}

/* ========== تابلت لاندسكيب فقط (ليس الكمبيوتر): عرض 769–1400px ========== */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    /* منطقة الإحصائيات كلها داخل الدف، لا overflow أفقي — ملخص هذا الشهر يبقى كما كان (بدون تعديل) */
    body.tab-is-analytics #analytics-top-card,
    body.tab-is-analytics #analytics-dashboard,
    body.tab-is-analytics .dashboard-lower-section {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    /* منطقة البطاقات: عمودان فقط */
    #analytics-three-cols-wrapper.analytics-three-cols {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(10px, 1.5vw, 18px) !important;
        align-items: start !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .analytics-three-cols .analytics-col-1,
    .analytics-three-cols .analytics-col-2,
    .analytics-three-cols .analytics-col-3 {
        display: contents !important;
    }
    /* مقارنة الفترات: صف كامل أولاً */
    #comparison-card-container {
        grid-column: 1 / -1 !important;
        order: -2 !important;
    }
    /* عمود 1 = تحليل الحالات: رزنامة، تحليل الحالات، الأكثر زيارة، نسبة الزيارات، توزيع الأعمار، أحدث الحركات، الأداء المالي */
    #analytics-smart-calendar-card,
    #chart-recent-patients-card,
    #chart-top-visitors-card,
    #analytics-charts-row-ratio,
    #analytics-charts-row-age-dist,
    #chart-recent-activities-card,
    #analytics-charts-row-finance {
        grid-column: 1 !important;
        order: 1 !important;
    }
    /* عمود 2 = نشاط الفحوصات: نشاط الفحوصات، أداء المختبر، التقارير والوصفات، نشاط المختبر، نشاط التمريض، الإحالات */
    #analytics-charts-row-lab,
    #analytics-charts-row-1,
    #chart-rx-rep-ref-card,
    #analytics-charts-row-lab-activity,
    #analytics-charts-row-nursing,
    #analytics-charts-row-referrals {
        grid-column: 2 !important;
        order: 2 !important;
    }
    #analytics-three-cols-wrapper .common-dashboard-card,
    #analytics-three-cols-wrapper .charts-row {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #analytics-three-cols-wrapper .common-dashboard-card {
        padding: clamp(10px, 1.2vw, 20px) !important;
    }
    #analytics-three-cols-wrapper .charts-row {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }
    /* الرسوم: حاوية بارتفاع ثابت والكانفاس يملأها (full & fit) */
    #analytics-three-cols-wrapper .chart-container {
        min-width: 0 !important;
        max-width: 100% !important;
        height: clamp(200px, 26vh, 300px) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    #analytics-three-cols-wrapper .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: contain !important;
    }
    /* جدول المقارنة: ظهور كامل بدون قص (تابلت لاندسكيب) */
    #comparison-card-container {
        overflow: visible !important;
    }
    #comparison-card-container .card-content {
        overflow: visible !important;
        max-width: 100% !important;
    }
    #comparison-results {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: none !important;
        display: block !important;
    }
    #recent-activities-list,
    #recent-patients-list {
        max-height: clamp(200px, 35vh, 420px) !important;
    }
    /* عناوين وأزرار الفلتر: مرنة ولا تخرج عن الدف */
    #analytics-three-cols-wrapper .chart-header-flex,
    #analytics-three-cols-wrapper .analytics-header {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #analytics-three-cols-wrapper .chart-header-flex .analytics-header {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    #analytics-three-cols-wrapper .chart-filter-select,
    #analytics-three-cols-wrapper .form-select.form-select-sm {
        max-width: 100% !important;
    }
    /* المحتوى لا يتجاوز الشاشة — يبقى ظاهراً مع تمرير داخلي (تابلت لاندسكيب فقط) */
    body.tab-is-analytics .tab-content-area {
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* تابلت لاندسكيب + ارتفاع قصير (مثل 1400×900 أو 1280×853): جدول المقارنة كامل + كانفاس full & fit */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) and (max-height: 900px) {
    #comparison-card-container,
    #comparison-card-container .card-content,
    #comparison-results {
        overflow: visible !important;
        max-height: none !important;
    }
    #comparison-results .comp-table th,
    #comparison-results .comp-table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    #analytics-three-cols-wrapper .chart-container {
        height: 220px !important;
        min-height: 200px !important;
        max-height: 240px !important;
    }
    #analytics-three-cols-wrapper .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    #analytics-three-cols-wrapper .common-dashboard-card {
        padding: 10px 12px !important;
    }
    #analytics-three-cols-wrapper .common-dashboard-card .chart-header-flex {
        margin-bottom: 8px !important;
    }
    #recent-activities-list,
    #recent-patients-list {
        max-height: min(240px, 28vh) !important;
    }
    #month-summary-card .analytics-cards-grid {
        gap: 8px !important;
    }
}

/* ========== تابلت بورتريت + لاندسكيب (769–1400): منع تداخل النص في بطاقات ملخص الشهر وتحسين الأزرار ========== */
@media (min-width: 769px) and (max-width: 1400px) {
    #month-summary-card .stat-card {
        min-width: 0 !important;
        padding: 10px 8px !important;
    }
    #month-summary-card .stat-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    #month-summary-card .stat-info h3 {
        font-size: 13px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.25 !important;
    }
    #month-summary-card .stat-info span {
        font-size: 10px !important;
    }
    #month-summary-card .stat-icon {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important;
    }
}
@media (min-width: 769px) and (orientation: landscape) and (max-width: 1400px) {
    /* ملخص هذا الشهر في اللاندسكيب: 6 أعمدة في سطرين (6 في 2) */
    #month-summary-card .analytics-cards-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 10px !important;
    }
    #month-summary-card .stat-card {
        min-width: 0 !important;
        padding: 10px 8px !important;
    }
    #month-summary-card .stat-info h3 {
        font-size: 12px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    #month-summary-card .stat-info span {
        font-size: 10px !important;
    }
    /* صف التحكم الزمني وصف العيون: سطر واحد مع سكرول يمين/يسار كما في الموبايل */
    .analytics-period-box .analytics-controls-row,
    .analytics-toggles-box .analytics-controls-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
    }
    .analytics-period-box .analytics-controls-row::-webkit-scrollbar,
    .analytics-toggles-box .analytics-controls-row::-webkit-scrollbar {
        display: none !important;
    }
    .analytics-period-box .analytics-controls-row .btn,
    .analytics-toggles-box .analytics-controls-row .btn {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
    .analytics-period-box .btn-sm,
    .analytics-toggles-box .btn-sm {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}
@media (min-width: 769px) and (orientation: portrait) and (max-width: 1400px) {
    /* ملخص هذا الشهر في البورتريت: 4 في سطر (4 في 3 أسطر) */
    #month-summary-card .analytics-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    #month-summary-card .stat-info h3 {
        font-size: 13px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    /* صف التحكم الزمني وصف العيون: سطر واحد مع سكرول يمين/يسار كما في الموبايل */
    .analytics-period-box .analytics-controls-row,
    .analytics-toggles-box .analytics-controls-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
    }
    .analytics-period-box .analytics-controls-row::-webkit-scrollbar,
    .analytics-toggles-box .analytics-controls-row::-webkit-scrollbar {
        display: none !important;
    }
    .analytics-period-box .analytics-controls-row .btn,
    .analytics-toggles-box .analytics-controls-row .btn {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* عند تفعيل كلاس التابلت من JS (متصفح أو APK) — نفس تحسينات البطاقات والأزرار */
body.is-apk-tablet #month-summary-card .stat-card {
    min-width: 0 !important;
}
body.is-apk-tablet #month-summary-card .stat-info {
    min-width: 0 !important;
    overflow: hidden !important;
}
body.is-apk-tablet #month-summary-card .stat-info h3 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
body.is-apk-landscape #month-summary-card .analytics-cards-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 10px !important;
}
body.is-apk-landscape .common-dashboard-card {
    margin-bottom: 10px !important;
}
body.is-apk-landscape .analytics-period-box .analytics-controls-row,
body.is-apk-landscape .analytics-toggles-box .analytics-controls-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
}
body.is-apk-landscape .analytics-period-box .analytics-controls-row::-webkit-scrollbar,
body.is-apk-landscape .analytics-toggles-box .analytics-controls-row::-webkit-scrollbar {
    display: none !important;
}
body.is-apk-landscape .analytics-period-box .analytics-controls-row .btn,
body.is-apk-landscape .analytics-toggles-box .analytics-controls-row .btn {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}
body.is-apk-portrait #month-summary-card .analytics-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* نفس المعالجة عند التابلت لاندسكيب عبر التطبيق (is-apk-landscape) بارتفاع قصير — كانفاس full & fit */
@media screen and (max-height: 900px) {
    body.is-apk-landscape .chart-container {
        height: 220px !important;
        min-height: 200px !important;
        max-height: 240px !important;
        overflow: hidden !important;
    }
    body.is-apk-landscape .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    body.is-apk-landscape .analytics-flat-grid .common-dashboard-card {
        padding: 10px 12px !important;
    }
    body.is-apk-landscape #recent-activities-list,
    body.is-apk-landscape #recent-patients-list {
        max-height: min(240px, 28vh) !important;
    }
}

.charts-row {
    margin-top: 0;
    display: grid;
    /* Auto-fit: side-by-side if space allows (e.g. full width), stacked if narrow */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.charts-row+.charts-row {
    margin-top: 16px;
}

/* سطر واحد بعرض كامل (الأداء المالي، أداء المختبر، نشاط التمريض، نشاط المختبر) - ويب/كمبيوتر */
.charts-row-single {
    grid-template-columns: 1fr !important;
}

/* Recent Patients List */
.recent-patient-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.2s ease;
    border-radius: 8px;
    margin-bottom: 2px;
}

.recent-patient-row:hover {
    background: rgba(59, 130, 246, 0.05);
}

.recent-patient-row:last-child {
    border-bottom: none;
}

/* بطاقة أحدث الحركات — أيقونات بخلفية داكنة في الدارك مود */
body.dark-mode #chart-recent-activities-card .recent-activity-icon {
    background: #334155 !important;
    color: #e2e8f0 !important;
    border: 1px solid #475569;
}
body.dark-mode #chart-recent-activities-card .recent-activity-row:hover {
    background: rgba(51, 65, 85, 0.4);
}

.rp-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
}

.rp-info {
    flex: 1;
    min-width: 0;
}

.rp-name {
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.rp-date {
    font-size: 11px;
    color: #94a3b8;
    font-family: 'Cairo', sans-serif;
}

.rp-badge {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
}

.rp-count {
    font-family: 'Cairo', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #475569;
    text-align: center;
    min-width: 50px;
}

.rp-count small {
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}

/* Quad row: 4 charts in one line */
.charts-row-quad {
    grid-template-columns: repeat(4, 1fr) !important;
}

.charts-row-quad .common-dashboard-card {
    min-width: 0;
}

.charts-row-quad .analytics-header {
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.charts-row-quad .chart-filter-select {
    font-size: 11px !important;
    padding: 2px 6px !important;
}



/* Adjust Chart Size for vertical stacking - keep it tall enough for labels */
.simple-bar-chart {
    height: 200px;
    /* Restored height */
}



@media screen and (max-width: 992px) {
    .dashboard-lower-section {
        grid-template-columns: 1fr;
        /* Stack columns on tablet/mobile */
    }

    .charts-row {
        grid-template-columns: 1fr 1fr;
        /* Side-by-side charts on tablet when stacked below comparisons */
    }

    .charts-row-quad {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    .charts-row {
        grid-template-columns: 1fr !important;
    }

    .analytics-top-charts-grid {
        grid-template-columns: 1fr !important;
    }

    .charts-row-quad {
        grid-template-columns: 1fr !important;
    }
}

/* Tablet tweaks to match JS isMobile breakpoint */
@media screen and (max-width: 992px) {
    .analytics-top-charts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   13. DARK MODE FOR ANALYTICS DASHBOARD
   ========================================= */
body.dark-mode #analytics-dashboard h4 {
    color: #fff;
    border-color: #0d6efd;
}

body.dark-mode #analytics-dashboard h5,
body.dark-mode #analytics-dashboard h6 {
    color: #ccc;
}

body.dark-mode .common-dashboard-card,
body.dark-mode .stat-card,
body.dark-mode .comparison-container,
body.dark-mode .chart-card {
    background-color: #252538 !important;
    /* Dark Card Surface */
    border-color: #333 !important;
    box-shadow: none !important;
    color: #eee;
}

body.dark-mode .stat-card {
    border: 1px solid #333;
}

body.dark-mode .stat-info h3 {
    color: #fff;
}

body.dark-mode .stat-info span {
    color: #aaa;
}

body.dark-mode .comparison-inputs {
    background-color: #1a1a2e !important;
    border-color: #444;
}

body.dark-mode .comparison-inputs label {
    color: #ccc;
}

body.dark-mode .comp-vs {
    color: #666;
}

body.dark-mode .simple-bar-chart {
    border-bottom-color: #444;
    background: repeating-linear-gradient(0deg, transparent, transparent 39px, #2a2a3d 40px);
}

body.dark-mode .chart-label {
    color: #ccc;
}

body.dark-mode .chart-bar::after {
    color: #fff;
}

body.dark-mode .comp-table th {
    background: #1a1a2e;
    color: #fff;
    border-bottom-color: #444;
}

body.dark-mode .comp-table td {
    color: #eee;
    border-bottom-color: #333;
}

body.dark-mode .comp-table tbody tr:nth-child(even) {
    background-color: #2a2a3d;
    /* Dark Striping */
}

body.dark-mode .comp-table tbody tr:hover {
    background-color: #333;
}

/* مقارنة الفترات: حجم خط حقلي الشهر لظهور السنة كاملة */
#comp-month-a,
#comp-month-b {
    font-size: 13px !important;
}
@media screen and (max-width: 768px) {
    #comp-month-a,
    #comp-month-b {
        font-size: 11px !important;
        max-width: 100%;
    }
}

/* طباعة تشخيص/أدوية (وصفة) وطباعة السعر (تقرير): نفس التصميم (لايت مود) */
.print-toggle-setting-body {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    height: 48px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: background 0.2s, border-color 0.2s;
}
#tab-prescription .report-field-item.rx-print-item input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    accent-color: #3b82f6 !important;
    border-radius: 4px !important;
}

/* دارك مود في كل الأماكن: تصميم أزرار مارك — الوصفة، الإحالات، التقرير الطبي */
body.dark-mode #rx-show-diag-print,
body.dark-mode #rx-show-drugs-print,
body.dark-mode #ref-show-diag-print,
body.dark-mode #ref-show-note-print,
body.dark-mode #ref-show-third-print,
body.dark-mode #rep-show-price-print {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: 2px solid #475569 !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
body.dark-mode #rx-show-diag-print:checked,
body.dark-mode #rx-show-drugs-print:checked,
body.dark-mode #ref-show-diag-print:checked,
body.dark-mode #ref-show-note-print:checked,
body.dark-mode #ref-show-third-print:checked,
body.dark-mode #rep-show-price-print:checked {
    background-color: #1e3a8a !important;
    border-color: #3b82f6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* =========================================
   14. MOBILE COMPACT FIXES (FINAL)
   ========================================= */
@media screen and (max-width: 768px) {

    /* ========== دارك مود على الموبايل فقط — كل التعديلات المطلوبة ========== */
    body.dark-mode #rx-show-drugs-print,
    body.dark-mode #rx-show-diag-print,
    body.dark-mode #rep-show-price-print,
    body.dark-mode #ref-show-third-print,
    body.dark-mode #ref-show-note-print,
    body.dark-mode #ref-show-diag-print {
        accent-color: #fff !important;
        filter: brightness(1.2);
    }
    body.dark-mode #tab-report .report-field-item .setting-title span,
    body.dark-mode #lbl-rep-to-ui,
    body.dark-mode #lbl-rep-price-ui,
    body.dark-mode #lbl-rep-print-price-ui,
    body.dark-mode #tab-referrals .report-field-item .setting-title span,
    body.dark-mode #tab-referrals .print-toggles-wrapper .setting-title span {
        color: #fff !important;
    }
    body.dark-mode #tab-records .clinic-table.records-table td div[style*="font-size: 10px"] {
        color: #cbd5e1 !important;
    }
    body.dark-mode #ref-ext-toolbar svg,
    body.dark-mode #ref-ext-toolbar .ql-direction {
        color: #e2e8f0 !important;
    }
    body.dark-mode #ref-ext-toolbar .ql-direction:hover {
        color: #38bdf8 !important;
    }
    body.dark-mode .comp-val-win {
        color: #86efac !important;
        background: rgba(34, 197, 94, 0.25) !important;
    }
    body.dark-mode .comp-val-loss {
        color: #fca5a5 !important;
        background: rgba(239, 68, 68, 0.25) !important;
    }
    body.dark-mode #ch-add-price {
        color: #fff !important;
        background-color: transparent !important;
    }
    body.dark-mode #fin-view-report .summary-stat-card .card-label {
        color: #fff !important;
    }
    body.dark-mode #fin-view-report .summary-stat-card .card-value,
    body.dark-mode #fin-view-report #rep-total-revenues,
    body.dark-mode #fin-view-report #rep-total-expenses,
    body.dark-mode #fin-view-report #rep-net-balance {
        color: #e2e8f0 !important;
    }
    body.dark-mode #fin-view-report #report-table-body tr td {
        background-color: #1a2744 !important;
        color: #e2e8f0 !important;
        border-color: #334155 !important;
    }
    body.dark-mode #fin-view-report #report-table-body tr.finance-total-row td {
        background-color: #1e293b !important;
        color: #fff !important;
    }
    body.dark-mode .print-toggle-setting-body {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
    body.dark-mode #tab-prescription .report-header-row-premium .setting-title span {
        color: #fff !important;
    }
    body.dark-mode #tab-patients #patients-table-body-main tr td {
        color: #e2e8f0 !important;
    }
    body.dark-mode #tab-patients #patients-table-body-main tr td:nth-child(2),
    body.dark-mode #tab-patients #patients-table-body-main tr td[style*="color:#1f3aa8"],
    body.dark-mode #tab-patients #patients-table-body-main tr td[style*="color: rgb(31, 58, 168)"] {
        color: #fff !important;
    }
body.dark-mode .price-input,
body.dark-mode #ch-add-price {
        color: #0f172a !important;
    }
    body.dark-mode #n-input-price,
    body.dark-mode #nurse-input-price {
        color: #ffffff !important;
    }
    body.dark-mode .price-input::placeholder {
        color: #64748b !important;
    }
    body.dark-mode #n-input-price {
        background-color: #edf3ff !important;
    }
    body.dark-mode #clinic-settings-modal .holiday-selector-grid {
        color: #e2e8f0 !important;
    }
    body.dark-mode #clinic-settings-modal #new-holiday-date {
        color: #0f172a !important;
        background-color: #edf3ff !important;
        border-color: #475569 !important;
    }
    body.dark-mode #clinic-settings-modal .modal-header-custom i.icofont-island-alt,
    body.dark-mode #clinic-settings-modal .modal-header-custom .text-primary {
        color: var(--primary) !important;
        color: #38bdf8 !important;
    }
    body.dark-mode #tab-report #rep-price,
    body.dark-mode #tab-report .modern-price-input input#rep-price {
        border-color: #334155 !important;
        background-color: #edf3ff !important;
        color: #0f172a !important;
    }
    body.dark-mode #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label {
        color: #fff !important;
    }
    body.dark-mode #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
        color: #e2e8f0 !important;
    }
    body.dark-mode #tab-nursing .clinic-table td:first-child,
    body.dark-mode #tab-lab .clinic-table td:first-child,
    body.dark-mode #tab-patients .clinic-table td:first-child,
    body.dark-mode #tab-records .clinic-table.records-table td:first-child,
    body.dark-mode #tab-checkup .clinic-table td:first-child {
        background: linear-gradient(135deg, #1e3a8a 0%, #1f3aa8 50%, #0f172a 100%) !important;
        color: #e2e8f0 !important;
        border-radius: 50% !important;
        font-weight: bold !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.dark-mode #tab-bookings #bookings-table-body tr td.text-primary {
        background: linear-gradient(135deg, #1e3a8a 0%, #1f3aa8 50%, #2563eb 100%) !important;
        color: #fff !important;
        border-color: #334155 !important;
    }
    body.dark-mode #bookings-table-footer .d-flex.align-items-center button {
        background: #213d7d !important;
        color: #fff !important;
        border-color: #334155 !important;
    }
    body.dark-mode #bookings-smart-cal-picker {
        color: #1e293b !important;
        background-color: #e2e8f0 !important;
        border-color: #94a3b8 !important;
    }
    body.dark-mode #bookings-smart-cal-picker::-webkit-calendar-picker-indicator {
        filter: brightness(0);
        opacity: 1;
    }
    body.dark-mode .att-status-badge[data-status="present"] {
        background: linear-gradient(135deg, #14532d 0%, #166534 50%, #0f172a 100%) !important;
        color: #86efac !important;
    }
    body.dark-mode .att-status-badge[data-status="present"] span,
    body.dark-mode .att-status-badge[data-status="present"] i {
        color: #86efac !important;
    }
    body.dark-mode .att-status-badge[data-status="absent"] {
        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #0f172a 100%) !important;
        color: #fca5a5 !important;
    }
    body.dark-mode .att-status-badge[data-status="absent"] span,
    body.dark-mode .att-status-badge[data-status="absent"] i {
        color: #fca5a5 !important;
    }
    body.dark-mode .att-status-badge[data-status="late"] {
        background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #0f172a 100%) !important;
        color: #fcd34d !important;
    }
    body.dark-mode .att-status-badge[data-status="late"] span,
    body.dark-mode .att-status-badge[data-status="late"] i {
        color: #fcd34d !important;
    }
    body.dark-mode .att-status-badge[data-status="leave"] {
        background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #0f172a 100%) !important;
        color: #a5b4fc !important;
    }
    body.dark-mode .att-status-badge[data-status="leave"] span,
    body.dark-mode .att-status-badge[data-status="leave"] i {
        color: #a5b4fc !important;
    }
    body.dark-mode .att-status-badge[data-status="pending"] {
        background: linear-gradient(135deg, #334155 0%, #475569 50%, #0f172a 100%) !important;
        color: #94a3b8 !important;
    }
    body.dark-mode .att-status-badge[data-status="pending"] span,
    body.dark-mode .att-status-badge[data-status="pending"] i {
        color: #94a3b8 !important;
    }

    /* Super compact rows for comparison table */
    #comparison-results .comp-table th,
    #comparison-results .comp-table td {
        padding: 4px 5px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        height: 25px !important;
        /* Force small height */
        vertical-align: middle;
    }

    #comparison-results .comp-table td {
        white-space: normal;
        /* Allow some wrap if needed but keep compact */
    }

    #comparison-results .comp-val-win,
    #comparison-results .comp-val-loss {
        padding: 0 4px;
        font-size: 10px;
    }
}

/* =========================================
   15. INTERACTIVE ANALYTICS & TOGGLERS
   ========================================= */
.clickable-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.clickable-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-card {
    position: relative;
    /* For toggler */
}

.card-toggler {
    position: absolute;
    top: 8px;
    left: 8px;
    /* RTL layout: top-left */
    font-size: 14px;
    padding: 2px;
    color: #aeaeae;
    cursor: pointer;
    z-index: 5;
    opacity: 0.6;
    transition: all 0.2s;
}

.card-toggler:hover {
    color: var(--primary);
    opacity: 1;
}

/* Hidden state classes */
.card-content-hidden {
    display: none !important;
}

/* Minimized stat card style */
.stat-card.minimized {
    padding: 15px;
    justify-content: center;
    align-items: center;
    height: 50px;
    min-height: unset;
}

.stat-card.minimized .stat-icon,
.stat-card.minimized .stat-info {
    display: none;
}

/* Dark Mode Sequence Fix */
body.dark-mode #records-table-body td:first-child {
    color: #fff !important;
    /* Make sequence number white */
    font-weight: 700;
}

body.dark-mode .card-toggler {
    color: #666;
}

body.dark-mode .card-toggler:hover {
    color: #fff;
}

/* =========================================
   16. ANALYTICS CONTROL PANEL
   ========================================= */
.analytics-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.analytics-controls-period { }
.analytics-controls-toggles { }

/* دفّ الفلتر الزمني – مربع مستقل بذاته */
.analytics-period-box {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(241, 245, 249, 0.8);
    margin-bottom: 0;
}
.analytics-period-box .analytics-controls-row { margin: 0; }
body.dark-mode .analytics-period-box {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
}

/* دفّ العيون (إظهار/إخفاء البطاقات) – مربع مستقل بذاته */
.analytics-toggles-box {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 250, 252, 0.9);
    margin-bottom: 0;
}
.analytics-toggles-box .analytics-controls-row { margin: 0; }
body.dark-mode .analytics-toggles-box {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .analytics-controls,
body.dark-mode .analytics-period-box,
body.dark-mode .analytics-toggles-box {
    color: #ffffff !important;
}

.analytics-controls .btn-sm,
.analytics-period-box .btn-sm,
.analytics-toggles-box .btn-sm {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px !important;
    font-size: 12px;
    font-weight: 600;
}

/* Chart Filter Select Styling */
.chart-filter-select {
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    background-color: #f8f9fa;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    width: auto;
}

.chart-filter-select:hover {
    background-color: #e9ecef;
    border-color: #c0c4c8;
}

body.dark-mode .chart-filter-select {
    background-color: #edf3ff;
    border-color: #444;
    color: #0f172a;
}

body.dark-mode .chart-filter-select:hover {
    background-color: #e0ebff;
}

/* Calendar View for Visits */
.calendar-grid {
    display: grid;
    /* Use minmax(0, 1fr) to prevent overflow if children have min-width */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    /* Reduced gap slightly */
    margin-top: 10px;
    width: 100%;
}

.calendar-header {
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: #888;
    margin-bottom: 5px;
}

.calendar-day {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    min-height: 40px;
}

body.dark-mode .calendar-day {
    background: #2a2a3d;
    border-color: #444;
}

.calendar-day.has-data {
    border-color: var(--primary);
    background: rgba(13, 110, 253, 0.05);
}

.cal-day-num {
    font-size: 10px;
    color: #555;
    margin-bottom: 0px;
}

body.dark-mode .cal-day-num {
    color: #ccc;
}

.smart-cal-cell.selected-day {
    border: 2px solid var(--primary) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .smart-cal-cell.selected-day {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.cal-count-dot {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.simple-bar-chart.calendar-mode {
    display: block !important;
    /* Override flex if set */
    height: auto !important;
    padding: 0;
    align-items: unset;
    border-bottom: none;
    background: none;
}

.analytics-header {
    font-size: 14px;
    margin-bottom: 0px;
    color: #666;
    margin: 0;
}

/* Dark Mode Overrides for Analytics Controls */
body.dark-mode .analytics-header {
    color: #fff !important;
    /* Requested White */
}

body.dark-mode .analytics-controls .btn-outline-secondary,
body.dark-mode .analytics-period-box .btn-outline-secondary,
body.dark-mode .analytics-toggles-box .btn-outline-secondary {
    color: #ffffff !important;
    border-color: #555;
}

body.dark-mode .analytics-controls .btn-outline-secondary:hover,
body.dark-mode .analytics-controls .btn-outline-secondary:active,
body.dark-mode .analytics-controls .btn-outline-secondary.active,
body.dark-mode .analytics-period-box .btn-outline-secondary:hover,
body.dark-mode .analytics-period-box .btn-outline-secondary:active,
body.dark-mode .analytics-period-box .btn-outline-secondary.active,
body.dark-mode .analytics-toggles-box .btn-outline-secondary:hover,
body.dark-mode .analytics-toggles-box .btn-outline-secondary:active,
body.dark-mode .analytics-toggles-box .btn-outline-secondary.active {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

body.dark-mode .analytics-controls .analytics-controls-sep {
    color: #ffffff !important;
}

/* =========================================
   17. CHART TOOLTIPS (CALLOUT STYLE) & MOBILE TWEAKS
   ========================================= */

/* Remove old simple tooltip if any */
.chart-bar:hover::after {
    display: none !important;
}

/* Parent container for bar + tooltip */
.chart-bar-group,
.calendar-day {
    position: relative;
    overflow: visible !important;
    /* Allow tooltip to overflow */
    cursor: pointer;
}

/* The Custom Tooltip */
.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    /* Above element */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    font-size: 11px;
    font-weight: 600;
    min-width: 140px;
    z-index: 1000;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    text-align: right;
    border: 1px solid #f0f0f0;
    white-space: normal;
}

/* Show on hover */
/* Show on hover - Enhanced for Total Dot */
.chart-bar-group:hover .custom-tooltip,
.calendar-day:hover .custom-tooltip,
.calendar-day:focus-within .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    z-index: 10000;
    /* Ensure it pops over everything */
}

/* Ensure the dot itself doesn't block hover (it shouldn't, but just in case of some browser quirks with absolute pos) */
.cal-count-dot {
    pointer-events: none;
    /* Let clicks/hovers pass through to the day cell if needed, or keeping it enabled is fine too. Let's try regular behavior first but boost z-index of tooltip */
}

/* Tooltip Arrow */
.custom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* Tooltip Content Rows */
.tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.tooltip-row:last-child {
    margin-bottom: 0;
}

.tooltip-row i {
    margin-left: 6px;
    font-size: 14px;
}

/* Dark Mode Tooltip */
body.dark-mode .custom-tooltip {
    background: #2a2a3d;
    color: #fff;
    border-color: #444;
}

body.dark-mode .custom-tooltip::after {
    border-color: #2a2a3d transparent transparent transparent;
}

/* Chart Header Flex Container - Enforce Single Line on Desktop */
.chart-header-flex {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100%;
    gap: 10px;
}

.chart-header-flex .analytics-header {
    margin: 0 !important;
    white-space: normal !important;
    line-height: 1.4;
}

/* =========================================
   18. MOBILE RESPONSIVENESS TWEAKS
   ========================================= */
@media screen and (max-width: 768px) {

    /* Widen workspace on mobile */
    .main-content {
        padding: 10px !important;
    }

    /* Fix Chart Header on Mobile - Force Single Line per User Request */
    .chart-header-flex {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .chart-header-flex .analytics-header {
        white-space: nowrap !important;
        width: auto !important;
        margin-bottom: 0 !important;
        font-size: 11px !important;
        /* Smaller size to fit line */
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chart-header-flex>div {
        width: auto !important;
        justify-content: flex-end;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        flex: 1 1 auto;
    }

    /* 1. Stack Charts Row */
    .charts-row,
    .analytics-top-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    /* 2. Monthly Summary Cards - 2 Columns per User Request */
    .analytics-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .stat-card {
        padding: 15px;
    }

    /* Toggle Buttons - each box row can scroll horizontally on mobile */
    .analytics-period-box,
    .analytics-toggles-box {
        padding: 10px 12px !important;
    }
    .analytics-controls-row {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
    }
    .analytics-controls-row::-webkit-scrollbar {
        display: none;
    }

    .analytics-period-box .btn,
    .analytics-toggles-box .btn {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center;
        width: auto !important;
        flex: 0 0 auto !important;
        /* Do not shrink */
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* 3. Comparison Inputs Stack */
    .comparison-inputs {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .comp-vs {
        align-self: center;
        margin: 5px 0;
    }

    .comp-group {
        width: 100%;
    }

    .comp-group input {
        width: 100% !important;
    }

    /* 4. Chart Header Adjustments */
    .analytics-header {
        font-size: 13px;
        /* Slightly smaller text */
        white-space: normal !important;
        /* Allow wrapping if absolutely needed on very small screens */
    }

    /* 5. Reduce Card Padding */
    .common-dashboard-card {
        padding: 15px;
    }

    /* 6. Chart Filters wrap if needed (but try to keep inline) */
    .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* 7. Hide non-essential tooltips or adjust position */
    .custom-tooltip {
        display: none !important;
        /* Often tooltips block view on mobile touch */
    }

    /* 8. Hide disabled buttons on mobile */
    button[disabled],
    .btn[disabled] {
        display: none !important;
    }

    /* 9. Simplified Quick Reports (3 per row) */
    .quick-reports-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .quick-reports-row .btn {
        flex-direction: column !important;
        padding: 8px 4px !important;
        min-width: 0 !important;
        font-size: 10px !important;
        height: auto !important;
        gap: 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .quick-reports-row .btn i {
        font-size: 18px !important;
        margin: 0 !important;
    }

    .quick-reports-row .report-prefix {
        display: none !important;
    }

    /* 10. Hide button labels on mobile for icon-only view */
    .btn-label {
        display: none !important;
    }

    /* 11. Compact Action Buttons for Records on Mobile */
    #records-table-body .btn-sm {
        padding: 5px !important;
        min-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #records-table-body div[style*="display:flex"] {
        gap: 4px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* Mobile Records Table Dark Mode Fix */
@media screen and (max-width: 768px) {
    body.dark-mode #records-table-body tr {
        background: #2a2a3d !important;
        /* Dark background */
        color: #eee !important;
        /* Light text */
        border: 1px solid #444;
    }

    body.dark-mode #records-table-body tr td {
        color: #ddd !important;
        border-bottom-color: #444;
    }

    /* Small Icons on Mobile */
    body.dark-mode #records-table-body .btn-sm,
    #records-table-body .btn-sm {
        padding: 2px 6px;
        font-size: 12px;
        line-height: 1.2;
    }

    /* Ensure badges are readable */
    body.dark-mode #records-table-body .badge {
        color: #fff !important;
    }

    /* Optimize buttons in mobile view to prevent card overflow */
    #records-table-body .btn-sm {
        padding: 2px 4px !important;
        /* Reduced horizontal padding */
        font-size: 11px !important;
        margin: 0 1px !important;
        /* Tighter margins */
    }
}

/* Fix Calendar Day Squares */
.calendar-day {
    aspect-ratio: 1 / 1 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2px !important;
    min-height: 45px !important;
    height: 45px !important;
    border-radius: 8px !important;
    /* Override .chart-bar constraints */
    max-width: none !important;
    width: 100% !important;
    overflow: hidden !important;
}


/* Fix Analytics Scroll (analytics content lives in tab-records) */
body.tab-is-analytics .tab-content-area {
    overflow-y: auto !important;
    padding-bottom: 50px;
}

/* تابلت لاندسكيب (عبر is-apk-landscape): المحتوى لا يتجاوز الشاشة — ظاهر مع تمرير داخلي */
body.is-apk-landscape.tab-is-analytics .tab-content-area {
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
}

/* تابلت لاندسكيب (flat-grid): رزنامة كاملة + إزالة فراغ تحت الكانفاس + جدول المقارنة كامل بدون سكرول */
body.is-apk-landscape #analytics-smart-calendar-card {
    overflow: visible !important;
}
body.is-apk-landscape #analytics-smart-calendar-card .chart-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}
body.is-apk-landscape #analytics-smart-calendar-card .smart-calendar-grid-body {
    min-height: 280px !important;
}
/* إزالة الفراغ الكبير بين الكانفاس ونهاية البطاقة — كل بطاقات الرسوم في flat-grid */
/* عرض العمودين متساوٍ في التابلت لاندسكيب */
body.is-apk-landscape .analytics-flat-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.is-apk-landscape .analytics-flat-grid .analytics-col {
    min-width: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
}
body.is-apk-landscape .analytics-flat-grid .common-dashboard-card {
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}
body.is-apk-landscape .analytics-flat-grid .common-dashboard-card .chart-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    flex: 0 0 auto !important;
}
body.is-apk-landscape .analytics-flat-grid .common-dashboard-card .custom-controls-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.is-apk-landscape #chart-week-card .chart-container,
body.is-apk-landscape #chart-referrals-card .chart-container,
body.is-apk-landscape #chart-nursing-card .chart-container,
body.is-apk-landscape #chart-lab-activity-card .chart-container,
body.is-apk-landscape #chart-rx-rep-ref-card .chart-container,
body.is-apk-landscape #chart-lab-card .chart-container,
body.is-apk-landscape #chart-week-card .chart-container,
body.is-apk-landscape #chart-top-visitors-card .chart-container,
body.is-apk-landscape #chart-month-card .chart-container,
body.is-apk-landscape #chart-age-dist-card .chart-container,
body.is-apk-landscape #chart-finance-card .chart-container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
body.is-apk-landscape #chart-week-card .chart-container::after {
    display: none !important;
}
body.is-apk-landscape #chart-week-card,
body.is-apk-landscape #chart-referrals-card,
body.is-apk-landscape #chart-nursing-card,
body.is-apk-landscape #chart-lab-activity-card,
body.is-apk-landscape #chart-rx-rep-ref-card,
body.is-apk-landscape #chart-lab-card,
body.is-apk-landscape #chart-top-visitors-card,
body.is-apk-landscape #chart-month-card,
body.is-apk-landscape #chart-age-dist-card,
body.is-apk-landscape #chart-finance-card {
    padding-bottom: 12px !important;
}
body.is-apk-landscape #comparison-card-container {
    overflow: visible !important;
}
body.is-apk-landscape #comparison-card-container .card-content {
    overflow: visible !important;
}
body.is-apk-landscape #comparison-results {
    overflow: visible !important;
    max-height: none !important;
    display: block !important;
}
body.is-apk-landscape #comparison-results .comp-table {
    margin-top: 12px !important;
}

/* تابلت لاندسكيب: خلية المجموع المالي (تحت السعر) بدون تكرار تسمية */
body.is-apk-landscape .checkup-table tr.checkup-total-row td:nth-of-type(4)::before {
    content: none !important;
}

/* كانفاس الإحالات: زيادة الارتفاع 5px لظهور النص كاملاً (الى المختبر، الى التمريض، احالات خارجية) */
body.is-apk-landscape #chart-referrals-card .chart-container {
    height: 260px !important;
    min-height: 260px !important;
}

/* عند عرض الإحصائيات إخفاء محتوى سجل المرضى (الفلاتر والجدول) */
body.tab-is-analytics #records-content-wrapper {
    display: none !important;
}

/* =========================================
   20. CUSTOM CHART CONTROLS (NEW LINE LAYOUT)
   ========================================= */

/* Wrapper handles layout below header */
.custom-controls-wrapper {
    display: none;
    /* JS toggles */
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    direction: ltr;
    /* Force LTR for ordering or RTL if native? Use flex-end for alignment */
    /* Let's follow body direction but ensure alignment is correct. 
       If RTL, we want buttons on Left? Or Right?
       Usually charts are LTR? No page is Arabic.
    */
    direction: inherit;
}

/* Container for inputs */
.custom-grid-container {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
    /* Align to the LEFT side in RTL (flex-end is Left in RTL) */
    /* Wait, flex-start is Right in RTL. flex-end is Left.
       The "Custom" button is on the Left side of the card header (justify-between: title(Right) ... buttons(Left)).
       So we want the custom controls to align to the Left as well.
       So justify-content: flex-end.
    */
    flex-wrap: wrap;
    /* Allow wrap on small screens */
}

/* Enforce reduced height on the ORIGINAL trigger button too */
.chart-filter-select {
    height: 24px !important;
    line-height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

/* 
   EXACT MATCH STYLING - REDUCED HEIGHT 
   Matching .chart-filter-select from existing CSS but sleeker
*/
.custom-select-styled {
    border: 1px solid #dee2e6 !important;
    border-radius: 20px !important;
    padding: 0 8px !important;
    /* Reduced padding */
    font-size: 11px !important;
    /* Slightly smaller font */
    font-weight: 600 !important;
    color: #555 !important;
    background-color: #f8f9fa !important;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    height: 24px !important;
    /* REDUCED HEIGHT */
    line-height: 22px !important;
    /* Center text vertically */
    width: auto !important;
    min-width: 60px;
    /* Smaller min width */

    appearance: auto;
    -webkit-appearance: auto;
    background-image: none !important;
}

.custom-select-styled:hover {
    background-color: #e9ecef !important;
    border-color: #c0c4c8 !important;
}

.custom-select-styled:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Check Button: Match Select Shape but Blue */
.custom-check-btn {
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    /* Match select radius */
    padding: 0 12px !important;
    /* Reduced padding */
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background-color: var(--primary) !important;
    cursor: pointer;
    height: 24px !important;
    /* REDUCED HEIGHT */
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.custom-check-btn:hover {
    background-color: var(--primary-dark) !important;
}

.custom-check-btn i {
    font-size: 14px;
}

/* Dark Mode: خلفية داكنة لقوائم تخصيص السنة/الشهر/الأسبوع لرؤية النص */
body.dark-mode .custom-controls-wrapper,
body.dark-mode .custom-grid-container {
    background: transparent;
}
body.dark-mode .custom-select-styled {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .custom-select-styled:hover {
    background-color: #475569 !important;
    color: #fff !important;
}
body.dark-mode .custom-select-styled option {
    background: #1e293b;
    color: #f1f5f9;
}

/* Desktop Logic: No special overrides, just standard flex flow */
@media (min-width: 769px) {

    /* Ensure they stay in one line if possible */
    .custom-grid-container {
        flex-wrap: nowrap;
    }
}

/* Mobile Logic */
@media screen and (max-width: 768px) {

    /* Ensure wrapper behaves same as desktop (new line) */
    .custom-controls-wrapper {
        display: none;
        width: 100%;
        margin-top: 10px;
        overflow-x: auto;
        /* Allow scroll if too wide */
        padding: 5px;
        /* Add padding to prevent clipping of shadow/edges */
    }

    /* Container alignment same as desktop */
    .custom-grid-container {
        justify-content: flex-end;
        flex-wrap: nowrap !important;
        /* FORCE SINGLE LINE */
        gap: 5px;
        width: max-content;
        /* Ensure container grows to fit one line */
        margin-left: auto;
        /* Align to right (if LTR) or left (if RTL, assuming direction inherit works) */
    }

    /* Remove stretching, match desktop pill look */
    .custom-select-styled {
        flex: 0 0 auto;
        /* Don't shrink */
        width: auto !important;
        min-width: 55px;
        /* Even smaller */
        height: 24px !important;
        /* REDUCED HEIGHT to 24px */
        font-size: 10px !important;
        /* Smaller text */
        padding: 0 8px !important;
        line-height: 22px !important;
    }

    .custom-check-btn {
        height: 24px !important;
        /* REDUCED HEIGHT to 24px */
        border-radius: 20px !important;
        min-width: 28px;
        padding: 0 10px !important;
        flex: 0 0 auto;
        /* Don't shrink */
    }
}

/* =========================================
   21. PRINT STYLES FOR ANALYTICS
   ========================================= */
@media print {
    @page {
        size: A4;
        margin: 0;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        background-color: white !important;
    }

    .analytics-print-wrapper {
        direction: rtl;
        width: 100%;
        zoom: 0.8;
        /* Reduced zoom */
        padding: 5mm 10mm;
        /* Reduced padding */
    }

    /* Force Colors & Backgrounds */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-inside: avoid;
        /* Prevent breaking inside elements */
    }

    /* -----------------------------------------------------------
    /* -----------------------------------------------------------
       CHART VISIBILITY FIXES
       ----------------------------------------------------------- */
    /* Ensure Chart Containers are BLOCK/FLEX and Visible */
    #chart-week-days,
    #chart-last-6-months,
    .simple-bar-chart {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* SVG Specifics */
    svg {
        display: block !important;
        visibility: visible !important;
    }

    /* --- DONUT CHART (Visits Ratio) --- */
    #chart-last-6-months {
        flex-direction: column !important;
        /* Ensure legend stacks below if needed */
        justify-content: center !important;
        align-items: center !important;
        height: auto !important;
    }

    #chart-last-6-months svg {
        width: 140px !important;
        /* INCREASED from 100px */
        height: 140px !important;
        margin: 0 auto !important;
    }

    #chart-last-6-months>div>div {
        width: 140px !important;
        height: 140px !important;
    }

    /* Text Resizing in Donut */
    #chart-last-6-months div[style*="font-size:32px"] {
        font-size: 24px !important;
        /* Larger text */
        color: #000 !important;
    }

    #chart-last-6-months div[style*="font-size:12px"] {
        display: block !important;
        /* Show 'Record' text */
        font-size: 11px !important;
        color: #555 !important;
    }

    /* Donut Legend (Likely the last div in container) */
    #chart-last-6-months>div>div:last-child {
        display: flex !important;
        gap: 10px !important;
        margin-top: 10px !important;
        justify-content: center !important;
    }

    /* --- CALENDAR VIEW (Busy Days) --- */
    .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .calendar-day {
        min-height: 25px !important;
        /* Force smaller size */
        height: 30px !important;
        padding: 1px !important;
        border: 1px solid #ddd !important;
    }

    .cal-day-num {
        font-size: 8px !important;
        margin-bottom: 0 !important;
        line-height: 1;
    }

    .cal-count-dot {
        font-size: 7px !important;
        padding: 0 3px !important;
        min-width: 10px !important;
    }

    /* --- BAR CHART --- */
    .simple-bar-chart {
        height: 140px !important;
        /* Match Donut Height */
        padding-top: 20px !important;
        margin-top: 0 !important;
        border-bottom: 2px solid #ccc !important;
        background: repeating-linear-gradient(0deg, transparent, transparent 19px, #eee 20px) !important;
        background-size: 100% 20px !important;
    }

    .chart-label {
        font-size: 9px !important;
        color: #000 !important;
    }

    .chart-bar {
        background-color: #0d6efd !important;
        /* Force Blue */
        border: 1px solid #000 !important;
    }

    .chart-bar::after {
        font-size: 9px !important;
        color: #000 !important;
        top: -15px !important;
    }

    /* -----------------------------------------------------------
       LAYOUT & COLORS
       ----------------------------------------------------------- */

    /* Headings */
    .analytics-header,
    h3,
    h4,
    h5 {
        color: #000 !important;
        margin-bottom: 5px !important;
        margin-top: 5px !important;
        font-size: 14px !important;
    }

    .analytics-print-wrapper .analytics-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        page-break-inside: auto !important;
    }

    .analytics-print-wrapper .stat-card {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 10px !important;
    }

    .stat-card {
        padding: 5px 10px !important;
        min-height: 50px !important;
        height: auto !important;
        gap: 8px !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        float: none !important;
        /* Prevent float issues */
    }

    /* Icon Colors */
    .stat-card:nth-child(1) .stat-icon {
        color: #0d47a1 !important;
        background: #e3f2fd !important;
    }

    .stat-card:nth-child(2) .stat-icon {
        color: #1b5e20 !important;
        background: #e8f5e9 !important;
    }

    .stat-card:nth-child(3) .stat-icon {
        color: #006064 !important;
        background: #e0f7fa !important;
    }

    .stat-card:nth-child(4) .stat-icon {
        color: #e65100 !important;
        background: #fff3e0 !important;
    }

    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
        border-radius: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-info h3 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .stat-info span {
        font-size: 10px !important;
    }

    /* Layout Wrappers */
    .dashboard-lower-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .comparison-container-wrapper,
    .charts-container-wrapper {
        flex: 1 !important;
        width: 48% !important;
        margin: 0 !important;
        max-width: 49% !important;
    }

    /* KEY FIX: If Comparison is hidden (removed), Charts take full width */
    .dashboard-lower-section>.charts-container-wrapper:only-child {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* If full width, arrange inner charts side-by-side to save vertical space */
    .dashboard-lower-section>.charts-container-wrapper:only-child .charts-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .dashboard-lower-section>.charts-container-wrapper:only-child .charts-row>div {
        flex: 1 !important;
        width: 48% !important;
    }

    .common-dashboard-card,
    .comparison-container {
        padding: 5px 10px 10px 10px !important;
        /* Reduced padding to fit better */
        border: 1px solid #ccc !important;
        display: block !important;
        background: #fff !important;
        height: auto !important;
        page-break-inside: avoid !important;
        margin-bottom: 5px !important;
        /* Ensure it shrinks if content is small */
        min-height: 0 !important;
    }

    /* Comparison Section */
    .comparison-inputs {
        padding: 5px !important;
        gap: 5px !important;
        border: 1px dashed #ccc !important;
        display: flex !important;
    }

    .comp-group {
        margin: 0 !important;
    }

    .comp-group label {
        font-size: 10px !important;
        display: block;
    }

    .comp-group input {
        height: 25px !important;
        font-size: 11px !important;
        padding: 0 5px !important;
        width: 100% !important;
        border: 1px solid #ddd !important;
    }

    .comp-vs {
        font-size: 12px !important;
        padding: 0 5px !important;
    }

    .comp-table {
        margin-top: 5px !important;
        border: 1px solid #eee;
        width: 100%;
    }

    .comp-table th,
    .comp-table td {
        padding: 3px !important;
        font-size: 9px !important;
        border: 1px solid #eee;
    }

    /* --- CALENDAR VIEW IMPROVEMENTS --- */
    .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
        margin-top: 5px !important;
    }

    .calendar-day {
        min-height: 35px !important;
        /* Force appropriate height */
        height: auto !important;
        padding: 2px !important;
        border: 1px solid #999 !important;
        /* Clearly visible border */
        background-color: #fff !important;
        color: #000 !important;
    }

    /* Better Colors for Calendar Days */
    .calendar-day:nth-child(odd) {
        background-color: #f8f9fa !important;
    }

    .cal-day-num {
        font-size: 12px !important;
        /* Larger numbers */
        font-weight: 700 !important;
        margin-bottom: 2px !important;
        color: #222 !important;
        text-align: right;
        display: block;
    }

    .cal-count-dot {
        font-size: 9px !important;
        padding: 1px 4px !important;
        min-width: 14px !important;
        border-radius: 4px !important;
        background-color: #0d6efd !important;
        /* Distinct BLUE for stats */
        color: white !important;
        display: inline-block;
        margin: 0 auto;
        font-weight: bold !important;
    }

    .comparison-inputs {
        padding: 5px !important;
        gap: 5px !important;
        border: 1px dashed #ccc !important;
        display: flex !important;
    }

    .comp-group {
        margin: 0 !important;
    }

    .comp-group label {
        font-size: 10px !important;
        display: block;
    }

    .comp-group input {
        height: 25px !important;
        font-size: 11px !important;
        padding: 0 5px !important;
        width: 100% !important;
        border: 1px solid #ddd !important;
    }

    .comp-vs {
        font-size: 12px !important;
        padding: 0 5px !important;
    }

    .comp-table {
        margin-top: 10px !important;
        border: 1px solid #eee;
        width: 100%;
    }

    .comp-table th,
    .comp-table td {
        padding: 3px !important;
        font-size: 10px !important;
        border: 1px solid #eee;
    }

    /* Hide Unwanted Elements */
    .analytics-controls,
    .analytics-period-box,
    .analytics-toggles-box,
    .no-print,
    .sidebar,
    .mobile-app-header,
    .action-bar {
        display: none !important;
    }

    /* --- FORCE LIGHT MODE IN PRINT --- */
    body.dark-mode {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    body.dark-mode .common-dashboard-card,
    body.dark-mode .stat-card,
    body.dark-mode .comparison-container {
        background: #ffffff !important;
        border-color: #ccc !important;
        color: #000000 !important;
    }

    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode label,
    body.dark-mode span {
        color: #000000 !important;
    }

    /* Ensure Calendar in Dark Mode prints White */
    body.dark-mode .calendar-day {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #999 !important;
    }

    body.dark-mode .calendar-day:nth-child(odd) {
        background-color: #f8f9fa !important;
    }

    body.dark-mode .cal-day-num {
        color: #222 !important;
    }

    /* --- SHOW CHART CUSTOMIZATION CONTROLS --- */
    .d-flex.align-items-center.gap-2,
    .chart-filter-select,
    .custom-controls-wrapper {
        display: flex !important;
        /* Ensure controls are visible */
        visibility: visible !important;
    }

    .chart-filter-select {
        display: inline-block !important;
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
        height: 24px !important;
        font-size: 10px !important;
        padding: 0 5px !important;
        appearance: auto !important;
    }

    .custom-controls-wrapper {
        display: block !important;
        margin-bottom: 5px !important;
    }

    .custom-select-styled {
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .custom-check-btn {
        display: inline-flex !important;
        height: 24px !important;
        width: 24px !important;
        padding: 0 !important;
        align-items: center;
        justify-content: center;
        background: #0d6efd !important;
        color: white !important;
    }

    #analytics-top-card {
        display: block !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .main-content,
    .page-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

/* =========================================
   10. CUSTOM PAGINATION STYLES
   ========================================= */
.custom-pagination-wrapper {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #333;
    margin-top: 20px;
    padding: 0 5px;
}

.pagination-controls .page-btn {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
    min-width: 35px;
    height: 35px;
    padding: 0 5px;
    border-radius: 6px;
    /* Soft square */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
    outline: none;
    font-size: 14px;
    margin: 0 2px;
}

.pagination-controls .page-btn:hover:not(.disabled):not(.active) {
    background-color: #f8f9fa;
    border-color: #ccc;
}

.pagination-controls .page-btn.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.pagination-controls .page-btn.disabled {
    color: #ccc;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #f0f0f0;
}

/* Dark Mode Pagination */
body.dark-mode .custom-pagination-wrapper {
    color: #e2e8f0;
}

body.dark-mode .pagination-controls .page-btn {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-mode .pagination-controls .page-btn.active {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

body.dark-mode .pagination-controls .page-btn:hover:not(.disabled):not(.active) {
    background-color: #334155;
}

/* =========================================
   11. PRINT ADJUSTMENTS (RECORDS whitespace)
   ========================================= */
@media print {

    /* Reduce whitespace specifically for Records Printing */
    .sheet.print-records-mode .sheet-body {
        padding-top: 10px !important;
        /* Pull content closer to header */
        margin-top: -20px !important;
        padding-bottom: 1.88in !important;
        /* Prevent overlap with footer and page numbers */
    }
}

@media screen and (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* =========================================
   12. MOBILE MENU & MODAL FIXES
   ========================================= */

/* Reduce padding in Mobile Menu Items */
.hc-offcanvas-nav .nav-item-link,
.hc-offcanvas-nav .nav-custom-content {
    padding: 10px 17px !important;
    /* Reduced from 14px */
}

/* Ensure Modals appear ABOVE the Landing Overlay (z-index 9999) */
/* Ensure Modals appear ABOVE the Landing Overlay (z-index 9999) */
.modal-overlay {
    z-index: 10000 !important;
}

/* =========================================
   13. DONUT CHART TEXT STYLES
   ========================================= */
.donut-count-text {
    color: #333;
    text-shadow: none;
}

.donut-label-text {
    color: #999;
}

body.dark-mode .donut-count-text {
    color: #fff !important;
}

body.dark-mode .donut-label-text {
    color: #ccc !important;
}

/* =========================================
   14. DARK MODE FIXES (Tables, Mobile Cards, Pagination)
   ========================================= */

/* Fix: Table Headers and Text in Dark Mode */
body.dark-mode .drug-table th,
body.dark-mode .drug-table td,
body.dark-mode .comp-table th,
body.dark-mode .comp-table td {
    color: #fff !important;
    background-color: #2c3e50 !important;
    /* Slightly lighter dark bg for rows */
    border-color: #444 !important;
}

body.dark-mode .drug-table th {
    background-color: #1a252f !important;
    /* Darker header */
}

/* Fix: Mobile Card View Inputs in Dark Mode */
@media screen and (max-width: 991px) {
    body.dark-mode .drug-table tr {
        background-color: #2c3e50 !important;
        border-color: #444 !important;
    }

    body.dark-mode .drug-table td {
        border-bottom-color: #444 !important;
    }

    /* Inputs inside the cards (read-only or editable) */
    body.dark-mode .drug-table input,
    body.dark-mode .drug-table select,
    body.dark-mode .drug-table textarea {
        background-color: #edf3ff !important;
        color: #0f172a !important;
        border: 1px solid #555 !important;
    }
}

/* Fix: Pagination Colors in Dark Mode */
body.dark-mode .pagination-controls .btn-outline-secondary {
    color: #fff !important;
    border-color: #fff !important;
}

body.dark-mode .pagination-controls .btn-outline-secondary:hover {
    background-color: #fff !important;
    color: #000 !important;
}

/* Fix: Mobile Pagination Text Size & Spacing */
@media screen and (max-width: 768px) {
    .custom-pagination-wrapper {
        font-size: 11px !important;
        /* Smaller font on mobile */
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .pagination-controls .page-btn {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
    }

    /* "1-12 of 13" Text Wrapper */
    .custom-pagination-wrapper span {
        white-space: nowrap !important;
        font-size: 10px !important;
    }
}

/* =========================================
   15. ADDITIONAL FIXES (Pagination, Mobile Table, Print)
   ========================================= */

/* 1. Dark Mode Pagination Fix */
body.dark-mode .custom-pagination-wrapper {
    background: #1e293b !important;
    /* Dark slate */
    border-color: #334155 !important;
    color: #fff !important;
    display: flex !important;
}

body.dark-mode .custom-pagination-wrapper button {
    background-color: #0f172a;
    color: #fff;
    border-color: #334155;
}

body.dark-mode .custom-pagination-wrapper button:hover {
    background-color: #334155;
}

/* 2. drug-table mobile: نفس بطاقة الموظفين/الحضور (موحّد في @media 991px أدناه مع .clinic-table و .emp-table) */

/* Fix: Pagination Text Color in Dark Mode */
body.dark-mode .custom-pagination-wrapper span {
    color: #fff !important;
}

/* Fix: Mobile Pagination Compact Layout */
@media screen and (max-width: 768px) {
    .custom-pagination-wrapper {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
        align-items: center !important;
        background-color: transparent !important;
        /* Or card color if inside card */
    }

    /* Ensure internal divs wrap content */
    .custom-pagination-wrapper>div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        width: 100%;
    }

    /* Smaller Buttons */
    .custom-pagination-wrapper button {
        height: 30px !important;
        min-width: 30px !important;
        font-size: 12px !important;
        padding: 0 5px !important;
        margin: 0 !important;
    }

    /* Text Info */
    .custom-pagination-wrapper span {
        font-size: 11px !important;
        white-space: nowrap !important;
        margin-top: 5px;
    }
}

/* 3. Print Visibility Enforcement (Robust) */
@media print {

    [style*="display: none"],
    [style*="display:none"],
    .d-none,
    .hidden {
        display: none !important;
    }

    .common-dashboard-card[style*="display: none"],
    .stat-card[style*="display: none"] {
        display: none !important;
    }
}

/* =========================================
   16. RECORDS TABLE MOBILE FIXES
   ========================================= */
@media screen and (max-width: 991px) {

    /* Hide button text on mobile (show icon only) */
    .btn-label {
        display: none !important;
    }

    /* =========================================
       COMPARISON STYLE VERTICAL TABLE (Mobile)
       ========================================= */

    /* 1. Reset Table to Block Layout */
    .clinic-table-card {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    .records-table,
    .checkup-table,
    .records-table tbody,
    .checkup-table tbody,
    .records-table tr,
    .checkup-table tr,
    .records-table td,
    .checkup-table td {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
    }

    .records-table thead,
    .checkup-table thead {
        display: none !important;
        /* Hide standard header */
    }

    /* 2. Row Card Design */
    .records-table tr,
    .checkup-table tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        overflow: hidden;
        border-right: 5px solid #1e3a8a;
        /* Dark Blue Side Accent */
    }

    /* 3. Cell Styling - Defined later in consolidated RTL section */
    /* (Removed duplicate conflicting rules that caused text overlap) */

    .records-table td:last-child,
    .checkup-table td:last-child {
        border-bottom: none;
    }

    /* Remove previous styles */
    .records-table tr::after,
    .checkup-table tr::after {
        display: none;
    }

    /* --- CHECKUP TABLE LABELS --- */
    /* Seq */
    /* Remove previous display: none !important; */
    /* --- CREATIVE SEQUENCE NUMBER (#) --- */
    /* Make Seq Visible */
    /* --- CREATIVE CARD ACCENT --- */
    .records-table tr,
    .checkup-table tr {
        position: relative;
        border-right: 5px solid #1e3a8a !important;
        /* Dark Blue Side Accent */
        overflow: hidden;
        padding: 20px;
        /* Ensure logical padding exists for negative margins to work against */
    }

    /* --- CIRCULAR SEQUENCE NUMBER (#) --- */
    .records-table td:nth-of-type(1),
    .checkup-table td:nth-of-type(1) {
        display: flex !important;
        position: absolute;
        top: 15px;
        /* Aligned with Header */
        left: 15px;
        right: auto;
        background: var(--primary);
        /* Dark Blue to match accent */
        color: #ffffff;
        border: 2px solid #fff;
        /* White ring */
        width: 35px;
        height: 35px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        font-weight: 700;
        font-family: inherit;
        font-size: 14px;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
    }

    .records-table td:nth-of-type(1)::before,
    .checkup-table td:nth-of-type(1)::before {
        display: none !important;
    }

    /* --- PATIENT NAME HEADER BAR --- */
    /* Create a full-width header effect using negative margins */
    .checkup-table td:nth-of-type(2),
    .records-table td:nth-of-type(2) {
        position: relative;
        background: #f8fafc;
        /* Light Header BG */
        margin: -20px -20px 15px -20px !important;
        /* Expand to edges */
        width: calc(100% + 40px);
        padding: 15px 20px 15px 60px !important;
        /* Top/Bot 15, Right 20, Left 60 for Badge */
        border-bottom: 2px solid #f1f5f9;
        font-size: 16px !important;
        display: flex !important;
        align-items: center;
        min-height: 65px;
        /* Height for the header */
    }

    /* --- CHECKUP LABELS - MOBILE ONLY --- */
    /* Hide name label (2nd cell is header bar) */
    .checkup-table td:nth-of-type(2)::before {
        content: none !important;
    }

    .checkup-table td:nth-of-type(2) {
        font-weight: 800;
        color: var(--primary-dark);
        font-size: 15px;
    }

    /* Date */
    .checkup-table td:nth-of-type(3)::before {
        content: "التاريخ" !important;
    }

    /* Time */
    .checkup-table td:nth-of-type(4)::before {
        content: "الوقت" !important;
    }

    /* Queue */
    .checkup-table td:nth-of-type(5)::before {
        content: "رقم الحجز" !important;
    }

    /* Notes */
    .checkup-table td:nth-of-type(6)::before {
        content: "ملاحظات" !important;
    }

    /* Price */
    .checkup-table td:nth-of-type(7)::before {
        content: "السعر" !important;
    }

    .checkup-table td:nth-of-type(7) {
        color: #16a34a;
        font-weight: bold;
    }

    /* صف المجموع: 5 خلايا — المجموع(2)، فارغ(3)، القيمة تحت السعر(4)، امتداد لنهاية الجدول(5) */
    .checkup-table tr.checkup-total-row td:nth-of-type(1),
    .checkup-table tr.checkup-total-row td:nth-of-type(3) {
        padding: 8px !important;
    }
    .checkup-table tr.checkup-total-row td:nth-of-type(2) {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #475569 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        padding: 15px 20px !important;
    }
    .checkup-table tr.checkup-total-row td:nth-of-type(2)::before {
        content: none !important;
    }
    /* خلية المجموع المالي (0 د.ع) تحت السعر — td الرابع */
    .checkup-table tr.checkup-total-row td:nth-of-type(4) {
        font-weight: 700 !important;
        color: #1e3aa8 !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        padding: 10px 20px 15px !important;
    }
    .checkup-table tr.checkup-total-row td:nth-of-type(4)::before {
        content: none !important;
    }

    /* Hide label on actions cell */
    .checkup-table td:last-child::before,
    .records-table td:last-child::before {
        display: none !important;
    }

    /* Cell Value - Left side in RTL Grid */
    .cell-value {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }

    /* Actions - Compact Icon Buttons */
    .checkup-table td:last-child {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 12px !important;
        background: #f8fafc;
        border-top: 1px dashed #e2e8f0 !important;
        border-bottom: none !important;
    }

    .checkup-table td:last-child::before {
        display: none !important;
    }

    .checkup-table td:last-child button,
    .checkup-table td:last-child .btn-sm {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    /* --- RECORDS TABLE LABELS --- */
    /* Make Seq Visible */
    .records-table td:nth-of-type(1) {
        display: flex !important;
        /* Visible */
        /* Override position to match Checkup style but on Right */
        right: 15px !important;
        left: auto !important;
        background: var(--primary) !important;
        /* Blue Badge */
        color: #fff !important;
        border: 2px solid #fff !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        top: 15px !important;
    }

    /* 3. Cell Styling (Key-Value Pair) - GRID-BASED RTL */
    /* Titles (Labels) on Right, Values on Left using 2-column grid */
    .records-table td,
    .checkup-table td {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9;
        min-height: 36px;
        height: auto;
        direction: rtl !important;
        gap: 0 15px !important;
    }

    /* Force all child elements inside TD to grid column 1 */
    .records-table td>*,
    .checkup-table td>* {
        min-width: 0;
        grid-column: 2;
    }

    /* Reset Header Bar Layout for RTL (Name Right, Badge Right) */
    .checkup-table td:nth-of-type(2),
    .records-table td:nth-of-type(2) {
        display: flex !important;
        direction: rtl !important;
        justify-content: flex-start !important;
        padding-right: 60px !important;
        padding-left: 15px !important;
        text-align: right !important;
    }

    /* Value Text Styling */
    .records-table td,
    .checkup-table td {
        line-height: 1.3;
        font-size: 13px;
        word-break: break-word;
    }

    /* Label Styling (On Right in RTL Grid) */
    .records-table td::before,
    .checkup-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        text-align: right;
        white-space: nowrap;
        grid-column: 1;
        grid-row: 1;
    }

    /* --- STATUS & TOGGLE OVERRIDES (must come AFTER general grid rule) --- */
    .checkup-table td:nth-of-type(8) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
    }

    .checkup-table td:nth-of-type(8)::before {
        content: "الحالة" !important;
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 15px;
    }

    .checkup-table td:nth-of-type(9) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
    }

    .checkup-table td:nth-of-type(9)::before {
        content: "تأكيد مراجعة" !important;
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 15px;
    }

    .records-table td:nth-of-type(2)::before {
        content: none !important;
        /* Hide "Patient" Label */
    }

    .records-table td:nth-of-type(2) {
        font-weight: 800;
        color: var(--primary-dark);
        /* Layout: [Avatar Left] - [Name Center] - [Badge Right] */
        position: relative !important;
        justify-content: center !important;
        padding-right: 60px !important;
        /* Space for # */
        padding-left: 60px !important;
        /* Space for Avatar */
        text-align: center !important;
    }

    /* Target Inner Flex Div containing Image & Name */
    .records-table td:nth-of-type(2)>div {
        width: 100%;
        justify-content: center !important;
    }

    /* Target Avatar (First child of inner div) - Move to Left */
    .records-table td:nth-of-type(2)>div> :first-child {
        position: absolute !important;
        left: 20px !important;
        /* Anchored Left */
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }

    .records-table td:nth-of-type(3)::before {
        content: "العمر";
    }

    .records-table td:nth-of-type(4)::before {
        content: "التاريخ";
    }

    .records-table td:nth-of-type(5)::before {
        content: "النوع";
    }

    .records-table td:nth-of-type(6)::before {
        content: "السعر";
    }

    /* Restore Border for visual separation */
    .records-table td,
    .checkup-table td {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    /* Remove border for the last data cell before Actions */
    .records-table td:nth-last-child(2) {
        border-bottom: none !important;
    }

    /* Actions - Compact Icon Buttons (Match desired layout) */
    .records-table td:last-child {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
        padding: 12px !important;
        background: #f8fafc;
        border-top: 1px dashed #e2e8f0 !important;
        border-bottom: none !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .records-table td:last-child::before {
        display: none !important;
    }

    .records-table td:last-child button {
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
        font-size: 14px !important;
        padding: 5px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    .records-table td:last-child button:last-child {
        margin-bottom: 0;
    }

    /* Override Checkup Seq too to be Right */
    .checkup-table td:nth-of-type(1) {
        right: 15px !important;
        left: auto !important;
    }

}

/* END MOBILE MEDIA QUERY */

/* --- LOGIN OVERLAY (PROFESSIONAL DARK V4) --- */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #020617;
    /* Deep midnight dark */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
    overflow: hidden;
}

/* Background Mesh Animation */
.login-overlay::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at 50% 50%, #1e3a8a 0%, transparent 50%),
        radial-gradient(circle at 10% 20%, #0c4a6e 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, #1e40af 0%, transparent 40%);
    filter: blur(80px);
    opacity: 0.4;
    animation: meshRotate 20s infinite linear;
    z-index: 0;
}

@keyframes meshRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.2);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* --- Floating Sub-Background Orbs --- */
.login-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: floatOrb 20s infinite ease-in-out;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: #1d4ed8;
    top: -100px;
    left: -100px;
    animation-duration: 25s;
}

.orb-2 {
    width: 600px;
    height: 600px;
    background: #6366f1;
    bottom: -150px;
    right: -50px;
    animation-duration: 18s;
    animation-delay: -5s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: #0ea5e9;
    top: 30%;
    left: 70%;
    animation-duration: 22s;
    animation-delay: -10s;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, 80px) scale(1.1);
    }

    66% {
        transform: translate(-40px, 40px) scale(0.9);
    }
}

.login-container {
    background: #ffffff;
    width: 1250px;
    height: 800px;
    border-radius: 40px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.8);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: containerEntrance 1s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

@keyframes containerEntrance {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.dark-mode .login-container {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Left side Visual */
.login-visual {
    flex: 1.25;
    position: relative;
    overflow: hidden;
    background: #000;
}

.login-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 15s ease-out;
}

.login-container:hover .login-visual img {
    transform: scale(1.05);
}

.visual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.1) 100%);
    z-index: 1;
    overflow: hidden;
    /* CSS variables for light position */
    --lx: 50%;
    --ly: 50%;
}

/* Premium Aurora Light Sweep */
.visual-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--lx) var(--ly),
            rgba(56, 189, 248, 0.4) 0%,
            rgba(99, 102, 241, 0.2) 30%,
            transparent 70%);
    mix-blend-mode: color-dodge;
    z-index: 2;
    pointer-events: none;
    transition: background 0.15s ease-out;
}

/* Modern Minimalist Silk Sweep (Diagonal Back-and-Forth) */
.visual-overlay::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(135deg,
            transparent 45%,
            rgba(255, 255, 255, 0.01) 48%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.01) 52%,
            transparent 100%);
    z-index: 3;
    pointer-events: none;
    animation: silkSweep 16s infinite ease-in-out;
}

@keyframes silkSweep {

    0%,
    100% {
        transform: translate(-15%, -15%);
    }

    50% {
        transform: translate(15%, 15%);
    }
}

/* Dynamic Interactive Border Aura + Living Glitters */
.visual-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 50px rgba(56, 189, 248, 0.1);
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

/* Twinkling Digital Glitter (Slowly falling from top) */
.visual-glow::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 200%;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #38bdf8 1.5px, transparent 1px);
    background-size: 80px 80px, 120px 120px;
    background-position: 0 0, 40px 60px;
    opacity: 0.4;
    animation: slowGlitter 15s infinite linear;
}

@keyframes slowGlitter {
    0% {
        transform: translateY(0);
        opacity: 0.2;
    }

    20% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(50%);
        opacity: 0.2;
    }
}

/* ========== تابلت لاندسكيب فقط (769–1400): إيقاف الحركات. الكمبيوتر (عرض ≥1401) يبقى بحركته ========== */
@media (min-width: 769px) and (orientation: landscape) and (max-width: 1400px) {
    #login-overlay,
    #login-overlay .login-container {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
        contain: layout paint;
        backface-visibility: hidden;
    }
    .login-overlay::before {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    #login-overlay .orb,
    #login-overlay .orb-1,
    #login-overlay .orb-2,
    #login-overlay .orb-3 {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    #login-overlay .login-container {
        animation: none !important;
    }
    #login-overlay .visual-overlay::before,
    #login-overlay .visual-overlay::after {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    #login-overlay .visual-glow::after {
        animation: none !important;
        transform: none !important;
    }
    #login-overlay .login-visual img {
        transition: none !important;
        transform: none !important;
    }
    #login-overlay .login-container:hover .login-visual img {
        transform: none !important;
    }
    .login-container {
        will-change: auto !important;
    }
}

/* APK تابلت لاندسكيب: نفس الاستقرار (بدون حركات أو انتقالات — منع الرجفة والاختفاء) */
body.is-apk-landscape #login-overlay,
body.is-apk-landscape #login-overlay .login-container {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout paint;
    backface-visibility: hidden;
}
body.is-apk-landscape .login-overlay::before {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}
body.is-apk-landscape #login-overlay .orb,
body.is-apk-landscape #login-overlay .orb-1,
body.is-apk-landscape #login-overlay .orb-2,
body.is-apk-landscape #login-overlay .orb-3 {
    animation: none !important;
    transform: none !important;
}
body.is-apk-landscape #login-overlay .login-container {
    animation: none !important;
    transform: none !important;
}
body.is-apk-landscape #login-overlay .visual-overlay::before,
body.is-apk-landscape #login-overlay .visual-overlay::after {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}
body.is-apk-landscape #login-overlay .visual-glow::after {
    animation: none !important;
    transform: none !important;
}
body.is-apk-landscape #login-overlay .login-visual img {
    transition: none !important;
    transform: none !important;
}
body.is-apk-landscape #login-overlay .login-container:hover .login-visual img {
    transform: none !important;
}
body.is-apk-landscape .login-container {
    will-change: auto !important;
}

.visual-content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 120px 50px 50px;
    z-index: 5;
    color: #fff;
    text-align: right;
    background: linear-gradient(to top,
            rgba(2, 6, 23, 0.98) 0%,
            rgba(2, 6, 23, 0.88) 15%,
            rgba(2, 6, 23, 0.7) 30%,
            rgba(2, 6, 23, 0.5) 45%,
            rgba(30, 58, 138, 0.3) 60%,
            transparent 70%);
}

.visual-logo {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
}

.visual-content h2 {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 12px;
}

.visual-content p {
    font-size: 18px;
    opacity: 0.95;
    line-height: 1.8;
}

/* Right side Form */
.login-form-side {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background-image: url('../images/print_pattern.jpg');
    background-size: 350px;
    background-repeat: repeat;
    background-blend-mode: multiply;
    background-color: rgba(255, 255, 255, 0.92);
    border-left: 1px solid #e2e8f0;
}

body.dark-mode .login-form-side {
    background-color: #1e293b;
    background-blend-mode: overlay;
}

.login-close-btn {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 35px;
    height: 35px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

body.dark-mode .login-close-btn {
    background: #334155;
    color: #cbd5e1;
}

.login-close-btn:hover {
    background: #ef4444;
    color: #fff;
    transform: rotate(90deg);
}

.login-header {
    text-align: center;
}

.login-header img.logo-main {
    height: 70px;
    margin-bottom: 25px;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.08));
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-header h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 5px;
}

body.dark-mode .login-header h3 {
    color: #f1f5f9;
}

.login-header p {
    color: #64748b;
    font-size: 14px;
}

/* Form Groups */
.form-group-modern {
    margin-bottom: 20px;
}

.form-group-modern label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 8px;
}

body.dark-mode .form-group-modern label {
    color: #94a3b8;
}

.form-control-modern {
    width: 100%;
    height: 55px;
    padding: 0 20px;
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 16px;
    background-image: url('../images/print_pattern.jpg');
    background-size: 400px;
    background-position: center;
    background-repeat: repeat;
    background-color: rgba(255, 255, 255, 0.95);
    background-blend-mode: soft-light;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-control-modern:focus {
    border-color: var(--primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

body.dark-mode .form-control-modern {
    background-color: rgba(15, 23, 42, 0.9);
    border-color: #334155;
    color: #fff;
}

.form-control-modern:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

body.dark-mode .form-control-modern:focus {
    background: #1e293b;
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
}

/* Checkbox */
.login-options {
    margin-bottom: 30px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    user-select: none;
}

.custom-checkbox input {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    position: relative;
    transition: 0.2s;
}

.custom-checkbox input:checked~.checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.checkmark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    margin-left: -3px;
    margin-top: -5px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: none;
}

.custom-checkbox input:checked~.checkmark::after {
    display: block;
}

/* Submit Button */
.login-submit-btn {
    width: 100%;
    height: 55px;
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border: none;
    border-radius: 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}

.login-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.3);
    gap: 25px;
}

.login-submit-btn:active {
    transform: translateY(0);
}

/* Error */
.login-error-msg {
    margin-top: 15px;
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: #fee2e2;
    padding: 10px;
    border-radius: 8px;
    animation: shake 0.4s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Footer modern */
.login-footer-modern {
    text-align: center;
    padding-top: 15px;
    margin-top: auto;
}

.login-footer-modern p {
    font-size: 15px;
    font-weight: 700;
    color: #475569;
    letter-spacing: -0.01em;
}

.login-footer-modern a {
    color: var(--primary);
    text-decoration: none;
}

body.dark-mode .login-footer-modern {
    border-top-color: #334155;
}

.login-footer-modern a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

/* RESPONSIVE */
@media screen and (max-width: 1100px) {
    .login-container {
        width: 90%;
        max-width: 500px;
        height: auto;
    }

    .login-visual {
        display: none;
    }

    .login-form-side {
        padding: 40px 30px;
    }
}

/* Tablet only: disable all login overlay animations (landscape + portrait) */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    #login-overlay::before {
        animation: none !important;
    }
    #login-overlay .orb,
    #login-overlay .orb-1,
    #login-overlay .orb-2,
    #login-overlay .orb-3 {
        animation: none !important;
    }
    #login-overlay .login-container {
        animation: none !important;
    }
    #login-overlay .login-form-side {
        animation: none !important;
    }
}

/* --- Global Modern Layout Utility --- */
.info-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.info-card.warning {
    border-top: 4px solid var(--danger);
}

.info-card h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #444;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-card ul li {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
}

/* --- Patient Records Control Bar --- */
.records-control-bar {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.bar-header h3 {
    font-size: 20px;
    color: var(--primary-dark);
}

.bar-actions {
    display: flex;
    gap: 10px;
}

.modern-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-box i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fcfcfc;
    transition: all 0.2s;
}

.search-box input:focus {
    border-color: var(--primary);
    background: #fff;
}

.filter-group {
    display: flex;
    gap: 10px;
}

.modern-select,
.modern-date {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    color: #555;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.modern-select:hover {
    border-color: #ccc;
}

/* --- Modern Table --- */
.records-table-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.modern-table th {
    padding: 15px;
    text-align: right;
    font-weight: 700;
    color: #555;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-table td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 14px;
    vertical-align: middle;
}

.modern-table tbody tr:hover {
    background-color: #fcfcfc;
}

.modern-table .badge-type {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
}

.badge-type.rx {
    background: #e3f9e5;
    color: #198754;
}

.badge-type.rep {
    background: #e0f7fa;
    color: #0288d1;
}

.action-btn-group {
    display: flex;
    gap: 5px;
}

.action-btn-group button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #eee;
    background: #fff;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.action-btn-group button.view:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: #f0f7ff;
}

.action-btn-group button.delete:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: #fff5f5;
}

/* --- Dark Mode Overrides for Modern UI --- */
body.dark-mode .profile-header-modern,
body.dark-mode .records-control-bar,
body.dark-mode .records-table-wrapper,
body.dark-mode .health-card,
body.dark-mode .info-card,
body.dark-mode .t-content {
    background: #1e293b;
    border-color: #334155;
    color: #fff;
}

body.dark-mode .profile-avatar {
    background: #1e293b;
    border-color: #1e293b;
    color: #60a5fa;
}

body.dark-mode .profile-details-main h2,
body.dark-mode .content-toolbar span,
body.dark-mode .t-content h4,
body.dark-mode .modern-table th,
body.dark-mode .modern-table td {
    color: #f1f5f9;
}

body.dark-mode .modern-select,
body.dark-mode .modern-date,
.search-box input {
    background: #334155;
    border-color: #475569;
    color: #fff;
}

body.dark-mode .modern-table tbody tr:hover {
    background: #0f172a;
}

/* --- Quill Line Height Picker --- */
.ql-snow .ql-picker.ql-line-height {
    width: 65px;
}

.ql-snow .ql-picker.ql-line-height .ql-picker-label::before,
.ql-snow .ql-picker.ql-line-height .ql-picker-item::before {
    content: attr(data-value);
}

.ql-snow .ql-picker.ql-line-height .ql-picker-label::before {
    content: "1.5";
}

.ql-snow .ql-picker.ql-line-height .ql-picker-label[data-value]::before {
    content: attr(data-value);
}


/* Print Scrollbar Hide */
@media print {
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

    body {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
}

/* Larger Action Buttons for Web only (User Design Request) */
@media (min-width: 992px) {
    .btn-action-web {
        padding: 6px 14px !important;
        font-size: 13px !important;
        min-width: 90px;
    }

    /* Also increase size of generic table action buttons for web */
    .clinic-table .btn-sm,
    .clinic-table-card .btn-sm,
    .clinic-table-body .btn-sm {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
}

/* Grayed out style for buttons (No Patient File) */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.8);
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
}

/* --- MODERN MULTI-SELECT DROPDOWN (User Request) --- */
.multi-filter-container {
    position: relative;
    width: 100%;
}

.multi-filter-trigger {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    transition: 0.3s;
    user-select: none;
}

.multi-filter-trigger:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.multi-filter-dropdown {
    position: absolute;
    top: 105%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: none;
    animation: slideDownSmall 0.2s ease;
}

.multi-filter-container.open .multi-filter-dropdown {
    display: block;
}

@keyframes slideDownSmall {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Creative Callout */
.multi-filter-callout {
    position: absolute;
    bottom: 110%;
    right: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    z-index: 1001;
}

.multi-filter-container.open .multi-filter-callout {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.multi-filter-callout::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    border: 6px solid transparent;
    border-top-color: #2563eb;
}

/* Dark Mode Overrides */
body.dark-mode .multi-filter-trigger {
    background: #1e293b;
    border-color: #334155;
    color: #fff;
}

body.dark-mode .multi-filter-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode #filter-type {
    background: #0f172a;
    color: #fff;
    border: 1px solid #334155;
}

/* --- MODERN REPORT SETTINGS CARD (Premium UI) --- */
.report-settings-card {
    display: flex;
    gap: 15px;
    background: #ffffff;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

.setting-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.icon-gradient {
    font-size: 18px;
    background: linear-gradient(135deg, #3b82f6 0%, #1a4095 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.dark-mode .icon-gradient {
    background: linear-gradient(135deg, #7dd3fc 0%, #bae6fd 50%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- MODERN PRICE WIDGET V2 --- */


.modern-price-input {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    height: 48px;
    padding: 0 12px;
    transition: all 0.3s ease;
}

.modern-price-input:focus-within {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.modern-price-input input {
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    color: #0f172a;
    font-size: 16px;
    outline: none;
    width: 100%;
}

.modern-price-input .currency {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    margin-right: 5px;
    white-space: nowrap;
}

.modern-select {
    width: 100%;
    height: 48px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 12px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.dark-mode .report-settings-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .modern-price-input,
body.dark-mode .modern-select {
    background: #edf3ff;
    border-color: #334155;
    color: #0f172a;
}

/* تبويب التقرير: حقل السعر خلفية بيضاء وكتابة سوداء في الدارك مود */
body.dark-mode #tab-report .report-header-row-premium .modern-price-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #000000 !important;
}
body.dark-mode #tab-report .report-header-row-premium .modern-price-input input,
body.dark-mode #tab-report .report-header-row-premium .modern-price-input input#rep-price,
body.dark-mode #tab-report .report-header-row-premium .modern-price-input .currency {
    color: #000000 !important;
}
body.dark-mode #tab-report .report-header-row-premium .modern-price-input input,
body.dark-mode #tab-report .report-header-row-premium .modern-price-input input#rep-price {
    background: transparent !important;
}

/* --- MODERN UNIFIED REPORT HEADER --- */
.report-header-row-premium {
    display: flex;
    gap: 15px;
    background: #ffffff;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* صف إعدادات الوصفة: ممتد عرضياً إلى آخر البطاقة بشكل ذكي */
#tab-prescription .report-header-row-premium.rx-settings-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}
/* حقل التشخيص يأخذ كل المساحة المتبقية */
#tab-prescription .report-header-row-premium.rx-settings-row .rx-diag-item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
}
/* عناصر الطباعة والصوت بعرضها الطبيعي */
#tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item {
    flex: 0 0 auto !important;
}

@media (max-width: 768px) {
    #tab-prescription .report-header-row-premium.rx-settings-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #tab-prescription .report-header-row-premium.rx-settings-row .rx-diag-item {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* دارك مود موبايل: طباعة التشخيص، طباعة الأدوية، صوتي — مظهر واحد منظم كاللايت مود */
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item .setting-body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 48px !important;
        min-height: 48px !important;
        background: #1e293b !important;
        border: 1.5px solid #334155 !important;
        border-radius: 10px !important;
        padding: 0 12px !important;
    }
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item .setting-title,
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item .setting-title span {
        color: #e2e8f0 !important;
    }
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row .rx-print-item .setting-title i {
        color: #94a3b8 !important;
    }
    body.dark-mode #tab-prescription .report-header-row-premium.rx-settings-row #mic-btn-rx-diagnosis {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35) !important;
    }
}

.report-field-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* البيانات السريرية / التشخيص: عناصر بعرض البطاقة الخاصة بها */
.rx-diag-item {
    min-width: 0;
}
.rx-diag-item .setting-body,
.rx-diag-item .voice-input-wrapper,
.rx-diag-item .voice-input-wrapper .modern-input-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.rx-diag-item .voice-input-wrapper {
    flex: 1;
}

.to-col {
    flex: 2;
}

.price-col {
    flex: 1;
    min-width: 140px;
}

.print-col {
    flex: 0 0 140px;
}

/* نوع التقرير: منع قص قائمة الخيارات وإظهارها فوق المحتوى */
#tab-report .rep-type-select-wrap {
    overflow: visible !important;
    position: relative;
    z-index: 10;
}
#tab-report #rep-type {
    overflow: visible !important;
    min-height: 48px;
}
#tab-report .report-header-row-premium,
#tab-report .report-header-controls {
    overflow: visible !important;
}

.modern-input-field {
    width: 100%;
    height: 48px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 15px;
    font-weight: bold;
    color: #0f172a;
    transition: all 0.3s ease;
    outline: none;
    font-family: 'Cairo', sans-serif;
}

.modern-input-field:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#report-lang-container select {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.dark-mode .report-header-row-premium {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .modern-input-field,
body.dark-mode .print-col .setting-body {
    background: #edf3ff !important;
    border-color: #334155 !important;
    color: #0f172a;
}


/* --- CREATIVE PRICE WIDGET (User Request Feb 12) --- */
.price-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0 10px;
    height: 48px;
    transition: all 0.2s ease;
    direction: rtl;
    /* Ensure RTL logic for children */
}

.price-input-wrapper:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.price-input-wrapper:hover {
    border-color: #10b981;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
    transform: translateY(-1px);
}

.price-input-wrapper:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #f0fdf4;
}

.price-input {
    border: none !important;
    background: transparent !important;
    font-weight: 800;
    color: #059669;
    text-align: center;
    width: 90px;
    /* Slightly increased from 70px to find the perfect balance */
    flex: none;
    /* Don't allow it to grow */
    padding: 0;
    margin: 0;
    font-size: 16px;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
}

.currency-label {
    font-size: 12px;
    font-weight: bold;
    color: #64748b;
    margin-right: 5px;
    white-space: nowrap;
    user-select: none;
}

body.dark-mode .price-input-wrapper {
    background: #edf3ff;
    border-color: #334155;
}

body.dark-mode .price-input-wrapper:focus-within {
    background: #edf3ff;
}

body.dark-mode .price-input {
    color: #0f172a;
}

/* --- PRINT OPTIMIZATIONS FOR ANALYTICS (SMART SYSTEM) --- */
@media print {
    .analytics-print-wrapper .chart-container {
        page-break-inside: avoid;
        break-inside: avoid;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    .analytics-print-wrapper img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .analytics-print-wrapper .common-dashboard-card {
        page-break-inside: auto !important;
        break-inside: auto !important;
        margin-bottom: 20px !important;
        display: block !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .analytics-print-wrapper .charts-row {
        display: block !important;
        width: 100% !important;
    }

    .analytics-print-wrapper .charts-row>div {
        width: 100% !important;
        display: block !important;
        page-break-inside: avoid;
        margin-bottom: 20px;
    }
}

/* --- Compact Print Optimization --- */
@media print {
    .print-compact-summary .analytics-header {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    .print-compact-summary .analytics-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .print-compact-summary .stat-card {
        padding: 8px !important;
        border-width: 2px !important;
        margin-bottom: 0 !important;
    }

    .print-compact-summary .stat-icon {
        font-size: 16px !important;
        width: 30px !important;
        height: 30px !important;
    }

    .print-compact-summary h3 {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    .print-compact-summary span {
        font-size: 11px !important;
    }
}

/* =========================================
   SMART MOBILE RECORD CARD SYSTEM (Unified)
   Applies to: Lab, Nursing, Employees, Finance
   Matches the existing Records & Checkup card design
   ========================================= */
@media screen and (max-width: 991px) {

    /* --- 1. CONTAINER RESET --- */
    .nursing-table-container,
    .emp-table-container,
    .clinic-table-card {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
    }

    /* --- 2. BLOCK LAYOUT --- */
    .nursing-table,
    .nursing-table tbody,
    .nursing-table tr,
    .nursing-table td,
    .emp-table,
    .emp-table tbody,
    .emp-table tr,
    .emp-table td,
    .records-table,
    .records-table tbody,
    .records-table tr,
    .records-table td,
    .clinic-table,
    .clinic-table tbody,
    .clinic-table tr,
    .clinic-table td,
    .drug-table,
    .drug-table tbody,
    .drug-table tr,
    .drug-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .nursing-table thead,
    .emp-table thead,
    .clinic-table thead,
    .drug-table thead {
        display: none !important;
    }

    /* --- 3. CARD DESIGN --- */
    .nursing-table tr,
    .emp-table tr,
    .clinic-table tr,
    .drug-table tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        overflow: hidden;
        border-right: 5px solid #1e3a8a !important;
        position: relative;
        padding: 20px;
    }

    /* --- 4. CELL STYLING (Key-Value RTL) --- */
    .nursing-table td,
    .emp-table td,
    .clinic-table td,
    .drug-table td {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-right: none !important;
        text-align: left !important;
        min-height: 36px;
        height: auto;
        direction: rtl !important;
        line-height: 1.3;
        font-size: 13px;
        word-break: break-word;
    }

    /* --- 5. LABELS (::before pseudo) --- */
    .nursing-table td::before,
    .emp-table td::before,
    .clinic-table td::before,
    .drug-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        flex-shrink: 0;
        text-align: right;
        min-width: 80px;
        margin-left: 15px;
        margin-right: 0;
    }

    /* --- 6. SEQUENCE NUMBER (Circle Badge) --- */
    .nursing-table td:nth-of-type(1),
    .emp-table td:nth-of-type(1),
    .patients-main-table td:nth-of-type(1),
    .clinic-table td:nth-of-type(1),
    .drug-table td:nth-of-type(1) {
        display: flex !important;
        position: absolute;
        top: 15px;
        right: 15px;
        left: auto;
        background: var(--primary, #1e3a8a) !important;
        color: #ffffff !important;
        border: 2px solid #fff !important;
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        font-weight: 700;
        font-size: 14px;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
        border-bottom: none !important;
    }

    .nursing-table td:nth-of-type(1)::before,
    .emp-table td:nth-of-type(1)::before,
    .patients-main-table td:nth-of-type(1)::before,
    .clinic-table td:nth-of-type(1)::before,
    .drug-table td:nth-of-type(1)::before {
        display: none !important;
    }

    /* جدول الحجوزات الفارغ: إظهار الرسالة بوضوح (موبايل/تابلت) */
    #tab-bookings #bookings-table-body tr.bookings-empty-row,
    #tab-bookings #bookings-table-body tr.bookings-empty-row td {
        display: block !important;
        width: 100% !important;
    }
    #tab-bookings #bookings-table-body tr.bookings-empty-row {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    #tab-bookings #bookings-table-body tr.bookings-empty-row td.bookings-empty-msg {
        color: #64748b !important;
        font-size: 15px !important;
        padding: 28px 16px !important;
        text-align: center !important;
        justify-content: center !important;
        border-bottom: none !important;
    }
    #tab-bookings #bookings-table-body tr.bookings-empty-row td.bookings-empty-msg::before {
        display: none !important;
    }

    /* OVERRIDES FOR PATIENTS MAIN TABLE (#, ID, Name order) */
    .patients-main-table {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: none;
    }

    .patients-main-table thead {
        display: none;
    }

    .patients-main-table tbody {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .patients-main-table tr {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Order Name (3rd cell) to top, then ID (2nd cell), then others */
    .patients-main-table td:nth-of-type(3) {
        order: 1;
        margin-bottom: 0 !important;
    }

    .patients-main-table td:nth-of-type(2) {
        order: 2;
    }

    .patients-main-table td:nth-of-type(4) {
        order: 3;
    }

    .patients-main-table td:nth-of-type(5) {
        order: 4;
    }

    .patients-main-table td:nth-of-type(6) {
        order: 5;
    }

    .patients-main-table td:nth-of-type(7) {
        order: 6;
    }

    /* ID Row Style - Same as Phone */
    .patients-main-table td:nth-of-type(2) {
        position: static !important;
        background: transparent !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 36px !important;
        display: flex !important;
        direction: rtl !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1e293b;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .patients-main-table td:nth-of-type(2)::before {
        content: "رقم المعرف (ID):" !important;
        display: inline !important;
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        flex-shrink: 0;
        text-align: right;
        min-width: 100px;
        margin-left: 15px;
    }

    /* Action Buttons - Neat Row */
    .patients-main-table td:last-child>div {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100%;
        padding: 5px 0;
    }

    .patients-main-table td:last-child .btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 2px !important;
        font-size: 11px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px;
    }

    /* Apply header styling to 3rd cell (Name) */
    .patients-main-table td:nth-of-type(3) {
        position: relative !important;
        background: #f8fafc !important;
        margin: -20px -20px 15px -20px !important;
        width: calc(100% + 40px) !important;
        padding: 15px 20px !important;
        border-bottom: 2px solid #f1f5f9 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--primary-dark, #0e1d59) !important;
        display: flex !important;
        align-items: center !important;
        min-height: 65px !important;
        direction: rtl !important;
        justify-content: center !important;
    }

    .patients-main-table td:nth-of-type(3)::before {
        display: none !important;
    }

    /* Position Avatar on the Left */
    .patients-main-table td:nth-of-type(3)>div {
        width: 100%;
        justify-content: center !important;
        display: flex !important;
        align-items: center;
        position: relative;
        /* ensure proper containment */
    }

    .patients-main-table td:nth-of-type(3) img,
    .patients-main-table td:nth-of-type(3) .placeholder {
        position: absolute !important;
        left: 0px !important;
        margin: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        top: 50%;
        transform: translateY(-50%);
        display: block !important;
    }

    /* --- 7. NAME HEADER BAR (2nd cell) --- */
    .nursing-table td:nth-of-type(2),
    .emp-table td:nth-of-type(2),
    .clinic-table td:nth-of-type(2),
    .drug-table td:nth-of-type(2) {
        position: relative;
        background: #f8fafc;
        margin: -20px -20px 15px -20px !important;
        width: calc(100% + 40px) !important;
        padding: 15px 20px !important;
        border-bottom: 2px solid #f1f5f9 !important;
        font-size: 16px !important;
        font-weight: 800;
        color: var(--primary-dark, #0e1d59);
        display: flex !important;
        align-items: center;
        min-height: 65px;
        direction: rtl !important;
        justify-content: center !important;
    }

    .nursing-table td:nth-of-type(2)::before,
    .emp-table td:nth-of-type(2)::before,
    .clinic-table td:nth-of-type(2)::before,
    .drug-table td:nth-of-type(2)::before {
        content: none !important;
    }

    /* --- 8. LAST CELL (Actions) --- */
    .nursing-table td:last-child,
    .emp-table td:last-child,
    .clinic-table td:last-child,
    .drug-table td:last-child {
        display: flex !important;
        flex-direction: row !important;
        width: 100%;
        padding: 12px !important;
        background: #f8fafc;
        border-top: 1px dashed #e2e8f0 !important;
        border-bottom: none !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 5px;
    }

    .nursing-table td:last-child::before,
    .emp-table td:last-child::before,
    .clinic-table td:last-child::before,
    .drug-table td:last-child::before {
        display: none !important;
    }

    /* --- 9. ACTION BUTTONS (Compact Square) --- */
    .nursing-table td:last-child .btn-sm,
    .emp-table td:last-child .btn-sm,
    .clinic-table td:last-child .btn-sm,
    .drug-table td:last-child .btn-sm,
    .nursing-table td:last-child .btn,
    .emp-table td:last-child .btn,
    .clinic-table td:last-child .btn,
    .drug-table td:last-child .btn {
        padding: 5px !important;
        min-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    /* زرّا تعديل ومسح في جدول الوصفة: منع التداخل على الموبايل */
    .drug-table td:last-child {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .drug-table td:last-child > div {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    .drug-table td:last-child .btn-sm,
    .drug-table td:last-child .btn {
        min-width: 72px !important;
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Remove last border */
    .nursing-table td:nth-last-child(2),
    .emp-table td:nth-last-child(2),
    .drug-table td:nth-last-child(2) {
        border-bottom: none !important;
    }

    /* Price Cell Styling */
    .nursing-table td[style*="color:#15803d"],
    .nursing-table td[style*="color: #15803d"] {
        color: #16a34a !important;
        font-weight: bold !important;
    }

    /* =========================================
       LAB TABLE LABELS (#lab-data-body)
       Cols: #, Name, Type, Test, Desc, Count, Price, Date, Actions
       ========================================= */
    #lab-data-body td:nth-of-type(3)::before {
        content: "التصنيف";
    }

    #lab-data-body td:nth-of-type(4)::before {
        content: "نوع الفحص";
    }

    #lab-data-body td:nth-of-type(5)::before {
        content: "الوصف";
    }

    #lab-data-body td:nth-of-type(6)::before {
        content: "العدد";
    }

    #lab-data-body td:nth-of-type(7)::before {
        content: "السعر";
    }

    #lab-data-body td:nth-of-type(8)::before {
        content: "التاريخ";
    }

    /* =========================================
       NURSING TABLE LABELS (#nursing-list-body)
       Cols: #, Name, Type, Service, Count, Price, Date, Actions
       ========================================= */
    #nursing-list-body td:nth-of-type(3)::before {
        content: "التصنيف";
    }

    #nursing-list-body td:nth-of-type(4)::before {
        content: "الخدمة";
    }

    #nursing-list-body td:nth-of-type(5)::before {
        content: "العدد";
    }

    #nursing-list-body td:nth-of-type(6)::before {
        content: "السعر";
    }

    #nursing-list-body td:nth-of-type(7)::before {
        content: "التاريخ";
    }

    /* التمريض: الاسم في سطر واحد */
    #nursing-list-body td[data-label="المريض"],
    #nursing-list-body td[data-label="اسم المريض"],
    #nursing-list-body td:nth-of-type(2) {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* =========================================
       EMPLOYEES TABLE LABELS (#employees-table-body)
       Cols: #, Photo, Name, Role, Phone, Salary, Actions
       ========================================= */
    #employees-table-body td:nth-of-type(3)::before {
        content: "الاسم";
    }

    #employees-table-body td:nth-of-type(4)::before {
        content: "الوظيفة";
    }

    #employees-table-body td:nth-of-type(5)::before {
        content: "الهاتف";
    }

    #employees-table-body td:nth-of-type(6)::before {
        content: "الراتب";
    }

    /* Employee Photo Cell - Make it an avatar */
    #employees-table-body td:nth-of-type(2) {
        padding-right: 15px !important;
    }

    #employees-table-body td:nth-of-type(2) img,
    #employees-table-body td:nth-of-type(2) .placeholder {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    /* =========================================
       FINANCE TABLE LABELS (#revenues-table-body, #expenses-table-body)
       Cols: #, Date, Type, Notes, Amount, Actions
       ========================================= */
    #revenues-table-body td:nth-of-type(2)::before {
        content: "التاريخ";
    }

    #revenues-table-body td:nth-of-type(3)::before {
        content: "النوع";
    }

    #revenues-table-body td:nth-of-type(4)::before {
        content: "الملاحظات";
    }

    #revenues-table-body td:nth-of-type(5)::before {
        content: "المبلغ";
    }

    #expenses-table-body td:nth-of-type(2)::before {
        content: "التاريخ";
    }

    #expenses-table-body td:nth-of-type(3)::before {
        content: "النوع";
    }

    #expenses-table-body td:nth-of-type(4)::before {
        content: "الملاحظات";
    }

    #expenses-table-body td:nth-of-type(5)::before {
        content: "المبلغ";
    }

    /* Finance - Name Header Override (1st cell is # , 2nd is Date for finance) */
    #revenues-table-body td:nth-of-type(2),
    #expenses-table-body td:nth-of-type(2) {
        background: transparent;
        margin: 0 !important;
        width: 100%;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 13px !important;
        font-weight: 600;
        color: #475569;
        min-height: 36px;
    }

    #revenues-table-body td:nth-of-type(2)::before,
    #expenses-table-body td:nth-of-type(2)::before {
        content: "التاريخ" !important;
        display: inline !important;
    }

    /* Amount Cell Highlight */
    #revenues-table-body td:nth-of-type(5),
    #expenses-table-body td:nth-of-type(5) {
        color: #16a34a !important;
        font-weight: bold !important;
    }

    /* =========================================
       BOOKINGS TABLE LABELS (#bookings-table-body)
       Cols: #, Name, Phone, Date/Time, QueueNo, Status, Actions
       ========================================= */
    #bookings-table-body td:nth-of-type(2)::before {
        content: "اسم المريض";
        display: none !important;
        /* Hijacked by Name Bar */
    }

    #bookings-table-body td:nth-of-type(3)::before {
        content: "رقم الهاتف";
    }

    #bookings-table-body td:nth-of-type(4)::before {
        content: "الموعد";
    }

    #bookings-table-body td:nth-of-type(5)::before {
        content: "رقم الحجز";
    }

    #bookings-table-body td:nth-of-type(6)::before {
        content: "الحالة";
    }

    /* Override for Name Bar in Bookings */
    #bookings-table-body td:nth-of-type(2) {
        background: #f0f9ff !important;
        color: #0369a1 !important;
        border-right: none !important;
    }

    /* Ensure Queue Number is centered and bold in mobile */
    #bookings-table-body td:nth-of-type(5) {
        font-weight: 900 !important;
        color: #000 !important;
        font-size: 16px !important;
    }

    /* =========================================
       PATIENT PROFILE RECORDS TABLE (inside modal)
       ========================================= */
    .profile-fin-table,
    .profile-fin-table tbody,
    .profile-fin-table tr,
    .profile-fin-table td {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
    }

    .profile-fin-table thead {
        display: none !important;
    }

    .profile-fin-table tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        overflow: hidden;
        border-right: 5px solid #1e3a8a !important;
        position: relative;
        padding: 15px;
    }

    .profile-fin-table td {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: 6px 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-align: left !important;
        direction: rtl !important;
        font-size: 13px;
    }

    .profile-fin-table td::before {
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        flex-shrink: 0;
        min-width: 70px;
        margin-left: 10px;
    }

    .profile-fin-table td:last-child {
        border-bottom: none !important;
    }

    /* --- DARK MODE SUPPORT --- */
    body.dark-mode .nursing-table tr,
    body.dark-mode .emp-table tr,
    body.dark-mode .clinic-table tr,
    body.dark-mode .drug-table tr {
        background: #2a2a3d !important;
        color: #eee !important;
        border-color: #444;
    }

    body.dark-mode .nursing-table td,
    body.dark-mode .emp-table td,
    body.dark-mode .clinic-table td,
    body.dark-mode .drug-table td {
        color: #ddd !important;
        border-bottom-color: #444 !important;
    }

    body.dark-mode .nursing-table td:nth-of-type(2),
    body.dark-mode .emp-table td:nth-of-type(2),
    body.dark-mode .clinic-table td:nth-of-type(2),
    body.dark-mode .drug-table td:nth-of-type(2) {
        background: #1e1e2e !important;
        color: #90caf9 !important;
    }

    body.dark-mode .nursing-table td:last-child,
    body.dark-mode .emp-table td:last-child,
    body.dark-mode .clinic-table td:last-child,
    body.dark-mode .drug-table td:last-child {
        background: #1e1e2e !important;
    }

    body.dark-mode .nursing-table td::before,
    body.dark-mode .emp-table td::before,
    body.dark-mode .clinic-table td::before,
    body.dark-mode .drug-table td::before {
        color: #94a3b8 !important;
    }

    /* --- TOTAL ROW STYLING --- */
    .nursing-table tr:last-child,
    .emp-table tr:last-child,
    .clinic-table tr:last-child {
        margin-bottom: 0;
    }

    .nursing-table tr[style*="border-top: 2px"],
    .emp-table tr[style*="border-top: 2px"] {
        border-right: 5px solid #16a34a !important;
    }

}

/* END SMART MOBILE RECORD CARD SYSTEM */

/* =========================================
   FINAL OVERRIDES - CHECKUP STATUS & TOGGLE
   ========================================= */
@media screen and (max-width: 991px) {

    /* Status cell: label RIGHT, badge LEFT */
    .checkup-table td:nth-of-type(8) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
        padding: 8px 12px !important;
    }

    .checkup-table td:nth-of-type(8)::before {
        content: "الحالة" !important;
        font-weight: 700 !important;
        color: #64748b !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-left: 15px !important;
        display: inline !important;
    }

    .checkup-table td:nth-of-type(8) .badge {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Toggle cell: label RIGHT, toggle LEFT */
    .checkup-table td:nth-of-type(9) {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
        padding: 8px 12px !important;
    }

    .checkup-table td:nth-of-type(9)::before {
        content: "تأكيد مراجعة" !important;
        font-weight: 700 !important;
        color: #64748b !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-left: 15px !important;
        display: inline !important;
    }

    .checkup-table td:nth-of-type(9) .toggle-switch {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* FIX M1: Drug Grid on Mobile - 2 columns, dur+notes each on own row */
    .drug-input-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Drug name - full width */
    .drug-input-grid>div:first-child {
        grid-column: span 2 !important;
    }

    /* Duration - full row on mobile */
    .drug-input-grid .drug-dur-cell {
        grid-column: span 2 !important;
    }

    /* Notes - full row on mobile */
    .drug-input-grid .drug-note-cell {
        grid-column: span 2 !important;
    }

    /* Add button - full width */
    .drug-input-grid>div:last-child {
        grid-column: span 2 !important;
    }

    /* FIX M2: Medical Report Modern Layout */
    .report-header-controls {
        display: block !important;
    }

    .report-header-row-premium {
        display: flex !important;
        flex-direction: row !important;
        /* Side-by-Side on Tablets */
        padding: 12px !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    .print-toggles-wrapper {
        display: contents;
    }

    @media screen and (max-width: 767px) {
        .hide-mobile-text {
            display: none !important;
        }

        .print-toggles-wrapper {
            display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
            gap: 10px !important;
        }

        .print-toggle-item {
            flex: 1 !important;
            min-width: 0 !important;
            flex-basis: auto !important;
        }

        .print-toggle-item .setting-title {
            font-size: 11px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .print-toggle-item .setting-title i {
            display: none !important;
            /* hide icon on very small screen to save space */
        }

        .report-header-row-premium {
            flex-wrap: wrap !important;
            gap: 12px 10px !important;
        }

        .to-col {
            flex: 0 0 100% !important;
            order: 1;
        }

        #tab-report .rep-type-col {
            flex: 1 1 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            order: 2;
        }

        /* التقرير الطبي: كل الحقول (السعر، طباعة السعر) بعرض الصف كاملاً على الموبايل */
        #tab-report .price-col,
        #tab-report .print-col {
            flex: 1 1 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
        }
        #tab-report .price-col { order: 3; }
        #tab-report .print-col { order: 4; }

        .price-col {
            flex: 1 !important;
            min-width: 120px !important;
            order: 3;
        }

        .print-col {
            flex: 0 0 110px !important;
            order: 4;
        }
    }

    .icon-gradient {
        background: linear-gradient(135deg, #3b82f6 0%, #1a4095 100%);
        background-clip: text;
        /* Compatibility fix */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Center text in ALL patient info inputs (User Request Feb 26) */
    .p-input,
    #p-name,
    #p-age,
    #p-dob,
    #p-date,
    #rep-to,
    #rep-price {
        text-align: center !important;
    }

    /* FIX M4: Fixing Charts under Most Visited to show all content */
    #chart-week-card .chart-container,
    #chart-month-card .chart-container,
    #chart-finance-card .chart-container,
    #chart-lab-card .chart-container,
    #chart-ratio-canvas {
        height: 300px !important;
        /* Smaller height for better mobile fit */
        width: 100% !important;
        max-width: calc(100vw - 40px) !important;
        overflow-x: auto;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   DARK MODE GRADIENT OVERRIDES
   ========================================= */
body.dark-mode {
    background: linear-gradient(135deg, #090f1a 0%, #1e293b 100%) !important;
    background-attachment: fixed !important;
    color: #f8fafc !important;
}

body.dark-mode .app-container {
    background: transparent !important;
}

body.dark-mode .sidebar {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5) !important;
}

/* دارك مود: سكرول السايدر — رصاصي فاتح */
body.dark-mode .sidebar-nav::-webkit-scrollbar-track {
    background: rgba(71, 85, 105, 0.35) !important;
}
body.dark-mode .sidebar-nav::-webkit-scrollbar-thumb {
    background: #64748b !important;
    border: 1px solid rgba(100, 116, 139, 0.8) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}
body.dark-mode .sidebar-nav {
    scrollbar-color: #64748b rgba(71, 85, 105, 0.4) !important;
}

body.dark-mode .main-content,
body.dark-mode .tab-content-area {
    background: transparent !important;
}

/* Force dark on any panel that might have inline white background */
body.dark-mode .white-pane,
body.dark-mode .stat-card,
body.dark-mode .bg-light,
body.dark-mode .modal-box,
body.dark-mode .patient-grid .p-card,
body.dark-mode .l-card,
body.dark-mode .pharmacy-card,
body.dark-mode .finance-card,
body.dark-mode .dashboard-card,
body.dark-mode table th,
body.dark-mode .tabs-header,
body.dark-mode .clinic-table-card,
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background: #ffffff"] {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    color: #f1f5f9 !important;
    transition: all 0.3s ease;
}

/* Glassy Hover Effect for Landing Cards */
.landing-cards .l-card:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-8px);
}

body.dark-mode .landing-cards .l-card:hover {
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
}

/* Ensure text remains visible on hover */
.l-card:hover h3,
.l-card:hover p,
.l-card:hover i {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.dark-mode table {
    background: rgba(15, 23, 42, 0.5) !important;
}

body.dark-mode table tbody tr {
    background: rgba(30, 41, 59, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode table tbody tr:hover {
    background-color: #1e293b !important;
    /* Unified solid blue/slate for hover (Image 2 fix) */
}

body.dark-mode table td {
    background: transparent !important;
    color: #e2e8f0 !important;
}

body.dark-mode th {
    color: #38bdf8 !important;
    background: rgba(30, 41, 59, 0.8) !important;
}

/* Select and inputs in dark mode */
body.dark-mode .form-control,
body.dark-mode select.form-control,
body.dark-mode input.form-control,
body.dark-mode select,
body.dark-mode option,
body.dark-mode .form-control[style*="background: #ffffff"],
body.dark-mode .form-control[style*="background:#ffffff"],
body.dark-mode .form-control[style*="background: white"],
body.dark-mode .form-control[style*="background:white"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

/* Specific fix for select dropdown options */
body.dark-mode select option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

body.dark-mode .form-control:focus {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

body.dark-mode .top-toolbar {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Make text easily readable over gradients */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .stat-value,
body.dark-mode .card-title,
body.dark-mode .nav-item,
body.dark-mode .nav-item span {
    color: #f8fafc !important;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .stat-label {
    color: #cbd5e1 !important;
}

/* Sidebar active state */
body.dark-mode .nav-item.active {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
}

/* User profile badge in dark mode */
body.dark-mode .user-info-badge,
body.dark-mode .header-profile-card {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .user-name,
body.dark-mode .header-profile-card .p-name,
body.dark-mode .header-profile-card div {
    color: #f8fafc !important;
}

/* Specific table darkening */
body.dark-mode table,
body.dark-mode .clinic-table,
body.dark-mode .drug-table {
    background-color: #0b1120 !important;
}

body.dark-mode table thead tr th {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    border-bottom: 2px solid #334155 !important;
}

@media screen and (max-width: 991px) {
    body.dark-mode .patients-main-table td:nth-of-type(3) {
        background: #0f172a !important;
        border-bottom-color: #1e3a8a !important;
    }

    body.dark-mode .patients-main-table td:nth-of-type(2) {
        background: transparent !important;
        color: #e2e8f0 !important;
    }

    body.dark-mode .patients-main-table td[data-label="#"],
    body.dark-mode .patients-main-table td:nth-of-type(1) {
        background: #1e3a8a !important;
        color: #ffffff !important;
        border-color: #0f172a !important;
    }
}

body.dark-mode table tbody tr {
    background-color: #0f172a !important;
}

body.dark-mode table tbody tr:nth-child(even) {
    background-color: rgb(30, 41, 59) !important;
}

body.dark-mode .patients-main-table tr,
body.dark-mode .patients-main-table tr:nth-child(even) {
    background-color: #0b1120 !important;
    border-color: #1e3a8a !important;
}

/* Fix dropdown arrow — سهم أسود في الدارك مود (يُستثنى الفلاتر بقاعدة لاحقة) */
body.dark-mode select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
    appearance: none !important;
}
/* اعتيادي/متابعة: سهم واحد أسود فقط في الدارك مود (إزالة السهم المزدوج) */
body.dark-mode #tab-bookings .b-col-type .booking-type-select-wrap select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
}
body.dark-mode #tab-bookings .b-col-type .booking-type-select-wrap .icofont-rounded-down {
    display: none !important;
}

/* Fix for mobile header and icons */
body.dark-mode .mobile-app-header {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .sidebar-header {
    background: #1e293b !important;
}

body.dark-mode .sidebar-logo-text {
    color: #f8fafc !important;
}

/* --- LATEST DARK MODE REFINEMENTS --- */

/* 1. Dark Gradient for "Add New" sections (Checkup, Lab, Nursing, Employee) */
body.dark-mode div[style*="linear-gradient(179deg, #e5f7f0 0%, #ffffff 80%)"],
body.dark-mode #tab-checkup .interactive-card,
body.dark-mode #tab-medical-lab .common-dashboard-card,
body.dark-mode #tab-nursing .common-dashboard-card,
body.dark-mode #tab-employees .common-dashboard-card,
body.dark-mode #emp-form-container .common-dashboard-card {
    background: linear-gradient(179deg, #1f4133 0%, #000000 80%) !important;
    border: 1px solid #516d5b !important;
}

/* 2. Darker Input Fields with Green Borders as per Image 2 */
/* 2. Form Controls standard dark mode */
body.dark-mode .form-control,
body.dark-mode select.form-control,
body.dark-mode input.form-control,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0b1120 !important;
    background: #0b1120 !important;
    color: #ffffff !important;
    border: 1px solid #516d5b !important;
    border-radius: 8px !important;
}

/* Fix text color for forced white backgrounds in dark mode (Image 1 fix) */
body.dark-mode input[style*="fff" i],
body.dark-mode select[style*="fff" i],
body.dark-mode textarea[style*="fff" i],
body.dark-mode input[style*="white" i],
body.dark-mode select[style*="white" i],
body.dark-mode textarea[style*="white" i],
body.dark-mode .form-control[style*="fff" i],
body.dark-mode .form-control[style*="white" i],
body.dark-mode input[style*="rgb(255" i],
body.dark-mode select[style*="rgb(255" i],
body.dark-mode textarea[style*="rgb(255" i],
body.dark-mode .form-control[style*="rgb(255" i] {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    /* Forces text color even in tricky WebKit scenarios */
}


/* 3. Dark Indigo Table Row Dividers */
body.dark-mode table tbody tr {
    /* "نيلي داكن" = Dark Indigo */
    border-bottom: 1px solid #1e3a8a !important;
}

/* 4. Fix Filter Card backgrounds (Image 2 fix) */
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode .booking-filters,
body.dark-mode .common-dashboard-card:not([style*="linear-gradient"]) {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .booking-filters label,
body.dark-mode .booking-filters span,
body.dark-mode .records-filter-grid label,
body.dark-mode .finance-filter-grid label,
body.dark-mode .checkup-filter-grid label,
body.dark-mode .lab-filter-grid label,
body.dark-mode .nursing-filter-grid label,
body.dark-mode .emp-filter-grid label,
body.dark-mode .bookings-filter-grid label,
body.dark-mode .records-filter-grid span,
body.dark-mode .finance-filter-grid span,
body.dark-mode .checkup-filter-grid span,
body.dark-mode .lab-filter-grid span,
body.dark-mode .nursing-filter-grid span,
body.dark-mode .emp-filter-grid span,
body.dark-mode .bookings-filter-grid span {
    color: #ffffff !important;
    /* Make filter labels white despite inline colors */
}

/* دارك: حقول فلتر التاريخ (من - إلى) في كل التبويبات: خلفية، نص، أيقونة رزنامة */
body.dark-mode #ch-filter-from,
body.dark-mode #ch-filter-to,
body.dark-mode #filter-date-from,
body.dark-mode #filter-date-to,
body.dark-mode #n-filter-date-from,
body.dark-mode #n-filter-date-to,
body.dark-mode #nurse-filter-date-from,
body.dark-mode #nurse-filter-date-to {
    background: #0b1120 !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}
body.dark-mode #ch-filter-from::-webkit-calendar-picker-indicator,
body.dark-mode #ch-filter-to::-webkit-calendar-picker-indicator,
body.dark-mode #filter-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #filter-date-to::-webkit-calendar-picker-indicator,
body.dark-mode #n-filter-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #n-filter-date-to::-webkit-calendar-picker-indicator,
body.dark-mode #nurse-filter-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #nurse-filter-date-to::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

/* دارك: حقول إضافة كشف (الاسم، التاريخ، الوقت، الملاحظات، السعر) في البطاقة التفاعلية */
body.dark-mode #ch-add-name,
body.dark-mode #ch-add-date,
body.dark-mode #ch-add-time,
body.dark-mode #ch-add-notes {
    background-color: #d8e5ff !important;
    color: #000000 !important;
    border-color: #93c5fd !important;
}
/* غلاف السعر في تبويب الكشف: خلفية بيضاء وكتابة سوداء (دارك مود) */
body.dark-mode #tab-checkup .interactive-card .price-input-wrapper {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    color: #000000 !important;
}
body.dark-mode #tab-checkup .interactive-card .price-input-wrapper .currency-label {
    color: #000000 !important;
}
body.dark-mode #tab-checkup .interactive-card .price-input-wrapper .price-input,
body.dark-mode #tab-checkup .interactive-card .price-input-wrapper input,
body.dark-mode #tab-checkup .interactive-card #ch-add-price {
    background: transparent !important;
    color: #000000 !important;
}
body.dark-mode #tab-checkup .interactive-card #ch-add-price::placeholder {
    color: #64748b !important;
}

/* 5. Ensure Filter Titles and Labels stay greenish or white in "Add New" areas */
body.dark-mode div[style*="linear-gradient"] label,
body.dark-mode div[style*="linear-gradient"] h5 {
    color: #bbf7d0 !important;
}

/* 6. Fix for select options color in dark mode */
body.dark-mode select option {
    background-color: #0b1120 !important;
    color: #ffffff !important;
}

/* 7. Autocomplete dropdown list rendering in Dark Mode (Image 4 fix) */
body.dark-mode div[id$="autocomplete-list"],
body.dark-mode div[id$="-list-custom"],
body.dark-mode .autocomplete-items {
    background: #0b1120 !important;
    border-color: #1e3a8a !important;
}

body.dark-mode div[id$="autocomplete-list"] div,
body.dark-mode div[id$="-list-custom"] div,
body.dark-mode .autocomplete-items div {
    border-bottom: 1px solid #1e293b !important;
    color: #ffffff !important;
}

body.dark-mode div[id$="autocomplete-list"] div>div[style*="color:#1e293b"],
body.dark-mode div[id$="-list-custom"] div>div[style*="color:#1e293b"] {
    color: #ffffff !important;
    /* Override inline name color */
}

body.dark-mode div[id$="autocomplete-list"] div:hover,
body.dark-mode div[id$="-list-custom"] div:hover {
    background: #1e293b !important;
}

/* 8. Action Buttons Filled in Dark Mode (Image 4 fix) */
/* Edit Button (Green) */
body.dark-mode table button[onclick*="Edit"],
body.dark-mode table button[onclick*="edit"],
body.dark-mode table button.btn-light[style*="color:#006400"],
body.dark-mode table button.btn-light[style*="color: #006400"],
body.dark-mode table button.btn-outline-success {
    background-color: #059669 !important;
    /* Emerald 600 */
    border-color: #059669 !important;
    color: #ffffff !important;
}

body.dark-mode table button[onclick*="Edit"] *,
body.dark-mode table button[onclick*="edit"] *,
body.dark-mode table button.btn-light[style*="color:#006400"] *,
body.dark-mode table button.btn-light[style*="color: #006400"] *,
body.dark-mode table button.btn-outline-success * {
    color: #ffffff !important;
}

/* Edit Button (Orange) */
body.dark-mode table button.btn-outline-warning {
    background-color: #d97706 !important;
    /* Amber 600 */
    border-color: #d97706 !important;
    color: #ffffff !important;
}

body.dark-mode table button.btn-outline-warning * {
    color: #ffffff !important;
}

/* Delete Button (Red) */
body.dark-mode table button[onclick*="delete"],
body.dark-mode table button[onclick*="Delete"],
body.dark-mode table button.text-danger,
body.dark-mode table button.btn-outline-danger {
    background-color: #dc2626 !important;
    /* Red 600 */
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

body.dark-mode table button[onclick*="delete"] *,
body.dark-mode table button[onclick*="Delete"] *,
body.dark-mode table button.text-danger *,
body.dark-mode table button.btn-outline-danger * {
    color: #ffffff !important;
}

/* Cancel Buttons (Gray) */
body.dark-mode button[onclick*="cancel" i],
body.dark-mode button[onclick*="Cancel" i],
body.dark-mode .btn-secondary {
    background-color: #64748b !important;
    /* Slate 500 */
    border-color: #64748b !important;
    color: #ffffff !important;
}

body.dark-mode button[onclick*="cancel" i] *,
body.dark-mode button[onclick*="Cancel" i] *,
body.dark-mode .btn-secondary * {
    color: #ffffff !important;
}

/* Ensure Quick Report Buttons stretch full width on Desktop */
@media (min-width: 769px) {
    .quick-reports-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }

    .quick-reports-row .btn {
        flex: 1;
        min-width: 120px;
    }
}

/* 9. Referral Backgrounds in Dark Mode */
body.dark-mode #ref-sub-lab>div {
    background: linear-gradient(179deg, #1e3a8a 0%, #0b1120 80%) !important;
    border: 1px solid #1e40af !important;
}

body.dark-mode #ref-sub-lab h6 {
    color: #93c5fd !important;
    border-bottom: 1px solid #1e40af !important;
}

body.dark-mode #ref-sub-nursing>div {
    background: linear-gradient(179deg, #7c2d12 0%, #0b1120 80%) !important;
    border: 1px solid #9a3412 !important;
}

body.dark-mode #ref-sub-nursing h6 {
    color: #fdba74 !important;
    border-bottom: 1px solid #9a3412 !important;
}

body.dark-mode #ref-sub-external>div {
    background: linear-gradient(179deg, #14532d 0%, #0b1120 80%) !important;
    border: 1px solid #166534 !important;
}

body.dark-mode #ref-sub-external h6 {
    color: #86efac !important;
    border-bottom: 1px solid #166534 !important;
}

/* 10. Doctor Notes in Bookings Tab */
body.dark-mode td[data-label="ملاحظات"] div {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* 11. Booking Date, Time, Number Details */
body.dark-mode .booking-date {
    color: #ffffff !important;
    font-size: 15px !important;
}

body.dark-mode .booking-time {
    color: #ffffff !important;
    font-size: 14px !important;
}

body.dark-mode .booking-qnum {
    color: #ffffff !important;
    font-size: 20px !important;
}

/* 12. Employee Tab Fixes */
body.dark-mode .emp-name {
    color: #ffffff !important;
}

body.dark-mode .emp-index {
    color: #ffffff !important;
}

body.dark-mode .emp-pagination-text {
    color: #ffffff !important;
}

/* 13. Lab Test Name Fix */
body.dark-mode td .badge-light {
    color: #ffffff !important;
}

body.dark-mode .lab-test-name {
    color: #ffffff !important;
}

/* 14. Dropdown Items Light Green text in Dark Mode */
body.dark-mode #ch-patient-list-custom div,
body.dark-mode #p-name-autocomplete-list div,
body.dark-mode #mb-name-autocomplete-list div {
    background-color: #0b1120 !important;
    color: #86efac !important;
    border-color: #1e293b !important;
}

body.dark-mode #ch-patient-list-custom div>div,
body.dark-mode #p-name-autocomplete-list div>div,
body.dark-mode #mb-name-autocomplete-list div>div {
    background-color: transparent !important;
    color: #86efac !important;
}

/* 15. Employee Stats Cards Dark Mode*/
body.dark-mode .emp-stat-card {
    background: #0b1120 !important;
    border-color: #1e293b !important;
}

body.dark-mode .emp-stat-card p {
    color: #94a3b8 !important;
}

body.dark-mode .emp-stat-card h3 {
    color: #f8fafc !important;
}

/* 16. Finance Tab Dark Mode */
body.dark-mode #tab-finance {
    background: #0b1120 !important;
}

body.dark-mode .finance-management-header {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

body.dark-mode .finance-management-header h2 {
    color: #f8fafc !important;
}

body.dark-mode .finance-filter-grid {
    background: #0b1120 !important;
}

/* 17. Finance Dashboard Cards Texts Dark Mode */
body.dark-mode #rep-total-revenues,
body.dark-mode #tab-finance .common-dashboard-card:nth-child(1) div {
    color: #16a34a !important;
}

body.dark-mode #rep-total-expenses,
body.dark-mode #tab-finance .common-dashboard-card:nth-child(2) div {
    color: #dc2626 !important;
}

body.dark-mode #rep-net-balance,
body.dark-mode #tab-finance .common-dashboard-card:nth-child(3) div {
    color: #38bdf8 !important;
}

/* 18. Shared Editor inside External Referral */
body.dark-mode #ref-shared-editor-container {
    background: transparent !important;
}

body.dark-mode #ref-ext-toolbar {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #ref-ext-editor {
    background: #ffffff !important;
    border-color: #334155 !important;
}

body.dark-mode #ref-ext-editor .ql-editor {
    color: #000000 !important;
}

/* 19. Add Expense / Add Revenue Backgrounds in Dark Mode */
body.dark-mode #fin-view-expenses>.common-dashboard-card:first-child {
    background: linear-gradient(179deg, #040303 0%, #3d251d 80%) !important;
    border: 1px solid #8b5e4a !important;
}

body.dark-mode #fin-view-revenues>.common-dashboard-card:first-child {
    background: linear-gradient(179deg, #14532d 0%, #0b1120 80%) !important;
    border: 1px solid #166534 !important;
}

/* دارك مود: عنوان "إضافة مصروف جديد" يبقى بلون برتقالي واضح */
body.dark-mode #expense-form-header,
body.dark-mode #expense-form-header .clinic-form-toggle-icon,
body.dark-mode #expense-form-header>span,
body.dark-mode #expense-form-header>i {
    color: #d97706 !important;
}

/* دارك مود: نص فلتر التقارير المالية باللون الأبيض */
body.dark-mode #fin-view-report .finance-filters-panel label,
body.dark-mode #fin-view-report .finance-filters-panel .form-control,
body.dark-mode #fin-view-report .finance-filters-panel .form-control::placeholder,
body.dark-mode #fin-view-report .finance-filters-panel select,
body.dark-mode #fin-view-report .finance-filters-panel option {
    color: #ffffff !important;
}

/* 20. Profile Modal in Dark Mode */
body.dark-mode #profile-modal .custom-modal-content,
body.dark-mode #profile-modal .modal-body-custom {
    background: #0b1120 !important;
}

body.dark-mode #profile-modal label {
    color: #ffffff !important;
}

body.dark-mode #profile-modal input {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #1e293b !important;
}

body.dark-mode #profile-modal div[style*="background: #e3f2fd;"] {
    background: #1e293b !important;
    color: #94a3b8 !important;
}

body.dark-mode #profile-role-display {
    color: #86efac !important;
}

/* 21. Header Profile Desktop in Dark Mode */
body.dark-mode #header-profile-name {
    color: #ffffff !important;
}

body.dark-mode #header-profile-role {
    color: #94a3b8 !important;
}

/* 22. Payroll Footer Dark Mode */
body.dark-mode .payroll-summary-row {
    background: #0b1120 !important;
    border-color: #1e293b !important;
}

body.dark-mode .payroll-summary-title {
    color: #ffffff !important;
}

body.dark-mode .payroll-summary-row td {
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
}

/* 23. Extra Dark Mode Fixes */
body.dark-mode .currency-symbol {
    color: #ffffff !important;
}

body.dark-mode .search-subtext {
    color: #ffffff !important;
}

body.dark-mode .pd-name {
    color: #ffffff !important;
}

body.dark-mode .patient-dir-card {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .pd-desc,
body.dark-mode .pd-meta span,
body.dark-mode .pd-phone {
    color: #cbd5e1 !important;
}

body.dark-mode .prof-edit-input {
    color: #ffffff !important;
    background: #0b1120 !important;
    border-color: #334155 !important;
}

body.dark-mode .prof-edit-input:disabled {
    background: #1e293b !important;
    color: #94a3b8 !important;
}

body.dark-mode .p-info-label {
    color: #94a3b8 !important;
}

body.dark-mode .new-btn-item {
    color: #ffffff !important;
}

body.dark-mode .new-btn-item:hover {
    background: #1e293b !important;
}

/* 24. Black icons for specific buttons */
.icon-black {
    color: #000000 !important;
}

/* 25. Medical File Tab styles */
body.dark-mode .photo-preview-container {
    background: transparent !important;
    border-color: #334155 !important;
}

body.dark-mode .profile-pills .p-pill {
    color: #94a3b8;
}

body.dark-mode .profile-pills .p-pill.active {
    background: #1e40af;
    color: white;
}

/* 26. New Dark Mode Layout & Table fixes */
body.dark-mode .prof-edit-input,
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode select {
    color: #ffffff !important;
}

body.dark-mode table td {
    background: #070e1e8a !important;
}

body.dark-mode #tab-finance {
    background: #090e1869 !important;
}

/* Header Profile Card Refinement */
.header-profile-card.desktop-only {
    padding: 4px 25px !important;
    min-width: 180px;
}

/* غلاف صورة البروفايل + رمز الأونلاين في أسفل اليمين داخل الصورة */
.header-profile-img-wrap {
    position: relative !important;
    display: inline-block !important;
    line-height: 0 !important;
}
.header-online-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    background: #16a34a !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Light Mode Header Rounding Refinement */
.clinic-table thead th:first-child {
    border-top-right-radius: 12px;
}

.clinic-table thead th:last-child {
    border-top-left-radius: 12px;
}

body.dark-mode .header-profile-card.desktop-only {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .header-patient-search-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .header-patient-search-box .header-search-input {
    color: #e2e8f0;
}
body.dark-mode .header-patient-search-box .header-search-input::placeholder {
    color: #94a3b8;
}
body.dark-mode .header-patient-search-box .header-search-icon-left {
    color: #94a3b8;
}

body.dark-mode #nav-theme-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

body.dark-mode #header-profile-name {
    color: #ffffff !important;
}

body.dark-mode #header-profile-role {
    color: #94a3b8 !important;
}

/* Smart Dark Mode for Employees Tab */
body.dark-mode .emp-stat-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .emp-stat-card p {
    color: #94a3b8 !important;
}

body.dark-mode .emp-stat-card.active-view {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
}

body.dark-mode .common-dashboard-card[style*="background: linear-gradient(179deg, #e5f7f0 0%, #ffffff 80%)"] {
    background: linear-gradient(179deg, #064e3b 0%, #0b1120 80%) !important;
    border-color: #059669 !important;
}

body.dark-mode #emp-form label,
body.dark-mode #emp-form-title {
    color: #ffffff !important;
}

/* دارك مود: أيقونة الكاميرا في صندوق رفع صورة الموظف — أخضر قاتم */
body.dark-mode .photo-upload-box .icofont-camera,
body.dark-mode .photo-upload-box > span {
    color: #15803d !important;
}

body.dark-mode .emp-table-container,
body.dark-mode .emp-table {
    background: transparent !important;
    border-color: #334155 !important;
}

body.dark-mode .emp-table thead {
    background: #0f172a !important;
}

body.dark-mode .emp-table th {
    color: #ffffff !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .emp-table td {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .emp-table tfoot {
    background: #0f172a !important;
    color: #ffffff !important;
    border-top-color: #334155 !important;
}

/* Kanban Smart Dark Mode */
body.dark-mode .kanban-col {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .kanban-header {
    background: #1e293b !important;
    color: #ffffff !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .kanban-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .kanban-card .card-title {
    color: #ffffff !important;
}

body.dark-mode .kanban-card .card-id-badge {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

body.dark-mode .kanban-assignee {
    background: #0f172a !important;
    color: #cbd5e1 !important;
}

body.dark-mode .kanban-img-price {
    background: #064e3b !important;
    color: #4ade80 !important;
    border-color: #059669 !important;
}

body.dark-mode .kanban-card.status-done {
    border-left-color: #22c55e !important;
}

body.dark-mode .kanban-card.status-doing {
    border-left-color: #3b82f6 !important;
}

body.dark-mode .kanban-card.status-todo {
    border-left-color: #94a3b8 !important;
}

body.dark-mode .k-tag {
    background: #334155 !important;
    color: #94a3b8 !important;
}

body.dark-mode .att-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .att-card.present {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.1) !important;
}

body.dark-mode .att-card.absent {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

body.dark-mode .clinic-table thead th {
    background: linear-gradient(180deg, rgba(37, 79, 147, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode .clinic-table,
body.dark-mode .clinic-table-card,
body.dark-mode .common-dashboard-card:not([style*="background: white"]) {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.dark-mode .clinic-table tr {
    background: #000000f0 !important;
}

body.dark-mode .clinic-table {
    border-color: #334155 !important;
}

body.dark-mode .clinic-table td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .fin-cat-label {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.dark-mode .db-item-row {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .db-item-index {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

body.dark-mode .db-item-val {
    color: #ffffff !important;
}

/* Control Panel Dark Mode Fixes */
body.dark-mode .cp-content {
    background: #0b1120 !important;
    color: #ffffff !important;
}

body.dark-mode .cp-card,
body.dark-mode .cp-database-inner {
    /* Targeting containers like the one in lines 6199 */
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .cp-card div[style*="background:#f8fafc"] {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .cp-section-title,
body.dark-mode .cp-desc {
    color: #ffffff !important;
}

body.dark-mode .p-tab-btn {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode .p-tab-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
}

/* User & Role Cards in CP */
body.dark-mode #cp-users-cards-container>div,
body.dark-mode #cp-roles-cards-container>div {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #cp-users-cards-container h5,
body.dark-mode #cp-roles-cards-container h5 {
    color: #ffffff !important;
}

body.dark-mode #cp-users-cards-container div[style*="color: #64748b"],
body.dark-mode #cp-roles-cards-container div[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* Booking Status Badge */
.status-badge-booking {
    font-size: 14px !important;
    padding: 6px 12px !important;
}

body.dark-mode .status-badge-booking {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .status-badge-booking[style*="color:#166534"] {
    color: #4ade80 !important;
}

body.dark-mode .status-badge-booking[style*="color:#854d0e"] {
    color: #fbbf24 !important;
}

/* Clinic Settings Modal Dark Mode */
body.dark-mode #clinic-settings-modal .custom-modal-content {
    background: #0b1120 !important;
    border: 1px solid #334155 !important;
}

body.dark-mode #clinic-settings-modal .modal-header-custom,
body.dark-mode #clinic-settings-modal .modal-footer-custom {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode #clinic-settings-modal .modal-header-custom h3 {
    color: #ffffff !important;
}

/* دارك مود: أيقونة الجزيرة في هيدر إعدادات العيادة — لون أزرق */
body.dark-mode #clinic-settings-modal .modal-header-custom i.icofont-island-alt,
body.dark-mode #clinic-settings-modal .modal-header-custom .text-primary {
    color: #3b82f6 !important;
}

/* دارك مود: زر الإغلاق (X) أعلى قليلاً */
body.dark-mode #clinic-settings-modal .modal-header-custom .btn.rounded-circle {
    align-self: flex-start;
    margin-top: -4px;
}

body.dark-mode #clinic-settings-modal .modal-body-custom {
    background: #0f172a !important;
}

body.dark-mode #clinic-settings-modal .modal-body-custom h6 {
    color: #ffffff !important;
}

body.dark-mode .holiday-card-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

body.dark-mode .holiday-card-item.selected {
    background: #1e3a8a !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .holiday-card-item i,
body.dark-mode .holiday-card-item .holiday-item-icon,
body.dark-mode .holiday-card-item .icofont-beach {
    color: #94a3b8 !important;
}

body.dark-mode .holiday-card-item.selected i {
    color: #3b82f6 !important;
}

body.dark-mode .specific-holiday-chip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode #clinic-settings-modal input[type="date"] {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

/* دارك مود: رمز الرزنامة أبيض في حقل تاريخ العطلة */
body.dark-mode #clinic-settings-modal #new-holiday-date::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}
body.dark-mode #clinic-settings-modal #new-holiday-date {
    color-scheme: dark;
}

body.dark-mode .input-group-custom {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Replace white backgrounds in dark mode with light blue highlight */
/* Replace white backgrounds in dark mode with light blue highlight ONLY for inputs */
body.dark-mode .form-control,
body.dark-mode input:not([type="button"]):not([type="submit"]),
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .ql-container {
    background-color: #d8e5ff !important;
    color: #0f172a !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #475569 !important;
    opacity: 1;
}

/* دارك مود: كل أسهم الحقول (تاريخ، datalist) سوداء في كل النظام — للحقول ذات الخلفية الفاتحة */
body.dark-mode input::-webkit-calendar-picker-indicator {
    filter: brightness(0);
    opacity: 1;
}

/* Show Select Arrow Clearly */
body.dark-mode select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important;
    background-size: 16px 12px !important;
}

body.dark-mode .ql-editor {
    color: #0f172a !important;
}

/* Ensure finance tab and payroll table inputs are excluded if they should keep dark theme */
body.dark-mode #tab-finance .form-control,
body.dark-mode #tab-finance input,
body.dark-mode #tab-finance select,
body.dark-mode .payroll-filter-grid .form-control,
body.dark-mode .payroll-filter-grid input,
body.dark-mode .payroll-filter-grid select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* --- ATTENDANCE & PAYROLL DARK MODE POLISH --- */
body.dark-mode .att-card-item {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
}

body.dark-mode .att-card-inner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

body.dark-mode .att-name {
    color: #f8fafc !important;
}

body.dark-mode .att-role-small {
    color: #94a3b8 !important;
}

body.dark-mode .att-status-badge {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

body.dark-mode .att-stats-compact-item {
    background: #111827 !important;
    border-color: #1e293b !important;
}

body.dark-mode .stat-lbl {
    color: #64748b !important;
}

body.dark-mode .stat-val {
    color: #f8fafc !important;
}

body.dark-mode .payroll-filter-grid label,
body.dark-mode .booking-filters label {
    color: #cbd5e1 !important;
}

/* رواتب الموظفين — الحالة وجميع القوائم مناسبة للدارك مود */
body.dark-mode #payroll-status,
body.dark-mode .payroll-filter-grid select,
body.dark-mode #emp-view-payroll select.form-control,
body.dark-mode #emp-view-main select.form-control,
body.dark-mode #emp-view-attendance select.form-control {
    background-color: #1e293b !important;
    color: #fff !important;
    border-color: #334155 !important;
}
body.dark-mode #payroll-status option,
body.dark-mode .payroll-filter-grid select option,
body.dark-mode #emp-view-payroll select option,
body.dark-mode #emp-view-main select option {
    background-color: #1e293b !important;
    color: #fff !important;
}
body.dark-mode #emp-view-payroll .payroll-filter-grid label,
body.dark-mode #emp-view-payroll .emp-table-container th,
body.dark-mode #emp-view-payroll .emp-table-container td {
    color: #e2e8f0 !important;
}
body.dark-mode #emp-view-payroll .emp-table-container thead th {
    background: #1e293b !important;
    color: #fff !important;
    border-color: #334155 !important;
}
body.dark-mode #emp-view-payroll .emp-table-container tbody td {
    border-color: #334155 !important;
}
body.dark-mode #emp-view-payroll #payroll-table-foot {
    background: #1e293b !important;
    color: #fff !important;
    border-color: #334155 !important;
}
/* قوائم الحالة في تبويب الموظفين (رواتب، حضور، إلخ) */
body.dark-mode #tab-employees select.form-control,
body.dark-mode #tab-employees .form-control {
    background-color: #1e293b !important;
    color: #fff !important;
    border-color: #334155 !important;
}
body.dark-mode #tab-employees select.form-control option {
    background-color: #1e293b !important;
    color: #fff !important;
}
body.dark-mode #tab-employees label {
    color: #e2e8f0 !important;
}

/* --- ANALYTICS CONTROLS DARK MODE --- */
body.dark-mode .analytics-controls,
body.dark-mode .analytics-period-box,
body.dark-mode .analytics-toggles-box {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(10px);
    padding: 12px 20px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    gap: 15px;
}

body.dark-mode .analytics-controls .btn-outline-secondary,
body.dark-mode .analytics-period-box .btn-outline-secondary,
body.dark-mode .analytics-toggles-box .btn-outline-secondary {
    color: #ffffff !important;
    border-color: #334155 !important;
    background: transparent !important;
}

body.dark-mode .analytics-controls .btn-outline-secondary.active,
body.dark-mode .analytics-period-box .btn-outline-secondary.active,
body.dark-mode .analytics-toggles-box .btn-outline-secondary.active {
    background: #3b82f6 !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* --- GRADIENT CARDS REFINE --- */
.finance-revenue-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

.finance-expenses-gradient {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0) 100%) !important;
}

.finance-net-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

body.dark-mode .finance-revenue-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.3) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

body.dark-mode .finance-expenses-gradient {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(220, 38, 38, 0) 100%) !important;
}

body.dark-mode .finance-net-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

/* --- PATIENT CARDS GRADIENT --- */
.patient-add-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

.patient-search-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

.patient-edit-gradient {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0) 100%) !important;
}

.patient-list-gradient {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0) 100%) !important;
}

body.dark-mode .patient-add-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.3) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

body.dark-mode .patient-search-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

body.dark-mode .patient-edit-gradient {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0) 100%) !important;
}

body.dark-mode .patient-list-gradient {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(124, 58, 237, 0) 100%) !important;
}

/* --- BOOKING CARDS GRADIENT --- */
.booking-total-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

.booking-confirmed-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

.booking-pending-gradient {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(217, 119, 6, 0) 100%) !important;
}

body.dark-mode .booking-total-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 100%) !important;
}

body.dark-mode .booking-confirmed-gradient {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.3) 0%, rgba(22, 163, 74, 0) 100%) !important;
}

body.dark-mode .booking-pending-gradient {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.3) 0%, rgba(217, 119, 6, 0) 100%) !important;
}

body.dark-mode .white-pane,
body.dark-mode .common-dashboard-card:not([class*="-gradient"]) {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

/* ملغى: كان يفرض لوناً على كل العناصر فيخفي رمز الكاميرا وغيره — يُدار لون كل عنصر من قواعده */
/* body.dark-mode .white-pane *, body.dark-mode .common-dashboard-card:not([class*="-gradient"]) * { color: #f8fafc !important; } */

body.dark-mode .top-toolbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =============================================
   DARK MODE POLISH – Comprehensive Final Block
   ============================================= */

/* --- att-stats-container (Attendance summary cards) --- */
body.dark-mode #att-stats-container {
    background: transparent !important;
}

body.dark-mode .att-stat-compact-item {
    /* Keep inline colored background, just add border/shadow */
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
}

body.dark-mode .att-stat-compact-item .stat-lbl {
    color: #1e293b !important;
}

body.dark-mode .att-stat-compact-item .stat-val {
    color: #000000 !important;
}

body.dark-mode .att-stat-compact-item i {
    color: #60a5fa !important;
}

/* finance-filter-grid: خلفية بيضاء في الوضع العادي (بعد إزالة inline background من HTML) */
.finance-filter-grid .form-control {
    background: #fff;
    border-color: #e2e8f0;
}

/* --- finance-filter-grid dark mode: نفس ستايل الفلاتر (خلفية، نص، أيقونات) --- */
body.dark-mode .finance-filter-grid {
    background: #0b1120 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .finance-filter-grid label,
body.dark-mode .finance-filter-grid span {
    color: #ffffff !important;
}

body.dark-mode .finance-filter-grid .form-control {
    background-color: #0b1120 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .finance-filter-grid .form-control::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .finance-filter-grid .form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

/* حقول تاريخ التقرير والإيرادات والمصروفات: أيقونة الرزنامة بيضاء في الدارك */
body.dark-mode #filter-rep-date::-webkit-calendar-picker-indicator,
body.dark-mode #filter-rep-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #filter-rep-date-to::-webkit-calendar-picker-indicator,
body.dark-mode #filter-exp-date::-webkit-calendar-picker-indicator,
body.dark-mode #filter-exp-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #filter-exp-date-to::-webkit-calendar-picker-indicator,
body.dark-mode #filter-rev-date::-webkit-calendar-picker-indicator,
body.dark-mode #filter-rev-date-from::-webkit-calendar-picker-indicator,
body.dark-mode #filter-rev-date-to::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}

body.dark-mode .finance-filter-grid select.form-control {
    color: #ffffff !important;
    background-color: #0b1120 !important;
}

body.dark-mode .finance-filter-grid .input-group-text,
body.dark-mode .finance-filter-grid .btn-outline-secondary {
    background: #0b1120 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* --- att-status-badge dark mode: تدرجات حسب الحالة (على الكل) --- */
body.dark-mode .att-status-badge {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .att-status-badge[data-status="present"] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #0f172a 100%) !important;
    color: #86efac !important;
}
body.dark-mode .att-status-badge[data-status="present"] span,
body.dark-mode .att-status-badge[data-status="present"] i {
    color: #86efac !important;
}
body.dark-mode .att-status-badge[data-status="absent"] {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #0f172a 100%) !important;
    color: #fca5a5 !important;
}
body.dark-mode .att-status-badge[data-status="absent"] span,
body.dark-mode .att-status-badge[data-status="absent"] i {
    color: #fca5a5 !important;
}
body.dark-mode .att-status-badge[data-status="late"] {
    background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #0f172a 100%) !important;
    color: #fcd34d !important;
}
body.dark-mode .att-status-badge[data-status="late"] span,
body.dark-mode .att-status-badge[data-status="late"] i {
    color: #fcd34d !important;
}
body.dark-mode .att-status-badge[data-status="leave"] {
    background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #0f172a 100%) !important;
    color: #a5b4fc !important;
}
body.dark-mode .att-status-badge[data-status="leave"] span,
body.dark-mode .att-status-badge[data-status="leave"] i {
    color: #a5b4fc !important;
}
body.dark-mode .att-status-badge[data-status="pending"] {
    background: linear-gradient(135deg, #334155 0%, #475569 50%, #0f172a 100%) !important;
    color: #94a3b8 !important;
}
body.dark-mode .att-status-badge[data-status="pending"] span,
body.dark-mode .att-status-badge[data-status="pending"] i {
    color: #94a3b8 !important;
}

/* --- Monthly Summary Stat Cards (Dark Mode) --- */
body.dark-mode .stat-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-icon {
    filter: brightness(0.85) saturate(1.2);
}

body.dark-mode .stat-info h3 {
    color: #f8fafc !important;
}

body.dark-mode .stat-info span {
    color: #94a3b8 !important;
}

body.dark-mode .stat-card:nth-child(1) {
    border-bottom-color: #3b82f6 !important;
}

body.dark-mode .stat-card:nth-child(2) {
    border-bottom-color: #10b981 !important;
}

body.dark-mode .stat-card:nth-child(3) {
    border-bottom-color: #0dcaf0 !important;
}

body.dark-mode .stat-card:nth-child(4) {
    border-bottom-color: #f59e0b !important;
}

body.dark-mode .stat-card:nth-child(5) {
    border-bottom-color: #8b5cf6 !important;
}

body.dark-mode .stat-card:nth-child(6) {
    border-bottom-color: #f97316 !important;
}

body.dark-mode .stat-card:nth-child(7) {
    border-bottom-color: #ec4899 !important;
}

body.dark-mode .stat-card:nth-child(8) {
    border-bottom-color: #22d3ee !important;
}

/* --- Finance + Booking Summary Cards: m-dash-card style --- */
.summary-stat-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    cursor: default;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.summary-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
    transition: height 0.3s ease;
}

.summary-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.summary-stat-card:hover::before {
    height: 6px;
}

.summary-stat-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.summary-stat-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

.summary-stat-card .card-label {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
}

.summary-stat-card .card-value {
    font-size: 24px;
    font-weight: 900;
}

/* Revenue card */
.summary-stat-card.revenue::before {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.summary-stat-card.revenue .card-icon {
    background: #dcfce7;
    color: #16a34a;
}

.summary-stat-card.revenue .card-value {
    color: #16a34a;
}

/* Expenses card */
.summary-stat-card.expenses::before {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.summary-stat-card.expenses .card-icon {
    background: #fee2e2;
    color: #dc2626;
}

.summary-stat-card.expenses .card-value {
    color: #dc2626;
}

/* Net card */
.summary-stat-card.net::before {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.summary-stat-card.net .card-icon {
    background: #dbeafe;
    color: #2563eb;
}

.summary-stat-card.net .card-value {
    color: #2563eb;
}

/* Blue total card */
.summary-stat-card.total::before {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.summary-stat-card.total .card-icon {
    background: #dbeafe;
    color: #2563eb;
}

.summary-stat-card.total .card-value {
    color: #2563eb;
}

/* Green confirmed card */
.summary-stat-card.confirmed::before {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.summary-stat-card.confirmed .card-icon {
    background: #dcfce7;
    color: #16a34a;
}

.summary-stat-card.confirmed .card-value {
    color: #16a34a;
}

/* Amber pending card */
.summary-stat-card.pending::before {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.summary-stat-card.pending .card-icon {
    background: #fef3c7;
    color: #d97706;
}

.summary-stat-card.pending .card-value {
    color: #d97706;
}

/* تبويب الحجوزات — بطاقات الملخص: دسكتوب = أيقونة على اليمين، إجمالي الحجوزات على اليسار، تصغير الارتفاع */
@media screen and (min-width: 1401px) {
    #tab-bookings .bookings-summary-cards-row {
        gap: 12px !important;
        margin-bottom: 12px !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card {
        flex-direction: row !important;
        direction: rtl;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px !important;
        gap: 10px !important;
        min-height: auto !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        margin-bottom: 0 !important;
        order: 0;
        flex-shrink: 0;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label {
        font-size: 11px !important;
        order: 1;
        text-align: right;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
        font-size: 20px !important;
        order: 1;
        text-align: right;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label,
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
        flex: 1;
        min-width: 0;
    }
}

/* تبويب الحجوزات — تابلت بورتريه: الأرقام في المنتصف */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-bookings .bookings-summary-cards-row .summary-stat-card {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-value {
        text-align: center !important;
        width: 100%;
        display: block !important;
        margin: 0 auto;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-label {
        text-align: center !important;
    }
    #tab-bookings .bookings-summary-cards-row .summary-stat-card .card-icon {
        margin-left: auto;
        margin-right: auto;
    }
}

body.dark-mode .summary-stat-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .summary-stat-card .card-label {
    color: #94a3b8 !important;
}

/* =============================================
   ATTENDANCE MONTHLY VIEW CARD STAT BOXES
   ============================================= */
.att-month-stat-box {
    padding: 8px;
    border-radius: 8px;
    flex: 1;
}

.att-month-stat-present {
    background: #f0fdf4;
    color: #16a34a;
}

.att-month-stat-absent {
    background: #fef2f2;
    color: #dc2626;
}

.att-month-stat-footer {
    display: flex;
    gap: 10px;
    font-size: 12px;
    justify-content: center;
    margin-top: 5px;
    color: #334155;
}

/* Dark Mode Attendance Monthly Cards */
body.dark-mode .att-month-stat-present {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #4ade80 !important;
}

body.dark-mode .att-month-stat-absent {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #f87171 !important;
}

body.dark-mode .att-month-stat-footer {
    color: #94a3b8 !important;
}

/* Dark mode attendance card inner styling */
body.dark-mode .att-card-inner .att-name {
    color: #60a5fa !important;
}

body.dark-mode .att-card-inner .att-role,
body.dark-mode .att-card-inner .att-role-small {
    color: #94a3b8 !important;
}

body.dark-mode .att-card-inner .att-time-small {
    color: #64748b !important;
}

/* =============================================
   DARK MODE – SELECT DROPDOWN ARROW (ALL SELECT)
   ============================================= */

/* Override all select elements in dark mode — سهم القائمة أسود ليكون واضحاً على الخلفيات الفاتحة */
body.dark-mode select,
body.dark-mode .form-control[type="select"],
body.dark-mode select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
    padding-left: 30px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Exceptions: don't re-apply to inputs that aren't selects */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode textarea {
    background-image: none !important;
}

/* دارك مود: أسهم بيضاء فقط داخل الفلاتر ذات الخلفية الداكنة — تطبيق كامل لتفوق على القواعد العامة */
body.dark-mode .finance-filter-grid select,
body.dark-mode .finance-filter-grid select.form-control,
body.dark-mode .checkup-filter-grid select,
body.dark-mode .checkup-filter-grid select.form-control,
body.dark-mode .lab-filter-grid select,
body.dark-mode .lab-filter-grid select.form-control,
body.dark-mode .nursing-filter-grid select,
body.dark-mode .nursing-filter-grid select.form-control,
body.dark-mode .emp-filter-grid select,
body.dark-mode .emp-filter-grid select.form-control,
body.dark-mode .payroll-filter-grid select,
body.dark-mode .payroll-filter-grid select.form-control,
body.dark-mode .records-filter-grid select,
body.dark-mode .records-filter-grid select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
    padding-left: 32px !important;
}

/* =============================================
   RECORDS FILTER — ONE LINE ON DESKTOP
   ============================================= */
.records-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 0.7fr 0.7fr 0.7fr 1fr 1fr 0.8fr;
    gap: 8px;
    margin-bottom: 20px;
    align-items: end;
    flex-wrap: nowrap;
}

@media screen and (max-width: 900px) {
    .records-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 500px) {
    .records-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   PRICE CELL IN RECORDS TABLE — DARK MODE
   ============================================= */
body.dark-mode .record-price-cell {
    color: #4ade80 !important;
}

/* =============================================
   ATT-STATS-CONTAINER — BLACK TEXT IN DARK MODE
   ============================================= */
body.dark-mode .att-stat-compact-item {
    color: #000000 !important;
}

body.dark-mode .att-stat-compact-item .stat-lbl {
    color: #1e293b !important;
}

body.dark-mode .att-stat-compact-item .stat-val {
    color: #000000 !important;
}

/* =============================================
   ATT-STATUS-BADGE — BLACK TEXT IN DARK MODE
   ============================================= */
body.dark-mode .att-status-badge:not([data-status]) {
    color: #f1f5f9 !important;
}
body.dark-mode .att-status-badge:not([data-status]) span,
body.dark-mode .att-status-badge:not([data-status]) i {
    color: #f1f5f9 !important;
}

/* =============================================
   MONTHLY SUMMARY STAT-CARD ICONS — DARK COLORED GRADIENT
   All 12 stat-card items: colored dark gradient backgrounds for icons
   ============================================= */

/* Card 1 – Total Records (blue) */
body.dark-mode .stat-card:nth-child(1) .stat-icon {
    background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
    color: #93c5fd !important;
}

/* Card 2 – Bookings (purple) */
body.dark-mode .stat-card:nth-child(2) .stat-icon {
    background: linear-gradient(135deg, #4a1d96, #7c3aed) !important;
    color: #c4b5fd !important;
}

/* Card 3 – Checkups (amber) */
body.dark-mode .stat-card:nth-child(3) .stat-icon {
    background: linear-gradient(135deg, #78350f, #d97706) !important;
    color: #fcd34d !important;
}

/* Card 4 – Prescriptions (teal) */
body.dark-mode .stat-card:nth-child(4) .stat-icon {
    background: linear-gradient(135deg, #064e3b, #059669) !important;
    color: #6ee7b7 !important;
}

/* Card 5 – Medical Reports (cyan) */
body.dark-mode .stat-card:nth-child(5) .stat-icon {
    background: linear-gradient(135deg, #083344, #0891b2) !important;
    color: #67e8f9 !important;
}

/* Card 6 – Referrals (orange) */
body.dark-mode .stat-card:nth-child(6) .stat-icon {
    background: linear-gradient(135deg, #7c2d12, #ea580c) !important;
    color: #fdba74 !important;
}

/* Card 7 – Lab (blue) */
body.dark-mode .stat-card:nth-child(7) .stat-icon {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important;
    color: #bfdbfe !important;
}

/* Card 8 – Nursing (teal) */
body.dark-mode .stat-card:nth-child(8) .stat-icon {
    background: linear-gradient(135deg, #064e3b, #10b981) !important;
    color: #6ee7b7 !important;
}

/* Card 9 – Employees (amber/yellow) */
body.dark-mode .stat-card:nth-child(9) .stat-icon {
    background: linear-gradient(135deg, #713f12, #ca8a04) !important;
    color: #fde047 !important;
}

body.dark-mode .stat-card:nth-child(9) .stat-info h3 {
    color: #fde047 !important;
}

/* Card 10 – Revenues (green) */
body.dark-mode .stat-card:nth-child(10) .stat-icon {
    background: linear-gradient(135deg, #14532d, #16a34a) !important;
    color: #86efac !important;
}

body.dark-mode .stat-card:nth-child(10) .stat-info h3 {
    color: #86efac !important;
}

/* Card 11 – Expenses (red) */
body.dark-mode .stat-card:nth-child(11) .stat-icon {
    background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
    color: #fca5a5 !important;
}

body.dark-mode .stat-card:nth-child(11) .stat-info h3 {
    color: #fca5a5 !important;
}

/* Card 12 – Net Profit (cyan) */
body.dark-mode .stat-card:nth-child(12) .stat-icon {
    background: linear-gradient(135deg, #083344, #06b6d4) !important;
    color: #67e8f9 !important;
}

body.dark-mode .stat-card:nth-child(12) .stat-info h3 {
    color: #67e8f9 !important;
}

/* General: all stat-card labels in dark mode */
body.dark-mode .stat-card .stat-info span {
    color: #94a3b8 !important;
}

body.dark-mode .stat-card .stat-info h3 {
    color: #f8fafc !important;
}

/* =============================================
   1. DROPDOWN ARROWS – ALL SELECT IN DARK MODE
   ============================================= */
/* Force custom arrow on ALL selects — سهم أسود افتراضي في الدارك مود */
body.dark-mode select:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
    padding-left: 32px !important;
}

/* Selects that have white background inline – سهم أسود */
body.dark-mode select[style*="background: #ffffff"],
body.dark-mode select[style*="background:#ffffff"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
}

/* =============================================
   2. ATT-STATUS-BADGE – DARK GRADIENT BACKGROUND
   ============================================= */
body.dark-mode .att-status-badge:not([data-status]) {
    /* Fallback for badges without data-status */
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    color: #f1f5f9 !important;
    backdrop-filter: blur(4px);
}

body.dark-mode .att-status-badge:not([data-status]) i,
body.dark-mode .att-status-badge:not([data-status]) span {
    color: #f1f5f9 !important;
}

/* =============================================
   3. MONTHLY STAT-CARDS – BORDER-BOTTOM COLORS
      For employees(9), revenues(10), expenses(11), net(12)
   ============================================= */
body.dark-mode .stat-card:nth-child(9) {
    border-bottom-color: #ca8a04 !important;
}

body.dark-mode .stat-card:nth-child(10) {
    border-bottom-color: #16a34a !important;
}

body.dark-mode .stat-card:nth-child(11) {
    border-bottom-color: #dc2626 !important;
}

body.dark-mode .stat-card:nth-child(12) {
    border-bottom-color: #06b6d4 !important;
}

/* =============================================
   4. ANALYTICS-CONTROLS – COMPACT IN DARK MODE
   ============================================= */
body.dark-mode .analytics-controls,
body.dark-mode .analytics-period-box,
body.dark-mode .analytics-toggles-box {
    gap: 6px !important;
    padding: 8px 10px !important;
    background: rgba(15, 23, 42, 0.5) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    border: 1px solid #1e293b !important;
}

body.dark-mode .analytics-controls .btn-sm,
body.dark-mode .analytics-period-box .btn-sm,
body.dark-mode .analytics-toggles-box .btn-sm {
    padding: 3px 10px !important;
    font-size: 11px !important;
    border-radius: 16px !important;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

/* Active / hovered button in analytics-controls */
body.dark-mode .analytics-controls .btn-outline-secondary.active,
body.dark-mode .analytics-controls .btn-outline-secondary:hover,
body.dark-mode .analytics-period-box .btn-outline-secondary.active,
body.dark-mode .analytics-period-box .btn-outline-secondary:hover,
body.dark-mode .analytics-toggles-box .btn-outline-secondary.active,
body.dark-mode .analytics-toggles-box .btn-outline-secondary:hover {
    opacity: 1 !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* =============================================
   5. "هذا الاسبوع" OPTION TEXT – BLACK
   ============================================= */
body.dark-mode .chart-filter-select option[value="week"] {
    color: #000000 !important;
    background: #f8fafc !important;
}

/* =============================================
   6. CALENDAR ICON IN COMPARISON TABLE – BLACK
   ============================================= */
body.dark-mode .stat-card .stat-icon .icofont-calendar {
    color: #000000 !important;
}

/* Bookings card icon specifically (stat-card:nth-child(2)) */
body.dark-mode .stat-card:nth-child(2) .stat-icon i {
    color: #c4b5fd !important;
}

/* Calendar icons in comparison table header */
body.dark-mode .comparison-container-wrapper .icofont-calendar,
body.dark-mode #comparison-results .icofont-calendar {
    color: #000000 !important;
}

/* =============================================
   7. PRICE INPUT IN MEDICAL REPORT – ALWAYS VISIBLE
   ============================================= */
body.dark-mode .price-input-wrapper {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
}

body.dark-mode #rep-price,
body.dark-mode .price-input {
    color: #f8fafc !important;
    background: transparent !important;
    caret-color: #3b82f6 !important;
}

/* دارك مود: حقل السعر في المختبر والتمريض — نص أبيض */
body.dark-mode #n-input-price,
body.dark-mode #nurse-input-price {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dark-mode .price-input::placeholder {
    color: #475569 !important;
}

body.dark-mode .currency-label {
    color: #94a3b8 !important;
}

/* =============================================
   8. REFERRAL TYPE DROPDOWN – LIGHT TEXT OPTIONS
   ============================================= */
body.dark-mode #rx-referral-type {
    background-color: #1e293b !important;
    color: #93c5fd !important;
    border-color: #334155 !important;
    font-weight: bold;
}

body.dark-mode #rx-referral-type option {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* دارك مود: أسهم سوداء لهذه الحقول (خلفية فاتحة) — نوعية أعلى من select.form-control */
body.dark-mode select#rx-referral-type.modern-input-field,
body.dark-mode select#emp-role.form-control,
body.dark-mode select#expense-type.form-control,
body.dark-mode select#revenue-type.form-control {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
body.dark-mode select#rx-referral-type.modern-input-field {
    color: #1f3aa8 !important;
    border-color: #94a3b8 !important;
}
body.dark-mode select#expense-type.form-control {
    border-color: #fdba74 !important;
}
body.dark-mode select#revenue-type.form-control {
    border-color: #bbf7d0 !important;
}

/* دارك مود: سهم القائمة المنسدلة أسود في combobox المختبر والتمريض */
body.dark-mode .custom-lab-combobox .icofont-rounded-down,
body.dark-mode .custom-nurse-combobox .icofont-rounded-down {
    color: #0f172a !important;
}

/* دارك مود: أسهم زيادة/نقصان العدد (number) بدون خلفية سوداء — خلفية شفافة */
body.dark-mode #n-input-count::-webkit-inner-spin-button,
body.dark-mode #nurse-input-count::-webkit-inner-spin-button {
    opacity: 1;
    filter: none;
    background: transparent !important;
    background-color: transparent !important;
}

body.dark-mode #ref-lang {
    background-color: #1e293b !important;
    color: #a5b4fc !important;
    border-color: #334155 !important;
}

body.dark-mode #rep-lang {
    background-color: #1e293b !important;
    color: #a5b4fc !important;
    border-color: #334155 !important;
}

/* =============================================
   9. RECORDS FILTER GRID – FORCE SINGLE LINE ON DESKTOP
   The .records-filter-grid already has 8 columns,
   but we must also make sure the label aligns flush
   and the search field doesn't wrap down.
   ============================================= */
@media (min-width: 901px) {
    .records-filter-grid {
        display: grid !important;
        grid-template-columns: minmax(100px, 1.5fr) minmax(120px, 1.5fr) minmax(50px, 0.5fr) minmax(50px, 0.5fr) minmax(50px, 0.5fr) minmax(70px, 0.7fr) minmax(90px, 0.9fr) minmax(90px, 0.9fr) minmax(110px, 1.5fr) !important;
        gap: 7px !important;
        flex-wrap: nowrap !important;
        align-items: end !important;
        margin-bottom: 18px !important;
    }

    .records-filter-grid>div {
        min-width: 0 !important;
    }

    .records-filter-grid label {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .records-filter-grid .form-control,
    .records-filter-grid .multi-filter-trigger {
        font-size: 12px !important;
    }
}

/* =============================================
   10. VARIOUS DARK MODE FIXES (Role Modal, Custom Dropdowns)
   ============================================= */
body.dark-mode #role-mgmt-modal .custom-modal-content {
    background: #0f172a !important;
}

body.dark-mode #role-mgmt-modal .modal-body-custom .row>div>div {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #role-mgmt-modal h6,
body.dark-mode #role-mgmt-modal h5,
body.dark-mode #role-mgmt-modal div {
    color: #f1f5f9 !important;
}

body.dark-mode #role-mgmt-modal label.role-perm-cb-wrapper,
body.dark-mode #role-mgmt-modal label[style*="display:block"],
body.dark-mode #role-mgmt-modal label,
body.dark-mode #role-mgmt-modal .form-control {
    color: #cbd5e1 !important;
}

body.dark-mode #role-mgmt-modal .form-control {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #role-mgmt-modal .modal-header-custom {
    background: #1e293b !important;
    /* Fix bright header in dark mode */
}

/* Custom referral comboboxes */
body.dark-mode .custom-dropdown-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .custom-dropdown-menu>div {
    border-bottom-color: #334155 !important;
    color: #f1f5f9 !important;
    background: #1e293b !important;
}

body.dark-mode .custom-dropdown-menu>div:hover {
    background: #334155 !important;
}

/* Some sub-divs like price might be forced to black inline, override them gently */
body.dark-mode .custom-dropdown-menu>div * {
    color: #cbd5e1 !important;
}

body.dark-mode .custom-combobox-wrapper i.icofont-rounded-down {
    color: #94a3b8 !important;
}

/* Broader fix for missing select arrows — سهم أسود في الدارك مود (الافتراضي لكل الـ select) */
body.dark-mode select.form-control:not([multiple]),
body.dark-mode select:not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f172a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    background-size: 12px !important;
    padding-left: 32px !important;
}

/* استثناء: أسهم بيضاء للفلاتر فقط (تأتي بعد القاعدة العامة لتفوق عليها) */
body.dark-mode .finance-filter-grid select,
body.dark-mode .finance-filter-grid select.form-control,
body.dark-mode .checkup-filter-grid select,
body.dark-mode .checkup-filter-grid select.form-control,
body.dark-mode .lab-filter-grid select,
body.dark-mode .lab-filter-grid select.form-control,
body.dark-mode .nursing-filter-grid select,
body.dark-mode .nursing-filter-grid select.form-control,
body.dark-mode .emp-filter-grid select,
body.dark-mode .emp-filter-grid select.form-control,
body.dark-mode .payroll-filter-grid select,
body.dark-mode .payroll-filter-grid select.form-control,
body.dark-mode .records-filter-grid select,
body.dark-mode .records-filter-grid select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Standard Hover for Custom Dropdowns */
.custom-dropdown-menu>div:hover {
    background: #f8fafc;
}

/* Stronger specificities for dark mode inside dropdowns */
body.dark-mode .custom-dropdown-menu>div:hover {
    background: #334155 !important;
    cursor: pointer;
}

body.dark-mode .custom-dropdown-menu>div div,
body.dark-mode .custom-dropdown-menu>div span {
    color: #f1f5f9 !important;
}



/* ====== NEW REQUESTS ====== */

/* Activity Logs - Dark Mode Overrides */
body.dark-mode .log-row {
    background: transparent !important;
}

body.dark-mode .log-row:hover {
    background: #334155 !important;
}

body.dark-mode .log-seq {
    color: #64748b !important;
}

body.dark-mode .log-user-name {
    color: #ffffff !important;
    font-weight: bold;
}

body.dark-mode .log-user-id {
    color: #94a3b8 !important;
}

body.dark-mode .log-details {
    color: #e2e8f0 !important;
    font-weight: 500;
}

body.dark-mode .log-date {
    color: #ffffff !important;
}

body.dark-mode .log-time {
    color: #94a3b8 !important;
}

/* Activity Logs - Clear & Export Buttons */
body.dark-mode #logs-clear-btn {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.8) 100%) !important;
    border: 1px solid #7f1d1d !important;
    color: #fca5a5 !important;
}

body.dark-mode #logs-clear-btn:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.4), rgba(153, 27, 27, 1)) !important;
}

body.dark-mode #logs-export-btn {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(21, 128, 61, 0.8) 100%) !important;
    border: 1px solid #14532d !important;
    color: #86efac !important;
}

body.dark-mode #logs-export-btn:hover {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.4), rgba(21, 128, 61, 1)) !important;
}

/* Select elements in Dark Mode */
body.dark-mode .form-select.form-select-sm.chart-filter-select {
    color: #000000 !important;
}

/* RP-Badge in Dark Mode */
body.dark-mode .rp-badge {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
}

/* Apply analytics-controls style to Light Mode (الوضع الفاتح – شكل الأزرار كما كان) */
.analytics-controls,
.analytics-period-box,
.analytics-toggles-box {
    gap: 6px !important;
    padding: 8px 10px !important;
    background: rgba(241, 245, 249, 0.8) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.analytics-controls .btn-sm,
.analytics-period-box .btn-sm,
.analytics-toggles-box .btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
    border-radius: 16px !important;
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    border: 1px solid transparent;
    background: #ffffff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.analytics-controls .btn-outline-secondary.active,
.analytics-controls .btn-outline-secondary:hover,
.analytics-period-box .btn-outline-secondary.active,
.analytics-period-box .btn-outline-secondary:hover,
.analytics-toggles-box .btn-outline-secondary.active,
.analytics-toggles-box .btn-outline-secondary:hover {
    opacity: 1 !important;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
    color: #1e3a8a !important;
    border-color: #a5b4fc !important;
}

/* comp-table background 10% opacity */
.comp-table {
    background: linear-gradient(180deg, rgba(37, 79, 147, 0.3) 0%, rgba(0, 0, 0, 0.4) 100%) !important;
    opacity: 0.90;
    /* This makes the table background 10% transparent overall if needed, or keeping the rgba alpha 0.3 / 0.4 inside the gradient. */
}



/* ====== NEW REQUESTS (Part 2) ====== */

/* Revert comp-table opacity change but keep gradient */
.comp-table {
    background: none !important;
    opacity: 1 !important;
}

/* Light Mode Charts Color */
body:not(.dark-mode) .chart-container {
    color: #64748b !important;
}

/* Age Distribution Dark Mode Color */
body.dark-mode #age-chart-container text {
    fill: #ffffff !important;
}

/* Mobile Dark Mode - HC-Offcanvas specific styles */
@media screen and (max-width: 768px) {
    body.dark-mode .hc-offcanvas-nav li.nav-item a {
        background: linear-gradient(90deg, #000412, #191b2e) !important;
        color: #eee !important;
        border: 1px solid #43518f4d !important;
    }
    body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a {
        background: linear-gradient(90deg, #283e97, #0d1f54) !important;
        border: 1px solid #b4d3ff !important;
    }
}



/* ====== NEW REQUESTS (Part 3) ====== */

/* Increase column width for Activity Logs table '# and User' + Details */
.log-seq {
    width: 60px;
    text-align: center !important;
}

.log-row td:nth-child(2) {
    width: 15%;
    text-align: center !important;
}

.log-user-name,
.log-user-id {
    text-align: center !important;
}

.log-details {
    max-width: 450px !important;
}



/* ====== NEW REQUESTS (Part 4) ====== */

/* Age Distribution Specific Dark Mode Label Color */
/* Since Chart.js draw labels using canvas context directly, we must modify the chart options */
/* So we handle this in JS instead. */



/* ====== NEW REQUESTS (Part 5) ====== */

/* Dark Mode: Text colors inside the center doughnut chart */
body.dark-mode #chart-age-distribution-canvas {
    filter: brightness(1.1);
}


/* دارك مود: أيقونة الرزنامة في حقل الشهر (الإحصائيات) باللون الأسود */
body.dark-mode #analytics-bookings-smart-cal-picker::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.9;
}
body.dark-mode #analytics-bookings-smart-cal-picker {
    color-scheme: light;
}



/* ====== NEW REQUESTS (Part 6) ====== */

@media screen and (max-width: 768px) {
    body.dark-mode .log-row {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
}



/* ====== NEW REQUESTS (Part 7) ====== */

/* Activity log text alignments & module UI fix */
.log-module {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

body.dark-mode .log-module {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}



/* ====== NEW REQUESTS (Part 8) ====== */

.log-action-badge {
    border-radius: 50px !important;
}



/* ====== NEW REQUESTS (Part 9) ====== */

@media screen and (max-width: 768px) {
    .analytics-global-filters {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    body.dark-mode .analytics-global-filters {
        border-top-color: rgba(255, 255, 255, 0.05);
    }

    .analytics-global-filters .global-filter-separator {
        display: none;
    }
}

/* User UI Fixes */
body.dark-mode #comp-month-a::-webkit-calendar-picker-indicator,
body.dark-mode #comp-month-b::-webkit-calendar-picker-indicator {
    filter: brightness(0) !important;
}

.sidebar-header,
body.dark-mode .sidebar-header {
    background-color: #0e1d59 !important;
}

.nav-item.active,
body.dark-mode .nav-item.active {
    background-color: #0e1d59 !important;
}

/* Fix Status Bar Overlap inside Capacitor App 
   Forces exactly 40px or the native safe-area (whichever is bigger) 
   so the header doesn't hide behind the battery/clock */
body.is-capacitor-app.is-apk-portrait .mobile-app-header {
    padding-top: max(40px, env(safe-area-inset-top, 40px)) !important;
    height: calc(70px + max(40px, env(safe-area-inset-top, 40px))) !important;
}

body.is-capacitor-app.is-apk-portrait .mobile-app-header .open-menu {
    top: calc(50% + (max(40px, env(safe-area-inset-top, 40px)) / 2)) !important;
}

body.is-capacitor-app.is-apk-portrait .app-container {
    padding-top: max(40px, env(safe-area-inset-top, 40px)) !important;
}

/* In Landscape, standard safe area inset is enough because there's usually no notch on the top side */
body.is-capacitor-app.is-apk-landscape .mobile-app-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(70px + env(safe-area-inset-top, 0px)) !important;
}

body.is-capacitor-app.is-apk-landscape .app-container {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

.print-toggles-wrapper {
    display: contents;
}

/* ========================================= */
/* GLOBAL QUILL TOOLBAR DESIGN (Web & Mobile)*/
/* ========================================= */
.ql-toolbar.ql-snow {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
}

.ql-toolbar.ql-snow .ql-formats {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    gap: 4px !important;
    padding-right: 15px !important;
    position: relative;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Add Separator (|) between Groups */
.ql-toolbar.ql-snow .ql-formats:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 1px;
    background-color: #94a3b8;
    /* Professional separator color */
}

/* Buttons and Pickers Styling */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker {
    border-radius: 6px !important;
    transition: all 0.2s ease;
    height: 28px !important;
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker:hover {
    background-color: #e2e8f0 !important;
}

.ql-toolbar.ql-snow .ql-picker-label {
    padding-right: 25px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    border: none !important;
}

/* Active State for Buttons */
.ql-toolbar.ql-snow button.ql-active {
    background-color: #e0f2fe !important;
    color: #0284c7 !important;
}

.ql-toolbar.ql-snow button.ql-active svg {
    stroke: #0284c7 !important;
}

/* زر المايك (صوت) داخل الـ toolbar: إبقاء المظهر ولا يطبق عليه تنسيق أزرار Quill */
.ql-toolbar.ql-snow .ql-voice-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 6px;
}
.ql-toolbar.ql-snow .ql-voice-mic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ql-toolbar.ql-snow .ql-voice-mic:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5) !important;
}

/* Direction Button Custom Icon */
.ql-snow .ql-direction {
    width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the empty direction button we restored for Quill defaults */
.ql-snow .ql-direction[value=""] {
    display: none !important;
}

.ql-snow .ql-direction svg {
    display: none !important;
    /* Hide quill default svg */
}

/* Use a nice RTL/LTR switch icon */
.ql-snow .ql-direction::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 9H7M21 9V5m0 4v4M3 15h14M3 15v4m0-4v-4'/%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
}

.ql-snow .ql-direction.ql-active::before {
    /* Icon color when active */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 9H7M21 9V5m0 4v4M3 15h14M3 15v4m0-4v-4'/%3E%3C/svg%3E") no-repeat center center;
}

/* --- MOBILE SPECIFIC FIXES --- */
@media screen and (max-width: 991px) {
    .ql-toolbar.ql-snow {
        padding: 6px 4px !important;
        gap: 4px !important;
        justify-content: center !important;
    }

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 2px !important;
        margin-bottom: 2px !important;
        flex-wrap: nowrap !important;
        padding-right: 0 !important;
    }

    /* Hide the line separator on mobile to save space */
    .ql-toolbar.ql-snow .ql-formats::after {
        display: none !important;
    }

    .ql-snow .ql-picker.ql-font {
        width: 115px !important;
    }

    .ql-snow .ql-picker.ql-size,
    .ql-snow .ql-picker.ql-line-height {
        width: 60px !important;
    }

    .ql-toolbar button,
    .ql-toolbar button svg,
    .ql-toolbar .ql-picker-label svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ========================================= */
/* GLOBAL QUILL CUSTOM TYPOGRAPHY SETTINGS   */
/* Ensures correctly matched fonts for Print */
/* ========================================= */
.ql-font-cairo,
[style*="font-family: cairo" i],
[style*="font-family: 'cairo'" i] {
    font-family: 'Cairo', sans-serif !important;
}

.ql-font-arial,
[style*="font-family: arial" i],
[style*="font-family: 'arial'" i] {
    font-family: Arial, sans-serif !important;
}

.ql-font-tahoma,
[style*="font-family: tahoma" i],
[style*="font-family: 'tahoma'" i] {
    font-family: Tahoma, sans-serif !important;
}

.ql-font-tajawal,
[style*="font-family: tajawal" i],
[style*="font-family: 'tajawal'" i] {
    font-family: 'Tajawal', sans-serif !important;
}

.ql-font-amiri,
[style*="font-family: amiri" i],
[style*="font-family: 'amiri'" i] {
    font-family: 'Amiri', serif !important;
}

.ql-font-times-new-roman,
[style*="font-family: times-new-roman" i],
[style*="font-family: 'times-new-roman'" i] {
    font-family: 'Times New Roman', serif !important;
}

.ql-font-roboto,
[style*="font-family: roboto" i],
[style*="font-family: 'roboto'" i] {
    font-family: 'Roboto', sans-serif !important;
}

.ql-size-12px,
[style*="font-size: 12px" i] {
    font-size: 12px !important;
}

.ql-size-14px,
[style*="font-size: 14px" i] {
    font-size: 14px !important;
}

.ql-size-16px,
[style*="font-size: 16px" i] {
    font-size: 16px !important;
}

.ql-size-17px,
[style*="font-size: 17px" i] {
    font-size: 17px !important;
}

.ql-size-18px,
[style*="font-size: 18px" i] {
    font-size: 18px !important;
}

.ql-size-19px,
[style*="font-size: 19px" i] {
    font-size: 19px !important;
}

.ql-size-20px,
[style*="font-size: 20px" i] {
    font-size: 20px !important;
}

.ql-size-24px,
[style*="font-size: 24px" i] {
    font-size: 24px !important;
}

.ql-size-30px,
[style*="font-size: 30px" i] {
    font-size: 30px !important;
}

.ql-size-36px,
[style*="font-size: 36px" i] {
    font-size: 36px !important;
}

.ql-align-center,
[style*="text-align: center" i] {
    text-align: center !important;
}

.ql-align-right,
[style*="text-align: right" i] {
    text-align: right !important;
}

.ql-align-justify,
[style*="text-align: justify" i] {
    text-align: justify !important;
}

.ql-direction-rtl,
[style*="direction: rtl" i] {
    direction: rtl !important;
    text-align: inherit;
}

/* Override Quill's default Helvetica fallback */
.ql-editor,
.ql-snow .ql-editor {
    font-family: 'Cairo', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.8;
}

/* =========================================
   NEW: Smart Bookings Calendar Styling 
   (Responsive & Dark Mode Safe)
========================================= */

.smart-calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    /* reduced gap */
    min-height: 250px;
}

.bookings-cal-header-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    /* reduced from 5px to avoid stretching parent */
    text-align: center;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    /* reduced from 13 */
    white-space: nowrap;
}

.smart-cal-cell {
    border-radius: 8px;
    padding: 6px 4px;
    /* Reduced from 10px for better fit */
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.smart-cal-cell.empty-cell {
    background: transparent;
    border: none;
    box-shadow: none;
}

.smart-cal-cell.active-cell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.smart-cal-cell.active-cell:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.smart-cal-cell.is-today {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.cal-day-num {
    font-size: 16px;
    font-weight: bold;
    color: #334155;
}

.smart-cal-cell.is-today .cal-day-num {
    color: #475569;
    font-weight: 800;
}

.cal-badge-bookings {
    background: #3b82f6;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
}

.cal-badge-none {
    font-size: 10px;
    color: #94a3b8;
    font-weight: bold;
}

/* Dark Mode support */
body.dark-mode .smart-cal-cell.active-cell {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .smart-cal-cell.is-today {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .cal-day-num {
    color: #e2e8f0;
}

body.dark-mode .smart-cal-cell.is-today .cal-day-num {
    color: #f8fafc;
    font-weight: 800;
}

body.dark-mode .cal-badge-none {
    color: #cbd5e1;
}

body.dark-mode .bookings-cal-header-grid {
    color: #94a3b8;
}

body.dark-mode .chart-container[id*="calendar"] {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .chart-container:has(.smart-calendar-grid-body) {
    background: #0f172a !important;
    border-color: #334155 !important;
}

/* دارك: رموز الرزنامة (أيام، عناوين، أرقام) بلون أبيض */
body.dark-mode .calendar-header,
body.dark-mode .bookings-cal-header-grid,
body.dark-mode .bookings-cal-header-grid div,
body.dark-mode .smart-cal-cell .cal-day-num,
body.dark-mode .smart-cal-cell.is-today .cal-day-num,
body.dark-mode .cal-badge-none,
body.dark-mode .cal-badge-bookings,
body.dark-mode .chart-container:has(.smart-calendar-grid-body) .analytics-header,
body.dark-mode #analytics-smart-calendar-card .analytics-header,
body.dark-mode #analytics-smart-calendar-card .chart-header-flex,
body.dark-mode #analytics-smart-calendar-card .chart-header-flex span,
body.dark-mode #chart-bookings-calendar-card .analytics-header,
body.dark-mode #chart-bookings-calendar-card .chart-header-flex,
body.dark-mode #chart-bookings-calendar-card .chart-header-flex span {
    color: #ffffff !important;
}

/* مرفقات المريض — الديسكتوب: كل الفلاتر في سطر واحد */
@media (min-width: 769px) {
    #prof-content-attachments .att-filters-row {
        flex-wrap: nowrap !important;
    }
    #prof-content-attachments .att-date-filters-row {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* Mobile Styling for Calendar */
@media (max-width: 768px) {

    .smart-calendar-grid-body,
    .bookings-cal-header-grid {
        gap: 2px !important;
    }

    .smart-cal-cell {
        padding: 4px !important;
        border-radius: 4px !important;
    }

    .cal-day-num {
        font-size: 12px !important;
    }

    .cal-badge-bookings,
    .cal-badge-none {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .bookings-cal-header-grid div {
        font-size: 10px !important;
        word-break: break-all;
    }

    /* رزنامة الحجوزات الذكية: ظهور كامل بشكل طبيعي بدون سكرول (مضغوطة لتناسب الموبايل) */
    #chart-bookings-calendar-card {
        margin-top: 16px !important;
        padding: 12px !important;
    }

    #chart-bookings-calendar-card .chart-header-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    #chart-bookings-calendar-card .analytics-header {
        font-size: 14px !important;
    }

    #chart-bookings-calendar-card .chart-container {
        padding: 10px !important;
    }

    #chart-bookings-calendar-card .smart-calendar-grid-body {
        min-height: 160px !important;
    }

    /* منتقي شهر الرزنامة: أصغر على الموبايل مع إبقاء النص واضحاً */
    #bookings-smart-cal-picker {
        max-width: 160px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        height: 38px !important;
    }
}

/* ========== موبايل: زر المايك (إحالة) + إحالة وصف/ملاحظات + سجلات/مختبر بحث + جداول فارغة + مالية + نافذة + إحصائيات ========== */
@media screen and (max-width: 768px) {
    /* تبويب الإحالات: نوع الإحالة في سطر، التشخيص+المايك في سطر، الطباعات في سطر */
    #tab-referrals .report-header-row-premium {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    #tab-referrals .report-header-row-premium > .report-field-item:first-child {
        width: 100% !important;
        max-width: none !important;
    }
    #tab-referrals .report-header-row-premium > .report-field-item:nth-child(2) {
        width: 100% !important;
        flex: none !important;
    }
    #tab-referrals .report-header-row-premium .print-toggles-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    /* زر المايك تشخيص الإحالة: rounded corner كأقرانه وليس دائري */
    #tab-referrals #mic-btn-ref-diagnosis {
        border-radius: 10px !important;
    }

    /* زر المايك لنص الإحالة (داخل الـ toolbar): أصغر قليلاً على الموبايل */
    #ref-ext-toolbar #mic-btn-ref-ext-editor {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    #ref-ext-toolbar #mic-btn-ref-ext-editor i {
        margin: 0 !important;
    }

    /* الوصف/ملاحظات في الإحالة: بعرض البطاقة */
    #ref-sub-lab div:has(#ref-test-desc) {
        width: 100% !important;
        max-width: 100% !important;
    }
    #ref-sub-lab #ref-test-desc {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* سجلات: بحث (اسم المريض) في سطر كامل */
    #tab-records .records-filter-grid > div:first-child {
        grid-column: 1 / -1 !important;
    }

    /* مختبر: بحث بالاسم في سطر كامل */
    #tab-lab .lab-filter-grid > div:first-child {
        grid-column: 1 / -1 !important;
    }

    /* إخفاء الجدول عند الفراغ وإظهار ملاحظة (مختبر، تمريض، مالية إيرادات) */
    #tab-lab .clinic-table-card:has(#lab-data-body tr.mobile-hide:only-child),
    #tab-nursing .clinic-table-card:has(#nursing-list-body tr.mobile-hide:only-child) {
        display: none !important;
    }
    #tab-lab .lab-empty-state,
    #tab-nursing .nursing-empty-state,
    #tab-finance .fin-revenues-empty-state {
        display: none;
        text-align: center;
        padding: 28px 20px;
        color: #64748b;
        font-size: 15px;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px dashed #e2e8f0;
        margin-bottom: 20px;
    }
    #tab-lab:has(#lab-data-body tr.mobile-hide:only-child) .lab-empty-state,
    #tab-nursing:has(#nursing-list-body tr.mobile-hide:only-child) .nursing-empty-state {
        display: block !important;
    }

    /* مرضى: صف الفلتر (جنس، فصيلة، ترتيب) في سطر جديد */
    #tab-patients .patient-main-filter {
        flex-wrap: wrap !important;
    }
    #tab-patients .patient-filter-row {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    /* مرضى: زر العين داخل حقل كلمة المرور (محاذاة عمودية) */
    #prof-content-personal .pwd-input-wrap .btn-toggle-pwd-inline,
    #prof-content-personal #btn-toggle-pwd {
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
    }
    .btn-copy-id {
        left: 8px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* ملف المريض: إظهار ملاحظة عند فراغ الجدول (وصفات، تقارير، إحالات، مراجعات) */
    #prof-content-rx:has(#prof-rx-list-body tr:only-child td[colspan]) .prof-table-card,
    #prof-content-reports:has(#prof-rep-list-body tr:only-child td[colspan]) .prof-table-card,
    #prof-content-referrals:has(#prof-ref-list-body tr:only-child td[colspan]) .prof-table-card,
    #prof-content-visits:has(#prof-visit-list-body tr:only-child td[colspan]) .prof-table-card {
        display: none !important;
    }
    #prof-content-rx:has(#prof-rx-list-body tr:only-child td[colspan]) #prof-rx-empty,
    #prof-content-reports:has(#prof-rep-list-body tr:only-child td[colspan]) #prof-rep-empty,
    #prof-content-referrals:has(#prof-ref-list-body tr:only-child td[colspan]) #prof-ref-empty,
    #prof-content-visits:has(#prof-visit-list-body tr:only-child td[colspan]) #prof-visit-empty {
        display: block !important;
    }

    #prof-content-rx .prof-table-mobile-empty,
    #prof-content-reports .prof-table-mobile-empty,
    #prof-content-referrals .prof-table-mobile-empty,
    #prof-content-visits .prof-table-mobile-empty {
        display: none;
        background: #f8fafc;
        border: 1px dashed #cbd5e1 !important;
        border-radius: 12px !important;
        padding: 14px 12px !important;
        text-align: center !important;
        color: #64748b !important;
        font-size: 14px !important;
    }

    #prof-content-rx .clinic-table td:nth-of-type(1),
    #prof-content-reports .clinic-table td:nth-of-type(1),
    #prof-content-referrals .clinic-table td:nth-of-type(1),
    #prof-content-visits .clinic-table td:nth-of-type(1) {
        right: 15px !important;
        left: auto !important;
        top: 7px !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1 !important;
        direction: ltr !important;
        padding: 0 !important;
    }

    #prof-content-rx .clinic-table td:last-child,
    #prof-content-reports .clinic-table td:last-child,
    #prof-content-referrals .clinic-table td:last-child,
    #prof-content-visits .clinic-table td:last-child {
        justify-content: center !important;
        background: #f8fafc !important;
        border-top: 1px dashed #e2e8f0 !important;
        border-bottom: none !important;
    }
    #prof-content-rx .clinic-table td:last-child .prof-mobile-view-btn,
    #prof-content-reports .clinic-table td:last-child .prof-mobile-view-btn,
    #prof-content-referrals .clinic-table td:last-child .prof-mobile-view-btn {
        width: 100% !important;
        max-width: 220px !important;
        min-width: 0 !important;
        height: 38px !important;
        border-radius: 10px !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    #prof-content-rx .clinic-table td:last-child .prof-mobile-view-btn i,
    #prof-content-reports .clinic-table td:last-child .prof-mobile-view-btn i,
    #prof-content-referrals .clinic-table td:last-child .prof-mobile-view-btn i {
        font-size: 15px !important;
    }
    #prof-content-rx .clinic-table td:last-child .prof-mobile-view-btn span,
    #prof-content-reports .clinic-table td:last-child .prof-mobile-view-btn span,
    #prof-content-referrals .clinic-table td:last-child .prof-mobile-view-btn span {
        display: inline !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* مرفقات المريض: أزرار ملف/صورة، التقاط صورة، إضافة في سطر واحد */
    #prof-content-attachments #att-form-header {
        cursor: pointer !important;
        user-select: none !important;
    }
    #prof-content-attachments #att-form-card.att-form-collapsed #att-form-header {
        margin-bottom: 0 !important;
    }
    #prof-content-attachments #att-form-card.att-form-collapsed #att-form-body {
        display: none !important;
    }
    #prof-content-attachments .att-actions-row {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    #prof-content-attachments .att-actions-row .btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    #prof-content-attachments .att-save-row {
        display: flex !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    #prof-content-attachments .att-save-row #att-save-btn {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
    }
    #prof-content-attachments #att-pending-area button {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    /* مرفقات المريض: إظهار الجدول (يتحوّل إلى بطاقات موبايل تلقائياً) وإخفاء الملاحظة */
    #prof-content-attachments .att-table-desktop {
        display: block !important;
    }
    #prof-content-attachments .att-table-desktop.att-table-hidden-mobile {
        display: none !important;
    }
    #prof-content-attachments .attachments-mobile-note {
        display: none !important;
    }
    #prof-content-attachments .attachments-mobile-note.att-mobile-note-visible {
        display: block !important;
    }

    /* Mobile analytics: keep gap between Most Visited and Financial card consistent */
    body.analytics-mobile-cols #chart-top-visitors-card + #chart-finance-card {
        margin-top: 10px !important;
    }

    /* بطاقة الموبايل (المرفقات): توسيط سطر ID */
    #prof-content-attachments .clinic-table td[data-label="ID"],
    #prof-content-attachments .clinic-table td:nth-of-type(2) {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        min-height: 65px !important;
    }

    /* مرفقات المريض (موبايل): إبقاء الدائرة بمكانها الأصلي وتوسيط الرقم داخلها */
    #prof-content-attachments .clinic-table td:nth-of-type(1) {
        right: 15px !important;
        left: auto !important;
        top: 7px !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1 !important;
        direction: ltr !important;
        padding: 0 !important;
    }

    /* معلومات الهاتف/العمر/الجنس: عنوان ثابت بعد الأيقونة ببداية موحّدة */
    #patients-view-profile .profile-card-modern .p-info-row {
        display: grid !important;
        grid-template-columns: 18px 72px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 8px !important;
        direction: rtl !important;
        padding: 4px 0 !important;
    }
    #patients-view-profile .profile-card-modern .p-info-row-icon {
        width: 18px !important;
        min-width: 18px !important;
        text-align: center !important;
        margin: 0 !important;
        justify-self: center !important;
    }
    #patients-view-profile .profile-card-modern .p-info-label {
        width: 72px !important;
        min-width: 72px !important;
        margin: 0 !important;
        text-align: right !important;
        justify-self: start !important;
    }
    #patients-view-profile .profile-card-modern .p-info-icon-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* مرفقات: فلاتر السنة والشهر واليوم في سطر واحد بعرض البطاقة */
    #prof-content-attachments .att-date-filters-row {
        display: flex !important;
        gap: 8px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #prof-content-attachments .att-date-filters-row select {
        width: 100% !important;
    }

    /* الإحصائيات موبايل: مقارنة الفترات — عرض صحيح للفترة الأولى والثانية + أزرار مصغّرة */
    #period-comparison-tool-card .comparison-inputs {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 10px 8px !important;
        align-items: end !important;
        padding: 10px 8px !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-group {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-group:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-group:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-group label {
        font-size: 11px !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-group input {
        font-size: 13px !important;
        padding: 6px 8px !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-vs {
        display: none !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-buttons-row {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-buttons-row .btn-primary,
    #period-comparison-tool-card .comparison-inputs .comp-buttons-row .btn-outline-secondary {
        height: 30px !important;
        min-height: 30px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        padding: 4px 10px !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-buttons-row .btn-primary {
        flex: 1 !important;
        min-width: 0 !important;
    }
    #period-comparison-tool-card .comparison-inputs .comp-buttons-row .btn-outline-secondary {
        flex: 0 0 auto !important;
    }

    /* الإحصائيات موبايل: تصغير ارتفاع فلاتر الرسوم مع بقاء النص مقروءاً */
    #analytics-top-card .chart-filter-select,
    #analytics-top-card .form-select.form-select-sm.chart-filter-select {
        height: 34px !important;
        min-height: 34px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    #analytics-bookings-smart-cal-picker {
        height: 34px !important;
        min-height: 34px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
    #analytics-top-card .chart-header-flex .btn.btn-sm.btn-outline-secondary {
        height: 34px !important;
        min-height: 34px !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    #fin-view-revenues:has(#revenues-table-body tr:only-child td[colspan]) .fin-revenues-empty-state {
        display: block !important;
    }
    #fin-view-revenues .emp-table-container:has(#revenues-table-body tr:only-child td[colspan]) {
        display: none !important;
    }

    /* مالية: بطاقتا إيرادات ومصروفات في سطر واحد، صافي في سطر منفصل */
    #fin-view-report > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    #fin-view-report .summary-stat-card.net {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #fin-view-report .summary-stat-card.revenue,
    #fin-view-report .summary-stat-card.expenses {
        width: 100% !important;
        max-width: 100% !important;
    }
    #fin-view-report .summary-stat-card .card-label {
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    #fin-view-report .summary-stat-card .card-value,
    #fin-view-report #rep-total-revenues,
    #fin-view-report #rep-total-expenses,
    #fin-view-report #rep-net-balance {
        font-size: 16px !important;
    }

    /* عمود # في جداول المالية: دائرة بأبعاد طبيعية (استثناء صف الإجمالي) */
    #report-table-body tr:not(.finance-total-row) td:first-child,
    #expenses-table-body tr:not(.finance-total-row) td:first-child,
    #revenues-table-body tr td:first-child:not([colspan]) {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        font-size: 14px !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
    }
    body.dark-mode #report-table-body tr:not(.finance-total-row) td:first-child,
    body.dark-mode #expenses-table-body tr:not(.finance-total-row) td:first-child,
    body.dark-mode #revenues-table-body tr td:first-child:not([colspan]) {
        background: linear-gradient(135deg, #1e3a8a 0%, #1f3aa8 50%, #0f172a 100%) !important;
        color: #e2e8f0 !important;
    }

    /* دارك مود موبايل: دائرة رقم الصف في كل الجداول — تدرج نيلي/أسود */
    body.dark-mode #bookings-table-body td:first-child,
    body.dark-mode .clinic-table.records-table td:first-child,
    body.dark-mode #patients-table-body-main td:first-child,
    body.dark-mode #lab-data-body td:first-child,
    body.dark-mode #nursing-list-body td:first-child {
        background: linear-gradient(135deg, #1e3a8a 0%, #1f3aa8 50%, #0f172a 100%) !important;
        color: #e2e8f0 !important;
        border-radius: 50% !important;
        font-weight: bold !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* موبايل: إرجاع زر الإغلاق (X) إلى مكانه الأصلي في رأس الناف */
    .hc-offcanvas-nav .nav-close-button span {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 45px !important;
    }
    .hc-offcanvas-nav.rtl .nav-close-button span {
        left: 0 !important;
        right: auto !important;
    }

    /* توحيد بداية الظهور من اليمين لجميع عناصر القائمة */
    .hc-offcanvas-nav .nav-content > ul > li {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .hc-offcanvas-nav li.nav-item {
        margin: 2px 0 !important;
    }
    /* موبايل: البروفايل وصف AI+ثيم — نفس العرض (تعريض قليل)، فراغ أعلى وأسفل */
    .nav-item-profile-row {
        padding-right: 10px !important;
        padding-left: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
    /* مسافة بين البطاقة والـ span: 5 من فوق، 5 أسفل */
    .nav-item-profile-row .nav-item-link {
        padding: 5px 0 5px 0 !important;
    }
    /* مسافة صف AI+الثيم: 5 أعلى، 7 أسفل (تطبيق فعلي) */
    .nav-item-ai-theme,
    .hc-offcanvas-nav .nav-content > ul > li.nav-item-ai-theme {
        padding-right: 10px !important;
        padding-left: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 5px !important;
        margin-bottom: 7px !important;
    }
    .nav-item-ai-theme .nav-item-wrapper {
        padding: 0 !important;
    }
    /* مسافة 7px أسفل span الأي آي حتى ينزل خط الـ border-bottom قليلاً */
    .nav-item-ai-theme .nav-item-link {
        padding: 0 0 7px 0 !important;
    }
    .nav-item-profile-row .nav-item-wrapper,
    .nav-item-profile-row .nav-item-wrapper > *,
    .nav-item-profile-row .nav-item-link,
    .nav-item-profile-row .nav-item-link > div,
    .nav-item-profile-row > div,
    .nav-item-profile-row .nav-item-profile-inner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .nav-item-profile-row .nav-item-profile-inner {
        display: flex !important;
    }
    .nav-item-ai-theme .nav-item-wrapper,
    .nav-item-ai-theme .nav-item-wrapper > *,
    .nav-item-ai-theme > div,
    .nav-item-ai-theme .nav-item-ai-theme-inner {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .nav-item-ai-theme .nav-item-ai-theme-inner {
        display: flex !important;
    }

    /* موبايل: البروفايل — فراغ أعلى/أسفل، مساحة كتابة أكبر، السهم في أقصى اليسار */
    .nav-item-profile-row .mobile-profile-card {
        padding: 14px 24px !important;
        min-height: 42px !important;
        height: auto !important;
        border-radius: 10px !important;
        border: 1px solid #f5f5f5 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
        background: rgba(0, 113, 239, 0.04) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
    }
    .nav-item-profile-row .mobile-profile-card > div:first-child {
        order: 0;
    }
    .nav-item-profile-row .mobile-profile-card > i.icofont-rounded-left {
        order: 1;
        display: flex !important;
        flex-wrap: wrap !important;
    }
    /* منطقة الاسم والدور: عرض أكبر لسطر واحد، إزاحة الدور قليلاً لليسار */
    .nav-item-profile-row .mobile-profile-card > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .nav-item-profile-row .mobile-profile-card > div:first-child > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .nav-item-profile-row .mobile-profile-card #mobile-profile-name {
        font-size: 12px !important;
        display: block !important;
    }
    .nav-item-profile-row .mobile-profile-card #mobile-profile-role {
        font-size: 9px !important;
        display: block !important;
    }
    body.dark-mode .nav-item-profile-row .mobile-profile-card {
        border-color: #43518f4d !important;
    }

    /* موبايل: صف AI + ثيم — نفس ستايل الإدارة المالية، زرين بنفس الارتفاع والعرض، ونص AI متوسط */
    .nav-item-ai-theme > div,
    .nav-item-ai-theme .nav-item-ai-theme-inner {
        direction: ltr;
        gap: 6px !important;
    }
    /* إزاحة زرّي AI والثيم قليلاً إلى اليمين */
    .nav-item-ai-theme .nav-item-ai-theme-inner {
        margin-right: 0 !important;
        margin-left: 8px !important;
    }
    .nav-item-ai-theme .mobile-theme-header-btn {
        flex: 0 0 104px !important;
        width: 104px !important;
        max-width: 104px !important;
        min-width: 104px !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        border: 1px solid #f5f5f5 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* زر AI: عرض أقل ليكون أوضح بجانب زر الثيم */
    .nav-item-ai-theme .nav-item-ai-link {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 94px !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        border: 1px solid #f5f5f5 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 600 !important;
        font-size: 16px !important;
    }
    .nav-item-ai-theme .nav-item-ai-link {
        gap: 8px !important;
        text-align: center !important;
    }
    .nav-item-ai-theme .nav-item-ai-link i {
        margin: 0 !important;
    }
    .nav-item-ai-theme .mobile-theme-header-btn {
        background-color: #ffffff !important;
        color: #0071ef !important;
    }
    body:not(.dark-mode) .nav-item-ai-theme .mobile-theme-header-btn i {
        color: #eab308 !important;
    }
    .nav-item-ai-theme .nav-item-ai-link {
        background-color: #ffffff !important;
        color: #333333 !important;
        text-decoration: none !important;
    }
    .nav-item-ai-theme .mobile-theme-header-btn:hover,
    .nav-item-ai-theme .nav-item-ai-link:hover {
        background-color: #f0f7ff !important;
        color: #0071ef !important;
        border-color: #dbeafe !important;
        box-shadow: 0 4px 10px rgba(0, 113, 239, 0.15) !important;
    }
    .nav-item-ai-theme .nav-item-ai-link i,
    .nav-item-ai-theme .mobile-theme-header-btn i {
        font-size: 22px !important;
        color: #0071ef !important;
    }
    body:not(.dark-mode) .nav-item-ai-theme .nav-item-ai-link:hover i,
    body:not(.dark-mode) .nav-item-ai-theme .mobile-theme-header-btn:hover i {
        color: #0071ef !important;
    }
    body.dark-mode .nav-item-ai-theme .mobile-theme-header-btn,
    body.dark-mode .nav-item-ai-theme .nav-item-ai-link {
        background-color: #0f0f25 !important;
        border-color: #43518f4d !important;
        color: #eee !important;
    }
    body.dark-mode .nav-item-ai-theme .mobile-theme-header-btn:hover,
    body.dark-mode .nav-item-ai-theme .nav-item-ai-link:hover {
        background-color: #252538 !important;
        color: #fff !important;
        border-color: #333 !important;
    }

    /* سطر البروفايل في الموبايل بعرض أقرانه (مساوٍ لبطاقة الإدارة المالية) */
    .nav-item-profile-row > div,
    .nav-item-profile-row .nav-item-wrapper,
    .nav-item-profile-row .nav-item-profile-inner {
        width: 100% !important;
    }
    .nav-item-profile-row .mobile-profile-card {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* ─── تنظيم الخطوط: خط فاصل بعرض كامل فقط فوق لوحة التحكم وفوق عن مطور النظام ─── */
    /* إزالة الحد السفلي من البطاقات لتفادي خطوط متعددة؛ الإطار الجانبي يبقى للبطاقة */
    .hc-offcanvas-nav .nav-content > ul > li.nav-item > .nav-item-wrapper > a.nav-item-link {
        border-bottom: none !important;
    }
    /* لا خط فوق لوحة التحكم — مسافة فقط */
    .nav-item-ai-theme + li {
        margin-top: 16px !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
    /* عن مطور النظام: لا خط فوقه ولا تحته، مسافة فقط */
    .nav-footer-credit {
        border-top: none !important;
        border-bottom: none !important;
        margin-top: 24px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .nav-footer-credit .about-dev-pill {
        border-bottom: none !important;
    }
    body.dark-mode .nav-footer-credit {
        border-bottom: none !important;
        border-top: none !important;
    }
    /* مسافة منظمة بين العناصر (بدون ازدحام) */
    .hc-offcanvas-nav .nav-content > ul > li {
        margin-bottom: 4px !important;
    }
    .hc-offcanvas-nav li.nav-item a,
    .nav-item-profile-row .mobile-profile-card,
    .nav-item-ai-theme .mobile-theme-header-btn,
    .nav-item-ai-theme .nav-item-ai-link {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* أيقونة الدارك/لايت في القائمة الجانبية: صغيرة ومرتبة */
    #mobile-nav-theme-toggle,
    .mobile-theme-header-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        color: inherit !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* عرض زر الثيم في صف AI+ثيم: 104px */
    .nav-item-ai-theme #mobile-nav-theme-toggle {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
    }
    #mobile-nav-theme-toggle i,
    .mobile-theme-header-btn i {
        font-size: 18px !important;
    }

    /* إحصائيات الموبايل: تكبير النص ولون أسود */
    #analytics-top-card .stat-info span,
    #month-summary-card .stat-info span {
        font-size: 13px !important;
        color: #000 !important;
        font-weight: 600 !important;
    }
    body.dark-mode #analytics-top-card .stat-info span,
    body.dark-mode #month-summary-card .stat-info span {
        color: #e2e8f0 !important;
    }

    /* تبويب الإحصائيات: إزالة المساحة الفارغة الزائدة في الأسفل */
    body.tab-is-analytics #analytics-top-card {
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
    }

    /* نافذة الملف الشخصي (المستخدم) مناسبة للموبايل */
    #profile-modal .custom-modal-content {
        width: 95% !important;
        max-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #profile-modal .modal-body-custom {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 16px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* حجز: صف التعديل على الموبايل — الاسم في الوسط، باقي الحقول أكبر لظهور المحتوى */
    #bookings-table-body tr.editing-row .edit-name-val {
        text-align: center !important;
        font-size: 14px !important;
    }
    #bookings-table-body tr.editing-row .edit-date,
    #bookings-table-body tr.editing-row .edit-time,
    #bookings-table-body tr.editing-row .edit-num {
        min-width: 120px !important;
        width: 100% !important;
        max-width: 160px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
}

@media print {
    .print-page-5 {
        page-break-before: always !important;
        break-before: page !important;
        page-break-after: always !important;
        break-after: page !important;
    }
}

/* Sidebar Badges */
.nav-badge {
    margin-right: auto;
    font-size: 8px;
    padding: 2px 6px;
    width: 60px;
    text-align: center;
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.15);
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}

.nav-item:hover .nav-badge {
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.nav-item.active .nav-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .nav-badge {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.2);
}

body.dark-mode .nav-item:hover .nav-badge {
    background: #38bdf8;
    color: #0b1120;
    border-color: #38bdf8;
}

/* Ensure sidebar items use flex to align children */
.nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Hide English badges on all mobile and tablet devices */
@media screen and (max-width: 1199px) {

    .nav-badge,
    .hc-offcanvas-nav .nav-badge,
    .sidebar-nav .nav-badge,
    .sidebar .nav-badge {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* Make Mobile Nav Item Wrapper Full Width */
.hc-offcanvas-nav .nav-item-wrapper,
.hc-offcanvas-nav a.nav-item-link,
.hc-offcanvas-nav li {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* AI Chat Markdown Table Styles */
.ai-message-agent table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 13px;
}

.ai-message-agent table th,
.ai-message-agent table td {
    padding: 8px;
    border: 1px solid #cbd5e1;
    text-align: right;
}

.ai-message-agent table th {
    background-color: #f1f5f9;
    font-weight: bold;
    color: #1e293b;
}

.ai-message-agent table tr:nth-child(even) {
    background-color: #f8fafc;
}

/* AI Chat Markdown Table - Dark Mode Support */
body.dark-mode .ai-message-agent table th,
body.dark-mode .ai-message-agent table td {
    border-color: #334155;
    color: var(--text-muted);
}

body.dark-mode .ai-message-agent table th {
    background-color: var(--bg-surface-hover);
    color: var(--text-main);
}

body.dark-mode .ai-message-agent table tr:nth-child(even) {
    background-color: var(--bg-body);
}

/* ========== جدول الحجوزات — أزرار الإجراءات ========== */
/* دسكتوب: السطر الأول = مناداة وتأكيد، السطر الثاني = إيميل وحذف وتعديل */
#tab-bookings .booking-actions-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 1401px) {
    #tab-bookings .booking-actions-wrap {
        flex-direction: column;
        gap: 6px;
    }
}
#tab-bookings .booking-actions-row1,
#tab-bookings .booking-actions-row2 {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#tab-bookings .booking-actions-row2 .btn,
#tab-bookings .booking-actions-row2 .booking-action-btn {
    border: 1px solid #c5c9ce !important;
    color: #475569;
    background: #f8fafc !important;
}
#tab-bookings .booking-actions-row2 .booking-btn-delete,
#tab-bookings .booking-actions-row2 .booking-btn-delete i {
    color: #dc3545 !important;
}
#tab-bookings .booking-action-btn {
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}
#tab-bookings .booking-btn-announce {
    background: #0ea5e9 !important;
    color: #fff !important;
    border: 1px solid #0ea5e9 !important;
}
#tab-bookings .booking-btn-confirm {
    background: #16a34a !important;
    color: #fff !important;
    border: 1px solid #16a34a !important;
}
#tab-bookings .booking-btn-edit {
    border: 1px solid #c5c9ce !important;
    color: #475569;
    background: #f8fafc !important;
}
/* عمود الموعد: على الدسكتوب اسمه "الموعد" فقط — عرض أكبر لظهور التاريخ في سطر واحد */
#tab-bookings .booking-header-long { display: none !important; }
#tab-bookings .booking-header-short { display: inline !important; }
@media screen and (min-width: 1401px) {
    #tab-bookings .clinic-table .b-col-datetime,
    #tab-bookings .clinic-table thead tr th.b-col-datetime {
        min-width: 165px !important;
    }
    #tab-bookings .clinic-table .b-col-datetime .booking-date,
    #tab-bookings .clinic-table .b-col-datetime .booking-time {
        display: inline;
        white-space: nowrap;
    }
    #tab-bookings .clinic-table .b-col-datetime .booking-time {
        margin-right: 6px;
    }
}
/* إخفاء رمز الرزنامة ورمز الوقت في التابلت والموبايل (إظهارهما على الكمبيوتر فقط) */
@media screen and (max-width: 1400px) {
    .booking-date-cal-icon,
    .booking-time-icon { display: none !important; }
}

/* سجل ملفات المرضى — أزرار الإجراءات (عرض، تعديل، مسح): أيقونات فقط في التابلت والموبايل لظهور مرتب */
@media screen and (max-width: 1400px) {
    #tab-records td[data-label="إجراءات"] .btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }
    #tab-records td[data-label="إجراءات"] .btn i {
        font-size: 14px !important;
    }
    /* جدول ملفات المرضى (patients-main-table): أزرار الإجراءات رموز فقط بدون عناوين */
    .patients-main-table td:nth-of-type(7) .btn,
    #patients-table-body-main td:nth-of-type(7) .btn {
        font-size: 0 !important;
        padding: 6px 8px !important;
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
    }
    .patients-main-table td:nth-of-type(7) .btn i,
    #patients-table-body-main td:nth-of-type(7) .btn i {
        font-size: 14px !important;
    }
}

/* تابلت بورتريه: إخفاء صور المرضى من عمود الاسم في جدول ملفات المرضى */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    .patients-main-table td[data-label="المريض"] img,
    #patients-table-body-main td[data-label="المريض"] img {
        display: none !important;
    }
}
/* على الكمبيوتر فقط (عرض ≥1401): الوقت في سطر مستقل مع رمز الساعة */
@media screen and (min-width: 1401px) {
    #tab-bookings .clinic-table .b-col-datetime .booking-time { display: block !important; margin-top: 2px; }
    .booking-time-icon { margin-left: 4px; }
}

/* عمود النوع: إطار رصاصي غامق، تكبير قليلاً (دسكتوب) */
#tab-bookings .clinic-table .b-col-type .booking-type-select-wrap {
    display: inline-block;
    min-width: 82px;
    width: 82px;
}
@media screen and (min-width: 1401px) {
    #tab-bookings .clinic-table .b-col-type .booking-type-select-wrap {
        min-width: 92px;
        width: 92px;
        padding: 2px;
        border: 1px solid #475569;
        border-radius: 22px;
        background: #f8fafc;
    }
}
#tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select {
    font-size: 13px !important;
    font-weight: bold !important;
    padding: 6px 10px 6px 28px !important;
    border-radius: 20px !important;
    min-height: 32px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-align: right;
}
@media screen and (min-width: 1401px) {
    #tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select {
        font-size: 14px !important;
        padding: 7px 12px 7px 30px !important;
        min-height: 34px;
        border-color: #cbd5e1;
    }
}
#tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select:focus {
    border-color: var(--primary);
    outline: none;
}
#tab-bookings .clinic-table .b-col-type .booking-type-select-wrap option[value="متابعة"] {
    background: #f0f9ff;
    color: #0369a1;
}

/* رسالة الجدول الفارغ (جميع الأحجام) */
#tab-bookings #bookings-table-body td.bookings-empty-msg {
    color: #64748b !important;
    font-size: 15px !important;
    padding: 28px 16px !important;
}

/* تابلت: سطر1 = مناداة وتأكيد فقط، سطر2 = البقية (تعديل، إيميل، مسح) — بدون تباعد مثل الدسكتوب */
@media screen and (min-width: 769px) and (max-width: 1400px) {
    #tab-bookings .booking-actions-wrap {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    #tab-bookings .booking-actions-row1,
    #tab-bookings .booking-actions-row2 {
        gap: 4px;
    }
}

/* تابلت بورتريه: رموز فقط، 3 في كل سطر، من دون فراغات */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-bookings .booking-actions-wrap {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 0;
        justify-content: start;
    }
    #tab-bookings .booking-actions-row1,
    #tab-bookings .booking-actions-row2 {
        display: contents;
    }
    #tab-bookings .booking-btn-label { display: none !important; }
    #tab-bookings .booking-action-btn,
    #tab-bookings .booking-btn-announce,
    #tab-bookings .booking-btn-confirm,
    #tab-bookings .booking-btn-edit,
    #tab-bookings .booking-btn-email,
    #tab-bookings .booking-btn-delete {
        min-width: 32px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 6px;
        font-size: 14px;
    }
}

/* تابلت لاندسكيب: نفس ترتيب وعناوين الكمبيوتر — مناداة وتأكيد وتعديل تظهر عناوينها، إيميل وحذف رمز فقط */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    #tab-bookings .booking-btn-announce,
    #tab-bookings .booking-btn-confirm,
    #tab-bookings .booking-btn-edit {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        border-radius: 6px;
        font-size: 12px;
    }
    #tab-bookings .booking-btn-email,
    #tab-bookings .booking-btn-delete {
        min-width: 30px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
    }
    #tab-bookings .booking-actions-wrap { gap: 4px; }
    #tab-bookings .booking-actions-row1,
    #tab-bookings .booking-actions-row2 { gap: 4px; }
}

/* موبايل: أزرار الإجراءات رموز فقط */
@media screen and (max-width: 768px) {
    #tab-bookings .booking-btn-label { display: none !important; }
    #tab-bookings .booking-action-btn { padding: 0; min-width: 32px; width: 32px; border-radius: 50%; }
    #tab-bookings .booking-btn-announce,
    #tab-bookings .booking-btn-confirm,
    #tab-bookings .booking-btn-edit { min-width: 32px; width: 32px; padding: 0; border-radius: 50%; }
}

/* تابلت بورتريه: إخفاء عمود رقم الهاتف والملاحظات */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #tab-bookings .clinic-table .b-col-phone,
    #tab-bookings .clinic-table .b-col-notes { display: none !important; }
    #tab-bookings .clinic-table thead tr th.b-col-phone,
    #tab-bookings .clinic-table thead tr th.b-col-notes { display: none !important; }
}

/* تابلت بورتريه: ترتيب ملف المريض — كل المحتوى ضمن الحدود بدون قص أو تداخل */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #patients-view-profile {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 95px !important; /* مساحة فوق الـ action bar */
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    #patients-view-profile .modern-patient-form {
        max-width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
    }
    .profile-grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .profile-card-modern {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
        top: 0 !important;
        /* عمودان: صورة + ID موازية لـ الهاتف / العمر / الجنس */
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-auto-rows: auto !important;
        gap: 10px 18px !important;
        direction: ltr !important;
        text-align: right !important;
    }
    .profile-card-modern .p-card-name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        font-size: 18px !important;
        text-align: right !important;
    }
    .profile-card-modern .p-card-id {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        text-align: center !important;
        align-self: center !important;
        width: 110px !important;
        max-width: 110px !important;
        box-sizing: border-box !important;
    }
    .profile-card-modern .p-card-avatar {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: start !important;
        width: 110px !important;
        height: 110px !important;
        margin: 0 !important;
    }
    .profile-card-modern .p-card-avatar i {
        font-size: 48px !important;
    }
    /* بلوك الهاتف / العمر / الجنس في العمود الثاني موازياً للصورة */
    .profile-card-modern > div:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 / 4 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    /* تنبيهات طبية (يسار) | إحصائيات المريض (يمين) */
    .profile-card-modern .p-red-flags {
        grid-column: 1 !important;
        grid-row: 4 !important;
        min-width: 0 !important;
    }
    .profile-card-modern .p-stats-box {
        grid-column: 2 !important;
        grid-row: 4 !important;
        min-width: 0 !important;
    }
    /* الهاتف / العمر / الجنس: تقليل الفراغات بين حقول البيانات الشخصية */
    .profile-card-modern .p-info-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        min-width: 0 !important;
        direction: rtl !important;
    }
    .profile-card-modern .p-info-label {
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }
    .profile-card-modern .p-info-icon-wrapper {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-content: flex-end !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .profile-card-modern .p-info-icon-wrapper .p-info-val {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        direction: ltr !important;
    }
    /* إحصائيات المريض: شبكة ضمن الحدود بدون قص */
    .profile-card-modern .stats-info-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .profile-card-modern .stat-item {
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 10px 6px !important;
    }
    .profile-card-modern .stat-val {
        font-size: 14px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .profile-card-modern .stat-label {
        font-size: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }
    /* تنبيهات طبية: ضمن الحدود */
    .profile-card-modern .p-red-flags {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* منطقة التبويبات والمحتوى: عرض كامل ضمن الحدود */
    #patients-view-profile .profile-content-area,
    #patients-view-profile .profile-tab-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* تابلت لاندسكيب: إخفاء الملاحظات، تصغير الحالة والنوع */
@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: landscape) {
    #tab-bookings .clinic-table .b-col-notes { display: none !important; }
    #tab-bookings .clinic-table thead tr th.b-col-notes { display: none !important; }
    #tab-bookings .clinic-table .b-col-status .badge.status-badge-booking {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    #tab-bookings .clinic-table .b-col-type .booking-type-select-wrap { min-width: 70px; width: 70px; }
    #tab-bookings .clinic-table .b-col-type .booking-type-select-wrap select {
        font-size: 11px !important;
        padding: 4px 8px 4px 24px !important;
    }
}

/* Desktop (web): align phone / age / gender rows beside icons */
@media screen and (min-width: 769px) {
    #patients-view-profile .profile-card-modern .p-info-row {
        display: grid !important;
        grid-template-columns: 18px 72px minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 8px !important;
        direction: rtl !important;
        padding: 4px 0 !important;
    }
    #patients-view-profile .profile-card-modern .p-info-row-icon {
        width: 18px !important;
        min-width: 18px !important;
        margin: 0 !important;
        text-align: center !important;
        justify-self: center !important;
    }
    #patients-view-profile .profile-card-modern .p-info-label {
        width: 72px !important;
        min-width: 72px !important;
        margin: 0 !important;
        text-align: right !important;
        justify-self: start !important;
    }
    #patients-view-profile .profile-card-modern .p-info-icon-wrapper {
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
    }
}

@media screen and (max-width: 768px) {
    /* Patient search table (mobile): sequence in blue circle, ID above phone, avatar left, tidy actions */
    #patient-cards-container .patient-search-table td:nth-of-type(3) {
        order: 3 !important;
        position: static !important;
        background: transparent !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 36px !important;
        display: flex !important;
        direction: rtl !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 13px !important;
    }
    #patient-cards-container .patient-search-table td:nth-of-type(4) {
        order: 4 !important;
    }
    #patient-cards-container .patient-search-table td:nth-of-type(2) > div {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        padding-left: 44px !important;
    }
    #patient-cards-container .patient-search-table td:nth-of-type(2) img,
    #patient-cards-container .patient-search-table td:nth-of-type(2) .placeholder {
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }
    #patient-cards-container .patient-search-table td:last-child {
        padding: 10px !important;
        gap: 6px !important;
    }
    #patient-cards-container .patient-search-table td:last-child > div {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #patient-cards-container .patient-search-table td:last-child .btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* Patients records card actions (mobile): medium size and tighter spacing */
    .patients-main-table td:last-child > div,
    #patients-table-body-main td:last-child > div {
        gap: 6px !important;
        padding: 4px 0 !important;
    }
    .patients-main-table td:nth-of-type(7) .btn,
    #patients-table-body-main td:nth-of-type(7) .btn {
        font-size: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        padding: 0 8px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .patients-main-table td:nth-of-type(7) .btn i,
    #patients-table-body-main td:nth-of-type(7) .btn i {
        font-size: 13px !important;
    }
}

/* ===== LAST OVERRIDES ===== */
.hc-offcanvas-nav li.active-page a {
    background: linear-gradient(90deg, #0e1d59, #051b73) !important;
}

body.is-apk-landscape .common-dashboard-card {
    margin-bottom: 10px !important;
}

body.dark-mode #fin-view-expenses > .common-dashboard-card:first-child {
    background: linear-gradient(179deg, #3d251d 0%, #040303 80%) !important;
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    #tab-records .clinic-table th,
    #tab-records .clinic-table td {
        text-align: center !important;
        vertical-align: middle !important;
    }
    #tab-records .clinic-table td[data-label="المريض"] > div {
        justify-content: center !important;
    }
}

@media screen and (max-width: 1400px) {
    #tab-employees .emp-table td[data-label="#"],
    #tab-finance .emp-table td[data-label="#"],
    #tab-finance #report-table-body td[data-label="#"],
    #tab-finance #expenses-table-body td[data-label="#"],
    #tab-finance #revenues-table-body td[data-label="#"] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 8px 12px !important;
        justify-content: space-between !important;
    }
    #tab-employees .emp-table td[data-label="#"]::before,
    #tab-finance .emp-table td[data-label="#"]::before,
    #tab-finance #report-table-body td[data-label="#"]::before,
    #tab-finance #expenses-table-body td[data-label="#"]::before,
    #tab-finance #revenues-table-body td[data-label="#"]::before {
        display: none !important;
    }
}

.sidebar .lab-ref-badge,
.sidebar .nursing-ref-badge,
.hc-offcanvas-nav .lab-ref-badge,
.hc-offcanvas-nav .nursing-ref-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #dc2626 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: none !important;
}

#prof-content-personal #btn-change-pwd {
    background: linear-gradient(145deg, #f8fafc 0%, #e5e7eb 100%) !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

body.dark-mode #prof-content-personal #btn-change-pwd {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

#prof-content-personal #info-id {
    padding-right: 40px !important;
    padding-left: 12px !important;
}

#prof-content-personal .btn-copy-id {
    right: 8px !important;
    left: auto !important;
}

#prof-content-personal #info-password {
    padding-right: 44px !important;
    padding-left: 12px !important;
}

#prof-content-personal #btn-toggle-pwd,
#prof-content-personal .pwd-input-wrap .btn-toggle-pwd-inline {
    right: 8px !important;
    left: auto !important;
}

#prof-content-rx .prof-mobile-view-btn,
#prof-content-reports .prof-mobile-view-btn,
#prof-content-referrals .prof-mobile-view-btn,
#prof-content-visits .prof-mobile-view-btn {
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: linear-gradient(145deg, #ffffff 0%, #e5e7eb 100%) !important;
    color: #0e1d59 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

body.dark-mode #prof-content-rx .prof-mobile-view-btn,
body.dark-mode #prof-content-reports .prof-mobile-view-btn,
body.dark-mode #prof-content-referrals .prof-mobile-view-btn,
body.dark-mode #prof-content-visits .prof-mobile-view-btn {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

#prof-content-attachments .att-file-btn,
#prof-content-attachments .att-camera-btn {
    background: linear-gradient(145deg, #ffffff 0%, #e5e7eb 100%) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    #prof-content-attachments #att-form-card.att-form-collapsed #att-form-body {
        display: none !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1400px) and (orientation: portrait) {
    #prof-content-attachments .att-actions-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #prof-content-attachments .att-save-row {
        width: 130px !important;
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 991px) {
    #tab-finance .finance-total-row td:first-child,
    #tab-finance .finance-total-row td[colspan] {
        position: static !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    #tab-finance .finance-total-row td:first-child::before,
    #tab-finance .finance-total-row td[colspan]::before {
        display: none !important;
    }
}

body.dark-mode #tab-checkup .clinic-table td:first-child,
body.dark-mode #tab-lab .clinic-table td:first-child,
body.dark-mode #tab-nursing .clinic-table td:first-child,
body.dark-mode #tab-bookings .clinic-table td:first-child {
    color: #ffffff !important;
}

body.dark-mode #tab-bookings .status-badge-booking[style*="color:#475569"] {
    color: #99a5b5 !important;
}

body.dark-mode .nursing-table td:last-child,
body.dark-mode .emp-table td:last-child,
body.dark-mode .clinic-table td:last-child,
body.dark-mode .drug-table td:last-child {
    background: transparent !important;
}

body.dark-mode #records-quick-reports-card,
body.dark-mode #bookings-quick-reports-card,
body.dark-mode .clinic-quick-reports-card {
    background: transparent !important;
}

body.dark-mode #fin-view-expenses .finance-filters-panel label,
body.dark-mode #fin-view-expenses .finance-filters-panel .form-control,
body.dark-mode #fin-view-expenses .finance-filters-panel .form-control::placeholder,
body.dark-mode #fin-view-expenses .finance-filters-panel select,
body.dark-mode #fin-view-expenses .finance-filters-panel option {
    color: #ffffff !important;
}

body.dark-mode .modern-patient-form {
    background: #08111e !important;
}

body.dark-mode .action-bar {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    .nav-item-profile-row .mobile-profile-card #mobile-profile-role {
        display: none !important;
    }
}

/* ===== FINAL OVERRIDES: ATTACHMENTS DARK MODE ===== */
body.dark-mode #prof-content-attachments .att-camera-btn,
body.dark-mode #prof-content-attachments .att-file-btn {
    background: linear-gradient(199deg, #3b82f6 0%, #1a4095 100%) !important;
    border-color: #2759b8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode #prof-content-attachments .att-camera-btn i,
body.dark-mode #prof-content-attachments .att-file-btn i {
    color: #ffffff !important;
}

body.dark-mode #prof-content-attachments .att-filters-row select.form-control:not([multiple]),
body.dark-mode #prof-content-attachments .att-filters-row select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center !important;
    background-size: 12px 8px !important;
}

/* ===== FINAL OVERRIDES: FINANCE + SIDEBAR BADGES + LOG TITLE ===== */

/* 1) Finance cards in Report/Expenses/Revenues match Records look (Light) */
#tab-finance #fin-view-report > .common-dashboard-card,
#tab-finance #fin-view-expenses > .common-dashboard-card,
#tab-finance #fin-view-revenues > .common-dashboard-card,
#tab-finance .finance-filters-panel,
#tab-finance .emp-table-container,
#fin-view-report .summary-stat-card {
    background: #f8f9fa !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

/* 1b) Finance cards in dark mode follow Records dark surface */
body.dark-mode #tab-finance #fin-view-report > .common-dashboard-card,
body.dark-mode #tab-finance #fin-view-expenses > .common-dashboard-card,
body.dark-mode #tab-finance #fin-view-revenues > .common-dashboard-card,
body.dark-mode #tab-finance .finance-filters-panel,
body.dark-mode #tab-finance .emp-table-container,
body.dark-mode #fin-view-report .summary-stat-card,
body.dark-mode #fin-view-expenses > .common-dashboard-card:first-child,
body.dark-mode #fin-view-revenues > .common-dashboard-card:first-child {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* 2) Offcanvas active item border color in dark mode */
body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a {
    border: 1px solid #1d365b !important;
}

/* 3) Offcanvas card style (light mode) */
body:not(.dark-mode) .hc-offcanvas-nav .nav-content > ul > li.nav-item > .nav-item-wrapper > a.nav-item-link {
    border-bottom: none !important;
    background: linear-gradient(90deg, #eef1ff, #ffffff) !important;
    border: 1px solid #b4d3ff45 !important;
}

/* 4) Border color for nav items/profile/theme cards */
.hc-offcanvas-nav li.nav-item a,
.nav-item-profile-row .mobile-profile-card,
.nav-item-ai-theme .mobile-theme-header-btn,
.nav-item-ai-theme .nav-item-ai-link {
    border: 1px solid #b4d3ff45 !important;
}

/* 5) Sidebar badge order for Lab/Nursing on desktop:
   number badge appears before English rectangle badge */
@media screen and (min-width: 1200px) {
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"],
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"],
    .sidebar a[onclick*="switchTab('lab')"],
    .sidebar a[onclick*="switchTab('nursing')"] {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nav-badge,
    .sidebar a[onclick*="switchTab('lab')"] .nav-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nav-badge {
        order: 3 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        order: 2 !important;
        margin-inline-start: 6px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* 6) Mobile/tablet: keep one clear space between Arabic title and notification number */
@media screen and (max-width: 1199px) {
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        margin-inline-start: 6px !important;
        margin-inline-end: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* 7) Dark mode: title text in "Latest/Recent Activities" card is white */
body.dark-mode #chart-recent-activities-card .chart-header-flex,
body.dark-mode #chart-recent-activities-card .analytics-header,
body.dark-mode #chart-recent-activities-card .chart-header-flex span,
body.dark-mode #chart-recent-activities-card .chart-header-flex i {
    color: #ffffff !important;
}

/* ===== FINAL OVERRIDES V2: FINANCE MOBILE CARD + NAV BADGES ===== */

/* Light mode active page gradient */
body:not(.dark-mode) .hc-offcanvas-nav li.active-page a,
body:not(.dark-mode) .hc-offcanvas-nav li.nav-item.active-page a {
    background: linear-gradient(135deg, #2e4089, #0d1f54) !important;
    color: #ffffff !important;
}

/* LAB / NURSING align with peers (PROFILE) in sidebar */
@media screen and (min-width: 1200px) {
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"],
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"],
    .sidebar a[onclick*="switchTab('lab')"],
    .sidebar a[onclick*="switchTab('nursing')"] {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 118px !important;
    }

    /* English rectangle (Lab/Nursing) fixed near left, same zone as peers */
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nav-badge,
    .sidebar a[onclick*="switchTab('lab')"] .nav-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nav-badge {
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        order: 3 !important;
    }

    /* Notification number BEFORE English rectangle */
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        position: absolute !important;
        left: 62px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        order: 2 !important;
    }
}

/* Mobile + Tablet Portrait Nav container: keep a clear gap between word and notification */
@media screen and (max-width: 1199px) {
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        position: static !important;
        transform: none !important;
        margin-inline-start: 8px !important;
        margin-inline-end: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Finance mobile cards: copy Records-card feel */
@media screen and (max-width: 1024px) {
    #report-table-body tr:not(.finance-total-row),
    #expenses-table-body tr:not(.finance-total-row),
    #revenues-table-body tr:not(.finance-total-row) {
        position: relative !important;
        border: 1px solid #dbe4f0 !important;
        border-right: 5px solid #1e3a8a !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        margin-bottom: 14px !important;
        padding: 20px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

    #report-table-body tr:not(.finance-total-row) td,
    #expenses-table-body tr:not(.finance-total-row) td,
    #revenues-table-body tr:not(.finance-total-row) td {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        min-height: 36px !important;
        height: auto !important;
    }

    #report-table-body tr:not(.finance-total-row) td:last-child,
    #expenses-table-body tr:not(.finance-total-row) td:last-child,
    #revenues-table-body tr:not(.finance-total-row) td:last-child {
        border-bottom: none !important;
    }

    #report-table-body tr:not(.finance-total-row) td:nth-of-type(1),
    #expenses-table-body tr:not(.finance-total-row) td:nth-of-type(1),
    #revenues-table-body tr:not(.finance-total-row) td:nth-of-type(1) {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: 35px !important;
        min-width: 35px !important;
        height: 35px !important;
        min-height: 35px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 2px solid #ffffff !important;
        background: var(--primary, #1e3a8a) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.28) !important;
        z-index: 12 !important;
    }

    #report-table-body tr:not(.finance-total-row) td:nth-of-type(1)::before,
    #expenses-table-body tr:not(.finance-total-row) td:nth-of-type(1)::before,
    #revenues-table-body tr:not(.finance-total-row) td:nth-of-type(1)::before {
        content: none !important;
        display: none !important;
    }

    #report-table-body tr:not(.finance-total-row) td:nth-of-type(2),
    #expenses-table-body tr:not(.finance-total-row) td:nth-of-type(2),
    #revenues-table-body tr:not(.finance-total-row) td:nth-of-type(2) {
        position: relative !important;
        background: #f8fafc !important;
        margin: -20px -20px 14px -20px !important;
        width: calc(100% + 40px) !important;
        padding: 16px 60px 16px 20px !important;
        border-bottom: 2px solid #eef2f7 !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #0f2f73 !important;
    }

    #report-table-body tr:not(.finance-total-row) td:nth-of-type(2)::before,
    #expenses-table-body tr:not(.finance-total-row) td:nth-of-type(2)::before,
    #revenues-table-body tr:not(.finance-total-row) td:nth-of-type(2)::before {
        content: none !important;
        display: none !important;
    }

    body.dark-mode #report-table-body tr:not(.finance-total-row),
    body.dark-mode #expenses-table-body tr:not(.finance-total-row),
    body.dark-mode #revenues-table-body tr:not(.finance-total-row) {
        background: #1b2940 !important;
        border-color: #2c456e !important;
        border-right-color: #325f9d !important;
        box-shadow: none !important;
    }

    body.dark-mode #report-table-body tr:not(.finance-total-row) td,
    body.dark-mode #expenses-table-body tr:not(.finance-total-row) td,
    body.dark-mode #revenues-table-body tr:not(.finance-total-row) td {
        border-bottom-color: rgba(148, 163, 184, 0.2) !important;
        color: #e2e8f0 !important;
    }

    body.dark-mode #report-table-body tr:not(.finance-total-row) td:nth-of-type(2),
    body.dark-mode #expenses-table-body tr:not(.finance-total-row) td:nth-of-type(2),
    body.dark-mode #revenues-table-body tr:not(.finance-total-row) td:nth-of-type(2) {
        background: #22314a !important;
        border-bottom-color: rgba(148, 163, 184, 0.25) !important;
        color: #ffffff !important;
    }
}

/* Dark mode: recent activities title should be white (strong override) */
body.dark-mode #chart-recent-activities-card h5,
body.dark-mode #chart-recent-activities-card .analytics-header,
body.dark-mode #chart-recent-activities-card .chart-header-flex,
body.dark-mode #chart-recent-activities-card .chart-header-flex * {
    color: #ffffff !important;
}

/* ===== FINAL OVERRIDES V3: USER REQUEST HOTFIX ===== */

/* A) Active item gradient in sidebar/offcanvas */
.hc-offcanvas-nav li.active-page a,
.hc-offcanvas-nav li.nav-item.active-page a,
.sidebar li.active-page > a,
.sidebar .nav-item.active-page > a,
.sidebar .nav-item.active > a {
    background: linear-gradient(135deg, #2e4089, #0d1f54) !important;
}

/* B) Align English badges (LAB/NURSING) with peers like PROFILE in sidebar */
@media screen and (min-width: 1200px) {
    .sidebar .nav-item > a,
    .hc-offcanvas-nav .nav-item > .nav-item-wrapper > a.nav-item-link {
        position: relative !important;
        padding-left: 118px !important;
    }

    .sidebar .nav-item > a .nav-badge,
    .hc-offcanvas-nav .nav-item > .nav-item-wrapper > a.nav-item-link .nav-badge {
        position: absolute !important;
        left: 10px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Keep red notification number before english badge for Lab/Nursing */
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        position: absolute !important;
        left: 62px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
}

/* C) Mobile/tablet portrait nav-container: leave space between word and notification */
@media screen and (max-width: 1199px) {
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-inline-start: 8px !important;
        margin-inline-end: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* D) Dark mode: action bar top border */
body.dark-mode .action-bar {
    border-top: 1px solid #334155 !important;
}

/* E) Dark mode: Recent Activities card texts (including inline styled rows) in white */
body.dark-mode #chart-recent-activities-card h5,
body.dark-mode #chart-recent-activities-card .analytics-header,
body.dark-mode #chart-recent-activities-card .recent-activity-row,
body.dark-mode #chart-recent-activities-card .recent-activity-row * {
    color: #ffffff !important;
}
body.dark-mode #chart-recent-activities-card .recent-activity-row div[style*="color:#1e293b"],
body.dark-mode #chart-recent-activities-card .recent-activity-row div[style*="color: #1e293b"],
body.dark-mode #chart-recent-activities-card .recent-activity-row div[style*="color:#64748b"],
body.dark-mode #chart-recent-activities-card .recent-activity-row div[style*="color: #64748b"] {
    color: #ffffff !important;
}

/* F) Mobile cards: employees + finance sequence position and finance content wrapping fixes */
@media screen and (max-width: 1024px) {
    /* Sequence circle should stay in header corner (not at end) */
    #tab-employees .emp-table td[data-label="#"],
    #tab-employees #employees-table-body td:nth-of-type(1),
    #tab-employees #payroll-table-body td:nth-of-type(1),
    #tab-finance #report-table-body td[data-label="#"],
    #tab-finance #expenses-table-body td[data-label="#"],
    #tab-finance #revenues-table-body td[data-label="#"] {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: 35px !important;
        min-width: 35px !important;
        height: 35px !important;
        min-height: 35px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--primary, #1e3a8a) !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3) !important;
        z-index: 12 !important;
    }

    #tab-employees .emp-table td[data-label="#"]::before,
    #tab-finance #report-table-body td[data-label="#"]::before,
    #tab-finance #expenses-table-body td[data-label="#"]::before,
    #tab-finance #revenues-table-body td[data-label="#"]::before {
        display: none !important;
        content: none !important;
    }

    /* Keep 'تمريض + تلقائي' / 'بيان + تلقائي' in one line */
    #report-table-body td[data-label="البيان"],
    #expenses-table-body td[data-label="النوع"],
    #revenues-table-body td[data-label="النوع"] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    #report-table-body td[data-label="البيان"] > div:first-child,
    #expenses-table-body td[data-label="النوع"] > div:first-child,
    #revenues-table-body td[data-label="النوع"] > div:first-child {
        display: inline-block !important;
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #report-table-body td[data-label="البيان"] > div:last-child,
    #expenses-table-body td[data-label="النوع"] > div:last-child,
    #revenues-table-body td[data-label="النوع"] > div:last-child {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    /* Center note: "إيراد تلقائي من السجلات" */
    #report-table-body td[data-label="ملاحظات"],
    #expenses-table-body td[data-label="ملاحظات"],
    #revenues-table-body td[data-label="ملاحظات"] {
        text-align: center !important;
        justify-content: center !important;
    }
    #report-table-body td[data-label="ملاحظات"]::before,
    #expenses-table-body td[data-label="ملاحظات"]::before,
    #revenues-table-body td[data-label="ملاحظات"]::before {
        display: none !important;
        content: none !important;
    }
}

/* ===== FINAL OVERRIDES V4: ACTIVE + LAB/NURSING + FINANCE INLINE/CENTER ===== */

/* 1) Force active highlight in side menu with requested gradient */
body:not(.dark-mode) .hc-offcanvas-nav .nav-content > ul > li.nav-item.active-page > .nav-item-wrapper > a.nav-item-link,
body:not(.dark-mode) .hc-offcanvas-nav .nav-content > ul > li.active-page > .nav-item-wrapper > a.nav-item-link,
body:not(.dark-mode) .hc-offcanvas-nav li.active-page > a,
body:not(.dark-mode) .hc-offcanvas-nav li.active-page > a.nav-item-link,
body:not(.dark-mode) .sidebar li.active-page > a,
body:not(.dark-mode) .sidebar .nav-item.active > a,
body:not(.dark-mode) .sidebar .nav-item.active-page > a {
    background: linear-gradient(135deg, #2e4089, #0d1f54) !important;
    color: #ffffff !important;
    border-color: #b4d3ff !important;
}

/* 2) LAB/NURSING badges move slightly to the right to align with other English pills */
@media screen and (min-width: 1200px) {
    .sidebar a[onclick*="switchTab('lab')"] .nav-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nav-badge {
        left: 18px !important;
    }

    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        left: 72px !important;
    }
}

/* 3) Finance mobile cards: keep "تلقائي" in same line with the type/statement */
@media screen and (max-width: 1024px) {
    #report-table-body td[data-label="البيان"],
    #expenses-table-body td[data-label="النوع"],
    #revenues-table-body td[data-label="النوع"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    #report-table-body td[data-label="البيان"]::before,
    #expenses-table-body td[data-label="النوع"]::before,
    #revenues-table-body td[data-label="النوع"]::before {
        min-width: auto !important;
        margin-left: 8px !important;
    }

    #report-table-body td[data-label="البيان"] > div:first-child,
    #expenses-table-body td[data-label="النوع"] > div:first-child,
    #revenues-table-body td[data-label="النوع"] > div:first-child {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #report-table-body td[data-label="البيان"] > div:last-child,
    #expenses-table-body td[data-label="النوع"] > div:last-child,
    #revenues-table-body td[data-label="النوع"] > div:last-child {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        margin-right: 6px !important;
    }

    /* 4) Center lock icon and system note text in finance cards */
    #expenses-table-body td[data-label="إجراءات"],
    #revenues-table-body td[data-label="إجراءات"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #expenses-table-body td[data-label="إجراءات"]::before,
    #revenues-table-body td[data-label="إجراءات"]::before {
        display: none !important;
        content: none !important;
    }

    #expenses-table-body td[data-label="إجراءات"] .icofont-lock,
    #revenues-table-body td[data-label="إجراءات"] .icofont-lock {
        margin: 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #report-table-body td[data-label="ملاحظات"],
    #expenses-table-body td[data-label="ملاحظات"],
    #revenues-table-body td[data-label="ملاحظات"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ===== FINAL OVERRIDES V5: LAB/NURSING ALIGN + BADGE GAP + FINANCE INLINE AUTO ===== */

/* 1) Desktop: push LAB/NURSING badges a bit to the right to align with peers */
@media screen and (min-width: 1200px) {
    .sidebar a[onclick*="switchTab('lab')"],
    .sidebar a[onclick*="switchTab('nursing')"],
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"],
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] {
        padding-left: 128px !important;
    }

    .sidebar a[onclick*="switchTab('lab')"] .nav-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .nav-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nav-badge {
        left: 26px !important;
    }

    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        left: 82px !important;
    }
}

/* 2) Mobile/tablet portrait: clear gap between word and red badge */
@media screen and (max-width: 1199px) {
    .sidebar a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .sidebar a[onclick*="switchTab('nursing')"] .nursing-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('lab')"] .lab-ref-badge,
    .hc-offcanvas-nav a[onclick*="switchTab('nursing')"] .nursing-ref-badge {
        position: static !important;
        transform: none !important;
        display: inline-flex !important;
        vertical-align: middle !important;
        margin-right: 8px !important;
        margin-left: 0 !important;
        margin-inline-end: 8px !important;
        margin-inline-start: 0 !important;
    }
}

/* 3) Finance mobile cards: keep "تلقائي" next to statement/type in same line */
@media screen and (max-width: 1024px) {
    #tab-finance #report-table-body td[data-label="البيان"],
    #tab-finance #expenses-table-body td[data-label="النوع"],
    #tab-finance #revenues-table-body td[data-label="النوع"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        white-space: nowrap !important;
    }

    #tab-finance #report-table-body td[data-label="البيان"]::before,
    #tab-finance #expenses-table-body td[data-label="النوع"]::before,
    #tab-finance #revenues-table-body td[data-label="النوع"]::before {
        min-width: auto !important;
        white-space: nowrap !important;
        margin-left: 8px !important;
    }

    #tab-finance #report-table-body td[data-label="البيان"] > div,
    #tab-finance #expenses-table-body td[data-label="النوع"] > div,
    #tab-finance #revenues-table-body td[data-label="النوع"] > div {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    #tab-finance #report-table-body td[data-label="البيان"] > div:first-child,
    #tab-finance #expenses-table-body td[data-label="النوع"] > div:first-child,
    #tab-finance #revenues-table-body td[data-label="النوع"] > div:first-child {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #tab-finance #report-table-body td[data-label="البيان"] > div:last-child,
    #tab-finance #expenses-table-body td[data-label="النوع"] > div:last-child,
    #tab-finance #revenues-table-body td[data-label="النوع"] > div:last-child {
        flex: 0 0 auto !important;
        margin-right: 6px !important;
        margin-left: 0 !important;
    }
}