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

.btn-share-report {
    background: linear-gradient(135deg, #1fa855 0%, #25d366 100%);
    color: white;
}

.btn-copy-report {
    background: #8b5cf6;
    color: white;
}

.site-memory-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--primary-light);
    border: 1px solid rgba(47, 94, 219, 0.18);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

/* تنبيه تكرار الأعطال (1.43): سطر داخل بطاقة «آخر زيارة» — لون تحذيري يقرأ على الفاتح والداكن */
.site-memory-info span.site-memory-recurring {
    display: block;
    margin-top: 0.15rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.14);
    border-right: 3px solid #f59e0b;
    /* اللون من متغير الثيم لا لون ثابت — يقرأ على الخمسين ثيمًا فاتحها وداكنها،
       وإشارة التحذير تأتي من الخلفية العنبرية والحد الجانبي */
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
}

.site-memory-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
    color: var(--theme-header-start);
}

.site-memory-title {
    font-size: 0.95rem;
}

.site-memory-info span {
    color: #334155;
}

.site-memory-copy-btn {
    align-self: flex-start;
    background: var(--theme-header-start);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}

.signature-pad-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

#signaturePadCanvas {
    width: 100%;
    height: auto;
    background: #fff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    touch-action: none;
    cursor: crosshair;
}

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

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

.signature-pad-save {
    background: var(--theme-header-start);
    color: #fff;
}

.signature-pad-clear {
    background: #f1f5f9;
    color: #334155;
}

.signature-pad-cancel {
    background: #fee2e2;
    color: #b91c1c;
}

/* ===== شارة حالة الإرسال في سجل التقارير ===== */
.share-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.76rem;
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}
.share-status-sent { background: #dcfce7; color: #166534; }
.share-status-stale { background: #fef3c7; color: #92400e; }
.share-status-none { background: var(--surface-muted, #f1f5f9); color: #64748b; font-weight: 600; }

.log-unsent-filter {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-background, #fff);
    color: var(--text-primary, #172033);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.log-unsent-filter.active {
    background: var(--theme-header-start, #2f5edb);
    border-color: var(--theme-header-start, #2f5edb);
    color: #fff;
}

/* ===== محرر التحديد على الصور ✏️ ===== */
.image-preview-annotate {
    position: absolute;
    /* زر الحذف الأحمر أعلى اليمين — التحديد بالأسفل حتى لا يتراكبا في RTL */
    bottom: 64px;
    right: 4px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-preview-annotate:active { transform: scale(0.92); }

#imageAnnotator {
    position: fixed;
    inset: 0;
    z-index: 120000;
    background: rgba(15, 23, 42, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
#imageAnnotator .annotator-panel {
    background: var(--card-background, #fff);
    border-radius: 18px;
    padding: 0.8rem;
    width: min(720px, 100%);
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
#imageAnnotator .annotator-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
#imageAnnotator .annotator-tools,
#imageAnnotator .annotator-edits {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
@media (max-width: 420px) {
    #imageAnnotator .annotator-tool,
    #imageAnnotator .annotator-undo,
    #imageAnnotator .annotator-reset {
        font-size: 0.72rem;
        padding: 0.28rem 0.55rem;
    }
    #imageAnnotator .annotator-color { width: 22px; height: 22px; }
}
#imageAnnotator .annotator-tool,
#imageAnnotator .annotator-undo,
#imageAnnotator .annotator-reset {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-muted, #f8fafc);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-primary, #172033);
}
#imageAnnotator .annotator-tool.active {
    background: var(--theme-header-start, #2f5edb);
    border-color: var(--theme-header-start, #2f5edb);
    color: #fff;
}
#imageAnnotator .annotator-colors {
    display: flex;
    gap: 0.35rem;
}
#imageAnnotator .annotator-color {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
}
#imageAnnotator .annotator-color.active {
    border-color: var(--text-primary, #172033);
    transform: scale(1.12);
}
#imageAnnotator .annotator-canvas-wrap {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border-radius: 12px;
    min-height: 160px;
    flex: 1 1 auto;
}
#imageAnnotator .annotator-canvas {
    max-width: 100%;
    max-height: 56vh;
    max-height: 56dvh;
    touch-action: none;
    cursor: crosshair;
    display: block;
}
#imageAnnotator .annotator-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex: 0 0 auto;
}
#imageAnnotator .annotator-cancel {
    background: var(--surface-muted, #f1f5f9);
    color: var(--text-primary, #334155);
}
body.annotator-open { overflow: hidden; }

/* ===== ألبوم الموقع 📸 ===== */
#siteAlbumOverlay {
    position: fixed;
    inset: 0;
    z-index: 12800;
    background: rgba(15, 23, 42, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
#siteAlbumOverlay .site-album-panel {
    background: var(--card-background, #fff);
    border-radius: 18px;
    width: min(760px, 100%);
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#siteAlbumOverlay .site-album-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
    color: #fff;
    font-size: 1rem;
}
#siteAlbumOverlay .site-album-close {
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
}
#siteAlbumOverlay .site-album-body {
    overflow-y: auto;
    padding: 0.9rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#siteAlbumOverlay .site-album-summary {
    margin: 0;
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 700;
}
#siteAlbumOverlay .site-album-group-head {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--text-primary, #172033);
    background: var(--primary-light, #eaf2ff);
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    margin-bottom: 0.6rem;
}
#siteAlbumOverlay .site-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
#siteAlbumOverlay .site-album-thumb {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 0;
    background: #fff;
    cursor: zoom-in;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#siteAlbumOverlay .site-album-thumb img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}
#siteAlbumOverlay .site-album-thumb small {
    padding: 3px 6px;
    font-size: 0.68rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#siteAlbumOverlay .site-album-empty,
#siteAlbumOverlay .site-album-loading {
    text-align: center;
    color: var(--text-secondary, #64748b);
    padding: 1.4rem 0.5rem;
}
.site-memory-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.site-memory-album-btn {
    background: #fff;
    color: var(--theme-header-start, #2f5edb);
    border: 1px solid var(--theme-header-start, #2f5edb);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}
.location-album-btn {
    background: #e0f2fe;
    color: #0c4a6e;
    border: 0;
    border-radius: 8px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 700;
}

/* ===== شريط استرجاع المسودة الصامتة ===== */
.draft-restore-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: #fef9c3;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.9rem;
}
.draft-restore-text {
    color: #92400e;
    font-weight: 700;
    font-size: 0.9rem;
}
.draft-restore-text small { font-weight: 600; opacity: 0.8; }
.draft-restore-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.draft-restore-actions .btn { padding: 0.4rem 1rem; font-size: 0.85rem; }
.draft-restore-dismiss {
    background: none;
    border: none;
    color: #92400e;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
}

.btn-share-report:disabled {
    background: #9ca3af;
}

.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.9rem auto 0;
}

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

/* شريط أقسام واحد بثلاثة عناصر (إعادة تصميم 2026-07-27) — بلغة التبويبات نفسها
   المستخدمة في صفحة إنشاء التقرير حتى يتناسق المظهر داخل التبويب المضمّن */
.autoreport-tabs {
    max-width: 800px;
    margin: 0 auto 0.85rem;
    padding: 0.35rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    border-radius: 12px;
    background: var(--surface-muted, #eef2f7);
}

.autoreport-tab {
    border: 0;
    border-radius: 9px;
    padding: 0.7rem 0.4rem;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-family: var(--app-font);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

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

/* «نسخ الشهري» ينقل لصفحة أخرى — يبقى بمظهر القسم مع محاذاة سليمة كرابط */
.autoreport-tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

    .monthly-filter-tabs,
    .report-log-filter-tabs,
    .report-log-scope-tabs,
    .monthly-scope-tabs {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* شريط أقسام التقارير التلقائية يبقى صفًا واحدًا حتى على الجوال (إعادة تصميم
       2026-07-27): تكديسه عموديًا كان يصنع ثلاث طبقات تنقّل فوق بعضها. */
    .autoreport-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.28rem;
    }

    .autoreport-tab {
        padding: 0.62rem 0.2rem;
        font-size: 0.8rem;
    }
}

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

/* ثلاثة تبويبات بعد نقل «النسخ» هنا (2026-07-27) — صف واحد لا ينكسر */
.page.active:has(.monthly-report-panel) .monthly-page-tabs {
    display: grid;
    grid-template-columns: repeat(3, 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: repeat(3, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .page.active:has(.monthly-report-panel) .monthly-page-tab {
        padding-inline: 0.25rem;
        font-size: 0.82rem;
    }

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

/* «لخّص واقترح توصية» 🤖 + صندوق التوصية المقترحة (1.39) */
.summarize-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    margin-inline-start: 0.4rem;
    background: #f5f3ff;
    border: 1.5px solid #c4b5fd;
    color: #6d28d9;
    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;
}
.summarize-btn:hover { transform: translateY(-1px); }
.summarize-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.summarize-rec {
    margin-top: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: #f5f3ff;
    border: 1.5px solid #ddd6fe;
    border-radius: 12px;
}
.summarize-rec-label { font-weight: 800; color: #6d28d9; font-size: 0.9rem; margin-bottom: 0.35rem; }
.summarize-rec-text { color: var(--text-primary); font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; }
.summarize-rec-copy {
    margin-top: 0.55rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
}
.summarize-rec-copy:active { transform: scale(0.96); }

/* عناوين الأقسام داخل الاعدادات العامة */
.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-year-compare { margin-bottom: 0.9rem; }
.perf-year-compare-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}
.perf-year-box {
    flex: 1;
    max-width: 130px;
    background: var(--card-background, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.perf-year-box strong { font-size: 1.3rem; color: var(--text-secondary); }
.perf-year-box small { font-size: 0.72rem; color: var(--text-secondary); }
.perf-year-box.current {
    background: var(--primary-light, #eff6ff);
    border-color: var(--primary-soft, #bfdbfe);
}
.perf-year-box.current strong { color: var(--primary-color); }
.perf-year-vs { font-size: 0.78rem; color: var(--text-secondary); font-weight: 700; }
.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; }

/* ===== إصلاح صفحة الثيمات على الهاتف =====
   قاعدة #settings .theme-choice-grid (شبكة عمودين للجوال) كانت تغلب وضع
   «--grouped» فتكبس بطاقات وضع الثيم وحجم الخط ولوّن بنفسك وتبويبات الفلترة
   في أعمدة 128px — نرجّع العرض المجمّع كتلًا كاملة العرض. */
#settings .theme-choice-grid.theme-choice-grid--grouped { display: block; }
@media (max-width: 700px) {
    /* السماح للوحة الثيمات بالانكماش داخل عمود الجوال بدل تجاوز الشاشة */
    .appearance-layout > * { min-width: 0; }
    .theme-settings-panel { min-width: 0; }
    .theme-mode-tabs { flex-wrap: wrap; justify-content: flex-start; row-gap: 0.35rem; }
    .theme-filter-tabs { max-width: 100%; flex-wrap: wrap; border-radius: 16px; }
}

/* حجم الخط: قائمة منسدلة بدل صف الأزرار (أنظف على الجوال) */
.font-scale-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--card-background, #fff);
    min-width: 150px;
}

/* بوابة الترحيب: إخفاء صندوق «الخطوات التالية» على الهاتف — يأكل طولًا بلا داعٍ */
@media (max-width: 700px) {
    .welcome-steps { display: none; }
}

/* ===== المساعد الفوري: بطاقتان — المحادثة أولًا ثم الأسئلة السريعة ===== */
.assistant-card {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem;
    margin-bottom: 0.9rem;
    background: var(--card-background, #fff);
}
.assistant-card-title {
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}
.assistant-chat-card .assistant-messages { margin-top: 0.7rem; }

/* ===== قفل التطبيق ===== */
#appLockGate {
    position: fixed;
    inset: 0;
    z-index: 999990; /* فوق كل شيء عدا سبلاش iOS (999999) فيكشفه تلاشي السبلاش */
    background: linear-gradient(160deg, var(--ios-splash-start, #2a52c9) 0%, var(--ios-splash-end, #1c3a95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
html.app-locked,
html.app-locked body {
    overflow: hidden !important;
}
.app-lock-card {
    width: 100%;
    max-width: 340px;
    background: var(--card-background, #fff);
    border-radius: 18px;
    padding: 1.8rem 1.5rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.app-lock-icon { font-size: 2.6rem; }
.app-lock-card h2 { margin: 0; font-size: 1.25rem; color: var(--text-primary, #172033); }
.app-lock-sub { margin: 0; font-size: 0.9rem; color: var(--text-secondary, #64748b); }
#appLockGateInput {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    padding: 0.6rem;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--input-background, #fff);
    color: var(--text-primary, #172033);
}
.app-lock-error { margin: 0; font-size: 0.85rem; color: #dc2626; font-weight: 700; }
.app-lock-card.is-shaking { animation: appLockShake 0.4s ease; }
@keyframes appLockShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    50% { transform: translateX(8px); }
    75% { transform: translateX(-5px); }
}
.app-lock-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.5rem;
}
.app-lock-code-row { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; }
.app-lock-code-row input { flex: 1; min-width: 0; }
.app-lock-status { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-secondary, #64748b); font-weight: 700; }

/* ===== قائمة الثيمات المخصصة: مربع اللون بجانب الاسم ===== */
.theme-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 340px;
}
.theme-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: var(--card-background, #fff);
    color: var(--text-primary, #172033);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.theme-dropdown-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.theme-dropdown-swatch {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.theme-dropdown-current {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-dropdown-chevron {
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.theme-dropdown-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 5000;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--card-background, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.theme-dropdown-group {
    padding: 0.5rem 0.6rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
}
.theme-dropdown-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #172033);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: right;
}
.theme-dropdown-option:hover,
.theme-dropdown-option.active {
    background: var(--primary-light, #eff6ff);
}
.theme-dropdown-option-label {
    flex: 1;
    text-align: right;
}
.theme-dropdown-check {
    visibility: hidden;
    color: var(--primary-color);
    font-weight: 800;
    flex-shrink: 0;
}
.theme-dropdown-option.active .theme-dropdown-check {
    visibility: visible;
}

/* ===== بوابة الترحيب v3: أنيميشن دخول متدرج + تسجيل سريع داخل البوابة ===== */
.welcome-v3 .welcome-hero {
    animation: welcomeRise 0.5s ease both;
}
.welcome-v3 .welcome-logo-ring {
    animation: welcomeLogoPulse 2.6s ease 0.9s infinite;
}
.welcome-v3 .welcome-choice {
    opacity: 0;
    animation: welcomeRise 0.45s ease forwards;
}
.welcome-v3 .welcome-steps,
.welcome-v3 .welcome-gate-skip {
    opacity: 0;
    animation: welcomeRise 0.45s ease forwards;
}
.welcome-v3 .welcome-choice.primary {
    animation: welcomeRise 0.45s ease forwards, welcomeGlow 2.2s ease 1.3s infinite;
}
@keyframes welcomeRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes welcomeLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes welcomeGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28), 0 10px 26px rgba(0, 0, 0, 0.18); }
}

/* ===== بوابة الترحيب v4: تهدئة التوهج + صف أيقونات بدل الصفوف الطويلة ===== */
.welcome-v4 .welcome-logo-ring {
    animation: none;
}
.welcome-v4 .welcome-choice.primary {
    animation: welcomeRise 0.45s ease forwards;
}
.welcome-icon-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
    opacity: 0;
    animation: welcomeRise 0.45s ease forwards;
}
.welcome-icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.7rem 0.35rem 0.6rem;
    border-radius: 14px;
    background: var(--card-background, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.welcome-icon-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1); }
.welcome-icon-tile:active { transform: scale(0.96); }
.welcome-icon-tile strong {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-primary, #172033);
}
.welcome-icon-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.15rem;
}
.wt-help .welcome-icon-bubble { background: #e0f2fe; }
.welcome-help-avatar svg {
    width: 100%;
    height: 100%;
    display: block;
}
.welcome-help-avatar {
    padding: 2px;
}
.assistant-avatar-kuwaiti svg {
    width: 34px;
    height: 34px;
    display: block;
}
.assistant-msg.is-thinking {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.assistant-msg.is-thinking svg {
    width: 30px;
    height: 30px;
    flex: none;
}

.help-title-avatar {
    display: inline-flex;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    padding: 3px;
    vertical-align: middle;
    margin-inline-start: 0.2rem;
}
.help-title-avatar svg {
    width: 100%;
    height: 100%;
}

/* ===== جولة المستخدم الجديد ===== */
#gsdTourOverlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
}
#gsdTourOverlay .tour-highlight {
    position: fixed;
    border-radius: 14px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    pointer-events: none;
}
#gsdTourOverlay .tour-bubble {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 18px;
    padding: 1.1rem 1.2rem 1rem;
    width: min(340px, calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
#gsdTourOverlay .tour-avatar {
    width: 64px;
    height: 64px;
}
#gsdTourOverlay .tour-avatar svg {
    width: 100%;
    height: 100%;
}
#gsdTourOverlay .tour-text {
    font-weight: 700;
    color: #1e293b;
    line-height: 1.7;
    font-size: 0.95rem;
}
#gsdTourOverlay .tour-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
#gsdTourOverlay .tour-skip {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.85rem;
    cursor: pointer;
}
body.tour-open {
    overflow: hidden;
}

/* ===== بطاقة «الجديد في الإصدار» ===== */
#gsdWhatsNew {
    position: fixed;
    inset: 0;
    z-index: 11500;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
#gsdWhatsNew .whatsnew-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.2rem;
    width: min(400px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    animation: welcomeRise 0.35s ease both;
}
#gsdWhatsNew .whatsnew-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.02rem;
}
#gsdWhatsNew .whatsnew-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-light, #eaf2ff);
    padding: 3px;
    flex: none;
}
#gsdWhatsNew .whatsnew-avatar svg {
    width: 100%;
    height: 100%;
}
#gsdWhatsNew .whatsnew-item {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    text-align: right;
}
#gsdWhatsNew .whatsnew-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex: none;
}
#gsdWhatsNew .whatsnew-item strong {
    display: block;
    font-size: 0.92rem;
    color: #1e293b;
}
#gsdWhatsNew .whatsnew-item small {
    color: #64748b;
    font-size: 0.78rem;
}
#gsdWhatsNew .whatsnew-close {
    margin-top: 0.3rem;
}
.wt-whatsapp .welcome-icon-bubble { background: #dcfce7; }
.wt-email .welcome-icon-bubble { background: #fef3c7; }
.wt-restore .welcome-icon-bubble { background: #ede9fe; }

/* وضع التسجيل: تختفي الخيارات ويظهر النموذج */
.welcome-v3.is-registering .welcome-choice,
.welcome-v3.is-registering .welcome-steps,
.welcome-v3.is-registering .welcome-icon-row,
.welcome-v3.is-registering .welcome-gate-skip {
    display: none;
}
.welcome-v3.is-celebrating .welcome-choice,
.welcome-v3.is-celebrating .welcome-steps,
.welcome-v3.is-celebrating .welcome-icon-row,
.welcome-v3.is-celebrating .welcome-gate-skip,
.welcome-v3.is-celebrating .welcome-quick-form {
    display: none;
}
.welcome-quick-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: right;
    animation: welcomeRise 0.35s ease both;
}
.welcome-quick-form[hidden],
.welcome-quick-success[hidden] {
    display: none;
}
.welcome-quick-head {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
}
.welcome-quick-head strong { font-size: 1.08rem; color: var(--text-primary, #172033); }
.welcome-quick-head small { font-size: 0.85rem; color: var(--text-secondary, #64748b); }
.welcome-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #172033);
}
.welcome-field input,
.welcome-field select {
    width: 100%;
    padding: 0.85rem 0.9rem;
    font-size: 16px !important; /* يمنع زوم iOS التلقائي عند التركيز (يغلب قاعدة الجوال 14px) */
    font-family: inherit;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--input-background, #fff);
    color: var(--text-primary, #172033);
}
.welcome-field input:focus,
.welcome-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(42, 82, 201, 0.16));
}
.welcome-field input.is-shaking { animation: appLockShake 0.4s ease; }
.welcome-quick-error {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #dc2626;
    text-align: center;
}
.welcome-quick-submit {
    padding: 0.9rem;
    font-size: 1.05rem;
    border-radius: 12px;
}
.welcome-quick-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.welcome-quick-back,
.welcome-quick-full {
    background: none;
    border: 0;
    padding: 0.3rem 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    text-decoration: none;
}
.welcome-quick-full { text-decoration: underline; }

/* الاحتفال بعد التسجيل */
.welcome-quick-success {
    position: relative;
    text-align: center;
    padding: 1.2rem 0.5rem;
    animation: welcomeRise 0.35s ease both;
}
.welcome-success-icon {
    font-size: 3rem;
    animation: welcomeSuccessPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.welcome-quick-success h3 { margin: 0.5rem 0 0.2rem; color: var(--text-primary, #172033); }
.welcome-success-sub { margin: 0; color: var(--text-secondary, #64748b); font-weight: 700; }
@keyframes welcomeSuccessPop {
    from { transform: scale(0.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.welcome-confetti {
    position: absolute;
    inset: -1rem 0 auto;
    height: 0;
    pointer-events: none;
}
.welcome-confetti i {
    position: absolute;
    top: 0;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: welcomeConfettiFall 1.6s ease-in forwards;
}
.welcome-confetti i:nth-child(1)  { left: 6%;  background: #ef4444; animation-delay: 0s; }
.welcome-confetti i:nth-child(2)  { left: 14%; background: #f59e0b; animation-delay: 0.12s; }
.welcome-confetti i:nth-child(3)  { left: 24%; background: #10b981; animation-delay: 0.05s; }
.welcome-confetti i:nth-child(4)  { left: 33%; background: #3b82f6; animation-delay: 0.2s; }
.welcome-confetti i:nth-child(5)  { left: 42%; background: #8b5cf6; animation-delay: 0.08s; }
.welcome-confetti i:nth-child(6)  { left: 51%; background: #ec4899; animation-delay: 0.16s; }
.welcome-confetti i:nth-child(7)  { left: 60%; background: #f59e0b; animation-delay: 0.02s; }
.welcome-confetti i:nth-child(8)  { left: 68%; background: #10b981; animation-delay: 0.22s; }
.welcome-confetti i:nth-child(9)  { left: 76%; background: #3b82f6; animation-delay: 0.1s; }
.welcome-confetti i:nth-child(10) { left: 84%; background: #ef4444; animation-delay: 0.18s; }
.welcome-confetti i:nth-child(11) { left: 91%; background: #8b5cf6; animation-delay: 0.06s; }
.welcome-confetti i:nth-child(12) { left: 97%; background: #ec4899; animation-delay: 0.14s; }
@keyframes welcomeConfettiFall {
    0% { opacity: 1; transform: translateY(-10px) rotate(0deg); }
    100% { opacity: 0; transform: translateY(240px) rotate(320deg); }
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .welcome-v3 .welcome-hero,
    .welcome-v3 .welcome-logo-ring,
    .welcome-v3 .welcome-choice,
    .welcome-v3 .welcome-choice.primary,
    .welcome-v3 .welcome-steps,
    .welcome-v3 .welcome-gate-skip,
    .welcome-quick-form,
    .welcome-quick-success,
    .welcome-success-icon,
    .welcome-confetti i {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ===== بوابة الترحيب: ضبط الهواتف الصغيرة (iPhone mini/Pro الصغير) ===== */
.welcome-gate-card.welcome-v3 {
    max-height: min(94vh, calc(100dvh - 1.2rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 480px) {
    #welcomeGate {
        padding: 0.7rem;
        padding-top: max(0.7rem, env(safe-area-inset-top));
        padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
        align-items: flex-start;
    }
    .welcome-gate-card.welcome-v3 {
        padding: 1.15rem 0.95rem;
        gap: 0.6rem;
        max-height: calc(100dvh - 1.4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    /* أثناء التسجيل: نخفي الترويسة الكبيرة ليتسع النموذج كاملًا للشاشة الصغيرة */
    .welcome-v3.is-registering .welcome-hero {
        display: none;
    }
    .welcome-quick-form { gap: 0.55rem; }
    .welcome-quick-head strong { font-size: 1.05rem; }
    .welcome-quick-head small { font-size: 0.86rem; line-height: 1.6; }
    .welcome-field span { font-size: 0.95rem; }
    .welcome-field input,
    .welcome-field select {
        padding: 0.8rem 0.85rem;
        /* !important لتغلب قاعدة الجوال العامة 14px — أي أصغر من 16 يسبب زوم iOS التلقائي */
        font-size: 16px !important;
    }
    .welcome-quick-submit {
        padding: 0.95rem;
        font-size: 1.05rem;
        position: sticky;
        bottom: 0;
    }
    .welcome-quick-links { justify-content: center; }
}

/* ===== تبويبا صفحة إنشاء التقرير: تقرير جديد / العبارات الجاهزة ===== */
.create-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    background: var(--surface-muted, #eef2f7);
    padding: 0.35rem;
    border-radius: 12px;
}
.create-tab {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.5rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.create-tab.active {
    background: var(--card-background, #fff);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* عند فتح تبويب العبارات: يُخفى كل محتوى صفحة الإنشاء ما عدا التبويبات واللوحة */
.create-content.show-snippets > *:not(.create-tabs):not(#createSnippetsPanel) {
    display: none !important;
}
.create-content.show-autoreports > *:not(.create-tabs):not(#createAutoReportsPanel) {
    display: none !important;
}
.create-autoreports-panel[hidden] { display: none; }
.create-autoreports-panel iframe {
    display: block;
    width: 100%;
    height: calc(100vh - 220px);
    min-height: 540px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.create-snippets-panel[hidden] {
    display: none;
}
.create-snippets-panel .settings-section {
    background: var(--card-background, #fff);
    border-radius: 14px;
    padding: 1.1rem;
}
@media (max-width: 480px) {
    .create-tab { font-size: 0.85rem; padding: 0.65rem 0.35rem; }
}

/* ===== صفحة التصوير الميدانية (1.39 — تصميم احترافي v2) ===== */
.camera-panel { margin-top: 0.5rem; }
.camera-content { max-width: 860px; margin-inline: auto; }

/* محطة الالتقاط: بطاقة متدرجة تضم الموقع وزر الغالق والتلميح */
.camera-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.2rem 1.2rem;
    margin-bottom: 1rem;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--theme-header-start), var(--theme-header-end));
    box-shadow: 0 18px 44px var(--theme-focus-ring, rgba(0, 0, 0, 0.2));
    overflow: hidden;
}
.camera-hero::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.22), transparent 65%);
    pointer-events: none;
}
.camera-location-row {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    /* على الشاشات العريضة: لا يتمدد الصف بعرض الكارد كله فيتفكك الحقل عن الزر */
    max-width: 560px;
    margin-inline: auto;
}
.camera-location-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
.camera-location-icon { font-size: 1rem; flex-shrink: 0; }
.camera-location-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.72rem 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #172033;
}
.camera-location-input:focus { outline: none; }
.camera-hero .my-location-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 0 1rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.15s ease;
}
.camera-hero .my-location-btn:active { background: rgba(255, 255, 255, 0.32); }

/* زر الغالق الدائري بأسلوب تطبيقات الكاميرا */
.camera-capture-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    padding: 0.2rem;
    -webkit-tap-highlight-color: transparent;
}
.camera-shutter-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 0 0 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease;
}
.camera-shutter-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    font-size: 2rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.camera-capture-btn:active .camera-shutter-ring { transform: scale(0.94); }
.camera-capture-btn:active .camera-shutter-core { transform: scale(0.9); }
.camera-capture-btn:disabled { opacity: 0.65; cursor: default; }
.camera-capture-label {
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.camera-hero-hint {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
}

/* البطاقات العامة للصفحة */
.camera-card {
    background: var(--card-background, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 18px;
    padding: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.camera-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    font-size: 1.02rem;
    color: var(--text-primary, #172033);
}
.camera-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-light, #eff6ff);
    font-size: 1.15rem;
}

/* المعرض */
.camera-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 1.6rem 0;
    font-weight: 600;
}
.camera-empty-icon { font-size: 2.2rem; opacity: 0.55; }
.ai-eye-cards { display: flex; flex-direction: column; gap: 0.6rem; text-align: right; }
.ai-eye-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border: 1.5px solid var(--border-color, #d1d5db);
    background: var(--card-background, #fff);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
}
.ai-eye-card:hover { border-color: var(--primary-color, #b45309); }
.ai-eye-card.is-inserted { border-color: #16a34a; background: rgba(22, 163, 74, 0.07); }
.ai-eye-card-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color, #b45309);
    color: #fff;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.ai-eye-card-text { flex: 1; font-size: 0.9rem; font-weight: 700; line-height: 1.7; color: var(--text-color, #111); }
.ai-eye-card-insert { flex-shrink: 0; font-size: 0.75rem; font-weight: 900; color: #16a34a; align-self: center; }

/* مؤشر تحليل الصور بالذكاء الاصطناعي — بارز ولا يُخطئه أحد */
.autoreport-message.ai-analyzing {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border: 1.5px solid var(--primary-color, #b45309);
    background: var(--card-background, #fff);
    color: var(--text-color, #1f2937);
    border-radius: 14px;
    padding: 0.8rem 1rem;
    font-weight: 800;
    line-height: 1.8;
    animation: aiAnalyzingPulse 1.6s ease infinite;
}
.autoreport-message.ai-analyzing small { color: var(--text-secondary, #64748b); font-weight: 700; }
.ai-analyzing-spinner {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3.5px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary-color, #b45309);
    animation: aiSpin 0.9s linear infinite;
}
.ai-analyzing-dots::after {
    content: '';
    animation: aiDots 1.5s steps(4, end) infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes aiAnalyzingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(180, 83, 9, 0); }
}

.camera-live-btn {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0.4rem auto 0;
    border: 1.5px dashed rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 14px;
    padding: 0.65rem 1rem;
    font-weight: 900;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
}
#liveCamOverlay {
    position: fixed;
    inset: 0;
    z-index: 105000;
    background: #000;
    display: flex;
    flex-direction: column;
}
.livecam-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.livecam-top {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
    background: linear-gradient(rgba(0, 0, 0, 0.65), transparent);
    color: #fff;
}
.livecam-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.livecam-counter { font-size: 1rem; }
.livecam-site {
    margin-inline-start: auto;
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}
.livecam-bottom {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 18px 16px max(22px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.livecam-shutter {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 5px solid #fff;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
}
.livecam-shutter:active { background: #fff; transform: scale(0.93); }
.livecam-done {
    position: absolute;
    inset-inline-end: 18px;
    border: none;
    border-radius: 12px;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
    font-size: 0.95rem;
    font-family: inherit;
    padding: 0.65rem 1.1rem;
    cursor: pointer;
}
.livecam-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}
.livecam-flash.is-on { animation: livecamFlash 0.28s ease; }
@keyframes livecamFlash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.dictation-mic-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-weight: 800;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 0.4rem;
}
.dictation-mic-btn.is-listening {
    border-color: #dc2626;
    color: #dc2626;
    animation: micPulse 1.2s ease infinite;
}
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }

.home-arrived-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.6rem;
    border: 1.5px dashed var(--primary-color, #b45309);
    background: var(--card-background, rgba(255, 255, 255, 0.65));
    color: var(--text-color, #1f2937);
    border-radius: 14px;
    padding: 0.7rem 1rem;
    font-weight: 900;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}
.home-arrived-btn:active { transform: scale(0.98); }

.camera-gallery { display: flex; flex-direction: column; gap: 1.1rem; }
.field-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.9rem;
}
.field-album-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    background: var(--card-background);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.field-album-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14); }
.field-album-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.field-album-card-overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff;
    text-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.field-album-card-name { font-weight: 900; font-size: 0.95rem; }
.field-album-card-meta { font-size: 0.72rem; opacity: 0.92; font-weight: 700; }
.field-album-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.field-album-title { color: var(--text-color); font-size: 1.02rem; }
.field-album-back,
.field-album-add {
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 12px;
    padding: 0.45rem 0.8rem;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}
.field-album-add { margin-inline-start: auto; border-color: var(--primary-color, #b45309); color: var(--primary-color, #b45309); }
.field-album-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.field-album-tool {
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 12px;
    padding: 0.4rem 0.65rem;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.field-album-remove { color: #b91c1c; border-color: rgba(185, 28, 28, 0.4); }
.field-album-noresults { text-align: center; color: var(--text-secondary); font-weight: 700; padding: 1rem 0; }
.field-gallery-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.field-gallery-stats span {
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 800;
}
.field-album-search {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
}
/* وضع التحديد الجماعي */
.field-select-mode .field-photo-actions { display: none; }
.field-photo-card.is-selectable { cursor: pointer; position: relative; }
.field-photo-card.is-selectable .field-photo-img { pointer-events: none; }
.field-photo-check {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(15, 23, 42, 0.45);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.field-photo-card.is-selected { outline: 3px solid var(--primary-color, #b45309); outline-offset: -3px; }
.field-photo-card.is-selected .field-photo-check { background: var(--primary-color, #b45309); color: #fff; }
.field-select-bar {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    background: var(--card-background);
    border-radius: 14px;
    padding: 0.55rem 0.8rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.field-select-count { color: var(--text-color); font-size: 0.85rem; margin-inline-end: auto; }
.field-select-action,
.field-select-exit {
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-color);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
}
.field-select-action:disabled { opacity: 0.45; cursor: default; }
.field-select-exit { color: var(--text-secondary); }
/* العارض الاحترافي */
#fieldPhotoViewer {
    position: fixed;
    inset: 0;
    z-index: 110000;
    background: rgba(3, 7, 18, 0.94);
    display: flex;
    flex-direction: column;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: lightboxFade 0.18s ease;
}
.fpv-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
    background: linear-gradient(rgba(0, 0, 0, 0.72), transparent);
    color: #fff;
}
.fpv-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.fpv-meta { display: flex; flex-direction: column; min-width: 0; }
.fpv-title { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpv-sub { color: rgba(255, 255, 255, 0.75); font-size: 0.75rem; font-weight: 700; }
.fpv-counter { margin-inline-start: auto; font-weight: 900; font-size: 0.9rem; color: rgba(255, 255, 255, 0.92); }
.fpv-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}
.fpv-img {
    max-width: 96vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}
#fieldPhotoViewer.fpv-zoomed .fpv-img { cursor: grab; transition: none; }
.fpv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 46px;
    height: 64px;
    border: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}
.fpv-nav:active { background: rgba(255, 255, 255, 0.28); }
.fpv-nav-start { inset-inline-start: 10px; }
.fpv-nav-end { inset-inline-end: 10px; }
#fieldPhotoViewer.fpv-zoomed .fpv-nav { display: none; }
.fpv-actions {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 14px 12px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.fpv-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    border: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
}
.fpv-act span { font-size: 0.68rem; font-weight: 800; }
.fpv-act:active { background: rgba(255, 255, 255, 0.28); }
.fpv-delete { color: #fca5a5; }
.fpv-hint {
    position: absolute;
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 84px));
    inset-inline: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.78rem;
    font-weight: 700;
    pointer-events: none;
    animation: fpvHintFade 4s ease forwards;
    z-index: 3;
}
@keyframes fpvHintFade { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 560px) {
    .fpv-nav { display: none; }
    .fpv-act { min-width: 56px; }
}
.field-gallery-group {
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 0.8rem;
}
.field-gallery-group-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.field-gallery-group-head strong { color: var(--text-color); font-size: 1rem; }
.field-gallery-group-head small { color: var(--text-secondary); font-weight: 700; }
.field-gallery-folder { font-size: 1.2rem; }
.field-gallery-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.9rem; }
.field-photo-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--card-background);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.field-photo-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12); }
.field-photo-img { width: 100%; height: 165px; object-fit: cover; display: block; }
.field-photo-actions { display: flex; gap: 0.4rem; padding: 0.55rem; }
.field-photo-share, .field-photo-attach, .field-photo-delete {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.12s ease, filter 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.field-photo-share { color: #166534; background: #dcfce7; }
.field-photo-attach { color: var(--theme-on-primary, #fff); background: var(--primary-color); }
.field-photo-delete { color: #b91c1c; background: #fee2e2; }
.field-photo-share:hover, .field-photo-attach:hover, .field-photo-delete:hover { filter: brightness(0.96); }
.field-photo-share:active, .field-photo-attach:active, .field-photo-delete:active { transform: scale(0.95); }

/* إعدادات الختم: مفاتيح iOS أنيقة */
.camera-sub-label { margin: 0.9rem 0 0.4rem; font-weight: 700; color: var(--text-secondary); font-size: 0.88rem; }
#camStampSubOptions { margin-top: 0.25rem; }
.camera-switch-list {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-background, #fff);
}
.camera-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.82rem 0.95rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #172033);
    cursor: pointer;
}
.camera-switch-row + .camera-switch-row { border-top: 1px solid var(--border-color, #e2e8f0); }
.camera-switch-master { font-size: 1rem; }
.camera-switch-row input {
    appearance: none;
    -webkit-appearance: none;
    width: 51px !important; /* قاعدة input العامة تمددها */
    max-width: 51px;
    flex: 0 0 51px;
    height: 31px !important; /* قاعدة أهداف اللمس 44px تضخمها */
    min-height: 31px !important;
    border-radius: 999px;
    background: var(--border-color, #d1d5db);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background 0.2s ease;
}
.camera-switch-row input::after {
    content: '';
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.camera-switch-row input:checked { background: #34c759; }
.camera-switch-row input:checked::after { transform: translateX(-20px); }
html[dir="ltr"] .camera-switch-row input:checked::after { transform: translateX(20px); }

/* الشاشات الواسعة: توسيط وتكبير مريح */
@media (min-width: 768px) {
    .camera-hero { padding: 1.8rem 2rem 1.5rem; }
    .camera-shutter-ring { width: 104px; height: 104px; }
    .camera-shutter-core { width: 82px; height: 82px; font-size: 2.3rem; }
    .field-gallery-group-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .field-photo-img { height: 190px; }
}

/* ===== عرض تعليمي متحرك للتصوير داخل المساعدة (1.39) ===== */
.camera-demo { margin: 0.75rem 0 1rem; text-align: center; }
.camera-demo-frame { position: relative; width: 220px; max-width: 80%; aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 3px solid var(--border-color); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.camera-demo-shot { position: absolute; inset: 0; background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 45%, #0ea5e9 100%); animation: cameraDemoFlash 4s ease-in-out infinite; }
.camera-demo-stamp { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.5rem; font-size: 0.72rem; font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.78), rgba(0,0,0,0.1)); text-shadow: 0 1px 3px rgba(0,0,0,0.9); direction: rtl; opacity: 0; transform: translateY(100%); animation: cameraDemoStamp 4s ease-in-out infinite; }
.camera-demo-caption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); font-weight: 700; }
@keyframes cameraDemoFlash { 0%, 20% { filter: brightness(1); } 24% { filter: brightness(2.3); } 30%, 100% { filter: brightness(1); } }
@keyframes cameraDemoStamp { 0%, 30% { opacity: 0; transform: translateY(100%); } 45%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .camera-demo-shot, .camera-demo-stamp { animation: none; } .camera-demo-stamp { opacity: 1; transform: none; } }

/* ===== معاينة مكبّرة للصور (lightbox) — مرفقات التقرير + معرض الكاميرا (1.39) ===== */
.image-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.9); padding: 1rem; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.image-lightbox.open { display: flex; animation: lightboxFade 0.2s ease; }
@keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } }
.image-lightbox-img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 10px; box-shadow: 0 12px 44px rgba(0,0,0,0.55); }
.image-lightbox-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,0.94); color: #111; font-size: 1.9rem; line-height: 1; cursor: pointer; z-index: 100001; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.image-lightbox-close:active { transform: scale(0.94); }
.image-lightbox-share { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; width: 46px; height: 46px; border: none; border-radius: 50%; background: #16a34a; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; z-index: 100001; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.image-lightbox-share:active { transform: scale(0.94); }
.image-lightbox-hint { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.75); font-size: 0.85rem; pointer-events: none; }

/* ============================================================
   الرئيسية v3 — «لوحة الميدان» (تصميم احترافي شامل)
   طبقة نهائية تكسب التعادل في التسلسل؛ تحترم عقود JS كاملة.
   ============================================================ */

/* ---- بطاقة القيادة (الهيرو) ---- */
.home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.25rem 2.4rem; /* متسع سفلي لرسو البحث فوق حافتها */
    border-radius: 22px;
    background: linear-gradient(150deg, var(--theme-header-start), var(--theme-header-end));
    box-shadow: 0 18px 40px var(--theme-focus-ring, rgba(0, 0, 0, 0.18));
    margin-bottom: 0;
    overflow: visible; /* لا تقص قائمة البحث المنسدلة */
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 60% 45% at 85% -10%, rgba(255, 255, 255, 0.28), transparent 70%),
        radial-gradient(ellipse 40% 35% at 10% 110%, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}

/* شارتا التخصص والنسخ داخل الهيرو — زجاجيتان */
.home-hero-chips {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-height: 0;
}
.home-hero-chips:empty { display: none; }
#homeScopeBar.home-scope-chip {
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.home-scope-chip-icon { font-size: 1.05rem; }
.home-scope-chip-label { color: #fff !important; }
.home-scope-chip-edit {
    margin-inline-start: 0.35rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.home-hero .home-backup-badge {
    margin: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    max-width: none;
}

/* زر الإنشاء: لوح زجاجي أبيض فاخر داخل الهيرو */
.home-hero .home-new-report-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.05rem 1.15rem;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--text-primary, #172033);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    overflow: hidden;
}
.home-hero .home-new-report-btn::after {
    content: '';
    position: absolute;
    inset: -60% auto -60% -70%;
    width: 45%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, var(--theme-focus-ring, rgba(47, 94, 219, 0.12)), transparent);
    animation: homeCtaShine 3.2s ease-in-out infinite;
    pointer-events: none;
}
.home-hero .home-new-report-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28); }
.home-hero .home-new-report-btn:active { transform: scale(0.985); }
.home-hero .home-new-report-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 1.5rem;
    color: var(--theme-on-primary, #fff);
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    box-shadow: 0 6px 16px var(--theme-focus-ring, rgba(47, 94, 219, 0.35));
}
.home-hero .home-new-report-text { display: flex; flex-direction: column; gap: 0.15rem; text-align: start; min-width: 0; }
.home-hero .home-new-report-text strong { font-size: 1.12rem; font-weight: 800; color: var(--text-primary, #172033); }
.home-hero .home-new-report-text small { font-size: 0.82rem; color: var(--text-secondary, #64748b); font-weight: 600; }
.home-new-report-arrow {
    margin-inline-start: auto;
    font-size: 1.2rem;
    color: var(--primary-color, #2f5edb);
    transition: transform 0.16s ease;
}
.home-hero .home-new-report-btn:hover .home-new-report-arrow { transform: translateX(-4px); }
@keyframes homeCtaShine { 0% { left: -70%; } 55%, 100% { left: 130%; } }

/* ---- البحث الراسي: يطفو فوق حافة الهيرو ---- */
#home .home-search-wrap {
    position: relative;
    z-index: 6;
    margin: -1.5rem 0.9rem 1.1rem;
}
#home .home-search-input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    background: var(--card-background, #fff);
    color: var(--text-primary, #172033);
    font-family: inherit;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
#home .home-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px var(--theme-focus-ring, rgba(47, 94, 219, 0.25));
}
#home .home-search-results { border-radius: 16px; margin-top: 0.4rem; }

/* ---- بطاقات الإحصاء: صقل نهائي ---- */
#home .cards-container { gap: 0.8rem; margin-bottom: 1rem; }
#home .card { border-radius: 18px; }
#home .card::before { display: none; } /* إلغاء شريط الحافة القديم */
#home .card .card-icon {
    border-radius: 12px;
    color: var(--theme-on-primary, #fff);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.14);
}
#home .card:nth-child(1) .card-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
#home .card:nth-child(2) .card-icon { background: linear-gradient(135deg, #10b981, #047857); }
#home .card:nth-child(3) .card-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
#home .card .card-trend {
    align-self: center;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: var(--surface-muted, #f1f5f9);
}
#home .card .card-trend.up { background: #dcfce7; }
#home .card .card-trend.down { background: #fee2e2; }
#home .card .card-progress {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-muted, #eef2f7);
    overflow: hidden;
    margin-top: 0.55rem;
}
#home .card .card-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-header-start), var(--theme-header-end));
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- شبكة الاختصارات السريعة ---- */
.home-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}
.home-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.95rem 0.5rem 0.85rem;
    border-radius: 16px;
    background: var(--card-background, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-quick-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); }
.home-quick-tile:active { transform: scale(0.97); }
.home-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.35rem;
    margin-bottom: 0.2rem;
}
.hq-camera .home-quick-icon { background: #e0f2fe; }
.hq-log .home-quick-icon { background: #dcfce7; }
.hq-monthly .home-quick-icon { background: #fef3c7; }
.hq-backup .home-quick-icon { background: #ede9fe; }
.home-quick-tile strong { font-size: 0.86rem; font-weight: 800; color: var(--text-primary, #172033); }
.home-quick-tile small { font-size: 0.7rem; color: var(--text-secondary, #64748b); font-weight: 600; }

/* ---- آخر تقاريري: خط زمني ---- */
#home .home-recent-panel { border-radius: 18px; }
#home .home-recent-item { position: relative; padding-inline-start: 1.5rem; }
#home .home-recent-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.35rem;
    top: 1.15rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color, #2f5edb);
    box-shadow: 0 0 0 3px var(--primary-light, #eff6ff);
}
#home .home-recent-item::after {
    content: '';
    position: absolute;
    inset-inline-start: calc(0.35rem + 3.5px);
    top: 1.85rem;
    bottom: -0.4rem;
    width: 2px;
    background: var(--primary-light, #eff6ff);
}
#home .home-recent-item:last-child::after { display: none; }

/* ---- لوح المخطط ---- */
#home .reports-chart-panel { border-radius: 18px; }
#home .chart-range-tabs {
    background: var(--surface-muted, #eef2f7);
    padding: 0.3rem;
    border-radius: 999px;
    gap: 0.25rem;
}
#home .chart-range-btn { border-radius: 999px; border: none; }

/* ---- حركة دخول متدرجة عند فتح الرئيسية ---- */
#home.active .home-hero,
#home.active .home-search-wrap,
#home.active .cards-container,
#home.active .home-quick-grid,
#home.active .home-recent-panel,
#home.active .reports-chart-panel {
    animation: homeRise 0.4s ease both;
}
#home.active .home-search-wrap { animation-delay: 0.06s; }
#home.active .cards-container { animation-delay: 0.12s; }
#home.active .home-quick-grid { animation-delay: 0.18s; }
#home.active .home-recent-panel { animation-delay: 0.24s; }
#home.active .reports-chart-panel { animation-delay: 0.3s; }
@keyframes homeRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- الجوال ---- */
@media (max-width: 900px) {
    .home-hero { padding: 1rem 0.9rem 2.2rem; border-radius: 18px; }
    .home-hero .home-new-report-btn { padding: 0.9rem 0.95rem; }
    .home-hero .home-new-report-icon { width: 46px; height: 46px; font-size: 1.3rem; }
    .home-hero .home-new-report-text strong { font-size: 1.02rem; }
    #home .home-search-wrap { margin: -1.45rem 0.55rem 1rem; }
    .home-quick-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .home-quick-tile small { display: none; } /* سطر واحد أنظف على الهاتف */
    .home-quick-tile { padding: 0.8rem 0.4rem 0.7rem; }
}

/* ---- تقليل الحركة ---- */
@media (prefers-reduced-motion: reduce) {
    #home.active .home-hero,
    #home.active .home-search-wrap,
    #home.active .cards-container,
    #home.active .home-quick-grid,
    #home.active .home-recent-panel,
    #home.active .reports-chart-panel,
    .home-hero .home-new-report-btn::after {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   لغة «لوحة الميدان» v3 — تعميم على التطبيق كله
   (تقرير جديد، السجل، الشهري، الإعدادات، المساعدة)
   طبقة CSS خالصة تحترم كل عقود JS المرصودة.
   ============================================================ */

/* ---------- (أ) ترويسة الصفحات: هيرو موحد ---------- */
.page-header,
.monthly-report-title {
    border-radius: 22px;
    box-shadow: 0 14px 34px var(--theme-focus-ring, rgba(0, 0, 0, 0.16));
    position: relative;
    overflow: hidden;
}
.page-header::before,
.monthly-report-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 88% -15%, rgba(255, 255, 255, 0.25), transparent 70%),
        radial-gradient(ellipse 35% 45% at 8% 115%, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}

/* حركة دخول ناعمة لكل صفحة عند تفعيلها */
.page.active > .page-content,
.page.active > .page-header {
    animation: pageRise 0.32s ease both;
}
.page.active > .page-content { animation-delay: 0.05s; }
@keyframes pageRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- (ب) اللوحات العامة: نصف قطر وظلال موحدة ---------- */
.card-form,
.settings-section,
.reports-chart-panel,
.report-log-filter-panel {
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}
.card-form .card-header { border-radius: 18px 18px 0 0; }

/* حقول الإدخال: حلقة تركيز موحدة */
.input-pill:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.report-log-search:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(47, 94, 219, 0.16));
}

/* أزرار التبويب المقسمة (إنشاء/كاميرا) — مسار حبوب */
.create-tabs {
    border-radius: 999px;
    padding: 0.32rem;
}
.create-tab { border-radius: 999px; }

/* ---------- (ج) صفحة تقرير جديد ---------- */
.report-department-card {
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.report-department-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}
.toggle-buttons {
    background: var(--surface-muted, #eef2f7);
    border-radius: 999px;
    padding: 0.3rem;
    gap: 0.3rem;
    border: none;
}
.btn-toggle {
    border-radius: 999px;
    border: none;
    font-weight: 700;
    transition: transform 0.12s ease, background 0.15s ease;
}
.btn-toggle:not(.active):hover { background: rgba(255, 255, 255, 0.6); }
.btn-toggle.active {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary, #fff);
    box-shadow: 0 4px 12px var(--theme-focus-ring, rgba(47, 94, 219, 0.3));
}
.btn-toggle:active { transform: scale(0.96); }
.large-save {
    position: relative;
    border-radius: 16px;
    padding: 1.05rem 2.4rem;
    font-size: 1.08rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    box-shadow: 0 12px 28px var(--theme-focus-ring, rgba(47, 94, 219, 0.35));
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.large-save::after {
    content: '';
    position: absolute;
    inset: -60% auto -60% -70%;
    width: 45%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: homeCtaShine 3.4s ease-in-out infinite;
    pointer-events: none;
}
.large-save:hover { transform: translateY(-2px); box-shadow: 0 16px 34px var(--theme-focus-ring, rgba(47, 94, 219, 0.42)); }
.large-save:active { transform: scale(0.98); }

/* ---------- (د) سجل التقارير ---------- */
/* تبويبا نوع السجل: عمودان فعليان بدل الثلاثة (كان الثالث فارغًا) */
.report-log-scope-tabs.report-log-kind-tabs { grid-template-columns: repeat(2, 1fr); }
.report-log-scope-tabs {
    background: var(--surface-muted, #eef2f7);
    border-radius: 999px;
    padding: 0.3rem;
    gap: 0.3rem;
    border: none;
}
.report-log-scope-tab {
    border-radius: 999px;
    border: none;
    font-weight: 700;
    transition: transform 0.12s ease;
}
.report-log-scope-tab.active {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary, #fff);
    box-shadow: 0 4px 12px var(--theme-focus-ring, rgba(47, 94, 219, 0.3));
}
.report-log-scope-tab:active { transform: scale(0.97); }
.report-log-search {
    border-radius: 999px !important;
    font-weight: 600;
}
.report-log-extra-filters select {
    border-radius: 999px;
    font-weight: 600;
    padding-inline: 0.9rem;
}
/* بطاقات السجل */
.registry-list > * {
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.registry-list > *:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.11);
}
.registry-actions .btn { border-radius: 10px; font-weight: 700; }
.registry-actions .btn-edit { background: var(--primary-light, #eff6ff); color: var(--primary-color, #1d4ed8); }
.registry-actions .btn-delete { background: #fee2e2; color: #b91c1c; }
.registry-actions .btn-edit:hover, .registry-actions .btn-delete:hover { filter: brightness(0.96); }

/* ---------- (هـ) التقرير الشهري ---------- */
.monthly-tab { font-weight: 700; }
.monthly-record,
.monthly-copy-item {
    border-radius: 14px;
    transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.monthly-record:hover,
.monthly-copy-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09);
}

/* ---------- (و) الإعدادات: أكورديون v3 ---------- */
.settings-accordion { display: flex; flex-direction: column; gap: 0.65rem; }
.settings-accordion-item {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.15s ease;
}
.settings-accordion-item.active { box-shadow: 0 10px 26px var(--theme-focus-ring, rgba(47, 94, 219, 0.16)); }
.settings-accordion-header { padding: 0.95rem 1.05rem; }
.settings-accordion-item .settings-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--surface-muted, #eef2f7);
}
/* ألوان مميزة لكل قسم — عبر سمات data-settings-item الثابتة */
[data-settings-item="quick"] .settings-nav-icon { background: #fef3c7; }
[data-settings-item="appearance"] .settings-nav-icon { background: #ede9fe; }
[data-settings-item="general"] .settings-nav-icon { background: #e0f2fe; }
[data-settings-item="backup-create"] .settings-nav-icon { background: #dcfce7; }
[data-settings-item="backup-saved"] .settings-nav-icon { background: #e0f2fe; }
[data-settings-item="backup-cloud"] .settings-nav-icon { background: #cffafe; }
[data-settings-item="backup-storage"] .settings-nav-icon { background: #fef3c7; }
[data-settings-item="backup-restore"] .settings-nav-icon { background: #ede9fe; }
[data-settings-item="backup-shared-profile"] .settings-nav-icon { background: #fce7f3; }
[data-settings-item="backup-import-old-reports"] .settings-nav-icon { background: #ffedd5; }
[data-settings-item="backup-clear"] .settings-nav-icon { background: #fee2e2; }
[data-settings-item="backup-shortcut"] .settings-nav-icon { background: #dcfce7; }
/* روابط الإعدادات السريعة */
.settings-page-jump .settings-quick-link {
    border-radius: 999px;
    font-weight: 700;
}
/* بطاقات المرفقات والمواقع */
.attachment-card,
.locations-card {
    border-radius: 16px;
}

/* ---------- (ز) المساعدة ---------- */
/* محطة المساعد: هيرو متدرج + توهجات */
.assistant-panel {
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px var(--theme-focus-ring, rgba(0, 0, 0, 0.18));
}
.assistant-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 55% at 90% -10%, rgba(255, 255, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 35% 40% at 5% 115%, rgba(255, 255, 255, 0.10), transparent 70%);
    pointer-events: none;
}
.assistant-panel > * { position: relative; }
.assistant-card {
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.assistant-input { border-radius: 999px !important; }
.assistant-send { border-radius: 999px !important; }
.assistant-msg { border-radius: 14px; }
.assistant-chip {
    border-radius: 12px;
    transition: transform 0.13s ease, box-shadow 0.13s ease;
}
.assistant-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12); }
/* بطاقات المواضيع: بلاطات ملونة لكل موضوع */
.help-card {
    border-radius: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.help-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); }
.help-card:active { transform: scale(0.97); }
.help-card .help-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.35rem;
    background: var(--surface-muted, #eef2f7);
    margin-inline: auto;
}
.help-card[data-help-topic="new-report"] .help-card-icon { background: #e0f2fe; }
.help-card[data-help-topic="camera"] .help-card-icon { background: #cffafe; }
.help-card[data-help-topic="technical"] .help-card-icon { background: #ffedd5; }
.help-card[data-help-topic="print"] .help-card-icon { background: #ede9fe; }
.help-card[data-help-topic="backup"] .help-card-icon { background: #dcfce7; }
.help-card[data-help-topic="migrate"] .help-card-icon { background: #fef3c7; }
.help-card[data-help-topic="themes"] .help-card-icon { background: #fce7f3; }
.help-card[data-help-topic="profile"] .help-card-icon { background: #e0e7ff; }
.help-card[data-help-topic="reminders"] .help-card-icon { background: #fef9c3; }
.help-card[data-help-topic="applock"] .help-card-icon { background: #fee2e2; }
.help-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(47, 94, 219, 0.18)), 0 12px 26px rgba(15, 23, 42, 0.12);
}
/* الأدلة: خطوات بأرقام متدرجة وخط زمني */
.help-guide {
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
.help-guide[hidden] { display: none !important; } /* حارس آلية الإخفاء */
.help-step { position: relative; }
.help-step .help-step-num {
    background: linear-gradient(135deg, var(--theme-header-start), var(--theme-header-end));
    color: var(--theme-on-primary, #fff);
    box-shadow: 0 4px 10px var(--theme-focus-ring, rgba(47, 94, 219, 0.3));
    border: none;
}
.mock-btn {
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.mock-chip { border-radius: 999px; }

/* ---------- (ح) تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    .page.active > .page-content,
    .page.active > .page-header,
    .large-save::after {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ===== الفوتر بثلاثة أسطر: الزوار | الحقوق | الإصدار ===== */
.footer-app-note.footer-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}
.footer-visitors-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-dot { opacity: 0.6; }
.footer-stacked .copyright { font-size: 0.82rem; opacity: 0.92; }
.footer-version-line {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.18rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ===== منتقي الصور الميدانية داخل نموذج التقرير ===== */
.field-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 99000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: lightboxFade 0.2s ease;
}
.field-picker-panel {
    width: 100%;
    max-width: 560px;
    max-height: min(86vh, calc(100dvh - 2rem));
    overflow-y: auto;
    background: var(--card-background, #fff);
    border-radius: 20px;
    padding: 1.1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.field-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05rem;
    color: var(--text-primary, #172033);
}
.field-picker-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--surface-muted, #eef2f7);
    color: var(--text-primary, #172033);
    font-size: 1.1rem;
    cursor: pointer;
}
.field-picker-hint { margin: 0; font-size: 0.85rem; color: var(--text-secondary, #64748b); font-weight: 600; }
.field-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 1.6rem 0.5rem;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-weight: 700;
}
.field-picker-empty-icon { font-size: 2.2rem; opacity: 0.55; }
.field-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
}
.field-picker-albums { display: flex; flex-direction: column; gap: 0.45rem; }
.field-picker-album-head {
    font-weight: 900;
    font-size: 0.88rem;
    color: var(--text-color, #1f2937);
    border-inline-start: 4px solid var(--primary-color, #b45309);
    background: var(--surface-muted, #f1f5f9);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    margin-top: 0.35rem;
}
.field-picker-cell {
    position: relative;
    border: 3px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: var(--surface-muted, #eef2f7);
    cursor: pointer;
    transition: transform 0.13s ease, border-color 0.15s ease;
}
.field-picker-cell img {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}
.field-picker-cell:active { transform: scale(0.96); }
.field-picker-cell.is-selected {
    border-color: var(--primary-color, #2f5edb);
    box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(47, 94, 219, 0.25));
}
.field-picker-check {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color, #2f5edb);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.field-picker-cell.is-selected .field-picker-check { opacity: 1; transform: scale(1); }
.field-picker-actions { display: flex; justify-content: center; }
.field-picker-add { border-radius: 999px; padding: 0.7rem 1.6rem; font-weight: 800; }

/* ===== المساعد: عرض «سؤال وجوابه» منفردين في مساحة رحبة ===== */
.assistant-messages {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: none; /* لا صندوق ضيق — الجواب يأخذ مساحته الطبيعية */
    overflow: visible;
}
.assistant-msg.is-user {
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    background: var(--surface-muted, #eef2f7);
    border-radius: 999px;
    padding: 0.45rem 1rem;
}
.assistant-msg.is-user::before {
    content: 'سؤالك: ';
    opacity: 0.7;
    font-weight: 600;
}
.assistant-msg.is-bot {
    max-width: 100%;
    font-size: 1rem;
    line-height: 2;
    color: var(--text-primary, #172033);
    background: var(--primary-light, #eff6ff);
    border-inline-start: 4px solid var(--primary-color, #2f5edb);
    border-radius: 14px;
    padding: 0.95rem 1.1rem;
    white-space: pre-line;
    animation: assistantAnswerRise 0.25s ease;
}
@keyframes assistantAnswerRise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-msg.is-bot { animation: none; }
}

/* ===== عوامتا التواصل في صفحة المساعدة (واتساب/إيميل) ===== */
.contact-fab {
    position: fixed;
    left: 18px;
    z-index: 950;
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(14px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.contact-fab.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.contact-fab:active { transform: scale(0.92); }
.contact-fab-whatsapp {
    bottom: 24px;
    background: linear-gradient(135deg, #25d366, #128c7e);
}
.contact-fab-email {
    bottom: 100px;
    background: linear-gradient(135deg, var(--theme-header-start, #2f5edb), var(--theme-header-end, #1f4fc4));
}
.contact-fab-icon { display: flex; }
.contact-fab-icon svg { width: 24px; height: 24px; }
.contact-fab-label {
    font-size: 0.6rem;
    font-weight: 800;
    font-family: inherit;
}
.contact-fab.is-shaking {
    animation: contactFabShake 0.7s ease;
}
@keyframes contactFabShake {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-12deg) scale(1.06); }
    30% { transform: rotate(10deg) scale(1.06); }
    45% { transform: rotate(-8deg); }
    60% { transform: rotate(6deg); }
    75% { transform: rotate(-3deg); }
}
@media (max-width: 900px) {
    /* فوق القائمة السفلية بأمان (مع منطقة أمان الآيفون) — كانت الواتساب تغطس داخل القائمة */
    .contact-fab-whatsapp { bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); }
    .contact-fab-email { bottom: calc(env(safe-area-inset-bottom, 0px) + 180px); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-fab.is-shaking { animation: none; }
}

/* ===== حارس القائمة السفلية أثناء الكتابة ===== */
/* لوحة المفاتيح في iOS ترفع العناصر المثبتة أسفل الشاشة — القائمة تنزلق للأسفل أثناء الكتابة وترجع عند الإغلاق */
.mobile-direct-menu {
    transition: transform 0.25s ease, opacity 0.2s ease, visibility 0.25s;
}

body.keyboard-open .mobile-direct-menu {
    transform: translateY(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-direct-menu {
        transition: none;
    }
}

/* ===== الومضة الخفيفة للسبلاش بين القوائم الرئيسية ===== */
/* السبلاش الكامل بالصوت عند فتح البرنامج فقط — الانتقالات بين الصفحات تكتفي
   بومضة سريعة (شعار وحلقة بلا عنوان) تغطي وميض تحميل الصفحة ثم تختفي */
.ios-action-splash.is-quick .ios-action-splash-title,
.ios-action-splash.is-quick .ios-action-splash-line {
    display: none;
}

.ios-action-splash.is-quick .ios-action-splash-logo,
.ios-action-splash.is-quick .ios-action-splash-ring {
    animation-duration: 0.45s;
}

.ios-action-splash.is-quick {
    transition: opacity 0.2s ease;
}

/* ===== بطاقات إحصائيات الرئيسية — صف مدمج أنيق في الهواتف ===== */
/* كانت ثلاث بطاقات ضخمة متراصة عموديًا تأكل الشاشة — صارت صفًا واحدًا مرتبًا */
@media (max-width: 900px) {
    #home .cards-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    #home .card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 5px;
        min-height: 0;
        padding: 0.75rem 0.3rem 0.7rem;
    }

    #home .card-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    #home .card-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    #home .card-icon svg {
        width: 17px;
        height: 17px;
    }

    #home .card-head h3 {
        font-size: 0.68rem;
        line-height: 1.3;
        margin: 0;
    }

    #home .card-number {
        font-size: 1.45rem;
        line-height: 1.1;
        margin: 0;
    }

    #home .card-percent {
        font-size: 0.72rem;
        margin: 0;
    }

    #home .card-trend {
        font-size: 0.58rem;
        padding: 2px 7px;
        white-space: normal;
        line-height: 1.35;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ===== إدارة الملفات الشخصية للكمبيوتر فقط ===== */
/* بقرار هشام 2026-07-23: اختيار/إنشاء/حذف الملفات الشخصية يظهر في الموقع على
   الكمبيوتر فقط — في الهواتف كل جهاز لمستخدمه، والإضافة تبقى متاحة من مسار
   «خروج ← إضافة ملف شخصي جديد» */
@media (max-width: 900px) {
    .employee-form .profile-controls {
        display: none !important;
    }
}

/* خيارات المسح الثلاثة (2026-07-27) — كل خيار بصف واضح ووصف يمنع الحذف بالغلط */
/* `#backup .settings-section` تفرض `display: grid !important` بعمودين — لا مفر من
   مطابقة السلاح نفسه هنا حتى تبقى خيارات المسح صفوفًا كاملة العرض */
#backup .settings-section.clear-data-options,
.settings-section.clear-data-options {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0.6rem !important;
}

.clear-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-background);
}

.clear-data-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* `#backup .btn` تفرض عرضًا كاملًا — نقيّد أزرار المسح حتى يظهر الوصف بجانبها */
#backup .clear-data-row .btn,
.clear-data-row .btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 96px;
    margin: 0 !important;
}

.clear-data-info strong { font-size: 0.95rem; color: var(--text-primary); }
.clear-data-info small { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }

.btn.btn-danger-solid,
.btn.btn-danger-soft {
    flex-shrink: 0;
    min-width: 88px;
    border-radius: 10px;
    font-weight: 700;
}

.btn.btn-danger-solid { background: #ef4444; color: #ffffff; border: 0; }
.btn.btn-danger-solid:hover { background: #dc2626; }
.btn.btn-danger-soft { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.35); }
.btn.btn-danger-soft:hover { background: rgba(239, 68, 68, 0.2); }

@media (max-width: 560px) {
    .clear-data-row { flex-direction: column; align-items: stretch; }
    .btn.btn-danger-solid, .btn.btn-danger-soft { width: 100%; }
}

/* نافذة تأكيد الحذف (SweetAlert) — بخط النظام واتجاه عربي سليم */
.gsd-danger-popup {
    font-family: var(--app-font, inherit) !important;
    direction: rtl;
    text-align: right;
    border-radius: 16px !important;
}

.gsd-danger-popup .swal2-title { font-size: 1.15rem !important; }
.gsd-danger-popup .swal2-html-container { font-size: 0.92rem !important; line-height: 1.85 !important; text-align: right; }
.gsd-danger-popup .swal2-actions { gap: 0.5rem; }
.gsd-danger-popup .swal2-confirm,
.gsd-danger-popup .swal2-cancel { border-radius: 10px !important; font-weight: 700 !important; }