/* Recommendation buttons styling */
.recommendation-btn {
    display: block;
    width: 100%;
    margin: 0.3rem 0;
    padding: 0.7rem 1rem;
    border: 1.5px solid #0078d4;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 1rem;
    text-align: right;
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
}

html[data-theme] body {
    background-color: var(--background-color);
    color: var(--text-primary);
}

html[data-theme] .top-header,
html[data-theme] .page-header,
html[data-theme] .create-header,
html[data-theme] .card-header {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .sidebar,
html[data-theme] .mobile-direct-menu {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .page-content,
html[data-theme] .settings-section,
html[data-theme] .card-form,
html[data-theme] .reports-chart-panel,
html[data-theme] .backup-panel,
html[data-theme] .monthly-report-panel,
html[data-theme] .modal-content,
html[data-theme] .profile-modal-card {
    background: var(--card-background) !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
}

html[data-theme] .settings-section h2,
html[data-theme] .settings-section h3,
html[data-theme] .section-title,
html[data-theme] .card-number,
html[data-theme] .target-progress {
    color: var(--text-primary) !important;
}

html[data-theme] .page-header p,
html[data-theme] .create-header p,
html[data-theme] .card h3,
html[data-theme] .meta-label,
html[data-theme] .small-label,
html[data-theme] .pill-title {
    color: var(--text-secondary) !important;
}

html[data-theme] .page-header p,
html[data-theme] .create-header p {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme] .btn-primary,
html[data-theme] #loginButton {
    background: var(--primary-color) !important;
    color: var(--theme-on-primary) !important;
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

html[data-theme] .btn-primary:hover,
html[data-theme] #loginButton:hover {
    background: var(--primary-hover) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .btn-toggle,
html[data-theme] .recommendation-btn,
html[data-theme] .settings-shortcut,
html[data-theme] .chart-range-btn.active,
html[data-theme] .card {
    background: var(--card-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
    background-color: var(--card-background);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus {
    border-color: var(--primary-soft) !important;
    box-shadow: 0 0 0 4px var(--theme-focus-ring) !important;
}

.theme-settings-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-primary);
}

.theme-settings-copy {
    display: grid;
    gap: 0.35rem;
}

.theme-settings-copy h3 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-primary);
}

.theme-settings-copy p {
    margin: 0;
    color: var(--text-secondary);
}

.theme-current-name {
    width: fit-content;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-background);
    color: var(--text-primary);
    font-weight: 700;
}

.theme-cycle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.theme-swatch {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    border: 2px solid var(--card-background);
    box-shadow: 0 0 0 1px var(--border-color);
}

@media (max-width: 700px) {
    .theme-settings-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .theme-cycle-btn {
        width: 100%;
    }
}

.recommendation-btn.selected,
.recommendation-btn:focus {
    background: #e6f0fa;
    border-color: #005fa3;
    outline: none;
}

/* Card Design for Forms */
.card-form {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    margin-bottom: 2rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.card-header {
    background: #f1f5f9;
    color: #2563eb;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-icon {
    font-size: 1.3rem;
    margin-left: 0.5rem;
}

.card-body {
    padding: 1.2rem 1.5rem 1.5rem 1.5rem;
}

.card-form:focus-within {
    box-shadow: 0 4px 18px 0 rgba(37, 99, 235, 0.13);
    border-color: #2563eb;
}

@font-face {
    font-family: 'PT Bold Heading';
    src: url('Fonts/Ptbldhad.ttf') format('truetype'),
         url('Fonts/Ptbldhad.ttf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'PT Bold Heading';
    src: url('Fonts/Ptbldhad.ttf') format('truetype'),
         url('Fonts/Ptbldhad.ttf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Ptbldhad';
    src: url('Fonts/Ptbldhad.ttf') format('truetype'),
         url('Fonts/Ptbldhad.ttf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

/* خط الواجهة قابل للتغيير من الاعدادات العامة — القيمة الافتراضية خط البرنامج.
   ملفات PDF لا تتأثر: قوالب التصدير تحمل خطوطها الثابتة داخل كودها. */
:root {
    --app-font: 'PT Bold Heading', 'Ptbldhad', Tahoma, Arial, sans-serif;
}

body {
    font-weight: var(--app-font-weight, normal);
}

.sidebar,
.sidebar *,
.mobile-direct-menu,
.mobile-direct-menu *,
.top-header,
.top-header *,
.page-header,
.page-header *,
.create-header,
.create-header *,
.monthly-report-title,
.monthly-report-title *,
.btn,
.btn-toggle,
.check-item,
.monthly-tab,
.monthly-export-btn,
.monthly-check-all {
    font-family: var(--app-font);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

:root {
    --primary-color: #315de1;
    --primary-hover: #244fd0;
    --primary-soft: #4f83e6;
    --primary-light: #eaf2ff;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --pending-color: #f59e0b;
    --danger-color: #ef4444;
    --background-color: #f8fafc;
    --card-background: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --surface-muted: #f1f5f9;
    --theme-header-start: #2f5edb;
    --theme-header-end: #1f4fc4;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(37, 99, 235, 0.16);
    --sidebar-width: 280px;
    --content-max-width: 980px;
}

html[data-theme="emerald"] {
    --primary-color: #087f5b;
    --primary-hover: #06674a;
    --primary-soft: #17a77b;
    --primary-light: #e7f8f1;
    --background-color: #f4fbf8;
    --card-background: #ffffff;
    --text-primary: #12352d;
    --text-secondary: #42675c;
    --border-color: #cce5dc;
    --surface-muted: #eaf6f1;
    --theme-header-start: #0f8f67;
    --theme-header-end: #076a4d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(8, 127, 91, 0.18);
}

html[data-theme="sunrise"] {
    --primary-color: #b45309;
    --primary-hover: #92400e;
    --primary-soft: #d97706;
    --primary-light: #fff4df;
    --background-color: #fffaf1;
    --card-background: #ffffff;
    --text-primary: #3d2a12;
    --text-secondary: #715832;
    --border-color: #ead7b7;
    --surface-muted: #fff3dd;
    --theme-header-start: #c75d12;
    --theme-header-end: #8a3f08;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(180, 83, 9, 0.18);
}

html[data-theme="plum"] {
    --primary-color: #7c3aed;
    --primary-hover: #6d28d9;
    --primary-soft: #9f67ff;
    --primary-light: #f3edff;
    --background-color: #fbf8ff;
    --card-background: #ffffff;
    --text-primary: #2f214b;
    --text-secondary: #62527f;
    --border-color: #ddd1f4;
    --surface-muted: #f2ecff;
    --theme-header-start: #7c3aed;
    --theme-header-end: #5b21b6;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(124, 58, 237, 0.18);
}

html[data-theme="graphite"] {
    --primary-color: #334155;
    --primary-hover: #1f2937;
    --primary-soft: #475569;
    --primary-light: #1e293b;
    --background-color: #111827;
    --card-background: #182231;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
    --surface-muted: #233044;
    --theme-header-start: #334155;
    --theme-header-end: #111827;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(148, 163, 184, 0.24);
}

html[data-theme="ocean"] {
    --primary-color: #0369a1;
    --primary-hover: #075985;
    --primary-soft: #0ea5e9;
    --primary-light: #e0f2fe;
    --background-color: #f0f9ff;
    --card-background: #ffffff;
    --text-primary: #123044;
    --text-secondary: #496678;
    --border-color: #bae6fd;
    --surface-muted: #e6f6ff;
    --theme-header-start: #0284c7;
    --theme-header-end: #075985;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(3, 105, 161, 0.18);
}

html[data-theme="ruby"] {
    --primary-color: #9f1239;
    --primary-hover: #881337;
    --primary-soft: #be123c;
    --primary-light: #fff1f2;
    --background-color: #fff7f8;
    --card-background: #ffffff;
    --text-primary: #3d1622;
    --text-secondary: #76505d;
    --border-color: #fecdd3;
    --surface-muted: #fff1f3;
    --theme-header-start: #be123c;
    --theme-header-end: #7f1d1d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(159, 18, 57, 0.18);
}

html[data-theme="mint"] {
    --primary-color: #0f766e;
    --primary-hover: #115e59;
    --primary-soft: #14b8a6;
    --primary-light: #ccfbf1;
    --background-color: #f0fdfa;
    --card-background: #ffffff;
    --text-primary: #123b37;
    --text-secondary: #4d706b;
    --border-color: #99f6e4;
    --surface-muted: #dffbf5;
    --theme-header-start: #0d9488;
    --theme-header-end: #115e59;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(15, 118, 110, 0.18);
}

html[data-theme="indigo"] {
    --primary-color: #4338ca;
    --primary-hover: #3730a3;
    --primary-soft: #6366f1;
    --primary-light: #eef2ff;
    --background-color: #f8f8ff;
    --card-background: #ffffff;
    --text-primary: #27224a;
    --text-secondary: #5a557c;
    --border-color: #c7d2fe;
    --surface-muted: #eef2ff;
    --theme-header-start: #4f46e5;
    --theme-header-end: #312e81;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(67, 56, 202, 0.18);
}

html[data-theme="rose"] {
    --primary-color: #c026d3;
    --primary-hover: #a21caf;
    --primary-soft: #e879f9;
    --primary-light: #fdf4ff;
    --background-color: #fffbff;
    --card-background: #ffffff;
    --text-primary: #3a1d3f;
    --text-secondary: #77547d;
    --border-color: #f5d0fe;
    --surface-muted: #fdf4ff;
    --theme-header-start: #d946ef;
    --theme-header-end: #86198f;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(192, 38, 211, 0.18);
}

html[data-theme="midnight"] {
    --primary-color: #1e3a8a;
    --primary-hover: #172554;
    --primary-soft: #2563eb;
    --primary-light: #1e293b;
    --background-color: #0b1220;
    --card-background: #121c2e;
    --text-primary: #f8fafc;
    --text-secondary: #c7d2fe;
    --border-color: #2f3d56;
    --surface-muted: #17223a;
    --theme-header-start: #1e3a8a;
    --theme-header-end: #0f172a;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(96, 165, 250, 0.22);
}

html[data-theme="pearl"] {
    --primary-color: #4b5563;
    --primary-hover: #374151;
    --primary-soft: #6b7280;
    --primary-light: #f3f4f6;
    --background-color: #fbfbfb;
    --card-background: #ffffff;
    --text-primary: #202938;
    --text-secondary: #667085;
    --border-color: #d9dee8;
    --surface-muted: #f3f5f8;
    --theme-header-start: #667085;
    --theme-header-end: #374151;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(75, 85, 99, 0.18);
}

html[data-theme="forest"] {
    --primary-color: #166534;
    --primary-hover: #14532d;
    --primary-soft: #22c55e;
    --primary-light: #dcfce7;
    --background-color: #f3fbf5;
    --card-background: #ffffff;
    --text-primary: #173321;
    --text-secondary: #4b6f57;
    --border-color: #bbf7d0;
    --surface-muted: #e8f8ed;
    --theme-header-start: #15803d;
    --theme-header-end: #14532d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(22, 101, 52, 0.18);
}

html[data-theme="teal"] {
    --primary-color: #0e7490;
    --primary-hover: #155e75;
    --primary-soft: #06b6d4;
    --primary-light: #cffafe;
    --background-color: #f0fdff;
    --card-background: #ffffff;
    --text-primary: #153d48;
    --text-secondary: #4f7480;
    --border-color: #a5f3fc;
    --surface-muted: #dffbff;
    --theme-header-start: #0891b2;
    --theme-header-end: #155e75;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(14, 116, 144, 0.18);
}

html[data-theme="cobalt"] {
    --primary-color: #1d4ed8;
    --primary-hover: #1e40af;
    --primary-soft: #3b82f6;
    --primary-light: #dbeafe;
    --background-color: #f6f9ff;
    --card-background: #ffffff;
    --text-primary: #172b55;
    --text-secondary: #536a97;
    --border-color: #bfdbfe;
    --surface-muted: #eaf2ff;
    --theme-header-start: #2563eb;
    --theme-header-end: #1e3a8a;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(29, 78, 216, 0.18);
}

html[data-theme="violet"] {
    --primary-color: #6d28d9;
    --primary-hover: #5b21b6;
    --primary-soft: #8b5cf6;
    --primary-light: #ede9fe;
    --background-color: #faf7ff;
    --card-background: #ffffff;
    --text-primary: #30214d;
    --text-secondary: #665487;
    --border-color: #ddd6fe;
    --surface-muted: #f1ecff;
    --theme-header-start: #7c3aed;
    --theme-header-end: #4c1d95;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(109, 40, 217, 0.18);
}

html[data-theme="lavender"] {
    --primary-color: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-soft: #a78bfa;
    --primary-light: #f5f3ff;
    --background-color: #fdfcff;
    --card-background: #ffffff;
    --text-primary: #34294f;
    --text-secondary: #75688f;
    --border-color: #e9d5ff;
    --surface-muted: #f5f0ff;
    --theme-header-start: #a78bfa;
    --theme-header-end: #7c3aed;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(139, 92, 246, 0.18);
}

html[data-theme="coral"] {
    --primary-color: #e11d48;
    --primary-hover: #be123c;
    --primary-soft: #fb7185;
    --primary-light: #ffe4e6;
    --background-color: #fff7f7;
    --card-background: #ffffff;
    --text-primary: #3d1f27;
    --text-secondary: #7f5b64;
    --border-color: #fecdd3;
    --surface-muted: #fff0f2;
    --theme-header-start: #f43f5e;
    --theme-header-end: #be123c;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(225, 29, 72, 0.18);
}

html[data-theme="amber"] {
    --primary-color: #a16207;
    --primary-hover: #854d0e;
    --primary-soft: #d97706;
    --primary-light: #fef3c7;
    --background-color: #fffaf0;
    --card-background: #ffffff;
    --text-primary: #3d2b13;
    --text-secondary: #75613c;
    --border-color: #fde68a;
    --surface-muted: #fff5d6;
    --theme-header-start: #d97706;
    --theme-header-end: #92400e;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(161, 98, 7, 0.18);
}

html[data-theme="olive"] {
    --primary-color: #4d7c0f;
    --primary-hover: #3f6212;
    --primary-soft: #65a30d;
    --primary-light: #ecfccb;
    --background-color: #fbfff2;
    --card-background: #ffffff;
    --text-primary: #283716;
    --text-secondary: #607346;
    --border-color: #d9f99d;
    --surface-muted: #f1fad8;
    --theme-header-start: #65a30d;
    --theme-header-end: #3f6212;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(77, 124, 15, 0.18);
}

html[data-theme="copper"] {
    --primary-color: #9a3412;
    --primary-hover: #7c2d12;
    --primary-soft: #c2410c;
    --primary-light: #ffedd5;
    --background-color: #fff8f1;
    --card-background: #ffffff;
    --text-primary: #3b2416;
    --text-secondary: #76533d;
    --border-color: #fed7aa;
    --surface-muted: #fff0df;
    --theme-header-start: #c2410c;
    --theme-header-end: #7c2d12;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(154, 52, 18, 0.18);
}

html[data-theme="sky"] {
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --primary-soft: #38bdf8;
    --primary-light: #e0f2fe;
    --background-color: #f6fcff;
    --card-background: #ffffff;
    --text-primary: #173247;
    --text-secondary: #55728a;
    --border-color: #bae6fd;
    --surface-muted: #eaf8ff;
    --theme-header-start: #38bdf8;
    --theme-header-end: #0369a1;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(2, 132, 199, 0.18);
}

html[data-theme="lagoon"] {
    --primary-color: #047857;
    --primary-hover: #065f46;
    --primary-soft: #10b981;
    --primary-light: #d1fae5;
    --background-color: #f2fbf8;
    --card-background: #ffffff;
    --text-primary: #14372e;
    --text-secondary: #527568;
    --border-color: #a7f3d0;
    --surface-muted: #e4f8f0;
    --theme-header-start: #0f9f73;
    --theme-header-end: #065f46;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(4, 120, 87, 0.18);
}

html[data-theme="navy"] {
    --primary-color: #1e293b;
    --primary-hover: #0f172a;
    --primary-soft: #334155;
    --primary-light: #1f2a3d;
    --background-color: #0f172a;
    --card-background: #172033;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
    --surface-muted: #202b3f;
    --theme-header-start: #1e3a8a;
    --theme-header-end: #0f172a;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(148, 163, 184, 0.24);
}

html[data-theme="orchid"] {
    --primary-color: #a21caf;
    --primary-hover: #86198f;
    --primary-soft: #d946ef;
    --primary-light: #fae8ff;
    --background-color: #fff8ff;
    --card-background: #ffffff;
    --text-primary: #3d1f42;
    --text-secondary: #78527e;
    --border-color: #f0abfc;
    --surface-muted: #fdf0ff;
    --theme-header-start: #c026d3;
    --theme-header-end: #86198f;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(162, 28, 175, 0.18);
}

html[data-theme="berry"] {
    --primary-color: #be185d;
    --primary-hover: #9d174d;
    --primary-soft: #ec4899;
    --primary-light: #fce7f3;
    --background-color: #fff7fb;
    --card-background: #ffffff;
    --text-primary: #421f32;
    --text-secondary: #7d5870;
    --border-color: #fbcfe8;
    --surface-muted: #fdf0f7;
    --theme-header-start: #db2777;
    --theme-header-end: #9d174d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(190, 24, 93, 0.18);
}

html[data-theme="pistachio"] {
    --primary-color: #15803d;
    --primary-hover: #166534;
    --primary-soft: #84cc16;
    --primary-light: #ecfccb;
    --background-color: #fbfff4;
    --card-background: #ffffff;
    --text-primary: #243818;
    --text-secondary: #61754a;
    --border-color: #bef264;
    --surface-muted: #f0fbdc;
    --theme-header-start: #84cc16;
    --theme-header-end: #166534;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(21, 128, 61, 0.18);
}

html[data-theme="steel"] {
    --primary-color: #475569;
    --primary-hover: #334155;
    --primary-soft: #64748b;
    --primary-light: #e2e8f0;
    --background-color: #f8fafc;
    --card-background: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #64748b;
    --border-color: #cbd5e1;
    --surface-muted: #eef2f7;
    --theme-header-start: #64748b;
    --theme-header-end: #334155;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(71, 85, 105, 0.18);
}

html[data-theme="ivory"] {
    --primary-color: #85704a;
    --primary-hover: #6f5c3a;
    --primary-soft: #a68a58;
    --primary-light: #f7f0df;
    --background-color: #fffdf7;
    --card-background: #ffffff;
    --text-primary: #332d20;
    --text-secondary: #706752;
    --border-color: #eadfca;
    --surface-muted: #f8f2e5;
    --theme-header-start: #a68a58;
    --theme-header-end: #6f5c3a;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(133, 112, 74, 0.18);
}

html[data-theme="charcoal"] {
    --primary-color: #27272a;
    --primary-hover: #18181b;
    --primary-soft: #3f3f46;
    --primary-light: #27272a;
    --background-color: #0f0f12;
    --card-background: #18181b;
    --text-primary: #f4f4f5;
    --text-secondary: #d4d4d8;
    --border-color: #3f3f46;
    --surface-muted: #242428;
    --theme-header-start: #3f3f46;
    --theme-header-end: #18181b;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(161, 161, 170, 0.24);
}

html[data-theme="yellow"] {
    --primary-color: #a16207;
    --primary-hover: #854d0e;
    --primary-soft: #eab308;
    --primary-light: #fef9c3;
    --background-color: #fffdf2;
    --card-background: #ffffff;
    --text-primary: #422006;
    --text-secondary: #854d0e;
    --border-color: #fde68a;
    --surface-muted: #fffbeb;
    --theme-header-start: #facc15;
    --theme-header-end: #ca8a04;
    --theme-on-primary: #292100;
    --theme-focus-ring: rgba(161, 98, 7, 0.2);
}

html[data-theme="lime"] {
    --primary-color: #4d7c0f;
    --primary-hover: #3f6212;
    --primary-soft: #84cc16;
    --primary-light: #ecfccb;
    --background-color: #fbfef6;
    --card-background: #ffffff;
    --text-primary: #1a2e05;
    --text-secondary: #4d7c0f;
    --border-color: #d9f99d;
    --surface-muted: #f7fee7;
    --theme-header-start: #a3e635;
    --theme-header-end: #4d7c0f;
    --theme-on-primary: #1a2e05;
    --theme-focus-ring: rgba(77, 124, 15, 0.2);
}

html[data-theme="turquoise"] {
    --primary-color: #0f766e;
    --primary-hover: #115e59;
    --primary-soft: #2dd4bf;
    --primary-light: #ccfbf1;
    --background-color: #f2fefc;
    --card-background: #ffffff;
    --text-primary: #042f2e;
    --text-secondary: #115e59;
    --border-color: #99f6e4;
    --surface-muted: #ecfffe;
    --theme-header-start: #2dd4bf;
    --theme-header-end: #0f766e;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(15, 118, 110, 0.2);
}

html[data-theme="magenta"] {
    --primary-color: #a21caf;
    --primary-hover: #86198f;
    --primary-soft: #e879f9;
    --primary-light: #fae8ff;
    --background-color: #fdf6ff;
    --card-background: #ffffff;
    --text-primary: #3b0764;
    --text-secondary: #86198f;
    --border-color: #f5d0fe;
    --surface-muted: #fdf4ff;
    --theme-header-start: #e879f9;
    --theme-header-end: #a21caf;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(162, 28, 175, 0.2);
}

html[data-theme="crimson"] {
    --primary-color: #b91c1c;
    --primary-hover: #991b1b;
    --primary-soft: #ef4444;
    --primary-light: #fee2e2;
    --background-color: #fff8f8;
    --card-background: #ffffff;
    --text-primary: #450a0a;
    --text-secondary: #991b1b;
    --border-color: #fecaca;
    --surface-muted: #fef2f2;
    --theme-header-start: #dc2626;
    --theme-header-end: #991b1b;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(185, 28, 28, 0.2);
}

html[data-theme="chocolate"] {
    --primary-color: #78350f;
    --primary-hover: #5c2a0c;
    --primary-soft: #92400e;
    --primary-light: #fef3c7;
    --background-color: #fdf8f3;
    --card-background: #ffffff;
    --text-primary: #2b1607;
    --text-secondary: #78350f;
    --border-color: #e7d2b8;
    --surface-muted: #f7ede1;
    --theme-header-start: #92400e;
    --theme-header-end: #451a03;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(120, 53, 15, 0.2);
}

html[data-theme="slate"] {
    --primary-color: #475569;
    --primary-hover: #334155;
    --primary-soft: #64748b;
    --primary-light: #1e293b;
    --background-color: #0f172a;
    --card-background: #17233b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --border-color: #334155;
    --surface-muted: #1e293b;
    --theme-header-start: #475569;
    --theme-header-end: #0f172a;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(148, 163, 184, 0.24);
}

html[data-theme="burgundy"] {
    --primary-color: #7f1d1d;
    --primary-hover: #611414;
    --primary-soft: #9f2c2c;
    --primary-light: #3f1010;
    --background-color: #1a0a0a;
    --card-background: #241010;
    --text-primary: #fef2f2;
    --text-secondary: #fca5a5;
    --border-color: #4c1d1d;
    --surface-muted: #2c1313;
    --theme-header-start: #7f1d1d;
    --theme-header-end: #3f0d0d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(153, 27, 27, 0.28);
}

html[data-theme="aquamarine"] {
    --primary-color: #0e9f6e;
    --primary-hover: #0b7d56;
    --primary-soft: #34d399;
    --primary-light: #d1fae5;
    --background-color: #f3fdf9;
    --card-background: #ffffff;
    --text-primary: #043b28;
    --text-secondary: #0b7d56;
    --border-color: #a7f3d0;
    --surface-muted: #ecfdf5;
    --theme-header-start: #34d399;
    --theme-header-end: #0e9f6e;
    --theme-on-primary: #063528;
    --theme-focus-ring: rgba(14, 159, 110, 0.2);
}

html[data-theme="peach"] {
    --primary-color: #ea580c;
    --primary-hover: #c2410c;
    --primary-soft: #fb923c;
    --primary-light: #ffedd5;
    --background-color: #fffaf5;
    --card-background: #ffffff;
    --text-primary: #431407;
    --text-secondary: #9a3412;
    --border-color: #fed7aa;
    --surface-muted: #fff7ed;
    --theme-header-start: #fdba74;
    --theme-header-end: #ea580c;
    --theme-on-primary: #431407;
    --theme-focus-ring: rgba(234, 88, 12, 0.2);
}

html[data-theme="sand"] {
    --primary-color: #8a6d3b;
    --primary-hover: #6f5730;
    --primary-soft: #b59463;
    --primary-light: #f3e9d2;
    --background-color: #fdfaf3;
    --card-background: #ffffff;
    --text-primary: #3d2f14;
    --text-secondary: #7c6534;
    --border-color: #e6d5ae;
    --surface-muted: #f7f0de;
    --theme-header-start: #d4b483;
    --theme-header-end: #8a6d3b;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(138, 109, 59, 0.2);
}

html[data-theme="tangerine"] {
    --primary-color: #c2410c;
    --primary-hover: #9a3412;
    --primary-soft: #fb923c;
    --primary-light: #ffedd5;
    --background-color: #fff8f3;
    --card-background: #ffffff;
    --text-primary: #43140a;
    --text-secondary: #9a3412;
    --border-color: #fdcfa8;
    --surface-muted: #fff3e8;
    --theme-header-start: #fb923c;
    --theme-header-end: #c2410c;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(194, 65, 12, 0.2);
}

html[data-theme="sage"] {
    --primary-color: #4f7358;
    --primary-hover: #3e5a45;
    --primary-soft: #87a789;
    --primary-light: #e3ede4;
    --background-color: #f7faf7;
    --card-background: #ffffff;
    --text-primary: #1d2b20;
    --text-secondary: #4f7358;
    --border-color: #cadecb;
    --surface-muted: #eef4ee;
    --theme-header-start: #87a789;
    --theme-header-end: #4f7358;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(79, 115, 88, 0.2);
}

html[data-theme="flamingo"] {
    --primary-color: #be185d;
    --primary-hover: #9d174d;
    --primary-soft: #f472b6;
    --primary-light: #fce7f3;
    --background-color: #fdf5f9;
    --card-background: #ffffff;
    --text-primary: #500724;
    --text-secondary: #9d174d;
    --border-color: #fbcfe8;
    --surface-muted: #fdeef5;
    --theme-header-start: #f472b6;
    --theme-header-end: #be185d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(190, 24, 93, 0.2);
}

html[data-theme="denim"] {
    --primary-color: #2f4d7d;
    --primary-hover: #24406b;
    --primary-soft: #5b7db1;
    --primary-light: #dde7f3;
    --background-color: #f6f9fc;
    --card-background: #ffffff;
    --text-primary: #16233a;
    --text-secondary: #3c5a8a;
    --border-color: #c4d3e6;
    --surface-muted: #ebf1f8;
    --theme-header-start: #5b7db1;
    --theme-header-end: #2f4d7d;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(47, 77, 125, 0.2);
}

html[data-theme="mocha"] {
    --primary-color: #5d4037;
    --primary-hover: #4e342e;
    --primary-soft: #8d6e63;
    --primary-light: #efe5e1;
    --background-color: #faf6f4;
    --card-background: #ffffff;
    --text-primary: #2d1b16;
    --text-secondary: #6d4c41;
    --border-color: #dcc9c2;
    --surface-muted: #f3ebe7;
    --theme-header-start: #8d6e63;
    --theme-header-end: #4e342e;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(93, 64, 55, 0.2);
}

html[data-theme="arctic"] {
    --primary-color: #1e6f9f;
    --primary-hover: #185a82;
    --primary-soft: #67b7dc;
    --primary-light: #dbeefa;
    --background-color: #f4fafd;
    --card-background: #ffffff;
    --text-primary: #0c2c3d;
    --text-secondary: #256d94;
    --border-color: #bfe0f0;
    --surface-muted: #e9f5fb;
    --theme-header-start: #67b7dc;
    --theme-header-end: #1e6f9f;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(30, 111, 159, 0.2);
}

html[data-theme="onyx"] {
    --primary-color: #52525b;
    --primary-hover: #3f3f46;
    --primary-soft: #71717a;
    --primary-light: #26262b;
    --background-color: #101012;
    --card-background: #1b1b1f;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --border-color: #33333a;
    --surface-muted: #202024;
    --theme-header-start: #52525b;
    --theme-header-end: #18181b;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(113, 113, 122, 0.28);
}

html[data-theme="pine"] {
    --primary-color: #2d6a4f;
    --primary-hover: #24543f;
    --primary-soft: #40916c;
    --primary-light: #12291f;
    --background-color: #0b1712;
    --card-background: #12241b;
    --text-primary: #ecfdf5;
    --text-secondary: #86c7a8;
    --border-color: #1e4433;
    --surface-muted: #163024;
    --theme-header-start: #2d6a4f;
    --theme-header-end: #122e22;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(64, 145, 108, 0.28);
}

html[data-theme="espresso"] {
    --primary-color: #6f4e37;
    --primary-hover: #5a3d2b;
    --primary-soft: #8a6552;
    --primary-light: #2e211a;
    --background-color: #170f0a;
    --card-background: #221711;
    --text-primary: #f5ede7;
    --text-secondary: #c9a68f;
    --border-color: #3d2b1f;
    --surface-muted: #291c14;
    --theme-header-start: #6f4e37;
    --theme-header-end: #2e1a12;
    --theme-on-primary: #ffffff;
    --theme-focus-ring: rgba(138, 101, 82, 0.28);
}

[hidden] {
    display: none !important;
}

body {
    font-family: var(--app-font);
    background-color: var(--background-color);
    color: var(--text-primary);
    direction: rtl;
    text-align: right;
    font-size: 16px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Standardize font size for common elements */
p,
span,
div,
label,
a,
input,
textarea,
select,
button {
    font-family: var(--app-font);
    font-size: 16px;
}

input,
textarea,
select {
    background-color: var(--card-background);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--surface-muted, var(--background-color));
    color: var(--text-secondary);
    opacity: 1;
    -webkit-text-fill-color: var(--text-secondary);
}

select option {
    background-color: var(--card-background);
    color: var(--text-primary);
    direction: rtl;
    text-align: right;
}

/* Container Layout */
.container {
    display: flex;
    flex: 1 0 auto;
    min-height: 0;
}

.mobile-menu-toggle,
.mobile-menu-backdrop {
    display: none;
}

.mobile-direct-menu {
    display: none;
}

.profile-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
}

.profile-modal.hidden {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
}

#loginModal {
    display: none;
}

#loginModal.modal {
    background:
        radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.24), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(16, 185, 129, 0.18), transparent 28%),
        rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(12px);
}

#loginModal .modal-content {
    position: relative;
    overflow: hidden;
    width: min(560px, calc(100% - 1rem));
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 26px 80px rgba(15, 23, 42, 0.28);
    animation: loginModalIn 0.32s cubic-bezier(0.2, 0.85, 0.25, 1.2) both;
}

#loginModal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.4) 42%, rgba(236, 253, 245, 0.55));
    pointer-events: none;
}

#loginModal .modal-content > * {
    position: relative;
    z-index: 1;
}

.login-modal-close {
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    float: none;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: #64748b;
    font-size: 26px;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.login-modal-close:hover,
.login-modal-close:focus {
    color: #0f172a;
    background: #ffffff;
    transform: rotate(90deg) scale(1.04);
}

.login-modal-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
    padding-left: 2.7rem;
}

.login-modal-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1f5eff, #10b981);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(31, 94, 255, 0.22);
    font-size: 1.55rem;
}

#loginModal h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.3;
}

.login-modal-header p {
    margin: 0.2rem 0 0;
    color: #475569;
    font-size: 0.95rem;
}

#loginForm {
    display: grid;
    gap: 1rem;
}

#loginModal .form-group {
    margin: 0;
}

#loginModal label {
    display: block;
    margin-bottom: 0.45rem;
    color: #334155;
    font-weight: 700;
}

#loginProfileSelect {
    width: 100%;
    min-height: 50px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 20px rgba(15, 23, 42, 0.06);
    color: #0f172a;
    font-size: 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#loginProfileSelect:focus {
    border-color: #1f5eff;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.13), 0 10px 24px rgba(15, 23, 42, 0.08);
    outline: none;
}

.login-modal-actions {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) 1fr;
    gap: 0.65rem;
    align-items: center;
}

#loginModal #loginButton,
#loginModal #loginSettingsButton {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
}

#loginModal #loginSettingsButton {
    border-color: #bfdbfe;
    background: rgba(255, 255, 255, 0.78);
    color: #1e40af;
}

#loginModal #loginSettingsButton:hover {
    background: #eff6ff;
}

@keyframes loginModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

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

.modal-content {
    width: min(560px, 100%);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    padding: 2rem;
    text-align: right;
    direction: rtl;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

.login-modal-close:hover,
.login-modal-close:focus {
    color: #0f172a;
}

.profile-modal-card {
    width: min(560px, 100%);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    padding: 2rem;
    text-align: right;
    direction: rtl;
}

.profile-modal-card h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.6rem;
}

.profile-modal-card p {
    margin-bottom: 1.5rem;
    color: #333333;
    line-height: 1.6;
}

.profile-modal-card .modal-row {
    margin-bottom: 1.5rem;
}

.profile-modal-card select {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #f8fafc;
    font-size: 1rem;
}

.profile-modal-card .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.profile-modal-card .modal-actions .btn {
    min-width: 160px;
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: white;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.sidebar-header {
    padding: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.sidebar-logo {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto 0.75rem;
    background: #ffffff;
    border-radius: 14px;
}

.sidebar-header h1 {
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.sidebar-title-stack {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
}

.sidebar-nav {
    padding: 2rem 0;
}

.nav-menu {
    list-style: none;
}

.nav-item {
    margin: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
}

.nav-link:hover {
    background-color: var(--primary-soft);
    border-right-color: white;
    color: white;
}

.nav-link.active {
    background-color: var(--primary-soft);
    border-right-color: white;
    color: white;
    font-weight: 700;
}

.nav-link .icon {
    font-size: 1.25rem;
}

.submenu {
    list-style: none;
    background-color: rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-item.open .submenu {
    max-height: 500px;
}

.submenu-link {
    display: block;
    padding: 0.75rem 2rem 0.75rem 3.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    border-right: 3px solid transparent;
    font-family: var(--app-font);
}

.submenu-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-right-color: white;
    color: white;
}

.submenu-link.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    border-right-color: white;
    font-weight: 600;
}

/* Main Content */
.main-content {
    margin-right: var(--sidebar-width);
    flex: 1;
    padding: 0;
}

/* Top Header */
.top-header {
    background: var(--primary-color);
    color: white;
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.header-right,
.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.header-label {
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
}

.header-value {
    font-family: var(--app-font);
    font-weight: 700;
    font-size: 16px;
}

.header-weather {
    margin-right: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    direction: ltr;
    white-space: nowrap;
}

.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

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

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

/* Page Header */
.page-header {
    background: var(--primary-color);
    color: #ffffff;
    text-align: center;
    padding: 1.6rem 1rem;
    margin-bottom: 2rem;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.page-header h1 {
    font-family: var(--app-font);
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}

.page-header p {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 0.4rem;
}

.page-content {
    background-color: var(--card-background);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0 auto 2rem;
    max-width: var(--content-max-width);
}

/* تقليل المسافة العلوية فقط في صفحة سجل التقارير */
#history .page-content {
    margin-top: 0 !important;
}

#history .registry-list {
    margin-top: 0 !important;
}

/* Create report specific styles */
.create-header {
    background: var(--primary-color);
    color: white;
    text-align: center;
    font-family: var(--app-font);
    font-size: 16px;
    padding: 1.6rem 1rem;
    max-width: var(--content-max-width);
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.create-content {
    padding-top: 1.25rem;
}

.input-pill {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #f7fbff;
}

.input-pill::placeholder {
    color: var(--text-secondary);
}

.select-pill {
    padding: 0.6rem;
}

.small-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.full-select {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
}

.pill-group {
    margin-top: 1rem;
}

.pill-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.btn-toggle {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    min-width: 130px;
    flex: 1 1 auto;
    text-align: center;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 600;
}

.btn-toggle.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.meta-row {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.meta-item {
    flex: 1;
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.meta-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.meta-value {
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Style date/time pickers to match pills */
.meta-item input[type="date"],
.meta-item input[type="time"] {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    font-family: inherit;
}

input[type="time"],
.time-value,
.registry-detail-value[dir="ltr"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: center;
}

.large-textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    resize: vertical;
}

.wedding-assessment-scroll {
    width: 100%;
    overflow-x: auto;
}

.wedding-assessment-input-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    direction: rtl;
    background: #fff;
}

.wedding-assessment-input-table th,
.wedding-assessment-input-table td {
    border: 1px solid var(--border-color);
    padding: 0.55rem;
    text-align: center;
    vertical-align: middle;
}

.wedding-assessment-input-table th {
    background: #f3f4f6;
    color: #111827;
    font-weight: 800;
}

.wedding-assessment-input-table td:nth-child(2) {
    text-align: right;
    font-weight: 700;
}

.wedding-assessment-score {
    min-width: 88px;
    text-align: center;
}

.wedding-assessment-note {
    min-height: 40px;
    resize: vertical;
}

.wedding-assessment-total-row td {
    background: #f3f4f6;
    color: #111827;
    font-weight: 900;
}

.fire-assessment-scroll {
    width: 100%;
    overflow-x: auto;
}

.fire-assessment-input-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    direction: rtl;
    background: #fff;
}

.fire-assessment-input-table th,
.fire-assessment-input-table td {
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
}

.fire-assessment-input-table th {
    background: #eeeef7;
    color: #111827;
    font-weight: 900;
}

.fire-assessment-input-table .fire-assessment-item {
    text-align: right;
    font-weight: 800;
}

.fire-assessment-count,
.fire-assessment-status {
    min-width: 110px;
    text-align: center;
}

.fire-assessment-status {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    caret-color: var(--text-primary);
    touch-action: manipulation;
}

@media (max-width: 900px) {
    #create .wedding-hall-assessment-card .card-body,
    #create .fire-assessment-card .card-body {
        padding: 0.65rem;
    }

    #create .wedding-assessment-scroll,
    #create .fire-assessment-scroll {
        overflow: visible;
    }

    #create .wedding-assessment-input-table,
    #create .fire-assessment-input-table {
        display: block;
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
    }

    #create .wedding-assessment-input-table thead,
    #create .fire-assessment-input-table thead {
        display: none;
    }

    #create .wedding-assessment-input-table tbody,
    #create .wedding-assessment-input-table tr,
    #create .wedding-assessment-input-table td,
    #create .fire-assessment-input-table tbody,
    #create .fire-assessment-input-table tr,
    #create .fire-assessment-input-table td {
        display: block;
        width: 100%;
    }

    #create .wedding-assessment-input-table tr,
    #create .fire-assessment-input-table tr {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 6px 14px rgba(49, 93, 225, 0.08);
    }

    #create .wedding-assessment-input-table td,
    #create .fire-assessment-input-table td {
        border: 0;
        padding: 0.45rem 0;
        text-align: right;
    }

    #create .wedding-assessment-input-table td[data-label]::before,
    #create .fire-assessment-input-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        color: var(--primary-color);
        font-size: 13px;
        font-weight: 800;
    }

    #create .wedding-assessment-input-table td:first-child,
    #create .fire-assessment-input-table td:first-child {
        display: inline-flex;
        width: auto;
        min-width: 3rem;
        height: 2.1rem;
        margin-bottom: 0.35rem;
        padding: 0 0.75rem;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 900;
    }

    #create .wedding-assessment-input-table td:first-child::before,
    #create .fire-assessment-input-table td:first-child::before {
        display: none;
    }

    #create .wedding-assessment-input-table td:nth-child(2),
    #create .fire-assessment-input-table td:nth-child(2) {
        padding-top: 0;
        font-size: 15px;
        line-height: 1.5;
    }

    #create .wedding-assessment-score,
    #create .wedding-assessment-note,
    #create .fire-assessment-count,
    #create .fire-assessment-status {
        width: 100%;
        min-width: 0;
    }

    #create .wedding-assessment-note {
        min-height: 72px;
        resize: vertical;
    }

    #create .wedding-assessment-total-row {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
    }

    #create .wedding-assessment-total-row td {
        background: transparent;
    }

    #create .wedding-assessment-total-row td:first-child {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 0;
        padding: 0.45rem 0;
        border-radius: 0;
        background: transparent;
        color: #111827;
        text-align: right;
    }

    #create .wedding-assessment-total-row td:first-child::before {
        display: block;
    }
}

.checklist {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.check-item {
    background: #fff;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
    position: relative;
    font-family: var(--app-font);
    font-size: 16px;
}

.check-item .check-text {
    flex: 1;
}

.check-item .check-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.radio-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    display: inline-block;
    margin-left: 8px;
}

.check-item.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.check-item.selected .badge-num {
    background: white;
    color: var(--primary-color);
}

.check-item.selected .radio-indicator {
    background: white;
}

.badge-num {
    background: #f1f5f9;
    color: var(--primary-color);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
}

.image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.create-ai-banner {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #bfd5ff;
    border-radius: 8px;
    background: #f3f7ff;
    color: #1d3f8f;
    display: grid;
    gap: 0.25rem;
    text-align: center;
    font-weight: 700;
}

.create-ai-banner strong {
    font-size: 1.05rem;
}

.ai-analysis-hint {
    flex: 1 0 100%;
    margin: 0 0 0.35rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #bfd5ff;
    border-radius: 8px;
    background: #f3f7ff;
    color: #1d3f8f;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

#imagePreviewContainer img {
    max-width: 140px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-left: 0.5rem;
}

.image-preview-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
    cursor: pointer;
    z-index: 2;
}

.image-preview-remove:active {
    transform: scale(0.96);
}

.image-compression-status {
    display: block;
    width: 100%;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

.large-save {
    padding: 0.9rem 2.5rem;
    border-radius: 12px;
    font-size: 1.05rem;
}

/* secondary button */
.btn-secondary {
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .meta-row {
        flex-direction: column;
    }
}

/* Cards Container */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.card:nth-child(2) {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.card:nth-child(2):hover {
    box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
}

.card:nth-child(3) {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.card:nth-child(3):hover {
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.card h3 {
    font-family: var(--app-font);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.card-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

.monthly-target {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.target-progress {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
    font-size: 2rem;
}

.card-percent {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.reports-chart-panel {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}

.reports-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.reports-chart-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.chart-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chart-range-btn {
    border: 1px solid var(--border-color);
    background: #f8fafc;
    color: var(--text-primary);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
}

.chart-range-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.reports-chart {
    min-height: 220px;
    display: grid;
    direction: rtl;
    grid-template-columns: repeat(var(--chart-bars, 7), minmax(26px, 1fr));
    align-items: end;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.chart-bar-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    height: 205px;
}

.chart-bar-item-current .chart-bar-value,
.chart-bar-item-current .chart-bar-label {
    color: var(--primary-color);
}

.chart-bar-item-current .chart-bar {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.chart-bar-value {
    min-height: 18px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.chart-bar {
    width: 100%;
    max-width: 42px;
    height: max(8px, calc(var(--bar-percent, 0) * 1.4px));
    min-height: 8px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, #22c55e 0%, #0f766e 100%);
}

.chart-bar.is-empty {
    opacity: 0.25;
}

.chart-bar-label {
    max-width: 100%;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
}

.chart-bar-label-month {
    font-size: calc(0.75rem + 4px);
    font-weight: 700;
}

/* Form Styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    max-width: 500px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    direction: rtl;
    text-align: right;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--app-font);
}

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

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 16px;
}

/* Table Styling */
.reports-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.reports-table thead {
    background-color: var(--background-color);
    border-bottom: 2px solid var(--border-color);
}

.reports-table th {
    padding: 1rem;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

.reports-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.reports-table tbody tr:hover {
    background-color: var(--background-color);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-success {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Settings Section */
.settings-section {
    background-color: var(--card-background);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.settings-section h2 {
    font-family: var(--app-font);
    font-size: 16px;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.settings-section h3 {
    font-family: var(--app-font);
    font-size: 16px;
    margin: 1.5rem 0 1rem 0;
    color: var(--text-primary);
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.settings-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.settings-shortcut {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 58px;
    padding: 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--primary-hover);
    text-decoration: none;
    text-align: center;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
}

.settings-shortcut-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.settings-page-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.standalone-settings {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.25rem auto 2rem;
}

.settings-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: var(--theme-on-primary);
    box-shadow: 0 12px 28px var(--theme-focus-ring);
}

.settings-overview h2 {
    margin: 0.15rem 0 0.35rem;
    font-family: var(--app-font);
    font-size: 20px;
    color: var(--theme-on-primary);
}

.settings-overview p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.7;
}

.settings-kicker,
.settings-section-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.settings-kicker {
    background: rgba(255, 255, 255, 0.16);
    color: var(--theme-on-primary);
}

.settings-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.settings-nav-panel {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
    box-shadow: var(--shadow-sm);
}

.settings-nav-item,
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 58px;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.settings-nav-item:hover,
.settings-nav-link:hover {
    border-color: var(--primary-soft);
    background: var(--surface-muted);
    transform: translateY(-1px);
}

.settings-nav-item.active {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: var(--theme-on-primary);
    border-color: var(--primary-color);
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

.settings-nav-item.active strong,
.settings-nav-item.active small {
    color: var(--theme-on-primary);
}

.settings-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--primary-color);
    font-weight: 900;
}

.settings-nav-item.active .settings-nav-icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--theme-on-primary);
}

.settings-nav-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.35;
}

.settings-nav-item small {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.settings-nav-divider {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--border-color);
}

.settings-nav-link {
    min-height: 46px;
    font-weight: 800;
    justify-content: center;
    background: var(--surface-muted);
}

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

.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

.settings-section-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-section-head h2 {
    margin: 0.45rem 0 0.35rem;
}

.settings-section-head p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.settings-section-badge {
    background: var(--surface-muted);
    color: var(--primary-color);
}

/* Settings accordion: single-column list, one section open at a time */
.settings-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-background);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.settings-accordion-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    padding: 0.85rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: right;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.settings-accordion-header:hover {
    background: var(--surface-muted);
}

.settings-accordion-item.active .settings-accordion-header {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: var(--theme-on-primary);
}

.settings-accordion-item.active .settings-accordion-header .settings-nav-icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--theme-on-primary);
}

.settings-accordion-item.active .settings-accordion-title strong,
.settings-accordion-item.active .settings-accordion-title small {
    color: var(--theme-on-primary);
}

.settings-accordion-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.settings-accordion-title strong {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-primary);
}

.settings-accordion-title small {
    margin-top: 0.1rem;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.settings-accordion-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    margin-inline-start: 0.25rem;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.settings-accordion-item.active .settings-accordion-chevron {
    transform: rotate(225deg);
}

.settings-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.settings-accordion-item.active .settings-accordion-panel {
    grid-template-rows: 1fr;
}

.settings-accordion-panel-inner {
    overflow: hidden;
    min-height: 0;
}

.settings-accordion-panel .settings-section {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border-top: 1px solid var(--border-color);
}

#settings .settings-accordion-panel .settings-quick-primary {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: var(--theme-on-primary);
}

#settings .settings-accordion-panel .settings-quick-primary .settings-quick-icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--theme-on-primary);
}

.settings-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.scope-required-box {
    padding: 1rem;
    border: 1.5px solid var(--primary-soft);
    border-radius: 8px;
    background: var(--surface-muted);
}

.scope-required-box label {
    color: var(--primary-color);
    font-weight: 900;
}

.scope-required-box select {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem;
    border: 1.5px solid var(--primary-soft);
    border-radius: 6px;
    background: var(--card-background);
}

@media (max-width: 900px) {
    .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-nav-panel {
        position: static;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 1fr);
        overflow-x: auto;
        padding: 0.65rem;
        scrollbar-width: thin;
    }

    .settings-nav-divider,
    .settings-nav-link {
        display: none;
    }

    .settings-nav-item {
        min-height: 66px;
    }
}

@media (max-width: 640px) {
    .settings-page-content {
        gap: 0.8rem;
    }

    .standalone-settings {
        width: min(100% - 1rem, 1180px);
        margin-top: 0.75rem;
    }

    .settings-overview {
        padding: 1rem;
    }

    .settings-overview h2 {
        font-size: 17px;
    }

    .settings-overview p {
        font-size: 14px;
    }

    .settings-section {
        padding: 1rem;
    }

    .settings-nav-panel {
        margin-inline: -0.15rem;
        grid-auto-columns: minmax(165px, 78%);
    }

    .settings-nav-item {
        min-height: 62px;
        padding: 0.65rem;
    }

    .settings-nav-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .settings-action-row,
    .profile-control-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

/* Form Row for Multi-Column Layouts */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-row .form-group:only-child {
    grid-column: 1;
}

/* Employee Form */
.employee-form {
    margin-bottom: 1rem;
}

.profile-control-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
}

.profile-control-row select {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-startup-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.2rem 0 0.35rem;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.profile-startup-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.profile-startup-toggle input:disabled,
.profile-startup-toggle input:disabled + span {
    cursor: not-allowed;
    opacity: 0.6;
}

.profile-startup-note {
    display: block;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.shared-profile-panel {
    display: grid;
    gap: 0.75rem;
    margin: 0.25rem 0 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-secondary, #f8fafc);
}

.shared-profile-panel-head {
    display: grid;
    gap: 0.25rem;
}

.shared-profile-panel-head strong {
    color: var(--text-primary);
}

.shared-profile-panel-head span,
.profile-share-status {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.shared-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shared-profile-remove {
    background: #ef4444;
    color: #fff;
}

#profileShareCode {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    direction: ltr;
}

.profile-share-status[data-tone="success"] {
    color: #047857;
    font-weight: 700;
}

.profile-share-status[data-tone="error"] {
    color: #b91c1c;
    font-weight: 700;
}

/* Attachments Section */
.attachments-section {
    background-color: #f0f4f8;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.attachments-section .form-row {
    margin-bottom: 0;
}

.form-group small {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.form-group input[type="file"] {
    padding: 0.5rem;
    cursor: pointer;
}

.file-preview {
    display: block;
    object-fit: contain;
}

/* Responsive Design */
@media (max-width: 900px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
        background: #f8fafc;
    }

    .container > .sidebar {
        display: none;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .mobile-menu-backdrop {
        display: none;
    }

    .container {
        display: block;
    }

    .main-content {
        width: 100%;
        margin-right: 0;
        padding: 0.75rem 0.75rem 1rem;
    }

    .mobile-direct-menu {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
        overflow: hidden;
        padding: 5px 2px 0;
        padding-bottom: max(5px, env(safe-area-inset-bottom));
        background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
        border-top: 1px solid var(--theme-header-end);
        box-shadow: 0 -4px 16px var(--theme-focus-ring);
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5000;
        box-sizing: border-box;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .mobile-direct-menu .nav-link {
        flex: 1 1 0;
        min-width: 0;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px 1px 5px;
        gap: 2px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: rgba(255,255,255,0.75) !important;
        text-decoration: none;
        text-align: center;
        font-family: sans-serif;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.2;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .mobile-direct-menu .nav-link.active {
        background: rgba(255,255,255,0.15);
        color: #ffffff !important;
    }

    .mobile-direct-menu .icon {
        margin: 0;
        font-size: 1.4rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .mobile-direct-menu .label {
        display: block;
        width: 100%;
        text-align: center;
    }

    .top-header {
        margin: 0 -0.75rem 1rem;
        max-width: none;
        padding: calc(0.65rem + env(safe-area-inset-top)) 0.9rem 0.75rem;
        border-radius: 0 0 14px 14px;
        background: var(--primary-color);
        color: #ffffff;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        box-shadow: 0 6px 18px rgba(49, 93, 225, 0.18);
    }

    .header-right,
    .header-left {
        width: 100%;
        display: grid;
        align-items: center;
        gap: 0.35rem 0.55rem;
        font-size: 14px;
        min-width: 0;
    }

    .header-right {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header-left {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header-label {
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .header-value {
        font-size: 14px;
        line-height: 1.25;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-left .header-value {
        text-align: center;
        font-size: 15px;
    }

    .header-weather {
        justify-self: end;
        margin-right: 0;
        padding: 0.25rem 0.55rem;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.2);
    }

    .header-left .btn {
        margin-left: 0 !important;
        min-width: 62px;
        min-height: 36px;
        padding: 0.35rem 0.65rem;
        border-radius: 8px;
        background: #ffffff;
        color: #111827;
        box-shadow: none;
    }

    .page-header,
    .create-header {
        margin-bottom: 1rem;
        padding: 1.15rem 0.75rem;
        max-width: none;
        background: var(--primary-color);
        color: #ffffff;
    }

    .page-header h1 {
        font-size: 16px;
    }

    .create-header {
        font-size: 16px;
    }

    .page-header p {
        font-size: 0.95rem;
    }

    .page-content {
        max-width: none;
        padding: 1rem;
        margin: 0 0 1rem;
        border-radius: 10px;
    }

    .cards-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 0;
    }

    .card {
        min-height: 88px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.75rem;
        padding: 1rem;
        text-align: right;
        border-radius: 10px;
    }

    .card:hover {
        transform: none;
    }

    .card-icon {
        margin: 0;
        font-size: 1.8rem;
    }

    .card h3 {
        margin: 0;
        font-size: 1rem;
    }

    .card-number {
        margin: 0;
        font-size: 2rem;
        line-height: 1;
        text-align: left;
    }

    .card-percent {
        grid-column: 3;
        margin: 0.25rem 0 0;
        font-size: 0.9rem;
        text-align: left;
    }

    .reports-chart-panel {
        display: none;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        max-width: 100%;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .reports-table {
        font-size: 0.9rem;
    }

    .reports-table th,
    .reports-table td {
        padding: 0.75rem;
    }
}

/* Mobile app font scale: keep custom Arabic font without oversized Android UI. */
@media (max-width: 900px) {
    body {
        font-size: 14px !important;
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }

    p,
    span,
    div,
    label,
    a,
    input,
    textarea,
    select,
    button {
        font-size: 14px;
    }

    .main-content {
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }

    .top-header {
        gap: 0.35rem !important;
        padding: calc(0.55rem + env(safe-area-inset-top)) 0.75rem 0.7rem !important;
    }

    .top-header .header-label,
    .top-header .header-value,
    .top-header #currentDate,
    .top-header #empGreeting {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .top-header .header-weather {
        font-size: 14px !important;
    }

    .header-left .btn,
    .top-header .btn {
        min-height: 42px !important;
        padding: 0.45rem 0.75rem !important;
        font-size: 14px !important;
    }

    .page-header h1,
    .create-header h1 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
    }

    .page-content,
    .form-card,
    .card {
        padding: 0.75rem !important;
    }

    .form-card h2,
    .section-title,
    .monthly-report-title h1,
    .autoreport-hero h1 {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    input,
    textarea,
    select {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .mobile-direct-menu {
        min-height: calc(68px + env(safe-area-inset-bottom)) !important;
        padding: 0.25rem 0.35rem max(0.3rem, env(safe-area-inset-bottom)) !important;
        gap: 0.12rem !important;
    }

    .mobile-direct-menu .nav-link,
    .mobile-direct-menu a {
        min-height: 56px !important;
        padding: 0.25rem 0.1rem !important;
        gap: 0.12rem !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .mobile-direct-menu .icon {
        width: 23px !important;
        height: 23px !important;
        font-size: 0.95rem !important;
        border-radius: 7px !important;
    }

    .mobile-direct-menu .label {
        font-size: 10px !important;
        line-height: 1.05 !important;
        max-height: 22px;
        overflow: hidden;
    }
}

/* Final theme pass for web, Android, and iOS rendered layouts. */
html[data-theme] body {
    background-color: var(--background-color);
    color: var(--text-primary);
}

html[data-theme] .top-header,
html[data-theme] .page-header,
html[data-theme] .create-header,
html[data-theme] .card-header {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .sidebar,
html[data-theme] .mobile-direct-menu {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .page-content,
html[data-theme] .settings-section,
html[data-theme] .card-form,
html[data-theme] .reports-chart-panel,
html[data-theme] .backup-panel,
html[data-theme] .monthly-report-panel,
html[data-theme] .modal-content,
html[data-theme] .profile-modal-card,
html[data-theme] .card {
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme] .settings-section h2,
html[data-theme] .settings-section h3,
html[data-theme] .section-title,
html[data-theme] .card-number,
html[data-theme] .target-progress {
    color: var(--text-primary) !important;
}

html[data-theme] .card h3,
html[data-theme] .meta-label,
html[data-theme] .small-label,
html[data-theme] .pill-title {
    color: var(--text-secondary) !important;
}

html[data-theme] .page-header p,
html[data-theme] .create-header p {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme] .btn-primary,
html[data-theme] #loginButton {
    background: var(--primary-color) !important;
    color: var(--theme-on-primary) !important;
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

html[data-theme] .btn-primary:hover,
html[data-theme] #loginButton:hover {
    background: var(--primary-hover) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .btn-toggle,
html[data-theme] .recommendation-btn,
html[data-theme] .settings-shortcut,
html[data-theme] .chart-range-btn.active {
    background: var(--card-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
    background-color: var(--card-background);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus {
    border-color: var(--primary-soft) !important;
    box-shadow: 0 0 0 4px var(--theme-focus-ring) !important;
}

/* Theme overrides must stay last so fixed legacy colors follow the active theme. */
html[data-theme] body {
    background-color: var(--background-color);
    color: var(--text-primary);
}

html[data-theme] .top-header,
html[data-theme] .page-header,
html[data-theme] .create-header,
html[data-theme] .card-header {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .sidebar,
html[data-theme] .mobile-direct-menu {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
}

html[data-theme] .page-content,
html[data-theme] .settings-section,
html[data-theme] .card-form,
html[data-theme] .reports-chart-panel,
html[data-theme] .backup-panel,
html[data-theme] .monthly-report-panel,
html[data-theme] .modal-content,
html[data-theme] .profile-modal-card,
html[data-theme] .card {
    background: var(--card-background) !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
}

html[data-theme] .settings-section h2,
html[data-theme] .settings-section h3,
html[data-theme] .section-title,
html[data-theme] .card-number,
html[data-theme] .target-progress {
    color: var(--text-primary) !important;
}

html[data-theme] .card h3,
html[data-theme] .meta-label,
html[data-theme] .small-label,
html[data-theme] .pill-title {
    color: var(--text-secondary) !important;
}

html[data-theme] .page-header p,
html[data-theme] .create-header p {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme] .btn-primary,
html[data-theme] #loginButton {
    background: var(--primary-color) !important;
    color: var(--theme-on-primary) !important;
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

html[data-theme] .btn-primary:hover,
html[data-theme] #loginButton:hover {
    background: var(--primary-hover) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .btn-toggle,
html[data-theme] .recommendation-btn,
html[data-theme] .settings-shortcut,
html[data-theme] .chart-range-btn.active {
    background: var(--card-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select {
    background-color: var(--card-background);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus {
    border-color: var(--primary-soft) !important;
    box-shadow: 0 0 0 4px var(--theme-focus-ring) !important;
}

@media (max-width: 420px) {
    .top-header .header-label,
    .top-header .header-value,
    .top-header #currentDate,
    .top-header #empGreeting {
        font-size: 14px !important;
    }

    .page-header h1,
    .create-header h1 {
        font-size: 1.55rem !important;
    }
}

@media (max-width: 600px) {
    .main-content {
        margin-right: 0;
        margin-top: 0;
        padding-top: 0.75rem;
    }

    .page-header h1 {
        font-size: 16px;
    }

    .page-content {
        padding: 1rem;
    }
}

/* Footer */
.site-footer {
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 1.5rem max(2rem, env(safe-area-inset-right)) 1.5rem max(2rem, env(safe-area-inset-left));
    margin-top: 3rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}

.footer-content > * {
    margin-inline: 0.25rem;
}

.visitor-count {
    font-weight: 600;
}

.copyright {
    font-size: 0.95rem;
    opacity: 0.9;
}

.copyright-version-line {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.copyright-ar {
    grid-column: 1;
    direction: rtl;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.copyright-en {
    grid-column: 2;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .copyright-version-line {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .copyright-ar,
    .copyright-en {
        grid-column: 1;
    }
}

#visitorsCount,
#onlineVisitorsCount {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Registry List */
.registry-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.registry-item {
    background-color: #ffffff;
    border-left: 5px solid var(--primary-color);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.registry-item.expired {
    background-color: #ffcccc;
    border-left-color: #ff6666;
    border-left-width: 5px;
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.2), inset 0 0 5px rgba(255, 100, 100, 0.1);
}

.registry-item.status-executing {
    border-left-color: #3b82f6;
}

.registry-item.status-done {
    border-left-color: #10b981;
}


.registry-item.status-urgent {
    border-left-color: #ff9800;
    background-color: #fff7e6;
}

.registry-item.status-delayed {
    border-left-color: #ff9800;
    background-color: #ffe0b2;
}

.registry-info {
    flex: 1;
    display: flex;
    gap: 2rem;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.registry-main {
    flex: 1;
}

.registry-location {
    font-family: var(--app-font) !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 0.85rem;
    line-height: 1.4;
}

.registry-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 0.65rem;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.registry-summary-fields {
    display: grid;
    grid-template-columns: 0.7fr 2fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}

.registry-detail-field {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.65rem 0.85rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.registry-detail-label {
    color: var(--primary-hover);
    font-weight: 800;
    line-height: 1.2;
}

.registry-detail-value {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.2;
    unicode-bidi: isolate;
}

.registry-location-field .registry-detail-value {
    font-family: var(--app-font);
    font-size: 14px;
    line-height: 1.35;
}

.registry-status {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge-executing {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge-done {
    background: #d1fae5;
    color: #065f46;
}


.status-badge-urgent {
    background: #ffe0b2;
    color: #b45309;
}

.status-badge-delayed {
    background: #ffecb3;
    color: #b45309;
}

.registry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
}

#reports-list .registry-item {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}

#reports-list .registry-info {
    justify-content: center;
}

#reports-list .registry-main {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    min-width: 0;
    overflow: hidden;
}

#reports-list .registry-details {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

#reports-list .registry-actions {
    justify-content: center;
}

.report-log-filter-panel {
    width: min(100%, 800px);
    margin: 0 auto 1.25rem;
    padding: 0 1rem;
}

.report-log-filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
    background: #dbeafe;
    border-radius: 999px;
    padding: 0.18rem;
}

.report-log-scope-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.report-log-scope-tab {
    min-height: 44px;
    border: 1px solid var(--primary-soft, #bfdbfe);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-primary);
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.report-log-scope-tab.active {
    background: var(--primary-color, #2563eb);
    border-color: var(--primary-color, #2563eb);
    color: var(--theme-on-primary, #ffffff);
}

.report-log-month-field select,
.report-log-year-field select {
    width: min(120px, 100%);
    border: 0;
    background: transparent;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.report-log-filter-summary {
    margin-top: 0.75rem;
    text-align: center;
    color: var(--primary-hover);
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
}

.report-log-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dbeafe;
}

.report-log-select-all,
.log-record-select,
.report-log-selected-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #1f2937;
}

.report-log-select-all input,
.log-record-select input {
    width: 18px;
    height: 18px;
    accent-color: #2a52c9;
}

.report-log-selected-count {
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
}

.log-record-select {
    align-self: flex-start;
    background: #f8fafc;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    white-space: nowrap;
}

#reports-list .registry-item.is-selected {
    border-color: #2a52c9;
    box-shadow: 0 0 0 3px rgba(42, 82, 201, 0.16);
}

.registry-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-edit {
    background: #3b82f6;
    color: white;
}

.btn-delete {
    background: #ef4444;
    color: white;
}

.btn-print-report {
    background: #2563eb;
    color: white;
}

.btn-pdf {
    background: #10b981;
    color: white;
}

.report-log-bulk-bar .btn-pdf {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #0f9f73 0%, #10b981 48%, #047857 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.22);
}

.report-log-bulk-bar .btn-pdf::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -65%;
    width: 42%;
    transform: skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: reportLogButtonShine 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.report-log-bulk-bar .btn-pdf:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 185, 129, 0.28);
}

.report-log-bulk-bar .btn-pdf:disabled {
    background: #9ca3af;
    box-shadow: none;
}

.report-log-bulk-bar .btn-pdf:disabled::after {
    display: none;
}

@keyframes reportLogButtonShine {
    0% {
        left: -65%;
    }
    42%,
    100% {
        left: 125%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-log-bulk-bar .btn-pdf::after {
        animation: none;
        display: none;
    }
}

#backup .page-content {
    background: #eaf4ff;
    border: 1px solid #bfdbfe;
    box-shadow: none;
}

#backup .settings-section {
    display: grid;
    gap: 1.5rem;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

#backup .backup-panel {
    display: block;
    grid-template-columns: none;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 1.8rem 2rem;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff !important;
    color: var(--text-primary) !important;
    box-shadow: none;
    text-align: right;
}

#backup .backup-panel::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 1.5rem;
    background: #d6e2f0;
}

#backup .backup-panel h3 {
    margin: 0 0 1.5rem;
    color: var(--primary-color);
    font-family: var(--app-font);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

#backup .backup-panel p,
#backup .empty {
    margin: 0.5rem 0 1rem;
    color: #64748b;
    font-family: var(--app-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    text-align: right;
}

#backup .btn {
    width: 100%;
    min-height: 58px;
    border-radius: 10px;
    font-family: var(--app-font);
    font-size: 18px;
    font-weight: 700;
}

#backup .backup-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

#backup .backup-actions .btn {
    border: 1px solid #bfdbfe;
    background: #f8fbff;
    color: #1e3a8a;
    box-shadow: none;
}

#backup .backup-actions .btn:hover {
    background: #eef6ff;
    border-color: #93c5fd;
}

#backup .backup-actions #createBackupBtn {
    border-color: #93c5fd;
    background: #eaf2ff;
    color: #1d4ed8;
}

#backup .backup-actions #createEngineeringBackupBtn {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

#backup .backup-actions #createAcBackupBtn {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

#backup .backup-actions #createCopierBackupBtn {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #5b21b6;
}

#backup .backup-actions #createMaintenanceBackupBtn {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
}

#backup .backup-actions #createBackupBtn,
#backup .backup-actions #createMaintenanceBackupBtn {
    grid-column: span 3;
}

#backup #restoreFileInput {
    width: 100%;
    margin-bottom: 1.5rem !important;
    padding: 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 16px;
}

#backup .restore-file-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

#backup .restore-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem !important;
    cursor: pointer;
}

#backup .restore-file-name {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #f8fbff;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    word-break: break-word;
}

#backup .backup-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.75rem;
}

#backup .backup-item {
    display: grid;
    /* عمود رابع بعد إضافة زر «استرجاع» — وإلا انكسر زر الحذف لصف مستقل */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #f8fbff;
}

#backup .backup-name {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    line-height: 1.5;
}

#backup .backup-item .btn {
    min-height: 46px;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    box-shadow: none;
}

#backup .backup-item .btn-download {
    background: #eaf2ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

#backup .backup-item .btn-download:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

#backup .backup-item .btn-delete {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #be123c;
}

#backup .backup-item .btn-delete:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

/* Monthly Report */
.monthly-report-title {
    background: var(--primary-color);
    color: #ffffff;
    text-align: center;
    padding: 1.6rem 1rem;
    margin: 0 auto 2rem;
    max-width: var(--content-max-width);
}

.monthly-report-title h1 {
    font-family: var(--app-font);
    font-size: 16px;
    margin: 0;
}

.monthly-report-panel {
    max-width: var(--content-max-width);
    margin: 0 auto 2rem;
    background: var(--primary-light);
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding: 1rem 0 1.5rem;
}

/* Department scope selector */
.monthly-scope-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.monthly-scope-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 64px;
    border: 2px solid #bfdbfe;
    border-radius: 14px;
    background: #ffffff;
    color: var(--primary-hover);
    font-family: var(--app-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    padding: 0.5rem 0.25rem;
    text-align: center;
}

.monthly-scope-btn .scope-icon {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
}

.monthly-scope-btn .scope-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.monthly-scope-btn:hover {
    background: #dbeafe;
    border-color: var(--primary-color);
}

.monthly-scope-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(49, 93, 225, 0.28);
}

.monthly-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
    background: #dbeafe;
    border-radius: 999px;
    padding: 0.15rem;
}

.monthly-tab {
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--primary-hover);
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.monthly-tab.active,
.monthly-month-field {
    background: #ffffff;
    box-shadow: 0 1px 7px rgba(49, 93, 225, 0.22);
}

.monthly-month-field select,
.monthly-search-field input {
    width: min(190px, 100%);
    border: 0;
    background: transparent;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.monthly-search-field input::placeholder {
    color: var(--primary-hover);
    opacity: 1;
}

.monthly-date-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 1.4rem 1rem;
    color: var(--primary-hover);
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
}

.monthly-calendar-icon {
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.monthly-date-row select {
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    min-width: 92px;
    outline: none;
}

.monthly-selected-date {
    color: var(--primary-hover);
    min-width: 130px;
    text-align: center;
}

.monthly-summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.monthly-summary-box {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.monthly-summary-label {
    display: block;
    color: var(--primary-hover);
    margin-bottom: 0.3rem;
}

.monthly-records-list {
    padding: 0 1rem;
}

.monthly-selection-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.monthly-selection-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.monthly-export-btn {
    background: var(--primary-color);
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.monthly-export-btn:disabled {
    background: #c7d2fe;
    color: #3b4a7a;
    cursor: not-allowed;
}

.monthly-check-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.monthly-check-all input,
.monthly-record-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.monthly-selected-count {
    color: var(--primary-hover);
    font-weight: 700;
}

.monthly-copies-panel {
    margin: 0.85rem 0 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fbfdff;
    padding: 0.85rem;
}

.monthly-copies-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    color: var(--text-primary);
}

.monthly-copies-head strong,
.monthly-copies-head span {
    font-weight: 800;
}

.monthly-copies-list {
    display: grid;
    gap: 0.6rem;
}

.monthly-copy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #dbeafe;
    border-radius: var(--radius-sm);
    background: #ffffff;
    padding: 0.7rem;
}

.monthly-copy-item div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.monthly-copy-item span {
    color: var(--text-secondary);
    font-size: 14px;
}

.monthly-copy-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.monthly-copy-print,
.monthly-copy-delete {
    min-height: 40px;
    border-radius: var(--radius-sm);
    background: #ffffff;
    font-weight: 800;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

.monthly-copy-print {
    border: 1px solid #2f5edb;
    color: #1f4fc4;
}

.monthly-copy-delete {
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.monthly-record {
    margin-bottom: 1rem;
    align-items: center;
}

.monthly-record.is-selected {
    outline: 2px solid rgba(49, 93, 225, 0.28);
    background-color: #eff6ff;
}

.monthly-record-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 34px;
}

.monthly-record-subject {
    margin-top: 0.65rem;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.6;
}

.monthly-date-value {
    direction: rtl;
    unicode-bidi: embed;
    display: inline-block;
}

.monthly-empty {
    text-align: center;
    color: var(--primary-hover);
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .registry-list {
        gap: 0.9rem;
        margin-top: 1rem;
        width: min(100%, 560px);
        max-width: none;
        padding: 0 clamp(0.5rem, 3vw, 1rem) 5.2rem;
    }

    .report-log-filter-panel {
        width: min(100%, 560px);
        padding: 0 clamp(0.5rem, 3vw, 1rem);
        margin-bottom: 1rem;
    }

    .report-log-scope-tabs {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .report-log-filter-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 16px;
        gap: 0.45rem;
        padding: 0.35rem;
    }

    .report-log-filter-tabs .monthly-tab {
        min-height: 44px;
        border-radius: 12px;
        font-size: 14px;
    }

    .report-log-month-field select,
    .report-log-year-field select {
        font-size: 14px;
    }

    .report-log-filter-summary {
        font-size: 14px;
    }

    .registry-item {
        width: 100%;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        border-left-color: var(--primary-color);
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.9rem;
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
    }

    .registry-item.status-executing {
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        border-left-color: var(--primary-color);
    }

    .registry-item.status-done {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border-left-color: var(--success-color);
    }

    .registry-item.status-urgent,
    .registry-item.status-delayed {
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        border-left-color: #f59e0b;
    }

    .registry-item.expired {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        border-left-color: var(--danger-color);
    }

    .registry-info {
        min-width: 100%;
    }

    #reports-list .registry-main {
        max-width: none;
        width: 100%;
    }

    .registry-location {
        font-size: 14px;
        margin-bottom: 0.55rem;
    }

    .registry-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        font-size: 13px;
    }

    #reports-list .registry-summary-fields {
        grid-template-columns: 0.65fr 1.55fr 1fr;
        gap: 0.45rem;
        margin-bottom: 0.55rem;
        font-size: 13px;
    }

    #reports-list .registry-location-field .registry-detail-value {
        font-size: 13px;
    }

    .registry-detail-field {
        min-height: 50px;
        padding: 0.5rem 0.55rem;
    }

    .registry-actions {
        width: 100%;
        gap: 0.45rem;
    }

    .registry-actions .btn {
        flex: 1 1 calc(50% - 0.5rem);
        padding: 0.55rem 0.5rem;
        font-size: 13px;
    }

    .monthly-report-title {
        margin-bottom: 1rem;
        padding: 1.15rem 0.75rem;
        background: var(--primary-color);
        color: #ffffff;
    }

    .monthly-report-title h1 {
        font-size: 16px;
    }

    .monthly-scope-tabs {
        gap: 0.4rem;
        padding: 0 0.75rem 0.75rem;
    }

    .monthly-scope-btn {
        min-height: 58px;
        border-radius: 12px;
        font-size: 13px;
    }

    .monthly-scope-btn .scope-icon {
        font-size: 1.4rem;
    }

    .monthly-scope-btn .scope-label {
        font-size: 12px;
    }

    .monthly-filter-tabs,
    .monthly-summary-row {
        grid-template-columns: 1fr;
        border-radius: 16px;
        margin: 0 0.75rem;
    }

    .monthly-tab {
        border-radius: 12px;
    }

    .monthly-date-row {
        padding: 1rem 0.75rem;
    }

    .monthly-selection-bar {
        align-items: stretch;
        flex-direction: column;
        padding: 0 0.75rem 1rem;
    }

    .monthly-selection-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .monthly-copy-item {
        align-items: stretch;
        flex-direction: column;
    }

    .monthly-copy-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .monthly-copy-print,
    .monthly-copy-delete {
        width: 100%;
    }

    .monthly-export-btn {
        width: 100%;
    }

    .monthly-check-all {
        justify-content: center;
    }

    .monthly-records-list {
        padding: 0 0.75rem;
    }

    .monthly-record-check {
        align-self: center;
    }

    #settings .page-content,
    #add-site .page-content,
    #governorates .page-content,
    #backup .page-content {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    #backup .settings-section {
        display: grid;
        gap: 0.9rem;
    }

    #backup .restore-card {
        order: -1;
    }

    #backup .backup-panel {
        width: 100%;
        min-height: 0;
        display: block;
        padding: 1rem;
        margin: 0 !important;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
        text-align: right;
    }

    #backup .backup-panel h3 {
        margin: 0 0 0.75rem;
        color: var(--primary-hover);
        font-size: 16px;
        line-height: 1.35;
    }

    #backup .backup-panel p,
    #backup .empty {
        color: var(--text-secondary);
        line-height: 1.5;
        text-align: right;
    }

    #backup .btn,
    #backup input[type="file"] {
        width: 100%;
        max-width: 100%;
        margin: 0 0 0.75rem !important;
    }

    #backup .backup-actions {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0.75rem;
    }

    #backup .backup-actions #createBackupBtn,
    #backup .backup-actions #createMaintenanceBackupBtn {
        grid-column: auto;
    }

    #backup input[type="file"] {
        padding: 0.75rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: #ffffff;
    }

    #backup .restore-file-input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    #backup .backup-list {
        list-style: none;
        padding: 0;
        margin: 0.75rem 0 0;
        display: grid;
        gap: 0.6rem;
    }

    #backup .backup-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: #ffffff;
    }

    #backup .backup-name {
        overflow-wrap: anywhere;
        color: var(--text-primary);
        line-height: 1.4;
    }

    .settings-shortcuts {
        width: min(100%, 560px);
        max-width: none;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        margin: 0 auto 0.9rem;
        padding: 0 clamp(0.5rem, 3vw, 1rem);
    }

    .settings-shortcut {
        justify-content: flex-start;
        min-height: 54px;
        border-color: #bfdbfe;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
        font-size: 14px;
    }

    .settings-section,
    #add-site .settings-section,
    #governorates .settings-section,
    #backup .settings-section {
        width: min(100%, 560px);
        max-width: none;
        margin: 0 auto 0.9rem;
        padding: 0.9rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
    }

    .settings-section h2 {
        margin-bottom: 0.9rem;
        color: var(--primary-hover);
    }

    .settings-section .form-row,
    .employee-form .form-row,
    .attachments-section .form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .settings-section input,
    .settings-section select,
    .settings-section textarea,
    #add-site input,
    #add-site textarea,
    #governorates input,
    #governorates select {
        border-color: #bfdbfe;
        background: #ffffff;
        border-radius: 8px;
    }

    .attachments-section {
        border: 1px solid #bfdbfe;
        background: #ffffff;
        padding: 0.9rem;
        border-radius: 8px;
    }

    #create .page-content {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .quick-create-form,
    .report-form {
        width: min(100%, 640px);
        max-width: none;
        margin: 0 auto 5.2rem;
        padding: 0 clamp(0.2rem, 1.5vw, 0.5rem);
        background: transparent;
        box-shadow: none;
    }

    #backup .restore-card {
        order: -1;
    }

    .quick-create-form .card-form,
    .report-form .card-form {
        width: 100%;
        border-color: #bfdbfe;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
        border-radius: 8px;
        margin-bottom: 0.9rem;
    }

    .quick-create-form .card-header,
    .report-form .card-header {
        background: var(--primary-color);
        color: #ffffff;
        border-bottom: 0;
        padding: 0.75rem 0.9rem;
        font-size: 14px;
    }

    .quick-create-form .card-body,
    .report-form .card-body {
        padding: 0.9rem;
    }

    .quick-create-form .form-row,
    .report-form .form-row {
        margin-bottom: 0.75rem;
        gap: 0.45rem;
    }

    .quick-create-form .form-row > .form-row,
    .report-form .form-row > .form-row {
        margin-bottom: 0;
    }

    .input-pill,
    .quick-create-form input[type="text"],
    .quick-create-form input[type="date"],
    .quick-create-form input[type="time"],
    .report-form input[type="text"],
    .report-form input[type="date"],
    .report-form input[type="time"],
    .report-form select,
    .large-textarea {
        border-color: #bfdbfe;
        background: #ffffff;
        border-radius: 8px;
        padding: 0.7rem 0.85rem;
    }

    .meta-row {
        flex-direction: column;
        gap: 0.7rem;
        margin-top: 0;
    }

    .meta-item,
    .check-item {
        border-color: #bfdbfe;
        background: #ffffff;
        border-radius: 8px;
    }

    .toggle-buttons {
        gap: 0.45rem;
    }

    .btn-toggle {
        min-width: 0;
        padding: 0.65rem 0.55rem;
        border-radius: 8px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    #create .page-content {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .quick-create-form,
    .report-form {
        width: min(100%, 640px);
        max-width: none;
        margin: 0 auto 5.2rem;
        padding: 0 clamp(0.2rem, 1.5vw, 0.5rem);
        background: transparent;
        box-shadow: none;
    }

    .quick-create-form .card-form,
    .report-form .card-form {
        width: 100%;
        border-color: #bfdbfe;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
        border-radius: 8px;
        margin-bottom: 0.9rem;
    }

    #backup .page-content {
        background: #eaf4ff;
        border: 1px solid #bfdbfe;
        box-shadow: none;
        padding: 0.9rem;
    }

    #backup .settings-section {
        width: min(100%, 560px);
        max-width: none;
        margin: 0 auto 5.2rem;
        padding: 0;
        display: grid;
        gap: 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #backup .backup-panel {
        width: 100%;
        min-height: 0;
        display: block !important;
        grid-template-columns: none !important;
        padding: 1.2rem;
        margin: 0 !important;
        border: 1px solid #bfdbfe;
        border-radius: 10px;
        background: #ffffff !important;
        color: var(--text-primary) !important;
        box-shadow: none;
        text-align: right;
    }

    #backup .backup-panel::before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: 1rem;
        background: #d6e2f0;
    }

    #backup .backup-panel h3 {
        margin: 0 0 1rem;
        color: var(--primary-color);
        font-size: 16px;
        line-height: 1.35;
    }

    #backup .backup-panel p,
    #backup .empty {
        color: var(--text-secondary);
        line-height: 1.5;
        text-align: right;
        margin: 0.75rem 0 1rem;
    }

    #backup .btn,
    #backup input[type="file"] {
        width: 100%;
        max-width: 100%;
        margin: 0 0 0.75rem !important;
    }

    #backup input[type="file"] {
        padding: 0.75rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: #ffffff;
    }

    #backup .restore-file-input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    #backup .backup-list {
        list-style: none;
        padding: 0;
        margin: 0.75rem 0 0;
        display: grid;
        gap: 0.6rem;
    }

    #backup .backup-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: #ffffff;
    }

    #backup .backup-name {
        overflow-wrap: anywhere;
        color: var(--text-primary);
        line-height: 1.4;
    }
}

/* Points Container */
.points-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
    margin: 1.5rem 0;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.points-header {
    font-family: var(--app-font);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: right;
}

.points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.points-list li {
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-right: 4px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    text-align: right;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.points-list li:hover {
    background: rgba(255, 255, 255, 0.2);
    border-right-color: white;
    transform: translateX(-5px);
}

.points-list li::before {
    content: "✓ ";
    color: #10b981;
    font-weight: bold;
    margin-left: 0.75rem;
}

/* Quick Create Form */
.report-department-chooser {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.report-department-card {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: var(--app-font);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.report-department-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.35) 45%, transparent 70%);
    transform: translateX(120%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.report-department-card[data-status-badge]::after {
    content: attr(data-status-badge);
    position: absolute;
    top: 14px;
    left: 14px;
    max-width: calc(100% - 28px);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.24);
    white-space: nowrap;
    pointer-events: none;
}

.report-department-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.report-department-card:hover::before {
    transform: translateX(-120%);
}

.report-department-card[data-report-scope="ac"],
.report-department-card[data-report-scope="copiers"] {
    border-color: rgba(22, 163, 74, 0.35);
    background:
        radial-gradient(circle at 18% 18%, rgba(187, 247, 208, 0.5), transparent 34%),
        linear-gradient(135deg, #f0fdf4 0%, #ffffff 58%, #dcfce7 100%);
    color: #14532d;
}

.report-department-card[data-report-scope="engineering"] {
    border-color: rgba(37, 99, 235, 0.28);
    background:
        radial-gradient(circle at 18% 18%, rgba(191, 219, 254, 0.5), transparent 34%),
        linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #dbeafe 100%);
    color: #1e3a8a;
}

.report-department-card[data-report-scope="ac"] {
    border-color: rgba(22, 163, 74, 0.35);
    background:
        radial-gradient(circle at 18% 18%, rgba(187, 247, 208, 0.5), transparent 34%),
        linear-gradient(135deg, #f0fdf4 0%, #ffffff 58%, #dcfce7 100%);
    color: #14532d;
}

.report-department-card[data-report-scope="copiers"] {
    border-color: rgba(124, 58, 237, 0.3);
    background:
        radial-gradient(circle at 18% 18%, rgba(221, 214, 254, 0.5), transparent 34%),
        linear-gradient(135deg, #f5f3ff 0%, #ffffff 58%, #ede9fe 100%);
    color: #4c1d95;
}

.report-department-card[data-report-scope="engineering"]:hover {
    border-color: #2563eb;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.report-department-card[data-report-scope="ac"]:hover,
.report-department-card[data-report-scope="copiers"]:hover {
    border-color: #16a34a;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.22);
}

.report-department-card[data-report-scope="copiers"]:hover {
    border-color: #7c3aed;
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.18);
}

.report-department-card[data-report-scope="engineering"] .department-icon {
    filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.22));
}

.report-department-card[data-report-scope="ac"] .department-icon,
.report-department-card[data-report-scope="copiers"] .department-icon {
    filter: drop-shadow(0 4px 8px rgba(22, 163, 74, 0.28));
}

.report-department-card[data-report-scope="copiers"] .department-icon {
    filter: drop-shadow(0 4px 8px rgba(124, 58, 237, 0.22));
}

.department-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.department-title {
    font-size: 1.25rem;
    font-weight: 700;
}

.selected-report-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

#selectedReportScopeLabel {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

.ac-recommendation-box {
    min-height: 110px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f9fafb;
}

.copier-other-recommendation {
    margin-top: 0.85rem;
    width: 100%;
    resize: vertical;
}

.copier-inspection-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-create-form {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-form {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#reportForm> .form-row:not(#editAreaRow) {
    display: none;
}

#reportForm.is-editing> #editAreaRow {
    display: block !important;
}

.quick-create-form .form-row {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-form .form-row {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-create-form .small-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.report-form .small-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.quick-create-form input[type="text"],
.quick-create-form input[type="date"],
.quick-create-form input[type="time"] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background: #f9fafb;
}

.report-form input[type="text"],
.report-form input[type="date"],
.report-form input[type="time"],
.report-form select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px;
    background: #f9fafb;
}

.quick-create-form input[readonly] {
    background: #f3f4f6;
    cursor: not-allowed;
}

/* Locations List */
.locations-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 40px;
    max-width: 100%;
}

.location-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 132px;
    padding: 0.9rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(49, 93, 225, 0.1);
}

.location-item.is-editing {
    min-height: 0;
}

.location-item-name {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--app-font);
    font-size: 16px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.location-item-name small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.location-item:last-child {
    border-bottom: 1px solid #bfdbfe;
}

.location-item button.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 42px;
    width: 100%;
    font-size: 14px;
    font-family: var(--app-font);
    font-weight: 900;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.location-delete-btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
}

.location-delete-btn strong {
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

.location-item button.btn-danger:hover {
    background: #c0392b;
}

.empty {
    color: #888;
    text-align: center;
    padding: 0.5rem 0;
}


.location-item-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
}

.locations-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.location-import-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.danger-action {
    background: #ef4444;
    color: #fff;
}

.danger-action:hover {
    background: #dc2626;
}

#importLocationsFile {
    display: none;
}

.location-map-link {
    min-height: 38px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-family: var(--app-font);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-map-link.is-disabled {
    background: #e5e7eb;
    color: #64748b;
}

.location-item-actions button {
    min-height: 38px;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    font-family: var(--app-font);
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.location-edit-btn {
    background: #3b82f6;
    color: white;
}

.location-edit-btn:hover {
    background: #2563eb;
}

.location-delete-btn {
    background: #ef4444;
    color: white;
}

.location-delete-btn:hover {
    background: #dc2626;
}

.location-edit-form {
    display: grid;
    gap: 0.65rem;
}

.location-save-btn {
    background: #10b981;
    color: #ffffff;
}

.location-save-btn:hover {
    background: #059669;
}

.location-cancel-btn {
    background: #64748b;
    color: #ffffff;
}

.location-cancel-btn:hover {
    background: #475569;
}

/* Auto report page */
.autoreport-page {
    max-width: var(--content-max-width);
    margin: 0 auto 2rem;
}

.autoreport-hero {
    max-width: 800px;
    margin: 0 auto 0.75rem;
    padding: 1.4rem 1rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 10px 24px rgba(49, 93, 225, 0.15);
}

.autoreport-hero-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.autoreport-hero h1 {
    color: #ffffff;
    font-family: var(--app-font);
    font-size: 22px;
}

.autoreport-actions {
    max-width: 800px;
    margin: 0 auto 0.65rem;
}

.autoreport-add-link,
.auto-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: var(--success-color);
    color: #ffffff;
    font-family: var(--app-font);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.autoreport-add-link {
    padding: 0.75rem 1rem;
}

.autoreport-tabs {
    max-width: 800px;
    margin: 0 auto 0.7rem;
    padding: 0.25rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #eef2f7;
}

.autoreport-tab {
    border: 0;
    border-radius: 8px;
    padding: 0.75rem 0.4rem;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--app-font);
    cursor: pointer;
}

.autoreport-tab.active {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.autoreport-panel {
    display: none;
    max-width: 800px;
    margin: 0 auto;
}

.autoreport-panel.active {
    display: block;
}

.autoreport-location-list {
    display: grid;
    gap: 0.8rem;
}

.autoreport-location-item,
.auto-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.autoreport-location-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.autoreport-location-item strong {
    display: block;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.autoreport-location-item span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.autoreport-location-item button {
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    background: var(--danger-color);
    color: #ffffff;
    cursor: pointer;
}

.autoreport-empty,
.autoreport-message {
    color: var(--text-secondary);
    text-align: center;
    padding: 0.8rem;
}

.autoreport-form {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
}

.auto-section-title {
    width: min(100%, 720px);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: var(--primary-color);
    color: #ffffff;
    text-align: center;
    font-family: var(--app-font);
    font-weight: 700;
}

.auto-card {
    width: min(100%, 720px);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
    justify-items: center;
}

.auto-date-card strong,
.auto-month-label {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--primary-color);
}

.auto-small-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auto-two-col {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auto-card label {
    width: 100%;
    display: grid;
    gap: 0.35rem;
    color: var(--text-primary);
    font-weight: 700;
}

.auto-card select,
.auto-card input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: #ffffff;
    color: var(--text-primary);
}

.auto-segment,
.auto-chip-grid,
.auto-inline-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.auto-segment button,
.auto-chip,
.auto-soft-btn {
    border: 0;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    background: #e5e7eb;
    color: var(--text-primary);
    font-family: var(--app-font);
    cursor: pointer;
}

.auto-segment button.active {
    background: var(--primary-color);
    color: #ffffff;
}

.auto-chip.selected {
    background: var(--success-color);
    color: #ffffff;
}

.auto-chip.weekend:not(.selected) {
    background: #fef3c7;
}

.auto-calendar-head,
.auto-calendar-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    gap: 0.4rem;
    text-align: center;
}

.auto-calendar-head span {
    border-radius: 7px;
    padding: 0.4rem 0.2rem;
    background: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 700;
}

.auto-calendar-grid button {
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.auto-calendar-grid button.selected {
    border-color: var(--success-color);
    background: var(--success-color);
    color: #ffffff;
}

.auto-recommendations {
    width: 100%;
    display: grid;
    gap: 0.45rem;
}

.auto-recommendations button {
    display: grid;
    grid-template-columns: 32px 28px minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 0.7rem;
    background: #ffffff;
    text-align: right;
    cursor: pointer;
}

.auto-recommendations button.selected {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.auto-manual-pairs {
    width: 100%;
    display: grid;
    gap: 0.55rem;
    overflow: hidden;
}

.auto-manual-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.65rem;
    align-items: start;
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
}

.auto-manual-title {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
}

.auto-manual-date {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-self: stretch;
    min-width: 0;
    padding-bottom: 0.15rem;
    font-weight: 800;
    color: var(--primary-color);
}

.auto-manual-day {
    color: var(--text-primary);
    font-size: 1rem;
}

.auto-manual-calendar {
    color: var(--primary-color);
    font-size: 1rem;
    white-space: nowrap;
}

.auto-manual-time {
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    background: #eaf2ff;
    color: #1f4fc4;
    font-size: 0.9rem;
    white-space: nowrap;
}

.auto-manual-pairs label {
    min-width: 0;
    gap: 0.25rem;
    padding: 0;
    background: transparent;
    font-size: 0.85rem;
}

.auto-manual-pairs select {
    min-width: 0;
    direction: rtl;
    text-align: right;
}

.autoreport-update-panel {
    padding: 1rem;
}

.auto-update-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.auto-update-toolbar label {
    flex: 1 1 260px;
    display: grid;
    gap: 0.35rem;
    font-weight: 800;
    color: var(--text-primary);
}

.auto-update-toolbar select {
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
    direction: rtl;
    text-align: right;
}

.auto-update-list {
    display: grid;
    gap: 0.85rem;
}

.auto-update-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fbfdff;
    padding: 0.95rem;
    box-shadow: var(--shadow-sm);
}

.auto-update-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    color: #1f2937;
}

.auto-update-card-head strong {
    font-size: 18px;
    color: #1e40af;
}

.auto-update-card-head span {
    font-weight: 800;
    color: #2563eb;
}

.auto-update-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.auto-update-grid label {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    font-weight: 800;
}

.auto-update-grid select,
.auto-update-grid input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-primary);
    direction: rtl;
    text-align: right;
}

.auto-update-wide {
    grid-column: 1 / -1;
}

.auto-create-btn {
    width: min(100%, 400px);
    padding: 0.9rem 1rem;
    background: var(--primary-color);
}

.auto-error {
    color: var(--danger-color);
    text-align: center;
}

.auto-sweet-alert {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.35);
}

.auto-sweet-alert[hidden] {
    display: none;
}

.auto-sweet-card {
    width: min(360px, 100%);
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    border-radius: 16px;
    background: #ffffff;
    padding: 1.4rem;
    text-align: center;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2);
}

.auto-sweet-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--success-color);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
}

.auto-sweet-card button {
    border: 0;
    border-radius: 9px;
    padding: 0.65rem 1.2rem;
    background: var(--primary-color);
    color: #ffffff;
    cursor: pointer;
}

@media (max-width: 900px) {
    .autoreport-page {
        margin-bottom: 5rem;
    }

    .auto-two-col,
    .auto-manual-row {
        grid-template-columns: 1fr;
    }

    .auto-manual-date {
        justify-self: start;
    }

    .auto-calendar-head,
    .auto-calendar-grid {
        gap: 0.25rem;
    }

    .auto-calendar-head span {
        font-size: 0.72rem;
        padding: 0.35rem 0.05rem;
    }
}

@media (max-width: 900px) {
    #create .page-content {
        background: transparent;
        box-shadow: none;
        padding: 0 0.35rem;
        max-width: none;
    }

    #create .quick-create-form,
    #create .report-form {
        width: 100%;
        max-width: none;
        margin: 0 auto 5.2rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    #create .quick-create-form .card-form,
    #create .report-form .card-form {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .report-department-chooser {
        grid-template-columns: 1fr;
    }

    .selected-report-scope {
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

/* Report log hardening: keep desktop layout stable after hosting cache/order changes. */
@media (min-width: 769px) {
    #reports-list .report-log-filter-panel {
        width: min(100%, 800px);
        margin: 0 auto 1.25rem;
        padding: 0 1rem;
    }

    #reports-list .report-log-filter-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
        align-items: center;
        background: #dbeafe;
        border-radius: 999px;
        padding: 0.18rem;
    }

    #reports-list .report-log-scope-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    #reports-list .report-log-filter-tabs .monthly-tab {
        min-height: 46px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #reports-list .registry-list {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    #reports-list .registry-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        text-align: center;
    }

    #reports-list .registry-main {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
    }

    #reports-list .registry-summary-fields {
        display: grid;
        grid-template-columns: 0.7fr 2fr 1fr;
        gap: 0.65rem;
        margin-bottom: 0.75rem;
    }

    #reports-list .registry-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    #reports-list .registry-actions {
        justify-content: center;
    }
}

#user-profile .scope-save-reminder {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    text-align: right;
}

#user-profile .scope-save-reminder[hidden] {
    display: none;
}

#user-profile #employeeSaveProfileBtn.needs-save {
    background: #b91c1c;
    box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.16);
}

/* Settings profile mobile layout hardening. */
@media (max-width: 900px) {
    #settings .page-content {
        width: 100%;
        overflow-x: hidden;
    }

    #settings .settings-shortcuts {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        width: min(100%, 560px);
        margin: 0 auto 0.9rem;
        padding: 0 clamp(0.5rem, 3vw, 1rem);
    }

    #settings .settings-shortcut {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.55rem;
        width: 100%;
        min-height: 54px;
        padding: 0.85rem 1rem;
        border: 1px solid #bfdbfe;
        border-radius: 8px;
        background: linear-gradient(135deg, #eef6ff 0%, #dbeafe 100%);
        color: var(--primary-hover);
        text-decoration: none !important;
        box-shadow: 0 8px 20px rgba(49, 93, 225, 0.12);
    }

    #settings .settings-section {
        width: min(100%, 560px);
        margin: 0 auto 0.9rem;
        overflow: hidden;
    }

    #user-profile .profile-controls {
        display: grid;
        gap: 0.55rem;
    }

    #user-profile .profile-controls > label {
        margin: 0;
        color: var(--text-primary);
        text-align: right;
    }

    #user-profile .profile-control-row {
        display: grid;
        grid-template-columns: 1fr 86px 86px;
        gap: 0.45rem;
        align-items: stretch;
        width: 100%;
        margin: 0 0 1rem;
    }

    #user-profile .profile-control-row select,
    #user-profile .profile-control-row .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        border-radius: 8px;
        font-size: 14px;
    }

    #user-profile .profile-control-row select {
        padding: 0 0.65rem !important;
        border: 1px solid #bfdbfe !important;
        background: #ffffff;
    }

    #user-profile .employee-form {
        display: grid;
        gap: 0.75rem;
    }

    #user-profile .employee-form .form-group {
        margin: 0;
    }

    #user-profile .employee-form label {
        display: block;
        margin-bottom: 0.35rem;
        text-align: right;
        color: var(--text-primary);
    }

    #user-profile .employee-form input,
    #user-profile .employee-form select {
        width: 100%;
        max-width: 100%;
        min-height: 50px;
    }

    #user-profile .scope-save-reminder {
        margin-top: 0.75rem;
        padding: 0.75rem 0.85rem;
        border: 1px solid #f59e0b;
        border-radius: 8px;
        background: #fffbeb;
        color: #92400e;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.7;
        text-align: right;
    }

    #user-profile .scope-save-reminder[hidden] {
        display: none;
    }

    #user-profile #employeeSaveProfileBtn.needs-save {
        background: #b91c1c;
        box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.16);
    }
}

@media (max-width: 420px) {
    #user-profile .profile-control-row {
        grid-template-columns: 1fr 74px 74px;
    }

    #user-profile .profile-control-row .btn {
        padding-inline: 0.35rem;
        font-size: 13px;
    }
}

/* Professional redesign layer */
:root {
    --primary-color: #1f5eff;
    --primary-hover: #1748c7;
    --primary-soft: #e8efff;
    --primary-light: #f3f6ff;
    --secondary-color: #64748b;
    --success-color: #16a34a;
    --pending-color: #d97706;
    --danger-color: #dc2626;
    --background-color: #f4f7fb;
    --card-background: #ffffff;
    --text-primary: #172033;
    --text-secondary: #667085;
    --border-color: #d9e2ef;
    --sidebar-width: 292px;
    --content-max-width: 1120px;
    --surface-muted: #f8fafd;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

html {
    background: var(--background-color);
}

body {
    background:
        radial-gradient(circle at top left, rgba(31, 94, 255, 0.08), transparent 34rem),
        linear-gradient(180deg, #f8fbff 0%, var(--background-color) 42%, #eef3f9 100%);
    color: var(--text-primary);
    letter-spacing: 0;
}

body,
input,
textarea,
select,
button {
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.sidebar {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: -18px 0 42px var(--theme-focus-ring);
}

.sidebar-header {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.65rem;
    min-height: 112px;
    padding: 1.4rem 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.sidebar-header img,
.sidebar-logo {
    width: 48px !important;
    height: 48px !important;
    padding: 0.35rem;
    background: #ffffff;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.sidebar-header h1 {
    font-size: 18px;
    color: #ffffff;
}

.sidebar-nav {
    padding: 1.15rem 0.85rem;
}

.nav-menu {
    display: grid;
    gap: 0.3rem;
}

.nav-link {
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    border: 1px solid transparent;
    border-right: 0;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transform: translateX(-2px);
}

.nav-link.active {
    box-shadow: inset -3px 0 0 #cfe0ff;
}

.nav-link .icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 1rem;
}

.submenu {
    margin: 0.25rem 0.5rem 0.35rem;
    background: rgba(0, 0, 0, 0.16);
    border-radius: var(--radius-sm);
}

.submenu-link {
    padding: 0.7rem 1rem;
    border-right: 0;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
}

.submenu-link:hover,
.submenu-link.active {
    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.main-content {
    min-height: auto;
    padding: 1.35rem clamp(1rem, 2vw, 2rem) 0;
}

.top-header,
.page-header,
.create-header,
.page-content,
.reports-chart-panel,
.card-form,
.settings-section,
.modal-content,
.profile-modal-card,
.backup-panel,
.monthly-report-panel {
    border: 1px solid rgba(217, 226, 239, 0.9);
    box-shadow: var(--shadow-sm);
}

.top-header {
    position: sticky;
    top: 0.75rem;
    z-index: 50;
    min-height: 68px;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%);
    color: #ffffff;
    backdrop-filter: blur(16px);
}

.header-right,
.header-left {
    gap: 0.55rem;
}

.header-label {
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
}

.header-value {
    color: #ffffff;
}

.header-weather {
    background: #e9f7f2;
    color: #087f5b;
    border: 1px solid #bfe8d8;
}

.page-header,
.create-header {
    margin-bottom: 1.1rem;
    padding: 1.45rem 1.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%);
    color: #ffffff;
    text-align: right;
    box-shadow: var(--shadow-md);
}

.page-header h1,
.create-header {
    font-size: 22px;
}

.page-header p {
    color: rgba(255, 255, 255, 0.78);
}

.page-content {
    padding: 1.35rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-md);
}

#homeScopeBar {
    background: #eef6ff !important;
    border: 1px solid #cfe0ff !important;
    border-radius: var(--radius-md) !important;
    color: #2450a8 !important;
}

.cards-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 0;
}

.card {
    position: relative;
    min-height: 162px;
    padding: 1.15rem;
    overflow: hidden;
    border: 1px solid #dbe5f2;
    border-radius: var(--radius-lg);
    background: #ffffff !important;
    color: var(--text-primary);
    text-align: right;
    box-shadow: var(--shadow-sm) !important;
}

.card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #1f5eff;
}

.card:nth-child(2)::before {
    background: #16a34a;
}

.card:nth-child(3)::before {
    background: #7c3aed;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}

.card-icon {
    width: 44px;
    height: 44px;
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    font-size: 1.55rem;
}

.card-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}

.card:nth-child(1) .card-icon {
    color: #1f5eff;
}

.card:nth-child(2) .card-icon {
    color: #16a34a;
}

.card:nth-child(3) .card-icon {
    color: #7c3aed;
}

.card h3 {
    color: var(--text-secondary);
    font-size: 15px;
}

.card-number,
.target-progress {
    color: var(--text-primary);
    font-size: 2.25rem;
}

.card-percent {
    color: #087f5b;
}

.reports-chart-panel {
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.chart-range-tabs {
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-muted);
}

.chart-range-btn {
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
}

.chart-range-btn.active {
    background: #ffffff;
    color: var(--primary-hover);
    box-shadow: var(--shadow-sm);
}

.chart-bar {
    background: linear-gradient(180deg, #20c997 0%, #087f5b 100%);
}

.card-form,
.settings-section,
.backup-panel,
.restore-card,
.clear-data-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 0.95rem 1.15rem;
    background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.settings-section h2,
.settings-section h3 {
    color: #2f5edb;
}

.top-header .btn {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.top-header .btn:hover {
    background: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.card-body {
    padding: 1.15rem;
}

.input-pill,
.large-textarea,
.form-group input,
.form-group textarea,
.form-group select,
.meta-item input[type="date"],
.meta-item input[type="time"],
.profile-modal-card select {
    min-height: 46px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--card-background);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.input-pill:focus,
.large-textarea:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.meta-item input[type="date"]:focus,
.meta-item input[type="time"]:focus {
    outline: none;
    border-color: #7aa2ff;
    box-shadow: 0 0 0 4px rgba(31, 94, 255, 0.13);
}

.meta-item,
.check-item,
.recommendation-btn,
.settings-shortcut,
.report-department-card,
.monthly-summary-box,
.monthly-record {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.meta-label,
.small-label,
.pill-title {
    color: var(--text-secondary);
}

.btn,
#loginButton {
    min-height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.btn:hover,
#loginButton:hover {
    transform: translateY(-1px);
}

.btn-primary,
#loginButton {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(31, 94, 255, 0.2);
}

.btn-primary:hover,
#loginButton:hover {
    background: var(--primary-hover);
    box-shadow: 0 14px 28px rgba(31, 94, 255, 0.25);
}

.btn-secondary,
.btn-toggle,
.recommendation-btn {
    background: #ffffff;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-toggle:hover,
.recommendation-btn:hover {
    border-color: #b7c6dc;
    box-shadow: var(--shadow-sm);
}

.btn-toggle.active,
.check-item.selected,
.recommendation-btn.selected,
.recommendation-btn:focus {
    background: #eef4ff;
    border-color: #7aa2ff;
    color: #1748c7;
}

.check-item.selected .badge-num,
.check-item.selected .radio-indicator {
    background: #ffffff;
    color: #1748c7;
}

.create-ai-banner,
.ai-analysis-hint {
    border-color: #cfe0ff;
    border-radius: var(--radius-md);
    background: #eef6ff;
    color: #244f9e;
}

.report-department-chooser {
    gap: 0.9rem;
}

.report-department-card {
    min-height: 132px;
    color: var(--text-primary);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.report-department-card:hover {
    transform: translateY(-2px);
    border-color: #7aa2ff;
    box-shadow: var(--shadow-md);
}

.settings-shortcuts {
    gap: 0.9rem;
}

.settings-shortcut {
    background: #ffffff;
    color: var(--text-primary);
}

.settings-shortcut:hover {
    border-color: #7aa2ff;
    color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.site-footer {
    background: #2f5edb;
    box-shadow: none;
    margin-top: 1rem;
}

@media (min-width: 901px) {
    .site-footer {
        margin-right: var(--sidebar-width);
    }
}

@media (min-width: 901px) {
    #home .page-content {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    #home .cards-container {
        gap: 0.75rem;
    }

    #home .card {
        min-height: 124px;
        padding: 0.95rem;
    }

    #home .card-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 0.65rem;
        font-size: 1.35rem;
    }

    #home .card-number,
    #home .target-progress {
        font-size: 1.9rem;
    }

    #home .reports-chart-panel {
        margin-top: 0.75rem;
        padding: 0.9rem;
    }

    #home .reports-chart {
        min-height: 150px;
    }

    #home .chart-bar-item {
        height: 138px;
    }
}

.modal,
.profile-modal {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
}

.modal-content,
.profile-modal-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 1100px) {
    .cards-container {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 900px) {
    body {
        background: var(--background-color);
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .main-content {
        padding: 0.85rem 0.85rem 1rem;
    }

    .top-header {
        position: static;
        margin: 0 0 0.85rem;
        padding: calc(0.75rem + env(safe-area-inset-top)) 0.85rem 0.85rem;
        border-radius: var(--radius-lg);
        background: #ffffff;
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
    }

    .header-left .btn {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.22);
    }

    .page-header,
    .create-header {
        margin: 0 0 0.85rem;
        border-radius: var(--radius-lg);
        text-align: right;
    }

    .page-content {
        padding: 0.85rem;
        border-radius: var(--radius-lg);
    }

    .mobile-direct-menu {
        min-height: calc(66px + env(safe-area-inset-bottom));
        padding: 0.35rem 0.45rem max(0.35rem, env(safe-area-inset-bottom)) !important;
        gap: 0.2rem !important;
        background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -16px 38px var(--theme-focus-ring) !important;
        backdrop-filter: blur(14px);
    }

    .mobile-direct-menu .nav-link,
    .mobile-direct-menu a {
        min-height: 54px;
        padding: 0.45rem 0.2rem !important;
        border-radius: var(--radius-md) !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-family: var(--app-font) !important;
        font-size: 11px !important;
    }

    .mobile-direct-menu .nav-link.active,
    .mobile-direct-menu a.active {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        box-shadow: inset 0 3px 0 #cfe0ff;
    }

    .mobile-direct-menu .icon {
        width: 26px;
        height: 26px;
        margin: 0;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        font-size: 1rem !important;
    }

    .cards-container {
        grid-template-columns: 1fr;
    }

    .card {
        min-height: 98px;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 1rem;
    }

    .card-icon {
        margin: 0;
    }

    .card-number,
    .target-progress {
        font-size: 1.8rem;
    }

    .form-row,
    .meta-row,
    .reports-chart-header {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .image-actions,
    .backup-actions,
    .locations-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btn,
    .btn-secondary,
    .btn-primary,
    #loginButton {
        width: 100%;
        justify-content: center;
    }

    .top-header .btn {
        width: auto;
    }
}

/* Subtle motion and footer mobile-app note */
@keyframes softRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes calmGlow {
    0%,
    100% {
        box-shadow: 0 10px 22px rgba(31, 94, 255, 0.16);
    }

    50% {
        box-shadow: 0 16px 34px rgba(31, 94, 255, 0.24);
    }
}

@keyframes headerSweep {
    from {
        transform: translateX(120%);
    }

    to {
        transform: translateX(-120%);
    }
}

.page.active .page-header,
.page.active .page-content,
.create-header,
.monthly-report-panel,
.registry-item,
.report-card,
.backup-panel {
    animation: softRise 0.42s ease both;
}

.page.active .page-content {
    animation-delay: 0.05s;
}

.card,
.settings-shortcut,
.report-department-card,
.card-form,
.monthly-record,
.registry-item {
    will-change: transform;
}

.page-header,
.create-header {
    position: relative;
    overflow: hidden;
}

.page-header::after,
.create-header::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: headerSweep 6s ease-in-out infinite;
    pointer-events: none;
}

.btn-primary,
#loginButton {
    animation: calmGlow 4.5s ease-in-out infinite;
}

.btn:active,
.btn-toggle:active,
.settings-shortcut:active,
.report-department-card:active,
.mobile-direct-menu .nav-link:active {
    transform: scale(0.98);
}

.input-pill:hover,
.large-textarea:hover,
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: #b7c6dc;
    background: #fbfdff;
}

.footer-app-note {
    width: min(100%, var(--content-max-width));
    max-width: calc(100% - 2rem);
    margin: 1rem auto 0;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
    box-sizing: border-box;
    min-width: 0;
}

.footer-app-note > .footer-app-note-lead {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
}

.footer-platforms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    direction: ltr;
}

.footer-platforms span {
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
}

.native-app .footer-app-note {
    display: none;
}

@media (max-width: 900px) {
    .footer-app-note {
        max-width: calc(100% - 1.5rem);
        margin-top: 0.8rem;
        padding: 0.8rem;
        text-align: center;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dedicated redesign for report log, monthly report, and auto report pages */
#reports-list,
.page.active:has(.monthly-report-panel),
.autoreport-page {
    width: min(100%, var(--content-max-width));
    margin: 0 auto 1.25rem;
}

.monthly-report-title,
.autoreport-hero {
    position: relative;
    overflow: hidden;
    width: min(100%, var(--content-max-width));
    margin: 0 auto 1rem;
    padding: 1.45rem 1.5rem;
    border: 1px solid rgba(217, 226, 239, 0.9);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%);
    color: #ffffff;
    text-align: right;
    box-shadow: var(--shadow-md);
}

.monthly-report-title::after,
.autoreport-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: headerSweep 6s ease-in-out infinite;
    pointer-events: none;
}

.monthly-report-title h1,
.autoreport-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 22px;
}

.autoreport-hero {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: right;
}

.autoreport-hero-icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    font-size: 1.35rem;
}

.monthly-report-panel,
.report-log-filter-panel,
.autoreport-panel,
.autoreport-actions,
.autoreport-tabs {
    width: min(100%, var(--content-max-width));
    margin-inline: auto;
}

.monthly-report-panel,
.report-log-filter-panel,
.autoreport-panel.active {
    border: 1px solid rgba(217, 226, 239, 0.9);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-md);
}

.monthly-report-panel,
.report-log-filter-panel {
    padding: 1.15rem;
}

.autoreport-actions {
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.autoreport-add-link,
.auto-create-btn {
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(31, 94, 255, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.autoreport-add-link:hover,
.auto-create-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(31, 94, 255, 0.25);
}

.autoreport-tabs,
.monthly-filter-tabs,
.report-log-filter-tabs,
.report-log-scope-tabs,
.monthly-scope-tabs {
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.autoreport-tab,
.monthly-tab,
.report-log-scope-tab,
.monthly-scope-btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.autoreport-tab:hover,
.monthly-tab:hover,
.report-log-scope-tab:hover,
.monthly-scope-btn:hover {
    background: #ffffff;
    border-color: #d7e1ee;
    color: var(--text-primary);
}

.autoreport-tab.active,
.monthly-tab.active,
.report-log-scope-tab.active,
.monthly-scope-btn.active {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb) 0%, var(--theme-header-end, #1f4fc4) 100%);
    border-color: var(--primary-color, #2f5edb);
    color: var(--theme-on-primary, #ffffff);
    box-shadow: 0 10px 22px var(--theme-focus-ring, rgba(47, 94, 219, 0.2));
}

.monthly-scope-btn .scope-icon {
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.monthly-date-row,
.monthly-selection-bar,
.auto-card,
.autoreport-location-item,
.monthly-record,
.registry-item,
.monthly-summary-box {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.monthly-date-row {
    background: #fbfdff;
}

.monthly-summary-row {
    gap: 0.8rem;
}

.monthly-summary-box {
    padding: 1rem;
}

.monthly-summary-label,
.auto-small-label,
.report-log-filter-summary,
.registry-detail-label {
    color: var(--text-secondary);
}

.auto-section-title {
    color: #2f5edb;
}

.monthly-record,
.registry-item,
.autoreport-location-item {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.monthly-record:hover,
.registry-item:hover,
.autoreport-location-item:hover {
    transform: translateY(-2px);
    border-color: #bcd0ea;
    box-shadow: var(--shadow-md);
}

.registry-item {
    border-right: 5px solid var(--primary-color);
}

.registry-item.status-done {
    border-right-color: var(--success-color);
}

.registry-item.status-urgent,
.registry-item.status-delayed,
.registry-item.expired {
    border-right-color: var(--danger-color);
}

.registry-item.status-executing {
    border-right-color: var(--pending-color);
}

.registry-detail-field,
.registry-summary-fields > *,
.monthly-selected-count {
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.auto-card {
    padding: 1rem;
}

.auto-section-title {
    margin: 1rem auto 0.55rem;
    width: min(100%, var(--content-max-width));
    font-weight: 800;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    background: #eef6ff;
    border: 1px solid #cfe0ff;
}

.auto-card select,
.auto-card input,
.monthly-month-field select,
.monthly-search-field input,
.report-log-month-field select,
.report-log-year-field select {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-primary);
}

.auto-segment,
.auto-chip-grid,
.auto-inline-actions {
    gap: 0.55rem;
}

.auto-segment {
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.auto-segment button,
.auto-chip,
.auto-soft-btn,
.auto-recommendations button,
.monthly-export-btn,
.monthly-check-all {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.auto-segment button.active,
.auto-chip.selected,
.auto-recommendations button.selected {
    background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%);
    border-color: #2f5edb;
    color: #ffffff;
}

.auto-calendar-head span,
.auto-calendar-grid button {
    border-radius: var(--radius-sm);
}

.auto-calendar-grid button.selected {
    background: var(--primary-color);
    color: #ffffff;
}

.auto-sweet-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

#quickAnalyzeAcImages,
#aiNoticeConfirmBtn {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 48%, #f59e0b 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.24);
}

.settings-shortcut.autoreport-shortcut {
    position: relative;
    overflow: hidden;
    border-color: rgba(20, 184, 166, 0.35);
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 48%, #f59e0b 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.24);
}

#quickAnalyzeAcImages::before,
#aiNoticeConfirmBtn::before,
.settings-shortcut.autoreport-shortcut::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 44%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
    transform: translateX(140%);
    animation: headerSweep 3.8s ease-in-out infinite;
    pointer-events: none;
}

.settings-shortcut.autoreport-shortcut span {
    position: relative;
    z-index: 1;
}

#quickAnalyzeAcImages::after {
    content: "AI";
    margin-right: 0.55rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    direction: ltr;
}

#quickAnalyzeAcImages:hover,
#aiNoticeConfirmBtn:hover,
.settings-shortcut.autoreport-shortcut:hover {
    background: linear-gradient(135deg, #0b5f59 0%, #0d9488 48%, #d97706 100%);
    color: #ffffff;
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 18px 36px rgba(20, 184, 166, 0.32);
}

#quickAnalyzeAcImages:disabled,
#aiNoticeConfirmBtn:disabled {
    opacity: 0.72;
    cursor: progress;
    transform: none;
}

#user-profile .employee-form input,
#user-profile .employee-form textarea,
#user-profile .employee-form select,
#user-profile .profile-control-row select {
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--primary-color);
    border-color: var(--border-color) !important;
}

#user-profile .employee-form input:disabled,
#user-profile .employee-form textarea:disabled,
#user-profile .employee-form select:disabled,
#user-profile .profile-control-row select:disabled {
    background: var(--surface-muted, var(--background-color)) !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    opacity: 1;
}

@media (max-width: 900px) {
    body {
        padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    }

    .main-content {
        padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    }

    .page.active {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .top-header {
        min-height: 0 !important;
        display: grid !important;
        gap: 0.5rem !important;
        padding: calc(0.72rem + env(safe-area-inset-top)) 0.9rem 0.85rem !important;
        background: linear-gradient(135deg, #2f5edb 0%, #1f4fc4 100%) !important;
        color: #ffffff !important;
    }

    .top-header .header-right,
    .top-header .header-left {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.35rem 0.55rem;
        color: #ffffff !important;
    }

    .top-header .header-label,
    .top-header .header-value,
    .top-header #currentDate,
    .top-header #empGreeting {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        opacity: 1 !important;
    }

    .top-header .header-weather {
        color: #087f5b !important;
        -webkit-text-fill-color: #087f5b !important;
    }

    .mobile-direct-menu {
        min-height: calc(92px + env(safe-area-inset-bottom)) !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    }

    .native-app body {
        background: var(--background-color) !important;
    }

    .native-app .main-content {
        padding-top: 0.75rem !important;
    }

    .native-app .top-header {
        width: calc(100% + 1.7rem) !important;
        margin: 0 -0.85rem 0.85rem !important;
        padding-top: calc(0.85rem + env(safe-area-inset-top)) !important;
        padding-right: 0.9rem !important;
        padding-left: 0.9rem !important;
        border-right: 0 !important;
        border-left: 0 !important;
        border-top: 0 !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        box-shadow: 0 10px 28px rgba(31, 79, 196, 0.22) !important;
    }

    .native-app .page-header {
        margin-top: 0 !important;
        padding-top: 1.45rem !important;
    }
}

@media (max-width: 900px) {
    #reports-list,
    .page.active:has(.monthly-report-panel),
    .autoreport-page,
    .monthly-report-panel,
    .report-log-filter-panel,
    .autoreport-panel,
    .autoreport-actions,
    .autoreport-tabs {
        width: 100%;
    }

    .monthly-report-title,
    .autoreport-hero {
        padding: 1.15rem 1rem;
        margin-bottom: 0.85rem;
    }

    .monthly-report-title h1,
    .autoreport-hero h1 {
        font-size: 18px;
    }

    .monthly-report-panel,
    .report-log-filter-panel,
    .autoreport-panel.active {
        padding: 0.85rem;
    }

    .auto-update-toolbar {
        align-items: stretch;
    }

    .auto-update-grid {
        grid-template-columns: 1fr;
    }

    .auto-update-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .autoreport-tabs,
    .monthly-filter-tabs,
    .report-log-filter-tabs,
    .report-log-scope-tabs,
    .monthly-scope-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Final mobile scale override: Android WebView applies the Arabic font heavier/larger. */
@media (max-width: 900px) {
    body {
        font-size: 14px !important;
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }

    p,
    span,
    div,
    label,
    a,
    input,
    textarea,
    select,
    button {
        font-size: 14px;
    }

    .main-content,
    .page.active {
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }

    .top-header {
        gap: 0.35rem !important;
        padding: calc(0.55rem + env(safe-area-inset-top)) 0.75rem 0.7rem !important;
    }

    .top-header .header-label,
    .top-header .header-value,
    .top-header #currentDate,
    .top-header #empGreeting {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .top-header .header-weather,
    .header-left .btn,
    .top-header .btn {
        font-size: 12px !important;
    }

    .header-left .btn,
    .top-header .btn {
        min-height: 42px !important;
        padding: 0.45rem 0.75rem !important;
    }

    .page-header h1,
    .create-header h1 {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
    }

    .form-card h2,
    .section-title,
    .monthly-report-title h1,
    .autoreport-hero h1 {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    input,
    textarea,
    select {
        min-height: 44px !important;
        font-size: 14px !important;
    }

    .mobile-direct-menu {
        min-height: calc(68px + env(safe-area-inset-bottom)) !important;
        padding: 0.25rem 0.35rem max(0.3rem, env(safe-area-inset-bottom)) !important;
        gap: 0.12rem !important;
    }

    .mobile-direct-menu .nav-link,
    .mobile-direct-menu a {
        min-height: 56px !important;
        padding: 0.25rem 0.1rem !important;
        gap: 0.12rem !important;
        border-radius: 10px !important;
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

    .mobile-direct-menu .icon {
        width: 23px !important;
        height: 23px !important;
        font-size: 0.95rem !important;
        border-radius: 7px !important;
    }

    .mobile-direct-menu .label {
        font-size: 10px !important;
        line-height: 1.05 !important;
        max-height: 22px;
        overflow: hidden;
    }
}

/* Final theme pass for web, Android, and iOS rendered layouts. */
html[data-theme] body { background-color: var(--background-color); color: var(--text-primary); }
html[data-theme] .top-header, html[data-theme] .page-header, html[data-theme] .create-header, html[data-theme] .card-header { background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important; color: var(--theme-on-primary) !important; }
html[data-theme] .sidebar, html[data-theme] .mobile-direct-menu { background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important; color: var(--theme-on-primary) !important; }
html[data-theme] .page-content, html[data-theme] .settings-section, html[data-theme] .card-form, html[data-theme] .reports-chart-panel, html[data-theme] .backup-panel, html[data-theme] .monthly-report-panel, html[data-theme] .modal-content, html[data-theme] .profile-modal-card, html[data-theme] .card { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .settings-section h2, html[data-theme] .settings-section h3, html[data-theme] .section-title, html[data-theme] .card-number, html[data-theme] .target-progress { color: var(--text-primary) !important; }
html[data-theme] .card h3, html[data-theme] .meta-label, html[data-theme] .small-label, html[data-theme] .pill-title { color: var(--text-secondary) !important; }
html[data-theme] .page-header p, html[data-theme] .create-header p { color: rgba(255, 255, 255, 0.82) !important; }
html[data-theme] .btn-primary, html[data-theme] #loginButton, html[data-theme] .monthly-manual-save { background: var(--primary-color) !important; color: var(--theme-on-primary) !important; box-shadow: 0 10px 22px var(--theme-focus-ring); }
html[data-theme] .btn-primary:hover, html[data-theme] #loginButton:hover, html[data-theme] .monthly-manual-save:hover { background: var(--primary-hover) !important; }
html[data-theme] .monthly-manual-save { border-color: var(--primary-color) !important; }
html[data-theme] .btn-secondary, html[data-theme] .btn-toggle, html[data-theme] .recommendation-btn, html[data-theme] .settings-shortcut, html[data-theme] .chart-range-btn.active { background: var(--card-background) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
html[data-theme] input, html[data-theme] textarea, html[data-theme] select { background-color: var(--card-background); color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); border-color: var(--border-color); }
html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus { border-color: var(--primary-soft) !important; box-shadow: 0 0 0 4px var(--theme-focus-ring) !important; }

/* Footer theme sync */
html[data-theme] .site-footer { background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important; color: var(--theme-on-primary) !important; box-shadow: 0 -10px 26px var(--theme-focus-ring) !important; }
html[data-theme] .footer-content, html[data-theme] .footer-content *, html[data-theme] .copyright, html[data-theme] .visitor-count { color: var(--theme-on-primary) !important; }
html[data-theme] .footer-app-note { background: rgba(255, 255, 255, 0.10) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: rgba(255, 255, 255, 0.88) !important; }
html[data-theme="graphite"] .footer-app-note, html[data-theme="midnight"] .footer-app-note, html[data-theme="navy"] .footer-app-note, html[data-theme="charcoal"] .footer-app-note, html[data-theme="slate"] .footer-app-note, html[data-theme="burgundy"] .footer-app-note, html[data-theme="onyx"] .footer-app-note, html[data-theme="pine"] .footer-app-note, html[data-theme="espresso"] .footer-app-note { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.14) !important; }
html[data-theme] .footer-platforms span { background: var(--card-background) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16) !important; }

/* Monthly and auto report theme sync */
html[data-theme] .monthly-report-title, html[data-theme] .autoreport-hero { background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important; color: var(--theme-on-primary) !important; border-color: var(--border-color) !important; box-shadow: 0 12px 28px var(--theme-focus-ring) !important; }
html[data-theme] .monthly-report-title h1, html[data-theme] .autoreport-hero h1, html[data-theme] .autoreport-hero-icon { color: var(--theme-on-primary) !important; }
html[data-theme] .monthly-report-panel, html[data-theme] .autoreport-panel.active, html[data-theme] .autoreport-actions, html[data-theme] .autoreport-tabs, html[data-theme] .monthly-filter-tabs, html[data-theme] .monthly-scope-tabs, html[data-theme] .monthly-date-row, html[data-theme] .monthly-selection-bar, html[data-theme] .auto-card, html[data-theme] .autoreport-location-item, html[data-theme] .monthly-record, html[data-theme] .monthly-summary-box, html[data-theme] .monthly-copies-panel, html[data-theme] .monthly-copy-item { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .autoreport-tabs, html[data-theme] .monthly-filter-tabs, html[data-theme] .monthly-scope-tabs, html[data-theme] .auto-segment, html[data-theme] .auto-chip-grid, html[data-theme] .auto-inline-actions, html[data-theme] .auto-section-title, html[data-theme] .monthly-selected-count { background: var(--surface-muted) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .auto-section-title, html[data-theme] .monthly-summary-label, html[data-theme] .auto-small-label, html[data-theme] .monthly-date-value, html[data-theme] .monthly-empty, html[data-theme] .autoreport-empty, html[data-theme] .autoreport-message { color: var(--text-secondary) !important; }
html[data-theme] .autoreport-add-link, html[data-theme] .auto-create-btn, html[data-theme] .monthly-export-btn:not(:disabled), html[data-theme] .auto-calendar-grid button.selected { background: var(--primary-color) !important; color: var(--theme-on-primary) !important; border-color: var(--primary-color) !important; box-shadow: 0 10px 22px var(--theme-focus-ring) !important; }
html[data-theme] .autoreport-add-link:hover, html[data-theme] .auto-create-btn:hover, html[data-theme] .monthly-export-btn:not(:disabled):hover { background: var(--primary-hover) !important; color: var(--theme-on-primary) !important; }
html[data-theme] .autoreport-tab, html[data-theme] .monthly-tab, html[data-theme] .monthly-scope-btn, html[data-theme] .auto-segment button, html[data-theme] .auto-chip, html[data-theme] .auto-soft-btn, html[data-theme] .auto-recommendations button, html[data-theme] .monthly-check-all, html[data-theme] .auto-calendar-grid button { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .autoreport-tab.active, html[data-theme] .monthly-tab.active, html[data-theme] .monthly-page-tab.active, html[data-theme] .monthly-scope-btn.active, html[data-theme] .auto-segment button.active, html[data-theme] .auto-chip.selected, html[data-theme] .auto-recommendations button.selected { background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important; color: var(--theme-on-primary) !important; border-color: var(--primary-color) !important; box-shadow: 0 10px 22px var(--theme-focus-ring) !important; }
html[data-theme] .auto-card select, html[data-theme] .auto-card input, html[data-theme] .monthly-month-field select, html[data-theme] .monthly-search-field input, html[data-theme] .monthly-date-row select { background: var(--card-background) !important; color: var(--text-primary) !important; -webkit-text-fill-color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .monthly-record:hover, html[data-theme] .autoreport-location-item:hover { border-color: var(--primary-soft) !important; box-shadow: 0 12px 26px var(--theme-focus-ring) !important; }

/* Auto report update and monthly copy theme sync */
html[data-theme] .auto-update-monthly-copies, html[data-theme] .monthly-copies-head, html[data-theme] .monthly-copies-list, html[data-theme] .monthly-copy-item { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .monthly-copy-item strong { color: var(--text-primary) !important; }
html[data-theme] .monthly-copy-item span, html[data-theme] .monthly-copies-head span { color: var(--text-secondary) !important; }
html[data-theme] .monthly-copy-print, html[data-theme] .monthly-copy-delete { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; }
html[data-theme] .monthly-copy-print:not(:disabled) { color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
html[data-theme] .monthly-copy-print:not(:disabled):hover { background: var(--primary-color) !important; color: var(--theme-on-primary) !important; }
html[data-theme] .monthly-copy-delete { color: var(--danger-color) !important; border-color: var(--danger-color) !important; }
html[data-theme] .monthly-copy-delete:hover { background: var(--danger-color) !important; color: #ffffff !important; border-color: var(--danger-color) !important; }
html[data-theme] .autoreport-actions .autoreport-add-link { background: var(--primary-color) !important; color: var(--theme-on-primary) !important; border: 1px solid var(--primary-color) !important; }
html[data-theme] .autoreport-actions .autoreport-add-link:hover { background: var(--primary-hover) !important; color: var(--theme-on-primary) !important; }
html[data-theme] .settings-shortcut:not(.autoreport-shortcut) { background: var(--card-background) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
html[data-theme] .settings-shortcut:not(.autoreport-shortcut):hover { border-color: var(--primary-soft) !important; color: var(--primary-color) !important; box-shadow: 0 12px 26px var(--theme-focus-ring) !important; }

/* Selected controls theme sync */
html[data-theme] .btn-toggle.active,
html[data-theme] .check-item.selected,
html[data-theme] .recommendation-btn.selected,
html[data-theme] .recommendation-btn:focus {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    border-color: var(--primary-color) !important;
    color: var(--theme-on-primary) !important;
    box-shadow: 0 10px 22px var(--theme-focus-ring) !important;
}

html[data-theme] .btn-toggle.active *,
html[data-theme] .check-item.selected *,
html[data-theme] .recommendation-btn.selected *,
html[data-theme] .recommendation-btn:focus * {
    color: var(--theme-on-primary) !important;
}

html[data-theme] .check-item.selected .badge-num,
html[data-theme] .check-item.selected .radio-indicator {
    background: var(--card-background) !important;
    border-color: var(--theme-on-primary) !important;
    color: var(--primary-color) !important;
}

/* Settings redesign theme sync */
html[data-theme] .settings-overview {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 12px 28px var(--theme-focus-ring) !important;
}

html[data-theme] .settings-overview h2,
html[data-theme] .settings-overview .settings-kicker {
    color: var(--theme-on-primary) !important;
}

html[data-theme] .settings-overview p {
    color: rgba(255, 255, 255, 0.86) !important;
}

html[data-theme] .settings-nav-panel,
html[data-theme] .settings-section {
    background: var(--card-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .settings-nav-item,
html[data-theme] .settings-nav-link,
html[data-theme] .scope-required-box {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .settings-nav-item:hover,
html[data-theme] .settings-nav-link:hover,
html[data-theme] .scope-required-box {
    background: var(--surface-muted) !important;
}

html[data-theme] .settings-nav-item.active {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    border-color: var(--primary-color) !important;
    color: var(--theme-on-primary) !important;
    box-shadow: 0 10px 22px var(--theme-focus-ring) !important;
}

html[data-theme] .settings-nav-item.active strong,
html[data-theme] .settings-nav-item.active small,
html[data-theme] .settings-nav-item.active .settings-nav-icon {
    color: var(--theme-on-primary) !important;
}

html[data-theme] .settings-nav-icon,
html[data-theme] .settings-section-badge {
    background: var(--surface-muted) !important;
    color: var(--primary-color) !important;
}

html[data-theme] .settings-nav-item.active .settings-nav-icon {
    background: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme] .settings-section-head,
html[data-theme] .settings-nav-divider {
    border-color: var(--border-color) !important;
    background-color: var(--border-color) !important;
}

html[data-theme] .settings-section-head {
    background-color: transparent !important;
}

html[data-theme] .settings-section-head p,
html[data-theme] .settings-nav-item small {
    color: var(--text-secondary) !important;
}

html[data-theme] .scope-required-box label {
    color: var(--primary-color) !important;
}

/* Cleaner settings experience */
.settings-overview {
    min-height: 128px;
}

.settings-overview-meter {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 124px;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.settings-overview-meter span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.16);
}

.settings-overview-meter strong {
    color: var(--theme-on-primary);
    font-size: 15px;
}

.appearance-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
    gap: 1rem;
    align-items: stretch;
}

.theme-preview-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 44%, transparent 44%),
        var(--card-background);
    box-shadow: 0 14px 30px var(--theme-focus-ring);
    color: var(--text-primary);
}

.theme-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 34px;
}

.theme-preview-dot {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--card-background);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.theme-preview-title {
    margin-top: auto;
    font-family: var(--app-font);
    font-size: 20px;
    line-height: 1.55;
    color: var(--text-primary);
}

.theme-preview-card p {
    margin: 0.35rem 0 1rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.theme-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.theme-preview-actions span {
    display: block;
    height: 38px;
    border-radius: 8px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
}

.theme-preview-actions span:first-child {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.theme-settings-panel {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    min-height: 250px;
}

.theme-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
    gap: 0.55rem;
}

.theme-choice-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
    color: var(--text-primary);
    font-family: var(--app-font);
    font-size: 13px;
    line-height: 1.35;
    text-align: right;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.theme-choice-btn:hover {
    border-color: var(--primary-soft);
    box-shadow: 0 10px 20px var(--theme-focus-ring);
    transform: translateY(-1px);
}

.theme-choice-btn.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--theme-focus-ring);
}

.theme-choice-color {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid var(--card-background);
    box-shadow: 0 0 0 1px var(--border-color);
}

.theme-choice-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme-cycle-btn {
    align-self: flex-start;
    min-width: 108px;
}

.settings-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.settings-action-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
    align-items: center;
    min-height: 88px;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.settings-action-card:hover {
    border-color: var(--primary-soft);
    box-shadow: 0 12px 26px var(--theme-focus-ring);
}

.settings-action-card strong,
.settings-action-card small {
    min-width: 0;
}

.settings-action-card small {
    grid-column: 2;
    color: var(--text-secondary);
    line-height: 1.55;
}

.settings-action-icon {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 900;
}

.settings-action-card.primary-action {
    border-color: var(--primary-soft);
}

.settings-action-card.primary-action .settings-action-icon {
    background: var(--primary-color);
    color: var(--theme-on-primary);
}

html[data-theme] .theme-preview-card,
html[data-theme] .theme-settings-panel,
html[data-theme] .theme-choice-btn,
html[data-theme] .settings-action-card {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .theme-choice-btn.active,
html[data-theme] .settings-action-card.primary-action {
    border-color: var(--primary-color) !important;
}

html[data-theme] .settings-action-card small,
html[data-theme] .theme-preview-card p,
html[data-theme] .theme-settings-copy p {
    color: var(--text-secondary) !important;
}

@media (max-width: 900px) {
    .appearance-layout {
        grid-template-columns: 1fr;
    }

    .theme-preview-card,
    .theme-settings-panel {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .settings-overview {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
    }

    .settings-overview-meter {
        width: 100%;
        justify-content: space-between;
    }

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

    .theme-choice-btn {
        min-width: 0;
    }

    .theme-choice-label {
        white-space: normal;
    }

    .theme-cycle-btn {
        width: 100%;
    }

    .settings-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings typography tuning */
.settings-page-content,
.settings-page-content input,
.settings-page-content select,
.settings-page-content textarea,
.settings-page-content button {
    font-size: 14px;
}

.settings-overview h2 {
    font-size: 18px;
    line-height: 1.45;
}

.settings-overview p,
.settings-section-head p,
.theme-settings-copy p,
.theme-preview-card p,
.settings-action-card small {
    font-size: 13px;
}

.settings-kicker,
.settings-section-badge,
.theme-current-name {
    font-size: 12px;
}

.settings-section h2,
.settings-section-head h2 {
    font-size: 17px;
    line-height: 1.45;
}

.settings-section h3,
.theme-settings-copy h3,
.theme-preview-title,
.settings-action-card strong {
    font-size: 15px;
    line-height: 1.55;
}

.settings-nav-item strong,
.settings-nav-link,
.settings-shortcut {
    font-size: 14px;
    line-height: 1.45;
}

.settings-nav-item small,
.theme-choice-btn {
    font-size: 12px;
}

.settings-nav-icon {
    font-size: 14px;
}

.settings-action-icon {
    font-size: 18px;
}

@media (max-width: 900px) {
    .settings-overview h2 {
        font-size: 17px;
    }

    .settings-section h2,
    .settings-section-head h2 {
        font-size: 16px;
    }

    .settings-section h3,
    .theme-settings-copy h3,
    .theme-preview-title,
    .settings-action-card strong {
        font-size: 14px;
    }

    .settings-nav-item strong,
    .settings-nav-link,
    .settings-shortcut {
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .settings-page-content,
    .settings-page-content input,
    .settings-page-content select,
    .settings-page-content textarea,
    .settings-page-content button {
        font-size: 13px;
    }

    .settings-overview h2 {
        font-size: 16px;
    }

    .settings-overview p,
    .settings-section-head p,
    .theme-settings-copy p,
    .theme-preview-card p,
    .settings-action-card small {
        font-size: 12px;
    }

    .settings-section h2,
    .settings-section-head h2 {
        font-size: 15px;
    }

    .settings-nav-item strong,
    .settings-nav-link,
    .settings-shortcut,
    .theme-choice-btn {
        font-size: 12px;
    }

    .settings-nav-item small {
        font-size: 11px;
    }

    .settings-action-card strong,
    .theme-preview-title {
        font-size: 13px;
    }
}

/* iPhone bottom navigation readability */
@media (max-width: 900px) {
    .mobile-direct-menu {
        min-height: calc(84px + env(safe-area-inset-bottom)) !important;
        padding: 0.4rem 0.35rem max(0.55rem, env(safe-area-inset-bottom)) !important;
    }

    .mobile-direct-menu .nav-link,
    .mobile-direct-menu a {
        min-height: 68px !important;
        padding: 0.4rem 0.1rem !important;
        gap: 0.22rem !important;
        font-size: 12px !important;
        line-height: 1.18 !important;
    }

    .mobile-direct-menu .icon {
        width: 27px !important;
        height: 27px !important;
        font-size: 1.12rem !important;
    }

    .mobile-direct-menu .label {
        font-size: 12px !important;
        line-height: 1.18 !important;
        max-height: 34px !important;
        overflow: hidden;
    }

    .main-content {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 380px) {
    .mobile-direct-menu .nav-link,
    .mobile-direct-menu a,
    .mobile-direct-menu .label {
        font-size: 13px !important;
    }
}

/* Prominent quick settings links */
.settings-quick-group {
    display: grid;
    gap: 0.55rem;
}

.settings-quick-title {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
}

.settings-quick-link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-primary);
    font-family: var(--app-font);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.settings-quick-link:hover {
    border-color: var(--primary-soft);
    color: var(--primary-color);
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

.settings-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--card-background);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 900;
}

.settings-quick-primary {
    border-color: var(--primary-soft);
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    color: var(--theme-on-primary);
}

.settings-quick-primary .settings-quick-icon {
    background: rgba(255, 255, 255, 0.18);
    color: var(--theme-on-primary);
}

html[data-theme] .settings-quick-link {
    border-color: var(--border-color);
}

html[data-theme] .settings-quick-primary {
    border-color: var(--primary-color);
    color: var(--theme-on-primary);
}

@media (max-width: 900px) {
    .settings-nav-panel {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row !important;
        grid-auto-columns: unset !important;
        overflow: visible !important;
    }

    .settings-nav-divider,
    .settings-quick-group {
        grid-column: 1 / -1;
    }

    .settings-nav-divider {
        display: block !important;
    }

    .settings-quick-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.65rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--surface-muted);
    }

    .settings-quick-title {
        grid-column: 1 / -1;
        color: var(--primary-color);
        font-size: 13px;
    }

    .settings-quick-link {
        min-height: 56px;
        padding: 0.65rem;
        background: var(--card-background);
        font-size: 13px;
    }

    .settings-quick-primary {
        grid-column: 1 / -1;
        min-height: 58px;
        background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%);
    }
}

@media (max-width: 420px) {
    .settings-nav-panel,
    .settings-quick-group {
        grid-template-columns: 1fr;
    }

    .settings-quick-title,
    .settings-quick-primary {
        grid-column: auto;
    }
}

.settings-page-jump {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-jump-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
    color: var(--primary-color);
    font-family: var(--app-font);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.settings-jump-back:hover {
    border-color: var(--primary-soft);
    box-shadow: 0 10px 22px var(--theme-focus-ring);
}

.settings-page-quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
}

.settings-page-quick .settings-quick-title {
    grid-column: 1 / -1;
}

.settings-quick-link.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--theme-focus-ring);
}

.settings-quick-link.active .settings-quick-icon {
    background: var(--primary-color);
    color: var(--theme-on-primary);
}

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

    .settings-jump-back {
        width: 100%;
    }
}

/* Strong settings action styling - keeps hosted copies from falling back to plain buttons */
.settings-nav-item,
.settings-quick-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    will-change: transform;
}

.settings-nav-item::before,
.settings-quick-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.42) 45%, transparent 72%);
    transform: translateX(115%);
    transition: transform 0.55s ease;
    pointer-events: none;
}

.settings-nav-item:hover,
.settings-quick-link:hover,
.settings-nav-item:focus-visible,
.settings-quick-link:focus-visible {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18), 0 0 0 3px var(--theme-focus-ring);
    outline: none;
}

.settings-nav-item:hover::before,
.settings-quick-link:hover::before,
.settings-nav-item:focus-visible::before,
.settings-quick-link:focus-visible::before {
    transform: translateX(-115%);
}

.settings-nav-item:active,
.settings-quick-link:active {
    transform: translateY(0) scale(0.99);
}

.settings-nav-item.active,
.settings-quick-link.active {
    background: linear-gradient(135deg, var(--theme-header-start) 0%, var(--theme-header-end) 100%) !important;
    color: var(--theme-on-primary) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.settings-nav-item.active .settings-nav-icon,
.settings-quick-link.active .settings-quick-icon,
.settings-quick-primary .settings-quick-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--theme-on-primary) !important;
}

@media (hover: none) {
    .settings-nav-item:hover,
    .settings-quick-link:hover {
        transform: none;
    }
}

/* Mobile settings simplification: show the settings like a clear form, not a dashboard. */
@media (max-width: 900px) {
    #settings .page-header {
        margin-bottom: 0.65rem;
    }

    #settings .settings-page-content {
        padding: 0 0.65rem 5.5rem;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    #settings .settings-overview {
        display: none;
    }

    #settings .settings-workspace {
        display: block;
    }

    #settings .settings-nav-panel {
        position: static;
        z-index: 20;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        width: 100%;
        margin: 0 0 0.85rem;
        padding: 0.75rem;
        overflow: visible !important;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--card-background);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    #settings .settings-nav-divider {
        display: block !important;
        margin: 0.15rem 0;
    }

    #settings .settings-quick-group {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.55rem;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #settings .settings-nav-item {
        min-width: 0;
        min-height: 58px;
        padding: 0.65rem 0.75rem;
        border-color: var(--border-color);
        background: var(--card-background);
        box-shadow: none;
    }

    #settings .settings-quick-title {
        margin: 0.2rem 0 0;
        color: var(--text-secondary);
        font-size: 12px;
    }

    #settings .settings-quick-link {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.65rem;
        min-height: 54px;
        padding: 0.65rem 0.75rem;
        background: var(--card-background);
        border-color: var(--border-color);
    }

    #settings .settings-quick-link span:last-child {
        min-width: 0;
        line-height: 1.45;
    }

    #settings .settings-nav-item .settings-nav-icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    #settings .settings-nav-item strong {
        font-size: 14px;
        white-space: normal;
    }

    #settings .settings-nav-item small {
        display: block;
        font-size: 12px;
    }

    #settings .settings-panels {
        display: grid;
        gap: 0.9rem;
    }

    #settings .settings-panel {
        display: none !important;
        scroll-margin-top: 14px;
    }

    #settings .settings-panel.active {
        display: block !important;
        scroll-margin-top: 78px;
    }

    #settings .settings-section {
        width: 100%;
        margin: 0;
        padding: 0.95rem;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--card-background);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
        overflow: visible;
    }

    #settings .settings-section-head {
        margin-bottom: 0.85rem;
        padding-bottom: 0.7rem;
    }

    #settings .settings-section-head h2 {
        margin: 0.25rem 0 0;
        font-size: 1.2rem;
        line-height: 1.45;
    }

    #settings .settings-section-head p {
        margin-top: 0.35rem;
        font-size: 0.9rem;
        line-height: 1.7;
    }

    #settings .settings-section-badge {
        font-size: 0.78rem;
    }

    #user-profile .profile-control-row {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    #user-profile .profile-control-row .btn,
    #settings .shared-profile-actions .btn,
    #user-profile #employeeSaveProfileBtn,
    #settings .settings-action-card,
    #settings .theme-cycle-btn {
        min-height: 48px;
    }

    #settings .shared-profile-panel {
        padding: 0.8rem;
    }

    #settings .shared-profile-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    #settings #profileShareCode {
        min-height: 78px;
    }

    #user-profile .employee-form .form-row,
    #user-profile .attachments-section .form-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    #settings .form-group input,
    #settings .form-group select,
    #user-profile .employee-form input,
    #user-profile .employee-form select,
    #user-profile .employee-form textarea,
    #user-profile .form-group input,
    #user-profile .form-group select {
        min-height: 48px;
        border-radius: 8px;
    }

    #user-profile .attachments-section {
        padding: 0.85rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--surface-muted);
    }

    #settings .appearance-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    #settings .theme-preview-card {
        min-height: 150px;
    }

    #settings .theme-settings-panel {
        min-height: 0;
        padding: 0.85rem;
    }

    #settings .theme-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding-bottom: 0;
    }

    #settings .theme-choice-btn {
        width: 100%;
        min-height: 42px;
    }

    #settings .settings-action-grid {
        grid-template-columns: 1fr;
    }

    #settings .settings-action-card {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 74px;
        padding: 0.75rem;
    }

    #settings .settings-action-icon {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 420px) {
    #settings .settings-nav-item {
        min-width: 112px;
    }

    #settings .settings-section {
        padding: 0.8rem;
    }

    #settings .settings-section-head h2 {
        font-size: 1.08rem;
    }
}

/* Monthly controls polish: keeps the monthly report actions readable and grouped. */
.page.active:has(.monthly-report-panel) {
    color: #172033;
}

.page.active:has(.monthly-report-panel) .monthly-report-title {
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #2457cf 0%, #173f9f 100%);
}

.page.active:has(.monthly-report-panel) .monthly-report-panel {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    background: #ffffff;
    color: #172033;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.page.active:has(.monthly-report-panel) .monthly-scope-tabs,
.page.active:has(.monthly-report-panel) .monthly-filter-tabs,
.page.active:has(.monthly-report-panel) .monthly-date-row,
.page.active:has(.monthly-report-panel) .monthly-selection-bar,
.page.active:has(.monthly-report-panel) .monthly-page-tabs,
.page.active:has(.monthly-report-panel) .monthly-manual-head {
    margin: 0;
    padding: 0.35rem;
    border: 1px solid #d6e0ef;
    background: #f4f7fb;
    color: #172033;
    box-shadow: none;
}

.page.active:has(.monthly-report-panel) .monthly-page-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    border-radius: 10px;
}

.page.active:has(.monthly-report-panel) .monthly-page-tab {
    min-height: 48px;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2b45;
    font-weight: 800;
    cursor: pointer;
}

.page.active:has(.monthly-report-panel) .monthly-page-tab.active {
    border-color: #2457cf;
    background: #2457cf;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(36, 87, 207, 0.22);
}

.page.active:has(.monthly-report-panel) .monthly-tab-panel {
    display: none;
    gap: 0.9rem;
}

.page.active:has(.monthly-report-panel) .monthly-tab-panel.active {
    display: grid;
}

.page.active:has(.monthly-report-panel) .monthly-scope-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.page.active:has(.monthly-report-panel) .monthly-filter-tabs {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(220px, 1fr) minmax(260px, 1.25fr);
    gap: 0.45rem;
}

.page.active:has(.monthly-report-panel) .monthly-scope-btn,
.page.active:has(.monthly-report-panel) .monthly-tab,
.page.active:has(.monthly-report-panel) .monthly-check-all {
    min-height: 48px;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2b45;
    box-shadow: none;
}

.page.active:has(.monthly-report-panel) .monthly-scope-btn {
    min-height: 60px;
    flex-direction: row;
    gap: 0.55rem;
}

.page.active:has(.monthly-report-panel) .monthly-scope-btn .scope-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: #2457cf;
}

.page.active:has(.monthly-report-panel) .monthly-scope-btn.active,
.page.active:has(.monthly-report-panel) .monthly-tab.active {
    border-color: #2457cf;
    background: #2457cf;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(36, 87, 207, 0.22);
}

.page.active:has(.monthly-report-panel) .monthly-scope-btn.active .scope-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.page.active:has(.monthly-report-panel) .monthly-month-field,
.page.active:has(.monthly-report-panel) .monthly-search-field {
    justify-content: space-between;
    padding-inline: 0.75rem;
}

.page.active:has(.monthly-report-panel) .monthly-month-field span,
.page.active:has(.monthly-report-panel) .monthly-search-field span {
    color: #536176;
    font-size: 14px;
    white-space: nowrap;
}

.page.active:has(.monthly-report-panel) .monthly-month-field select,
.page.active:has(.monthly-report-panel) .monthly-search-field input,
.page.active:has(.monthly-report-panel) .monthly-date-row select {
    min-height: 38px;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    -webkit-text-fill-color: #172033;
}

.page.active:has(.monthly-report-panel) .monthly-search-field input {
    width: 100%;
    padding: 0 0.65rem;
    text-align: right;
}

.page.active:has(.monthly-report-panel) .monthly-search-field input::placeholder {
    color: #7a879a;
}

.page.active:has(.monthly-report-panel) .monthly-date-row {
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.75rem;
}

.page.active:has(.monthly-report-panel) .monthly-date-row label,
.page.active:has(.monthly-report-panel) .monthly-selected-date,
.page.active:has(.monthly-report-panel) .monthly-summary-box strong,
.page.active:has(.monthly-report-panel) .monthly-selected-count {
    color: #172033;
}

.page.active:has(.monthly-report-panel) .monthly-summary-row {
    padding: 0;
}

.page.active:has(.monthly-report-panel) .monthly-summary-box {
    padding: 0.9rem;
    border: 1px solid #d6e0ef;
    background: #ffffff;
}

.page.active:has(.monthly-report-panel) .monthly-summary-label {
    color: #536176;
}

.page.active:has(.monthly-report-panel) .monthly-selection-bar {
    padding: 0.75rem;
}

.page.active:has(.monthly-report-panel) .monthly-selection-actions {
    gap: 0.55rem;
}

.page.active:has(.monthly-report-panel) .monthly-export-btn {
    min-height: 46px;
    border: 1px solid #0f766e;
    border-radius: 8px;
    background: #0f766e;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(15, 118, 110, 0.18);
}

.page.active:has(.monthly-report-panel) .monthly-export-btn:disabled {
    border-color: #d6e0ef;
    background: #e9eef6;
    color: #69778d;
    box-shadow: none;
}

.page.active:has(.monthly-report-panel) .monthly-check-all {
    padding: 0 0.8rem;
}

.page.active:has(.monthly-report-panel) .monthly-records-list {
    padding: 0;
}

.page.active:has(.monthly-report-panel) .monthly-empty {
    border: 1px dashed #b8c6d9;
    background: #f8fafc;
    color: #536176;
}

.page.active:has(.monthly-report-panel) .monthly-manual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
}

.page.active:has(.monthly-report-panel) .monthly-manual-head div {
    display: grid;
    gap: 0.2rem;
}

.page.active:has(.monthly-report-panel) .monthly-manual-head strong {
    color: #172033;
    font-size: 16px;
}

.page.active:has(.monthly-report-panel) .monthly-manual-head span {
    color: #536176;
}

.page.active:has(.monthly-report-panel) .monthly-manual-count {
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d6e0ef;
    white-space: nowrap;
}

.page.active:has(.monthly-report-panel) .monthly-employee-card {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #d6e0ef;
    border-radius: 12px;
    background: #f8fbff;
}

.page.active:has(.monthly-report-panel) .monthly-employee-card-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 12px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-card-head div {
    display: grid;
    gap: 0.25rem;
}

.page.active:has(.monthly-report-panel) .monthly-employee-card-head strong {
    color: #172033;
    font-size: 16px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-card-head span {
    color: #536176;
    font-size: 0.88rem;
}

.page.active:has(.monthly-report-panel) .monthly-employee-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 700;
}

.page.active:has(.monthly-report-panel) .monthly-employee-grid .input-pill {
    width: 100%;
}

.page.active:has(.monthly-report-panel) .monthly-employee-file {
    width: 100%;
    border: 1px solid #d6e0ef;
    border-radius: 10px;
    background: #fff;
    padding: 9px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-logo-preview {
    width: 96px;
    height: 64px;
    object-fit: contain;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-signature-preview {
    width: 150px;
    height: 72px;
    object-fit: contain;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.page.active:has(.monthly-report-panel) .monthly-employee-status {
    color: #15803d;
    font-weight: 800;
    margin-inline-end: auto;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table-wrap {
    overflow-x: auto;
    border: 1px solid #d6e0ef;
    border-radius: 10px;
    background: #ffffff;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table th,
.page.active:has(.monthly-report-panel) .monthly-manual-table td {
    padding: 0.55rem;
    border-bottom: 1px solid #e5edf7;
    text-align: right;
    vertical-align: middle;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table th {
    background: #f4f7fb;
    color: #536176;
    font-weight: 800;
    white-space: nowrap;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table tr:last-child td {
    border-bottom: 0;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table tbody tr:nth-child(odd) {
    background: #ffffff;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table tbody tr:nth-child(even) {
    background: #f3f5f8;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table tr.is-saved {
    background: #f8fbff;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table tr.is-editing {
    background: #fffbea;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table .manual-number {
    width: 54px;
    text-align: center;
    color: #2457cf;
    font-weight: 900;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #ffffff;
    color: #172033;
    -webkit-text-fill-color: #172033;
    padding: 0 0.55rem;
}

.page.active:has(.monthly-report-panel) .monthly-manual-table input:disabled {
    background: #f4f7fb;
    color: #536176;
    -webkit-text-fill-color: #536176;
    opacity: 1;
}

.page.active:has(.monthly-report-panel) .monthly-manual-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 40px;
    padding: 0 0.55rem;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #172033;
    font-weight: 800;
}

.page.active:has(.monthly-report-panel) .monthly-manual-edit,
.page.active:has(.monthly-report-panel) .monthly-manual-save,
.page.active:has(.monthly-report-panel) .monthly-manual-delete {
    min-height: 40px;
    min-width: 72px;
    border-radius: 8px;
    border: 1px solid #d6e0ef;
    background: #ffffff;
    color: #1d2b45;
    font-weight: 800;
    cursor: pointer;
}

.page.active:has(.monthly-report-panel) .monthly-manual-save {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

.page.active:has(.monthly-report-panel) .monthly-manual-delete {
    border-color: #fecaca;
    color: #b91c1c;
}

.page.active:has(.monthly-report-panel) .monthly-manual-edit:disabled,
.page.active:has(.monthly-report-panel) .monthly-manual-delete:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.page.active:has(.monthly-report-panel) .monthly-manual-print-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #d6e0ef;
    border-radius: 10px;
    background: #f8fbff;
}

.page.active:has(.monthly-report-panel) .monthly-manual-print-status {
    color: #536176;
    font-weight: 800;
    margin-inline-end: auto;
}

@media (max-width: 760px) {
    .page.active:has(.monthly-report-panel) .monthly-employee-card {
        padding: 12px;
    }

    .page.active:has(.monthly-report-panel) .monthly-employee-grid {
        grid-template-columns: 1fr;
    }

    .page.active:has(.monthly-report-panel) .monthly-employee-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .page.active:has(.monthly-report-panel) .monthly-employee-actions .btn {
        width: 100%;
    }

    .page.active:has(.monthly-report-panel) .monthly-manual-print-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page.active:has(.monthly-report-panel) .monthly-manual-print-actions .btn {
        width: 100%;
    }
}

.monthly-time-dialog {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.38);
}

.monthly-time-card {
    width: min(100%, 360px);
    border: 1px solid #d6e0ef;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.22);
    padding: 1rem;
    direction: rtl;
}

.monthly-time-title {
    margin-bottom: 0.85rem;
    color: #172033;
    font-size: 17px;
    font-weight: 900;
    text-align: center;
}

.monthly-time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    direction: ltr;
}

.monthly-time-fields label {
    display: grid;
    gap: 0.35rem;
    color: #536176;
    font-weight: 800;
    direction: rtl;
}

.monthly-time-fields select {
    min-height: 46px;
    border: 1px solid #d6e0ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #172033;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
}

.monthly-time-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
}

.monthly-time-actions button {
    flex: 1;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #d6e0ef;
    background: #ffffff;
    color: #1d2b45;
    font-weight: 900;
    cursor: pointer;
}

.monthly-time-actions .monthly-time-apply {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}

@media (max-width: 900px) {
    .page.active:has(.monthly-report-panel) .monthly-report-panel {
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .page.active:has(.monthly-report-panel) .monthly-scope-tabs,
    .page.active:has(.monthly-report-panel) .monthly-filter-tabs,
    .page.active:has(.monthly-report-panel) .monthly-page-tabs {
        grid-template-columns: 1fr;
    }

    .page.active:has(.monthly-report-panel) .monthly-scope-btn {
        min-height: 50px;
        justify-content: flex-start;
        padding-inline: 0.8rem;
    }

    .page.active:has(.monthly-report-panel) .monthly-month-field,
    .page.active:has(.monthly-report-panel) .monthly-search-field,
    .page.active:has(.monthly-report-panel) .monthly-date-row,
    .page.active:has(.monthly-report-panel) .monthly-selection-bar,
    .page.active:has(.monthly-report-panel) .monthly-selection-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .page.active:has(.monthly-report-panel) .monthly-month-field,
    .page.active:has(.monthly-report-panel) .monthly-search-field {
        gap: 0.4rem;
    }

    .page.active:has(.monthly-report-panel) .monthly-month-field select,
    .page.active:has(.monthly-report-panel) .monthly-search-field input,
    .page.active:has(.monthly-report-panel) .monthly-date-row select,
    .page.active:has(.monthly-report-panel) .monthly-export-btn,
    .page.active:has(.monthly-report-panel) .monthly-check-all {
        width: 100%;
    }

    .page.active:has(.monthly-report-panel) .monthly-summary-row {
        grid-template-columns: 1fr;
    }

    .page.active:has(.monthly-report-panel) .monthly-selected-count {
        text-align: center;
    }

    .page.active:has(.monthly-report-panel) .monthly-manual-head {
        align-items: stretch;
        flex-direction: column;
    }

    .page.active:has(.monthly-report-panel) .monthly-manual-count {
        text-align: center;
    }

    .page.active:has(.monthly-report-panel) .monthly-manual-table {
        min-width: 860px;
    }
}

/* Backup cards redesign: uses theme tokens so light/dark/custom themes stay consistent. */
#backup .page-content {
    background: var(--surface-muted) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

#backup .settings-section {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem !important;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#backup .backup-panel {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    padding: 1.25rem !important;
    margin: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

#backup .backup-panel::before {
    display: none !important;
}

#backup .backup-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

#backup .backup-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--primary-color);
    font-size: 1.25rem;
    line-height: 1;
}

#backup .backup-panel h3,
#backup .shared-profile-panel-head h3 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

#backup .backup-panel p,
#backup .backup-panel .empty,
#backup .shared-profile-panel-head p {
    margin: 0.35rem 0 0 !important;
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

#backup .backup-actions,
#backup .shared-profile-actions,
#backup .restore-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem !important;
    margin: 0 !important;
}

#backup .settings-accordion {
    gap: 1rem;
}

#backup .backup-page-nav {
    display: flex;
    margin-bottom: 1rem;
}

#backup .settings-accordion-panel .settings-section {
    padding: 0.95rem 1rem;
}

#backup .backup-actions #createBackupBtn {
    grid-column: 1 / -1;
}

#backup .btn,
#backup .backup-actions .btn,
#backup .shared-profile-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 0.98rem !important;
    line-height: 1.35;
    box-shadow: none !important;
}

#backup .backup-actions .btn,
#backup .shared-profile-actions .btn,
#backup .restore-file-label {
    border-color: var(--border-color) !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

#backup .backup-actions .btn:hover,
#backup .shared-profile-actions .btn:hover,
#backup .restore-file-label:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

#backup .backup-actions #createBackupBtn {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--theme-on-primary, #ffffff) !important;
}

#backup .restore-file-name,
#backup #profileShareCode {
    width: 100%;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

#backup .restore-file-name {
    grid-column: 1 / -1;
    min-height: 42px;
    margin: 0 !important;
    padding: 0.65rem 0.85rem;
    text-align: center;
}

#backup #restoreBackupBtn {
    grid-column: 1 / -1;
}

#backup .saved-backups-card {
    grid-row: span 2;
}

#backup #backupsList {
    min-height: 120px;
}

#backup .backup-list {
    display: grid !important;
    gap: 0.65rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

#backup .backup-item {
    display: grid !important;
    /* عمود رابع بعد إضافة زر «استرجاع» — وإلا انكسر زر الحذف لصف مستقل */
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--surface-muted) !important;
}

#backup .backup-name {
    display: grid;
    gap: 0.2rem;
    color: var(--text-primary) !important;
    font-weight: 700;
}

#backup .backup-name strong {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.95rem;
}

#backup .backup-name small {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

#backup .backup-item .btn {
    min-height: 38px !important;
    padding: 0.45rem 0.75rem !important;
}

#backup .backup-item .btn-download {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: var(--card-background) !important;
}

#backup .backup-item .btn-delete,
#backup .shared-profile-remove {
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    background: var(--card-background) !important;
}

#backup .clear-data-card {
    border-color: var(--danger-color) !important;
}

#backup .clear-data-card #clearDataBtn {
    background: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #ffffff !important;
}

html[data-theme] #backup .backup-panel,
html[data-theme] #backup .backup-item,
html[data-theme] #backup .restore-file-name,
html[data-theme] #backup #profileShareCode {
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

@media (max-width: 900px) {
    #backup .page-content {
        padding: 0.9rem !important;
    }

    #backup .settings-section {
        grid-template-columns: 1fr;
        margin-bottom: 5.2rem !important;
    }

    #backup .saved-backups-card {
        grid-row: auto;
    }

    #backup .backup-actions,
    #backup .shared-profile-actions,
    #backup .restore-card-actions {
        grid-template-columns: 1fr;
    }

    #backup .backup-item {
        grid-template-columns: 1fr;
    }
}

/* Site management card layout: mirrors backup cards and respects active theme tokens. */
#add-site .page-content,
#statuses .page-content {
    background: var(--surface-muted) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

#add-site .site-form {
    display: none !important;
}

#add-site .locations-card,
#statuses .locations-card {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

#add-site .locations-card-head,
#statuses .locations-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

#add-site .locations-card-icon,
#statuses .locations-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--primary-color);
    font-size: 1.25rem;
    line-height: 1;
}

#add-site .locations-card h2,
#statuses .locations-card h2 {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
}

#add-site .locations-card p,
#statuses .locations-card p {
    margin: 0.35rem 0 0 !important;
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

#add-site .locations-actions,
#add-site .location-add-row,
#statuses .location-add-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem !important;
    align-items: stretch;
}

#add-site .location-add-row,
#statuses .location-add-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

#add-site .locations-actions .btn,
#add-site .location-add-row .btn,
#add-site .location-import-label,
#statuses .location-add-row .btn {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 0.98rem !important;
}

#add-site .locations-actions .btn:hover,
#add-site .location-add-row .btn:hover,
#add-site .location-import-label:hover,
#statuses .location-add-row .btn:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

#add-site #clearLocationsBtn {
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
    background: var(--card-background) !important;
}

#add-site #newLocationInput,
#statuses .location-add-row input {
    min-height: 46px;
    border-color: var(--border-color) !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

#add-site .locations-list,
#statuses .locations-list {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

#add-site .location-item,
#statuses .location-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}

#add-site .location-item-name,
#statuses .location-item-name {
    margin: 0 !important;
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: normal !important;
    white-space: normal;
}

#add-site .location-item-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#add-site .location-map-link,
#add-site .location-edit-btn,
#add-site .location-save-btn,
#add-site .location-cancel-btn,
#add-site .location-delete-btn,
#statuses .location-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-background);
    color: var(--text-primary);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

#add-site .location-map-link,
#add-site .location-edit-btn,
#add-site .location-save-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#add-site .location-delete-btn,
#statuses .location-delete-btn {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

#add-site .location-map-link.is-disabled {
    opacity: 0.55;
    border-color: var(--border-color);
    color: var(--text-secondary);
    cursor: not-allowed;
}

#add-site .location-edit-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.65rem;
    width: 100%;
}

#add-site .location-edit-form input {
    min-height: 42px;
    border-color: var(--border-color) !important;
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
}

html[data-theme] #add-site .locations-card,
html[data-theme] #add-site .location-item,
html[data-theme] #add-site #newLocationInput,
html[data-theme] #add-site .location-edit-form input,
html[data-theme] #statuses .locations-card,
html[data-theme] #statuses .location-item,
html[data-theme] #statuses .location-add-row input {
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

@media (max-width: 900px) {
    #add-site .page-content,
    #statuses .page-content {
        padding: 0.9rem !important;
    }

    #add-site .locations-actions,
    #add-site .location-add-row,
    #add-site .location-item,
    #add-site .location-edit-form,
    #statuses .location-add-row,
    #statuses .location-item {
        grid-template-columns: 1fr;
    }

    #add-site .location-item-actions {
        justify-content: stretch;
    }

    #add-site .location-item-actions > * {
        flex: 1 1 auto;
    }
}

/* iOS post-launch action splash. The native LaunchScreen stays static; this adds motion after WebView loads. */
.ios-action-splash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22) 0 8%, transparent 26%),
        linear-gradient(145deg, var(--ios-splash-start, #1d4ed8) 0%, var(--ios-splash-end, #2358dc) 45%, var(--ios-splash-deep, #0f2f9f) 100%);
    color: #ffffff;
    opacity: 1;
    pointer-events: none;
}

/* خلفية القشرة الزرقاء (بلون الثيم) لكل التطبيقات الأصلية — آيفون وأندرويد.
   كانت مقصورة على html.ios-native-app فظهر الأندرويد بخلفية مختلفة عن الآيفون. */
html.native-app,
html.native-app body {
    background: var(--ios-splash-start, #1d4ed8) !important;
}

.ios-action-splash.is-visible {
    display: flex;
    opacity: 1;
    animation: iosSplashOut 0.42s ease-in forwards 2.15s;
}

.ios-navigation-splash.is-visible {
    animation: iosSplashOut 0.32s ease-in forwards 0.9s;
}

.ios-navigation-splash .ios-action-splash-stage {
    min-height: 300px;
    transform: scale(0.88);
}

.ios-action-splash-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(78vw, 360px);
    min-height: 360px;
    text-align: center;
}

.ios-action-splash-stage::before,
.ios-action-splash-stage::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.ios-action-splash-stage::before {
    width: 300px;
    height: 300px;
    background: conic-gradient(from 120deg, transparent, rgba(255, 255, 255, 0.46), transparent 44%);
    filter: blur(0.5px);
    opacity: 0;
    animation: iosSplashSweep 1.4s ease-out 0.16s forwards;
}

.ios-action-splash-stage::after {
    width: 230px;
    height: 230px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.18);
    animation: iosSplashHalo 1.7s ease-out 0.22s forwards;
}

.ios-action-splash-ring {
    position: absolute;
    width: 178px;
    height: 178px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.65);
    animation: iosSplashRing 1.2s cubic-bezier(.2,.8,.2,1) 0.18s forwards;
}

.ios-action-splash-logo {
    position: relative;
    z-index: 1;
    width: 122px;
    height: 122px;
    object-fit: contain;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 48px rgba(3, 17, 74, 0.28);
    padding: 10px;
    opacity: 0;
    transform: translateY(22px) scale(0.76) rotate(-7deg);
    animation: iosSplashLogo 0.9s cubic-bezier(.18,.89,.32,1.28) 0.16s forwards;
}

.ios-action-splash-title {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-family: var(--app-font);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
    opacity: 0;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    transform: translateY(12px);
    animation: iosSplashTitle 0.55s ease-out 0.58s forwards;
}

.ios-action-splash-line {
    position: relative;
    z-index: 1;
    width: 170px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    opacity: 0;
    animation: iosSplashTitle 0.4s ease-out 0.72s forwards;
}

.ios-action-splash-line::before {
    content: "";
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: #ffffff;
    transform: translateX(150%);
    animation: iosSplashLoad 1.1s ease-in-out 0.82s forwards;
}

@keyframes iosSplashIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes iosSplashOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes iosSplashLogo {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.76) rotate(-7deg);
    }
    62% {
        opacity: 1;
        transform: translateY(-2px) scale(1.06) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes iosSplashRing {
    0% {
        opacity: 0;
        transform: scale(0.65);
    }
    45% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: scale(1.55);
    }
}

@keyframes iosSplashSweep {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.82);
    }
    30% {
        opacity: 0.62;
    }
    100% {
        opacity: 0;
        transform: rotate(300deg) scale(1.12);
    }
}

@keyframes iosSplashHalo {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    45% {
        opacity: 1;
    }
    100% {
        opacity: 0.18;
        transform: scale(1.05);
    }
}

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

@keyframes iosSplashLoad {
    from { transform: translateX(150%); }
    to { transform: translateX(-230%); }
}

@media (prefers-reduced-motion: reduce) {
    .ios-action-splash,
    .ios-action-splash *,
    .ios-action-splash *::before,
    .ios-action-splash *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ===== English (LTR) layout overrides =====
   Scope: index.html only, activated by html[dir="ltr"] (set from i18n.js).
   Mirrors the structural layout (sidebar/main-content) and normalizes text
   alignment for the pages that have English translations. Not a full RTL/LTR
   audit of every component in this stylesheet — components outside the
   translated pages (report forms, PDF layouts) keep their RTL styling since
   they stay Arabic-only regardless of the selected UI language. */

html[dir="ltr"] body {
    direction: ltr;
}

@media (min-width: 901px) {
    html[dir="ltr"] .sidebar {
        right: auto;
        left: 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    html[dir="ltr"] .main-content {
        margin-right: 0;
        margin-left: var(--sidebar-width);
    }

    html[dir="ltr"] .site-footer {
        margin-right: 0;
        margin-left: var(--sidebar-width);
    }
}

html[dir="ltr"] .nav-link {
    border-right: none;
    border-left: 3px solid transparent;
}

html[dir="ltr"] .nav-link.active {
    border-left-color: currentColor;
}

html[dir="ltr"] .page-header,
html[dir="ltr"] .page-header p,
html[dir="ltr"] .settings-section,
html[dir="ltr"] .settings-section h2,
html[dir="ltr"] .settings-section h3,
html[dir="ltr"] .settings-section p,
html[dir="ltr"] .settings-section-head,
html[dir="ltr"] .settings-accordion-title,
html[dir="ltr"] .settings-accordion-header,
html[dir="ltr"] .form-group,
html[dir="ltr"] .form-group label,
html[dir="ltr"] .profile-controls,
html[dir="ltr"] .profile-controls > label,
html[dir="ltr"] .profile-startup-toggle,
html[dir="ltr"] .locations-card-head h2,
html[dir="ltr"] .locations-card-head p,
html[dir="ltr"] .settings-action-card,
html[dir="ltr"] .settings-quick-link,
html[dir="ltr"] .backup-panel-head h3,
html[dir="ltr"] .backup-panel-head p,
html[dir="ltr"] .card,
html[dir="ltr"] .card h3 {
    text-align: left;
}

html[dir="ltr"] .home-scope-bar,
html[dir="ltr"] #homeScopeBar {
    direction: ltr;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    text-align: left;
}

/* --- تذكير النسخ الاحتياطية في الصفحة الرئيسية --- */
.backup-reminder-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    color: #92400e;
}

.backup-reminder-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.backup-reminder-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 220px;
    min-width: 0;
}

.backup-reminder-text strong {
    font-size: 1rem;
}

.backup-reminder-text span {
    font-size: 0.9rem;
}

.backup-reminder-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.backup-reminder-actions .backup-reminder-open {
    text-decoration: none;
    white-space: nowrap;
}

.backup-reminder-later {
    background: transparent;
    border: 1px solid #d1a54a;
    color: inherit;
}

@media (max-width: 600px) {
    .backup-reminder-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- توحيد تعويض شريط التنقل السفلي الثابت (إصلاح الفراغ الكبير قبل/بعد الفوتر) ---
   كانت الحشوة السفلية مكدسة على ثلاث طبقات متداخلة (body + .main-content + .page.active
   عبر عدة قواعد متفرقة أعلاه، آخر قيمها: 78 + 96 + 78 بكسل + هامش الأمان ثلاث مرات)
   فتتجمع إلى ~350 بكسل فراغ ميت بين محتوى الصفحة والفوتر وشريط التنقل.
   طبقة واحدة على body تكفي لإبعاد كل المحتوى (بما فيه الفوتر) عن الشريط الثابت
   (ارتفاعه ~68px + هامش الأمان). هذه القاعدة الأخيرة في الملف فهي الحاسمة. */
@media (max-width: 900px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }

    .main-content {
        padding-bottom: 0 !important;
    }

    .page.active {
        padding-bottom: 1rem !important;
    }
}

/* --- تصنيف ألوان الثيم بمجموعات + فلتر فاتح/داكن --- */
.theme-choice-grid--grouped {
    display: block;
}

.theme-filter-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-muted);
    width: fit-content;
}

.theme-filter-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    cursor: pointer;
}

.theme-filter-btn.active {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
}

.theme-group {
    margin-bottom: 1.1rem;
}

.theme-group-title {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 0.35rem;
}

.theme-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
    gap: 0.55rem;
}

/* --- زر «فاجئني» العائم (الصفحة الرئيسية) + بطاقة الثيم المقترح للتخصص --- */
.theme-surprise-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
    box-shadow: 0 12px 28px var(--theme-focus-ring), 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 4500;
}

.theme-surprise-fab.is-visible {
    display: flex;
}

.theme-surprise-fab:active {
    transform: scale(0.94);
}

@keyframes themeSurpriseRoll {
    to { transform: rotate(360deg); }
}

.theme-surprise-fab.is-rolling .theme-surprise-icon {
    display: inline-block;
    animation: themeSurpriseRoll 0.5s ease;
}

.theme-surprise-bubble {
    /* بجانب الزر (باتجاه المحتوى) — كانت فوقه فتصطدم بزر المساعدة */
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background: var(--card-background);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

html[dir="ltr"] .theme-surprise-bubble {
    left: auto;
    right: calc(100% + 10px);
}

@media (max-width: 900px) {
    .theme-surprise-fab {
        bottom: calc(88px + env(safe-area-inset-bottom));
        left: 14px;
    }
}

html[dir="ltr"] .theme-surprise-fab {
    left: auto;
    right: 20px;
}

@media (max-width: 900px) {
    html[dir="ltr"] .theme-surprise-fab {
        left: auto;
        right: 14px;
    }
}

.theme-suggest-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    border: 1.5px dashed var(--primary-soft);
    border-radius: 12px;
    background: var(--surface-muted);
}

.theme-suggest-swatch {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.theme-suggest-text {
    flex: 1;
    font-size: 0.92rem;
}

.theme-suggest-apply {
    padding: 0.35rem 1rem;
    white-space: nowrap;
}

/* --- لوحة انطلاق الصفحة الرئيسية: زر تقرير جديد + بادج النسخ + آخر تقاريري --- */
.home-new-report-btn {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1rem;
    padding: 1rem 1.3rem;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
    box-shadow: 0 14px 30px var(--theme-focus-ring);
    text-align: right;
}

.home-new-report-btn:active {
    transform: scale(0.985);
}

.home-new-report-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.5rem;
}

.home-new-report-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.home-new-report-text strong {
    font-size: 1.15rem;
}

.home-new-report-text small {
    font-size: 0.85rem;
    opacity: 0.88;
}

.home-backup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

#home .cards-container .home-card-link {
    cursor: pointer;
}

#home .cards-container .home-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--theme-focus-ring);
}

.home-recent-panel {
    border-radius: var(--radius-lg, 16px);
    background: var(--card-background, #ffffff);
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 23, 42, 0.08));
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.home-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.home-recent-head h3 {
    margin: 0;
    font-size: 1.02rem;
}

.home-recent-all {
    font-size: 0.82rem;
    color: var(--primary-color);
    text-decoration: none;
    white-space: nowrap;
}

.home-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.6rem 0.15rem;
    border-bottom: 1px dashed var(--border-color);
    cursor: pointer;
}

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

.home-recent-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.home-recent-main strong {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-recent-main small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.home-recent-number {
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-color);
}

/* --- وضع الثيم التلقائي نهار/ليل --- */
.theme-mode-card {
    margin-bottom: 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-background);
}

.theme-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.theme-mode-label {
    font-weight: 700;
    font-size: 0.95rem;
}

.theme-mode-tabs {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.22rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-muted);
}

.theme-mode-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.3rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
}

.theme-mode-tab.active {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
}

.theme-mode-auto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-color);
}

.theme-mode-select {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 700;
    flex: 1 1 160px;
}

.theme-mode-select select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-background);
    color: var(--text-primary);
    font: inherit;
}

.theme-mode-auto small {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- زر المساعدة العائم + صفحة المساعدة --- */
.help-fab {
    /* دائرة «تحتاج مساعدة؟» بأسلوب فقاعات الدردشة — العلامة فوق والكلمة داخل الدائرة */
    position: fixed;
    bottom: 112px;
    left: 24px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.4rem;
    font-family: inherit;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
    box-shadow: 0 10px 24px var(--theme-focus-ring), 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 4500;
}

.help-fab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.help-fab-label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    max-width: 62px;
    white-space: normal;
}

.help-fab.is-visible {
    display: flex;
}

.help-fab:active {
    transform: scale(0.94);
}

@media (max-width: 900px) {
    .help-fab {
        bottom: calc(178px + env(safe-area-inset-bottom));
        left: 18px;
    }
}

html[dir="ltr"] .help-fab {
    left: auto;
    right: 24px;
}

@media (max-width: 900px) {
    html[dir="ltr"] .help-fab {
        left: auto;
        right: 18px;
    }
}

.help-intro {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 12px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.92rem;
}

.help-topic ul {
    margin: 0;
    padding: 0 1.1rem 0 0;
    list-style: none;
}

.help-topic li {
    position: relative;
    padding: 0.45rem 0.9rem 0.45rem 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.help-topic li::before {
    content: "•";
    position: absolute;
    right: 0;
    color: var(--primary-color);
    font-weight: 900;
}

html[dir="ltr"] .help-topic ul {
    padding: 0 0 0 1.1rem;
}

html[dir="ltr"] .help-topic li {
    padding: 0.45rem 0 0.45rem 0.9rem;
}

html[dir="ltr"] .help-topic li::before {
    right: auto;
    left: 0;
}

/* --- حجم الخط: تكبير للشاشة فقط (الطباعة محمية بـ @media screen) --- */
@media screen {
    html[data-font-scale="large"] body {
        zoom: 1.1;
    }

    html[data-font-scale="xlarge"] body {
        zoom: 1.2;
    }

    html[data-font-scale="small"] body {
        zoom: 0.92;
    }

    html[data-font-scale="xsmall"] body {
        zoom: 0.85;
    }

    html[data-font-scale="xxsmall"] body {
        zoom: 0.78;
    }
}

.font-scale-hint {
    display: block;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border-color);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* --- بطاقة «لوّن بنفسك» --- */
.custom-color-input {
    width: 52px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: none;
    cursor: pointer;
}

.custom-color-input::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.custom-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

/* عناوين خطوات موضوع النقل في المساعدة */
.help-migrate-intro {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface-muted);
    border-radius: 10px;
    line-height: 1.8;
}

.help-step-title {
    margin: 0.8rem 0 0.2rem;
    font-size: 0.95rem;
    color: var(--primary-color);
}

/* زر الاسترجاع المباشر في قائمة النسخ المحفوظة */
.backup-item .btn-restore-saved {
    background: var(--primary-color);
    color: var(--theme-on-primary);
    border: 1px solid var(--primary-color);
}

.backup-item .btn-restore-saved:hover {
    background: var(--primary-hover);
}

/* هزة تنبيه زر المساعدة (لمن لم يفتح المساعدة بعد) */
@keyframes helpFabNudge {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg) scale(1.08); }
    40% { transform: rotate(10deg) scale(1.08); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

.help-fab.is-nudging {
    animation: helpFabNudge 0.8s ease;
}

/* --- بوابة ترحيب المستخدم الجديد --- */
#welcomeGate {
    position: fixed;
    inset: 0;
    z-index: 99990; /* تحت شاشة اللوقو (999999) — تنكشف بعد اختفائها */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    background: linear-gradient(160deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
}

.welcome-gate-card {
    width: min(100%, 420px);
    background: var(--card-background, #ffffff);
    border-radius: 20px;
    padding: 1.6rem 1.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.welcome-gate-logo {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 18px;
}

.welcome-gate-card h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.welcome-gate-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.welcome-gate-register {
    font-size: 1.02rem;
    padding: 0.85rem 1rem;
}

.welcome-gate-restore {
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.7rem 1rem;
}

.welcome-gate-link {
    font-size: 0.85rem;
    color: var(--primary-color);
    text-decoration: underline;
}

.welcome-gate-skip {
    background: none;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.3rem;
}

/* --- المساعد الفوري (الرد الآلي) في صفحة المساعدة --- */
.assistant-panel {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm, 0 4px 14px rgba(15, 23, 42, 0.08));
}

.assistant-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.assistant-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
}

.assistant-titles {
    display: flex;
    flex-direction: column;
}

.assistant-titles strong {
    font-size: 1rem;
    color: var(--text-primary);
}

.assistant-titles small {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.assistant-messages {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem;
}

.assistant-msg {
    max-width: 85%;
    padding: 0.55rem 0.85rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.8;
    white-space: pre-line;
}

.assistant-msg.is-bot {
    background: var(--surface-muted);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-right-radius: 4px;
}

.assistant-msg.is-user {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary);
    align-self: flex-end;
    border-bottom-left-radius: 4px;
}

.assistant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.assistant-chip {
    border: 1px solid var(--primary-soft);
    background: var(--primary-light);
    color: var(--primary-color);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
}

.assistant-chip:hover {
    background: var(--primary-soft);
    color: var(--theme-on-primary);
}

.assistant-input-row {
    display: flex;
    gap: 0.5rem;
}

.assistant-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-background);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
}

.assistant-send {
    padding: 0.6rem 1.1rem;
    white-space: nowrap;
}

.assistant-contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-color);
}

.assistant-contact-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    flex-basis: 100%;
}

.assistant-contact-whatsapp,
.assistant-contact-email {
    border: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    cursor: pointer;
}

.assistant-contact-whatsapp {
    background: #25d366;
    color: #ffffff;
}

.assistant-contact-email {
    background: var(--surface-muted);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@keyframes assistantContactPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 6px var(--theme-focus-ring); }
}

.assistant-contact-row.is-highlighted {
    animation: assistantContactPulse 1.2s ease 2;
}

/* ===== تذكير هدف الشهر (الرئيسية) ===== */
.home-target-nudge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    color: #92400e;
    border-radius: 12px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    animation: targetNudgeIn 0.4s ease;
}
.home-target-nudge:hover { background: #fef3c7; }
.home-target-nudge-text { flex: 1; }
.home-target-nudge-close {
    background: none;
    border: none;
    color: #b45309;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    line-height: 1;
}
.home-target-nudge-close:hover { background: #fde68a; }
@keyframes targetNudgeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ===== البحث الشامل (الرئيسية) ===== */
.home-search-wrap { position: relative; margin-bottom: 1rem; }
.home-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.97rem;
    font-family: inherit;
    background: var(--card-background, #fff);
    color: var(--text-primary);
}
.home-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.home-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
}
.home-search-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
}
.home-search-item:last-child { border-bottom: none; }
.home-search-item:hover { background: rgba(37, 99, 235, 0.07); }
.home-search-item strong { font-size: 0.93rem; }
.home-search-item small { color: var(--text-secondary); font-size: 0.8rem; }
.home-search-empty {
    padding: 0.9rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== البحث داخل سجل التقارير ===== */
.report-log-search {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    margin-top: 0.6rem;
    background: var(--card-background, #fff);
    color: var(--text-primary);
}
.report-log-search:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ===== اقتراح المتابعة الذكية (صفحة إنشاء تقرير) ===== */
.followup-panel {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
    animation: targetNudgeIn 0.4s ease;
}
.followup-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
    color: #1e40af;
    margin-bottom: 0.7rem;
    position: relative;
    padding-left: 1.8rem;
}
.followup-head strong { font-size: 0.98rem; }
.followup-head span { font-size: 0.82rem; color: #3b82f6; }
.followup-close {
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    border: none;
    color: #60a5fa;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
}
.followup-close:hover { background: #dbeafe; color: #1d4ed8; }
.followup-list { display: flex; flex-direction: column; gap: 0.5rem; }
.followup-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: right;
    background: var(--card-background, #fff);
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.followup-chip:hover { border-color: #2563eb; transform: translateY(-1px); }
.followup-chip strong { font-size: 0.92rem; }
.followup-chip small { color: var(--text-secondary); font-size: 0.8rem; }

/* ===== الثيمات الداكنة: المكونات الجديدة ===== */
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .home-target-nudge {
    background: rgba(251, 191, 36, 0.13);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fcd34d;
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .home-target-nudge:hover {
    background: rgba(251, 191, 36, 0.2);
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .home-target-nudge-close {
    color: #fbbf24;
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .home-target-nudge-close:hover {
    background: rgba(251, 191, 36, 0.25);
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .followup-panel {
    background: rgba(59, 130, 246, 0.13);
    border-color: rgba(96, 165, 250, 0.4);
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .followup-head {
    color: #93c5fd;
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .followup-head span {
    color: #60a5fa;
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .followup-chip {
    border-color: rgba(96, 165, 250, 0.4);
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .followup-close:hover {
    background: rgba(96, 165, 250, 0.2);
    color: #bfdbfe;
}
:root:is([data-theme="graphite"], [data-theme="midnight"], [data-theme="navy"], [data-theme="charcoal"], [data-theme="slate"], [data-theme="burgundy"], [data-theme="onyx"], [data-theme="pine"], [data-theme="espresso"]) .home-search-item:hover {
    background: rgba(96, 165, 250, 0.15);
}

/* ===== شريحة «كرر آخر تقرير» ===== */
.repeat-last-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}
.repeat-last-btn {
    flex: 1;
    display: block;
    text-align: right;
    background: var(--surface-muted, #f9fafb);
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.repeat-last-btn:hover {
    border-color: var(--primary-color, #2563eb);
    background: var(--card-background, #fff);
}
.repeat-last-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
}
.repeat-last-close:hover { background: var(--surface-muted, #f3f4f6); }

/* صف نغمة الإشعار */
.notify-sound-row { display: flex; gap: 0.5rem; align-items: center; }
.notify-sound-row select { flex: 1; }
.notify-sound-row .btn { white-space: nowrap; }

/* صف «عريض» لخيار خط الواجهة */
.ui-font-bold-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    font-size: 0.92rem;
    cursor: pointer;
}
.ui-font-bold-row input { width: auto; cursor: pointer; }

/* ===== حارس التخزين والأرشفة ===== */
.storage-usage-panel { margin-bottom: 1.1rem; }
.storage-usage-bar {
    height: 14px;
    background: var(--surface-muted, #f3f4f6);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}
.storage-usage-fill {
    height: 100%;
    width: 0;
    background: #22c55e;
    border-radius: 999px;
    transition: width 0.5s ease, background 0.3s ease;
}
.storage-usage-fill.is-warn { background: #f59e0b; }
.storage-usage-fill.is-danger { background: #ef4444; }
.storage-usage-label {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}
.archive-row { display: flex; gap: 0.5rem; align-items: center; }
.archive-row select { flex: 1; }
.archive-row .btn { white-space: nowrap; }
/* زر «حسّن صياغتي» */
.polish-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    background: var(--primary-light, #eff6ff);
    border: 1.5px solid var(--primary-soft, #93c5fd);
    color: var(--primary-color, #2563eb);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.polish-btn:hover { transform: translateY(-1px); }
.polish-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* عناوين الأقسام داخل الاعدادات العامة */
.settings-subhead {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1.4rem 0 0.8rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--primary-light, #eff6ff);
    color: var(--primary-color, #2563eb);
    font-size: 1rem;
}
.settings-subhead:first-child { margin-top: 0.2rem; }

/* حقول الوقت تبقى بالاتجاه العالمي (ساعات:دقائق من اليسار) حتى في الواجهة العربية */
input[type="time"] {
    direction: ltr;
}

/* عداد أسطر ملاحظات التقرير الفني */
.tech-notes-counter {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.tech-notes-counter.is-full {
    color: #dc2626;
    font-weight: 700;
}

/* تبويب التقارير الفنية: الموقع والموضوع بصفوف كاملة العرض — متناسقة مع صف
   الرقم/التاريخ/الوقت. المعرف #reports-list ضروري ليغلب قواعد الشبكة العامة. */
.registry-details.registry-full-row,
#reports-list .registry-details.registry-full-row {
    grid-template-columns: 1fr;
    margin-top: 0.4rem;
}
.registry-full-field {
    width: 100%;
}
.registry-full-field .registry-detail-value {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* موبايل: منع انزلاق الصفحة يمين/يسار أثناء الكتابة (ملاحظة القروب 1.34) —
   أي عنصر يتجاوز العرض كان يخلي الصفحة كلها تتحرك مع حركة مؤشر الكتابة */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    .quick-create-form .form-row,
    .quick-create-form .card-body {
        min-width: 0;
    }
    .quick-create-form .input-pill,
    .quick-create-form .large-textarea {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* المساعد بالهاتف: خانة السؤال أكبر وزر الإرسال ما يغطيها (ملاحظة القروب).
   !important ضروري لتجاوز قاعدة الموبايل العامة (input 44px/14px !important). */
.assistant-input {
    min-height: 46px;
}
.assistant-send {
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .assistant-input {
        min-height: 54px !important;
        font-size: 16px !important;
    }
    .assistant-input-row {
        gap: 0.4rem;
    }
    .assistant-send {
        min-width: 74px;
        padding: 0.6rem 0.8rem;
    }
}

/* جذر اهتزاز الكتابة بالآيفون: سفاري يعمل زوم تلقائي على أي حقل خطه أقل من
   16px فتنزاح الصفحة يمين/يسار مع الكتابة — حقول نموذج التقرير والمساعد
   تثبت على 16px فما يصير زوم أصلًا. */
@media (max-width: 900px) {
    .quick-create-form input,
    .quick-create-form textarea,
    .quick-create-form select,
    #reportForm input,
    #reportForm textarea,
    #reportForm select {
        font-size: 16px !important;
    }
}

/* زر إرسال المساعد: مستثنى من قاعدة الموبايل «كل الأزرار بعرض 100%» —
   كانت تخليه يبلع الصف وخانة السؤال تختفي (ملاحظة القروب بالآيفون) */
.assistant-input-row {
    flex-wrap: nowrap;
}
.assistant-input-row .assistant-send {
    width: auto !important;
    flex: 0 0 auto !important;
}
.assistant-input-row .assistant-input {
    flex: 1 1 auto !important;
    width: auto !important;
}

/* ===== صفحة المساعدة: شبكة البطاقات والأدلة ===== */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.7rem;
    margin: 1rem 0 1.2rem;
}
.help-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.6rem 0.85rem;
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.help-card:hover { transform: translateY(-2px); border-color: var(--primary-color); }
.help-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 6px 18px var(--theme-focus-ring, rgba(37, 99, 235, 0.18));
}
.help-card-icon { font-size: 1.9rem; line-height: 1; }
.help-card strong { font-size: 0.95rem; }
.help-card small { color: var(--text-secondary); font-size: 0.76rem; }

.help-guide {
    background: var(--card-background, #fff);
    border: 1.5px solid var(--primary-soft, #bfdbfe);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
    animation: targetNudgeIn 0.35s ease;
}
.help-guide-title {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-light, #eff6ff);
    padding-bottom: 0.5rem;
}
.help-step {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    line-height: 1.9;
}
.help-step-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color, #2563eb);
    color: var(--theme-on-primary, #fff);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}
.help-tip {
    background: var(--surface-muted, #f9fafb);
    border-right: 3px solid var(--primary-color, #2563eb);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.9;
}

/* مجسمات الأزرار: توري المستخدم شكل الزر الفعلي بثيمه الحالي */
.mock-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    color: var(--theme-on-primary, #fff);
    border-radius: 8px;
    padding: 0.15rem 0.7rem;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 2px 6px var(--theme-focus-ring, rgba(37, 99, 235, 0.2));
}
.mock-chip {
    display: inline-block;
    background: var(--primary-light, #eff6ff);
    color: var(--primary-color, #2563eb);
    border: 1px solid var(--primary-soft, #bfdbfe);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== المساعد الفوري — تنظيم v2 ===== */
.assistant-panel {
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.assistant-head {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    padding: 0.85rem 1rem;
    margin: 0;
}
.assistant-head .assistant-avatar {
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.45);
}
.assistant-titles strong { color: var(--theme-on-primary, #fff); }
.assistant-titles small { color: var(--theme-on-primary, #fff); opacity: 0.85; }
.assistant-messages {
    margin: 0.85rem 1rem 0;
    padding: 0.4rem;
    max-height: 280px;
}
.assistant-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 0;
    border-top: 1px dashed var(--border-color);
}
.assistant-chips-label {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.assistant-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    min-height: 44px;
    line-height: 1.5;
}
.assistant-chip-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-background, #fff);
    border-radius: 8px;
    font-size: 1rem;
}
.assistant-chip-text { flex: 1; }
.assistant-input-row {
    padding: 0 1rem 0.9rem;
    margin: 0.75rem 0 0;
}
.assistant-contact-row {
    justify-content: center;
    padding: 0.75rem 1rem 0.95rem;
    margin: 0;
    background: var(--surface-muted, #f9fafb);
    border-top: 1px solid var(--border-color);
}

/* ===== نموذج إنشاء التقرير — تنظيم v2 (نفس روح صفحة المساعدة) ===== */
/* ترويسات البطاقات بتدرج الثيم + ترقيم خطوات تلقائي يتكيف مع كل تخصص
   (البطاقات المخفية لتخصص معين لا تدخل بالعد) */
.quick-create-form {
    counter-reset: createStep;
}
.quick-create-form .card-form {
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-background, #fff);
    box-shadow: var(--shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.06));
    margin-bottom: 1.1rem;
}
.quick-create-form .card-form > .card-header {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    color: var(--theme-on-primary, #fff);
    border-bottom: 0;
    font-size: 1rem;
    padding: 0.8rem 1rem;
}
.quick-create-form .card-form > .card-header::before {
    counter-increment: createStep;
    content: counter(createStep, arabic-indic);
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 700;
}
.quick-create-form .card-form > .card-header .card-icon {
    font-size: 1.15rem;
}
/* زر الحفظ: بارز بتدرج الثيم وبعرض مريح */
#quickSaveContainer .btn {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    color: var(--theme-on-primary, #fff);
    border: 0;
    border-radius: 14px;
    min-height: 56px;
    min-width: min(420px, 100%);
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 10px 24px var(--theme-focus-ring, rgba(37, 99, 235, 0.25));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#quickSaveContainer .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px var(--theme-focus-ring, rgba(37, 99, 235, 0.3));
}

/* ===== الإعدادات — تنظيم v2 (نفس لغة المساعدة والنموذج) ===== */
/* ينطبق على كل أكورديونات الإعدادات وصفحاتها الفرعية (النسخ الاحتياطية وغيرها) */
.settings-accordion-item {
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-background, #fff);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.05));
    overflow: hidden;
    margin-bottom: 0.85rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.settings-accordion-item:hover {
    border-color: var(--primary-soft, #bfdbfe);
}
.settings-accordion-header {
    padding: 0.85rem 1rem;
    gap: 0.75rem;
}
.settings-nav-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light, #eff6ff);
    color: var(--primary-color, #2563eb);
    border-radius: 12px;
    font-size: 1.25rem;
}
/* العنصر المفتوح: ترويسته بتدرج الثيم — مثل خطوات نموذج التقرير */
.settings-accordion-item.active > .settings-accordion-header {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
}
.settings-accordion-item.active > .settings-accordion-header .settings-accordion-title strong {
    color: var(--theme-on-primary, #fff);
}
.settings-accordion-item.active > .settings-accordion-header .settings-accordion-title small {
    color: var(--theme-on-primary, #fff);
    opacity: 0.85;
}
.settings-accordion-item.active > .settings-accordion-header .settings-nav-icon {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--theme-on-primary, #fff);
}
.settings-accordion-item.active > .settings-accordion-header .settings-accordion-chevron {
    color: var(--theme-on-primary, #fff);
    opacity: 0.9;
}

/* بطاقات الإجراءات (اختصارات النسخ/النماذج): نفس روح بطاقات المساعدة */
.settings-action-card {
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 6px 18px var(--theme-focus-ring, rgba(37, 99, 235, 0.15));
}
.settings-action-card .settings-action-icon {
    font-size: 1.6rem;
}

/* ===== سجل التقارير + التقرير الشهري — تنظيم v2 ===== */
/* عنوان الصفحة: شريط بتدرج الثيم مثل بقية الصفحات */
.monthly-report-title {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    color: var(--theme-on-primary, #fff);
    border-radius: 16px;
    padding: 1.3rem 1rem;
    margin: 0.75rem auto 1.5rem;
    max-width: calc(var(--content-max-width) - 2rem);
    box-shadow: 0 8px 22px var(--theme-focus-ring, rgba(37, 99, 235, 0.2));
}
.monthly-report-title h1 {
    color: var(--theme-on-primary, #fff);
}

/* لوحة الفلاتر: بطاقة موحدة مثل بطاقات الإعدادات */
.report-log-filter-panel {
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.05));
    padding: 0.9rem 1rem;
}

/* بطاقات التقارير: نفس روح بطاقات المساعدة */
#reports-list .registry-item,
.monthly-record {
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.05));
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#reports-list .registry-item:hover,
.monthly-record:hover {
    transform: translateY(-2px);
    border-color: var(--primary-soft, #bfdbfe);
    box-shadow: 0 6px 18px var(--theme-focus-ring, rgba(37, 99, 235, 0.12));
}

/* حقول البطاقة (الرقم/الموقع/التاريخ...): تتلون مع الثيم بدل الأزرق الثابت */
.registry-detail-field {
    background: var(--primary-light, #eff6ff);
    border: 1px solid var(--primary-soft, #bfdbfe);
}
.registry-detail-label {
    color: var(--primary-color, #2563eb);
}

/* ===== لوحة «إنجازي» ===== */
.perf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: perfFadeIn 0.2s ease;
}
@keyframes perfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.perf-panel {
    width: min(440px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--card-background, #fff);
    border-radius: 20px;
    padding: 1rem 1.2rem 1.2rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: perfRise 0.25s ease;
}
@keyframes perfRise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.perf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}
.perf-close {
    background: var(--surface-muted, #f3f4f6);
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    color: var(--text-secondary);
}
.perf-ring-wrap {
    position: relative;
    width: 150px;
    margin: 0.4rem auto;
}
.perf-ring { width: 150px; height: 150px; transform: rotate(-90deg); }
.perf-ring-track {
    fill: none;
    stroke: var(--surface-muted, #eef2f7);
    stroke-width: 12;
}
.perf-ring-fill {
    fill: none;
    stroke: var(--primary-color, #2563eb);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.25, 0.8, 0.35, 1);
}
.perf-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}
.perf-percent { font-size: 1.9rem; font-weight: 700; color: var(--primary-color); }
.perf-ring-center small { color: var(--text-secondary); font-size: 0.75rem; }
.perf-sentence {
    text-align: center;
    font-weight: 700;
    margin: 0.4rem 0 0.8rem;
    line-height: 1.8;
}
.perf-quick-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.perf-quick {
    background: var(--primary-light, #eff6ff);
    border: 1px solid var(--primary-soft, #bfdbfe);
    border-radius: 10px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.perf-quick strong { font-size: 1.15rem; color: var(--primary-color); }
.perf-quick small { font-size: 0.72rem; color: var(--text-secondary); }
.perf-efficiency { text-align: center; margin-bottom: 0.8rem; font-size: 0.9rem; }
.perf-trend.up { color: #16a34a; font-weight: 700; }
.perf-trend.down { color: #dc2626; font-weight: 700; }
.perf-trend.flat { color: var(--text-secondary); font-weight: 700; }
.perf-days-title { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
.perf-days-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.9rem; }
.perf-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--surface-muted, #e5e7eb);
}
.perf-dot.has { background: var(--primary-color, #2563eb); }
.perf-dot.today { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.perf-dot.future { opacity: 0.35; }
.perf-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.perf-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.2rem;
    border-radius: 12px;
    text-align: center;
}
.perf-badge span { font-size: 1.4rem; }
.perf-badge small { font-size: 0.68rem; line-height: 1.4; }
.perf-badge.earned {
    background: var(--primary-light, #eff6ff);
    border: 1.5px solid var(--primary-soft, #bfdbfe);
    color: var(--primary-color);
    font-weight: 700;
}
.perf-badge.locked {
    background: var(--surface-muted, #f3f4f6);
    border: 1.5px dashed var(--border-color);
    color: var(--text-secondary);
    opacity: 0.75;
}
.perf-actions { display: flex; align-items: center; gap: 0.75rem; }
.perf-actions .perf-share {
    flex: 1;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary, #fff);
    border: 0;
    min-height: 46px;
    border-radius: 12px;
}
.perf-log-link {
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* البطاقات الحية بالرئيسية */
.card-progress {
    height: 7px;
    background: var(--surface-muted, #eef2f7);
    border-radius: 999px;
    margin-top: 0.55rem;
    overflow: hidden;
}
.card-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    border-radius: 999px;
    transition: width 0.9s ease;
}
.card-trend {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.card-trend.up { color: #16a34a; }
.card-trend.down { color: #dc2626; }
.card-trend.flat { color: var(--text-secondary); }

/* لوحة إنجازي: أعمدة شهور السنة (عرض السنة) */
.perf-month-bars {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
    height: 76px;
    margin-bottom: 0.9rem;
}
.perf-month-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 2px;
}
.perf-month-col small { font-size: 0.62rem; color: var(--text-secondary); }
.perf-month-bar {
    width: 100%;
    min-height: 3px;
    background: linear-gradient(180deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    border-radius: 4px 4px 0 0;
}
.perf-month-col.current .perf-month-bar { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.perf-month-col.future .perf-month-bar { opacity: 0.25; }

/* ===== لمسات الحيوية ===== */
/* انتقال ناعم عند فتح أي صفحة */
.page.active {
    animation: pageEnter 0.28s cubic-bezier(0.25, 0.8, 0.35, 1);
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
/* إحساس الضغط على الأزرار */
.btn:active,
.btn-toggle:active,
.help-card:active,
.settings-accordion-header:active,
.assistant-chip:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

/* زر تحديد موقعي */
.my-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    background: var(--primary-light, #eff6ff);
    border: 1.5px dashed var(--primary-soft, #93c5fd);
    color: var(--primary-color, #2563eb);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
}
.my-location-btn:disabled { opacity: 0.7; cursor: wait; }

/* ===== صفحة إحصائياتي ===== */
.stats-summary-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.stats-card {
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.05));
}
.stats-card h3 {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-light, #eff6ff);
    padding-bottom: 0.45rem;
}
.stats-months {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    align-items: end;
    height: 130px;
}
.stats-month-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 3px;
}
.stats-month-col strong { font-size: 0.7rem; color: var(--primary-color); }
.stats-month-col small { font-size: 0.6rem; color: var(--text-secondary); }
.stats-month-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    border-radius: 5px 5px 0 0;
}
.stats-month-col.current .stats-month-bar { outline: 2px solid var(--primary-color); outline-offset: 1px; }
.stats-month-col.future .stats-month-bar { opacity: 0.25; }
.stats-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}
.stats-bar-label {
    flex: 0 0 38%;
    font-size: 0.85rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stats-bar-track {
    flex: 1;
    height: 12px;
    background: var(--surface-muted, #eef2f7);
    border-radius: 999px;
    overflow: hidden;
}
.stats-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    border-radius: 999px;
    transition: width 0.8s ease;
}
.stats-bar-count { flex: 0 0 auto; color: var(--primary-color); font-size: 0.9rem; }
.stats-empty { color: var(--text-secondary); text-align: center; padding: 0.5rem; }
@media (max-width: 600px) {
    .stats-summary-row { grid-template-columns: repeat(3, 1fr); }
    .stats-bar-label { flex-basis: 45%; }
}

/* النسخة السحابية */
.cloud-code-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--primary-light, #eff6ff);
    border: 1.5px dashed var(--primary-soft, #93c5fd);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
}
.cloud-code-box strong {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: var(--primary-color);
    font-family: ui-monospace, Menlo, monospace;
}
.cloud-code-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 700; }
.cloud-last-line { font-size: 0.82rem; color: var(--text-secondary); margin: 0.4rem 0 0.8rem; }
.cloud-restore-box { border-top: 1px dashed var(--border-color); padding-top: 0.8rem; }
.cloud-restore-row { display: flex; gap: 0.5rem; margin-top: 0.35rem; flex-wrap: nowrap; }
/* #backup ضرورية: قاعدة «كل أزرار صفحة النسخ بعرض كامل» معرفة بمعرف أقوى */
.cloud-restore-row input,
#backup .cloud-restore-row input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 46px;
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.cloud-restore-row .btn,
#backup .cloud-restore-row .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px;
    white-space: nowrap;
}
.cloud-status { margin-top: 0.6rem; font-size: 0.88rem; font-weight: 700; min-height: 1.2em; }
.cloud-status.ok { color: #16a34a; }
.cloud-status.err { color: #dc2626; }


/* ===== بوابة الترحيب v2 — بسيطة وواضحة بالهاتف ===== */
.welcome-gate-card.welcome-v2 {
    max-width: 420px;
    padding: 1.5rem 1.25rem 1.1rem;
    border-radius: 22px;
    text-align: right;
}
.welcome-v2 .welcome-hero {
    text-align: center;
    margin-bottom: 1.1rem;
}
.welcome-v2 .welcome-logo-ring {
    width: 84px;
    height: 84px;
    margin: 0 auto 0.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    box-shadow: 0 10px 26px var(--theme-focus-ring, rgba(37, 99, 235, 0.3));
}
.welcome-v2 .welcome-logo-ring img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}
.welcome-v2 h2 {
    font-size: 1.45rem;
    margin: 0 0 0.2rem;
    color: var(--text-primary);
}
.welcome-v2 .welcome-sub {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}
.welcome-choice {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    text-align: right;
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.65rem;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.welcome-choice:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
}
.welcome-choice-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light, #eff6ff);
    border-radius: 13px;
    font-size: 1.4rem;
}
.welcome-choice-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.welcome-choice-text strong { font-size: 1.02rem; }
.welcome-choice-text small { color: var(--text-secondary); font-size: 0.82rem; }
.welcome-choice-arrow { color: var(--text-secondary); font-size: 1.1rem; }
/* الخيار الرئيسي: بتدرج الثيم — أول ما تشوفه العين */
.welcome-choice.primary {
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    border: 0;
    box-shadow: 0 10px 24px var(--theme-focus-ring, rgba(37, 99, 235, 0.28));
}
.welcome-choice.primary .welcome-choice-text strong,
.welcome-choice.primary .welcome-choice-text small,
.welcome-choice.primary .welcome-choice-arrow {
    color: var(--theme-on-primary, #fff);
}
.welcome-choice.primary .welcome-choice-text small { opacity: 0.9; }
.welcome-choice.primary .welcome-choice-icon {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.45);
}
.welcome-steps {
    background: var(--surface-muted, #f8fafc);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    margin: 0.35rem 0 0.6rem;
}
.welcome-steps-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}
.welcome-steps-row {
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.welcome-mini-step {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.welcome-mini-step b {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color, #2563eb);
    color: var(--theme-on-primary, #fff);
    border-radius: 50%;
    font-size: 0.72rem;
}
.welcome-v2 .welcome-gate-skip {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.5rem;
    text-align: center;
}
@media (max-width: 480px) {
    .welcome-gate-card.welcome-v2 {
        max-width: none;
        width: calc(100% - 20px);
        padding: 1.25rem 1rem 0.9rem;
    }
    .welcome-choice-text strong { font-size: 1.05rem; }
    .welcome-choice { min-height: 72px; }
}

/* ===== مرفقات الملف الشخصي: بطاقتان منسقتان + معاينة كبيرة + زر حذف ===== */
.attachments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.75rem;
}
@media (max-width: 700px) {
    .attachments-grid { grid-template-columns: 1fr; }
}
.attachment-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}
.attachment-head {
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.attachment-pick-btn {
    width: 100%;
    border: 2px dashed var(--primary-color, #2563eb);
    background: transparent;
    color: var(--primary-color, #2563eb);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.attachment-pick-btn:hover { background: color-mix(in srgb, var(--primary-color, #2563eb) 8%, transparent); }
.attachment-pick-btn:active { transform: scale(0.98); }
.attachment-hint {
    color: var(--text-secondary, #6b7280);
    font-size: 0.78rem;
}
.file-preview-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.2rem;
    padding: 0.7rem;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 100%;
    min-height: 150px;
}
.file-preview-box .file-preview {
    display: block;
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    border: none;
    margin: 0;
}
.preview-delete-btn {
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.preview-delete-btn:hover { background: #fee2e2; }
.preview-delete-btn:active { transform: scale(0.96); }
/* الخلفية تبقى بيضاء حتى بالثيمات الداكنة — الشعارات الشفافة لازم تنشاف */
html[data-theme] .file-preview-box { background: #ffffff; }

/* ===== بطاقات الرئيسية: تنسيق موحد (رأس بصف واحد + رقم بالوسط + حبة الفرق) ===== */
.card { display: flex; flex-direction: column; }
.card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.card-head .card-icon {
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 1.3rem;
    flex: 0 0 auto;
}
.card-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.card-number,
.card-number.monthly-target,
.card-number.target-progress {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin: auto 0 0.35rem;
}
.card-percent {
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    margin: 0 0 0.35rem;
}
.card .card-progress {
    height: 10px;
    margin-top: 0.15rem;
}
.card .card-trend {
    align-self: center;
    margin-top: 0.6rem;
    padding: 0.28rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
}
.card .card-trend.up { background: #dcfce7; color: #15803d; }
.card .card-trend.down { background: #fee2e2; color: #b91c1c; }
.card .card-trend.flat { background: var(--surface-muted, #f1f5f9); color: var(--text-secondary); }

/* أرقام بطاقات الهدف: المنجز بارز والهدف أصغر (إصلاح وراثة حجم الخط للسبان) */
.card-number.monthly-target span:first-child,
.card-number.target-progress span:first-child {
    font-size: 2.4rem !important;
    font-weight: 800;
    color: var(--text-primary);
}
.card-number.monthly-target span:not(:first-child),
.card-number.target-progress span:not(:first-child) {
    font-size: 1.25rem !important;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
}

/* ===== منع تضخيم الخط التلقائي بأندرويد (Font Boosting) على مستوى التطبيق كله =====
   أندرويد يكبّر النصوص "الطويلة" تلقائيًا في WebView/كروم فتخرب التنسيقات
   (ظهرت ببوابة الترحيب). كانت الحماية مطبقة على القائمة السفلية فقط — الآن عامة. */
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* تحصين بوابة الترحيب للشاشات الضيقة */
.welcome-choice-text { min-width: 0; }
.welcome-choice-text strong,
.welcome-choice-text small { overflow-wrap: anywhere; }
.welcome-gate-card.welcome-v2 { max-height: 94vh; overflow-y: auto; }
@media (max-width: 400px) {
    .welcome-v2 h2 { font-size: 1.3rem; }
    .welcome-choice-text strong { font-size: 0.98rem; }
    .welcome-choice-text small { font-size: 0.78rem; }
    .welcome-choice { padding: 0.75rem 0.85rem; gap: 0.65rem; }
    .welcome-choice-icon { width: 42px; height: 42px; }
}

/* ===== العبارات الجاهزة للملاحظات ===== */
.snippet-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.45rem;
}
.snippet-chips-label { font-size: 0.95rem; }
.snippet-chip {
    border: 1px solid var(--border-color);
    background: var(--surface-muted, #f8fafc);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0.28rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}
.snippet-chip:hover { background: color-mix(in srgb, var(--primary-color, #2563eb) 10%, transparent); }
.snippet-chip:active { transform: scale(0.96); }
.snippet-manage-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.snippet-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
}
.snippet-manage-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.snippet-manage-delete {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    flex: 0 0 auto;
}
.snippet-manage-add { display: flex; gap: 0.5rem; }
.snippet-manage-add input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
}
.snippet-manage-add .btn { flex: 0 0 auto; width: auto !important; }

/* ===== تنبيه المتابعات المفتوحة (يشارك ستايل تنبيه الهدف الشهري) ===== */
.followup-nudge { cursor: pointer; }

/* ===== فلاتر السجل الإضافية: المحافظة + نوع التقرير ===== */
.report-log-extra-filters {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.report-log-extra-filters select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.65rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--card-background, #fff);
}

/* أزرار لوحة إنجازي: التصدير جنب المشاركة */
.perf-pdf { width: auto; }