/* =========================================
   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;
}

* {
    box-sizing: border-box;
}

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;
}

/* 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;
}

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

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

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

.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;
}

.nav-item i {
    margin-left: 12px;
    font-size: 1.2rem;
    width: 25px;
    text-align: center;
}

/* Main Content */
.main-content {
    flex-grow: 1;
    margin-right: var(--sidebar-width);
    /* Shift for RTL sidebar */
    padding: 30px;
    transition: margin 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center the workspace */
}

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

/* =========================================
   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;
    /* Darker, richer background */
    --bg-surface: #1e293b;
    --bg-surface-hover: #334155;
    --border-color: #334155;
    --text-main: #ffffff;
    /* Pure white for main text */
    --text-muted: #e2e8f0;
    /* Brighter gray for secondary text */
    background-color: var(--bg-body);
    color: var(--text-main);
    color-scheme: dark;
    /* Helps browser native inputs (date, etc) */
}

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: #0f172a;
    border-color: var(--border-color);
    color: var(--text-main);
}

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: #0f172a;
    border-color: #475569;
    color: #ffffff;
}

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

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

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: #1e293b;
    border-color: #475569;
    color: #fff;
}

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

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 !important;
    /* Update: User Requested Color */
    border-color: #336376 !important;
    color: #ffffff !important;
}

.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(135deg, #3b82f6 0%, #2563eb 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 {
    color: #94a3b8;
}

body.dark-mode .nav-item.active i {
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* 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;
    border: 1px solid var(--border-color);
    color: #fff;
}

/* 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 (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;
}

.tab-content-area {
    width: 100%;
    max-width: 100%;
    background: #fff;
    min-height: 600px;
    padding: 30px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 80px;
    /* Space for fixed bottom bar */
}

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

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

@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,
.drug-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
}

.clinic-table th,
.drug-table th {
    background: #f1f5f9;
    padding: 10px 15px;
    border: 1px solid #d1d5db;
    text-align: right;
    font-size: 14px;
    color: #1e293b;
    height: 50px;
    font-weight: 700;
}

.clinic-table td,
.drug-table td {
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    color: #475569;
    vertical-align: middle;
}

/* The Container Card for Tables */
.clinic-table-card {
    background: #fff;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
}

/* Remove internal borders when table is inside a clinic-table-card */
.clinic-table-card .clinic-table,
.clinic-table-card .drug-table {
    border: none !important;
    margin-top: 0 !important;
}

.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 (max-width: 768px) {
    .action-bar {
        flex-wrap: wrap;
        padding: 10px;
        gap: 10px;
    }

    .action-bar .btn {
        flex: 1 1 45%;
        /* Buttons take up half width roughly */
    }

    .action-bar .btn:last-child {
        flex: 1 1 100%;
        /* The "Save & Print" button takes full width if it's last/wrapped */
    }

    /* 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: var(--primary);
    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;
    }

    /* 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%;
    }

    /* 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;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.2fr 130px;
    gap: 10px;
    align-items: end;
}

.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 1fr 1fr 1fr 1.2fr 1.2fr 2fr;
    gap: 10px;
}

.bookings-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr;
    /* 6 Items: Name, Year, Month, Day, Status, 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: 20px;
    border: 1px solid #d1d5db;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Fix: Table border logic inside rounded cards (Legacy support) */
.common-dashboard-card>.drug-table,
.common-dashboard-card>div>.drug-table,
.common-dashboard-card>.clinic-table,
.clinic-table-card .clinic-table,
.clinic-table-card .drug-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 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Prevent overflow */
        gap: 5px;
        width: 100%;
    }

    .records-filter-grid select.form-control,
    .records-filter-grid input.form-control {
        font-size: 12px;
        /* Smaller font for mobile */
        padding: 5px;
    }
}

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

/* NEW Mobile Header Bar (Matches Index Page) */
.mobile-app-header {
    display: none;
    /* Hidden on Desktop */
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    direction: rtl;
    background: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 95;
}

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

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

/* 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 (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-right: 0;
        padding: 15px;
        padding-bottom: 200px !important;
        /* Extra space for big footer */
    }

    .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 {
        padding: 15px;
        gap: 15px;
    }

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

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

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

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

    /* Stack any grid inside tabs */
    .tab-section div[style*="display: grid"],
    #tab-prescription div[style*="grid-template-columns"],
    .drug-input-grid {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
        grid-template-columns: 1fr !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;
        background: #fff !important;
        border-top: 1px solid #dee2e6 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        z-index: 9999 !important;
        box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
        gap: 10px;
    }

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

    .action-bar button {
        flex: 1 1 45% !important;
        margin: 0 !important;
        height: 50px;
    }

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

    /* 8. Text Editor */
    #rep-editor {
        height: 350px !important;
    }

    /* 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) */
.mobile-app-header {
    display: flex !important;
    justify-content: flex-start !important;
    /* Logo flows to start (Right) */
    align-items: center !important;
    direction: rtl !important;
    padding: 10px 15px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0;
    width: 100% !important;
    position: relative !important;
    /* Anchor for absolute menu */
    height: 70px;
    /* Ensure height for centering */
    z-index: 999;
}

.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;
    /* Kill the 'right' property */
    top: 50% !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;
}

.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;
    /* Reduced spacing by half (was 5px) */
    list-style: none;
}

.nav-social-icons {
    display: flex;

    .nav-social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        padding: 5px;
        width: 100%;
    }

    .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: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    transform: translateX(-5px);
}

.hc-offcanvas-nav li.active-page a i {
    color: #ffffff !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 .nav-header {
    background: linear-gradient(135deg, #111, #222) !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-color: #252538 !important;
    /* Card Bg Dark */
    color: #eee !important;
    border: 1px solid #333 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

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;
    /* Keep Accent Blue */
}

/* Active Item Dark Mode */
body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a {
    background-color: #0071ef !important;
    color: #fff !important;
    border-color: #0071ef !important;
}

body.dark-mode .hc-offcanvas-nav li.nav-item.active-page a i {
    color: #fff !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 .about-dev-text i {
    color: #fff !important;
}


/* Hide Social Icons in Mobile Menu Dark Mode */
body.dark-mode .nav-social-icons {
    display: none !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 input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .header-tools,
body.dark-mode .btn-light {
    background-image: none !important;
    background-color: var(--bg-surface) !important;
    /* Ensure correct dark bg returns */
}

/* =========================================
   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: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    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;
    /* Highlight line */
}

.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;
}

.stat-info h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1.2;
}

.stat-info span {
    font-size: 13px;
    font-weight: 600;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* 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) */
/* 12.5 New Grid Layout (Refactored for Dynamic Expansion) */
.dashboard-lower-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
}

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

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

.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;
}

.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: 20px;
}



/* 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 */
    }
}

@media screen and (max-width: 768px) {
    .charts-row {
        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;
}

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

    /* 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 {
    display: flex;
    gap: 15px;
    /* Increased from 10px */
    flex-wrap: wrap;
    margin-bottom: 25px !important;
    /* Visual breathing room */
}

.analytics-controls .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: #2a2a3d;
    border-color: #444;
    color: #eee;
}

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

/* 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;
}

.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 {
    color: #ccc;
    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 {
    background-color: #444;
    color: #fff;
    border-color: #666;
}

/* =========================================
   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: nowrap !important;
    width: 100%;
    gap: 10px;
}

.chart-header-flex .analytics-header {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* =========================================
   18. MOBILE RESPONSIVENESS TWEAKS
   ========================================= */
@media (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 {
        grid-template-columns: 1fr;
        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 - Force Single Line with Horizontal Scroll */
    .analytics-controls {
        display: flex;
        flex-wrap: nowrap !important;
        /* Start on one line */
        overflow-x: auto;
        /* Allow scroll if needed */
        gap: 8px;
        padding-bottom: 5px;
        /* Space for scrollbar if any */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .analytics-controls::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .analytics-controls .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 */
    }
}

/* Mobile Records Table Dark Mode Fix */
@media (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 */
#tab-analytics {
    overflow-y: auto !important;
    height: 100% !important;
    padding-bottom: 50px;
}

/* =========================================
   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-select-styled {
    background-color: #2a2a3d !important;
    border-color: #444 !important;
    color: #eee !important;
}

body.dark-mode .custom-select-styled:hover {
    background-color: #333 !important;
}

/* 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 (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;
    }

    /* Summary Cards */
    .analytics-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !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,
    .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 */
    }

    /* Pull the body up using negative margin to reduce gap further if needed */
    .sheet.print-records-mode .sheet-body {
        margin-top: -20px !important;
    }
}

@media (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 (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: #34495e !important;
        color: #fff !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 (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. Mobile Table View - Card Style with Improved Labels */
@media (max-width: 991px) {

    /* Hide Table Headers */
    .drug-table thead {
        display: none !important;
    }

    /* Stack Everything */
    .drug-table tbody,
    .drug-table tr,
    .drug-table td {
        display: block !important;
        width: 100% !important;
    }

    /* Card Styling for Row */
    .drug-table tr {
        margin-bottom: 15px !important;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        position: relative;
    }

    body.dark-mode .drug-table tr {
        background: #2c3e50 !important;
        border-color: #444 !important;
    }

    /* Cell Styling */
    .drug-table td {
        text-align: right !important;
        padding: 8px 10px !important;
        padding-right: 35% !important;
        /* Space for Label */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative;
        min-height: 32px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }

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

    /* Remove border from last item */
    .drug-table td:last-child {
        border-bottom: none !important;
        padding-right: 10px !important;
        justify-content: center;
        margin-top: 5px;
    }

    /* Labels Pseudo-Elements */
    .drug-table td::before {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
        font-weight: bold;
        color: #555;
        content: "";
        /* Default empty */
        text-align: right;
    }

    body.dark-mode .drug-table td::before {
        color: #ccc;
    }

    /* Specific Labels by Index (1=ID, 2=Name, 3=Dose, 4=Freq, 5=Duration, 6=Notes, 7=Actions) */

    /* Sequence Badge style */
    .drug-table td:nth-of-type(1) {
        display: flex !important;
        position: absolute;
        top: -10px;
        left: -10px;
        /* Aligned to corner */
        width: 32px !important;
        height: 32px !important;
        background: #0d6efd;
        color: white;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        padding: 0 !important;
        font-weight: bold;
        z-index: 5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid #fff !important;
        font-size: 14px !important;
        min-height: auto !important;
    }

    body.dark-mode .drug-table td:nth-of-type(1) {
        background: #198754 !important;
        /* Green for contrast or keep blue */
        border-color: #2c3e50 !important;
    }

    .drug-table td:nth-of-type(2)::before {
        content: "الدواء:";
    }

    .drug-table td:nth-of-type(2) {
        font-weight: bold;
        color: var(--primary, #0d6efd) !important;
        font-size: 1.1em;
    }

    body.dark-mode .drug-table td:nth-of-type(2) {
        color: #6ea8fe !important;
    }

    .drug-table td:nth-of-type(3)::before {
        content: "الجرعة:";
    }

    .drug-table td:nth-of-type(4)::before {
        content: "التكرار:";
    }

    .drug-table td:nth-of-type(5)::before {
        content: "المدة:";
    }

    .drug-table td:nth-of-type(6)::before {
        content: "ملاحظات:";
    }

    /* Notes Color */
    .drug-table td:nth-of-type(6) {
        color: #666;
        font-style: italic;
    }

    body.dark-mode .drug-table td:nth-of-type(6) {
        color: #ccc;
    }
}

/* Fix: Pagination Text Color in Dark Mode */
body.dark-mode .custom-pagination-wrapper span {
    color: #fff !important;
}

/* Fix: Mobile Pagination Compact Layout */
@media (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 (max-width: 991px) {

    /* =========================================
       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 (Key-Value Pair) - COMPACT */
    .records-table td,
    .checkup-table td {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px !important;
        /* Reduced Padding */
        border-bottom: 1px solid #f1f5f9;
        text-align: left;
        min-height: 36px;
        /* Reduced Height */
        height: auto;
    }

    /* Since we reversed direction, the ::before pseudo element (Label) is now visually on the RIGHT */
    /* And the content (Value) is visually on the LEFT */

    /* The Value (Text content of TD) */
    .records-table td,
    .checkup-table td {
        text-align: left !important;
        /* Force value to left */
    }

    /* Value Text Styling */
    .records-table td,
    .checkup-table td {
        line-height: 1.3;
        /* Tighter leading */
        font-size: 13px;
        /* Slightly smaller text */
        text-align: left !important;
        word-break: break-word;
        /* Prevent overflow */
    }

    .records-table td:last-child,
    .checkup-table td:last-child {
        border-bottom: none;
        display: block !important;
        /* Actions block */
        padding: 10px !important;
        /* Reduced Padding */
        background: #f8fafc;
        text-align: center;
    }

    /* 4. Labels (The "Comparison" Headers) */
    .records-table td::before,
    .checkup-table td::before {
        content: attr(data-label);
        /* Fallback */
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        /* Smaller Label */
        flex-shrink: 0;
        text-align: right;
        min-width: 80px;
        /* Ensure labels have consistent width */
        margin-left: 10px;
    }

    /* Ensure body of cell expands */
    .records-table td,
    .checkup-table td {
        flex-direction: row;
        /* Ensure row direction */
    }

    /* 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 */
    }

    /* --- LABELS - MOBILE ONLY --- */
    /* Name */
    .checkup-table td:nth-of-type(2)::before {
        content: "المريض";
    }

    .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: "التاريخ";
    }

    /* Time */
    .checkup-table td:nth-of-type(4)::before {
        content: "الوقت";
    }

    /* Queue */
    .checkup-table td:nth-of-type(5)::before {
        content: "رقم الحجز";
    }

    /* Notes */
    .checkup-table td:nth-of-type(6) {
        display: block !important;
        text-align: right;
    }

    .checkup-table td:nth-of-type(6)::before {
        content: "ملاحظات";
        display: block;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 5px;
        margin-bottom: 5px;
        color: #94a3b8;
        width: 100%;
    }

    /* Price */
    .checkup-table td:nth-of-type(7)::before {
        content: "السعر";
    }

    .checkup-table td:nth-of-type(7) {
        color: #16a34a;
        font-weight: bold;
    }

    /* Status */
    .checkup-table td:nth-of-type(8)::before {
        content: "الحالة";
    }

    /* Toggle */
    .checkup-table td:nth-of-type(9)::before {
        content: "تأكيد مراجعة";
    }

    /* Actions */
    .checkup-table td:last-child button {
        width: 100%;
        margin-bottom: 5px;
    }

    /* --- 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) - RTL STANDARD */
    /* User Requested: Titles (Labels) on Right, Inputs (Values) on Left */
    .records-table td,
    .checkup-table td {
        display: flex !important;
        flex-direction: row !important;
        /* RTL: Label starts Right */
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px !important;
        border-bottom: 1px solid #f1f5f9;
        text-align: left !important;
        /* Value aligns Left */
        min-height: 36px;
        height: auto;
        direction: rtl !important;
        /* Force RTL Layout */
    }

    /* Reset Header Bar Layout for RTL (Name Right, Badge Right) */
    .checkup-table td:nth-of-type(2),
    .records-table td:nth-of-type(2) {
        direction: rtl !important;
        justify-content: flex-start !important;
        /* Start from Right */
        padding-right: 60px !important;
        /* Space for Badge on Right */
        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) */
    .records-table td::before,
    .checkup-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 12px;
        flex-shrink: 0;
        text-align: right;
        /* Align Label Text Right */
        min-width: 80px;
        margin-left: 15px;
        /* Space between label and value */
        margin-right: 0;
    }

    .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: "النوع";
    }

    /* 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 - SIDE BY SIDE (Row) - MATCH SCREENSHOT */
    .records-table td:last-child {
        display: flex !important;
        /* Row layout */
        flex-direction: row !important;
        width: 100%;
        padding: 15px !important;
        background: #f8fafc;
        border-top: 1px dashed #e2e8f0 !important;
        /* Add top dashed border to separate actions */
        border-bottom: none !important;
        justify-content: flex-end !important;
        /* Align to Right (Start of Arabic) as per screenshot? No, screenshot shows left alignment logic but RTL... 
        Let's assume justified start in RTL is Right side. */
        gap: 10px !important;
    }

    .records-table td:last-child button {
        flex: 0 0 auto !important;
        /* Don't stretch */
        width: auto !important;
        min-width: 90px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        /* Space between icon and text */
        margin-bottom: 0 !important;
        height: 40px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 0 20px !important;
        border-radius: 8px !important;
        /* Rounded corners like screenshot */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        /* Strong shadow */
        border: none !important;
    }

    /* Specific Colors to match screenshot vibrant look if needed, but classes handle it mostly. 
       Just ensuring icon order is handled in HTML or via flex direction if needed. 
       Screenshot shows Text then Icon. HTML is Icon then Text. 
       In RTL, Icon then Text becomes Text (Right) Icon (Left). 
       Screenshot: "Delete [Icon]" implies standard RTL flow for `<i ...></i> Delete`.
       Wait, screenshot shows [Icon] [Text] if LTR, or [Text] [Icon] if RTL. 
       Let's trust the button classes. */

    .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;
    }
}

.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: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    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 (max-width: 1100px) {
    .login-container {
        width: 90%;
        max-width: 500px;
        height: auto;
    }

    .login-visual {
        display: none;
    }

    .login-form-side {
        padding: 40px 30px;
    }
}

/* --- 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;
}

body.dark-mode .multi-filter-trigger:hover {
    border-color: var(--primary);
}

/* --- CREATIVE PRICE WIDGET (User Request Feb 12) --- */
.price-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ced4da;
    /* Restored outer border */
    border-radius: 8px;
    padding: 0 12px;
    height: 48px;
    transition: all 0.2s ease;
}

.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: #0f172a;
    border-color: #334155;
}

body.dark-mode .price-input-wrapper:focus-within {
    background: rgba(16, 185, 129, 0.05);
}

body.dark-mode .price-input {
    color: #34d399;
}