[x-cloak] { display: none !important; }
:root {
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 76px;

    --color-surface: #F7F9FC;
    --color-bg: #FFFFFF;
    --color-card: #FFFFFF;
    --color-elevated: #F1F5F9;
    --color-border: #E8EDF3;
    --color-border-hover: #D1D9E6;
    --color-ink: #1E293B;
    --color-ink-secondary: #64748B;
    --color-ink-muted: #94A3B8;
    --color-accent: #17C3B2;
    --color-accent-light: #E6F9F7;
    --color-accent-dark: #13A89A;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-shadow: rgba(15,23,42,.04);
    --color-shadow-elevated: rgba(15,23,42,.06);
    --color-nav-hover: rgba(0,0,0,.03);
    --color-row-hover: rgba(0,0,0,.02);
    --color-input-bg: #FFFFFF;
    --color-input-border: #E8EDF3;
    --color-input-placeholder: #94A3B8;
    --color-badge-bg: #F1F5F9;
    --color-badge-text: #475569;
    --color-header-bg: rgba(255,255,255,.85);
}

[data-theme="dark"] {
    --color-surface: #0F172A;
    --color-bg: #111827;
    --color-card: #1E293B;
    --color-elevated: #243244;
    --color-border: #334155;
    --color-border-hover: #475569;
    --color-ink: #F8FAFC;
    --color-ink-secondary: #CBD5E1;
    --color-ink-muted: #94A3B8;
    --color-accent: #17C3B2;
    --color-accent-light: rgba(23,195,178,.12);
    --color-accent-dark: #1DD3B8;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-shadow: rgba(0,0,0,.2);
    --color-shadow-elevated: rgba(0,0,0,.3);
    --color-nav-hover: rgba(255,255,255,.03);
    --color-row-hover: rgba(255,255,255,.02);
    --color-input-bg: #0F172A;
    --color-input-border: #334155;
    --color-input-placeholder: #64748B;
    --color-badge-bg: #1E293B;
    --color-badge-text: #CBD5E1;
    --color-header-bg: rgba(17,24,39,.85);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html[lang="ar"] body, html[lang="ar"] .input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button, html[lang="ar"] a, html[lang="ar"] p, html[lang="ar"] span, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6, html[lang="ar"] label, html[lang="ar"] td, html[lang="ar"] th, html[lang="ar"] option {
    font-family: 'Noto Sans Arabic', 'Open Sans', system-ui, sans-serif;
}

.input { width:100%; padding:0.75rem 1rem; border:1px solid var(--color-input-border); border-radius:12px; font-size:0.875rem; line-height:1.25rem; color:var(--color-ink); background:var(--color-input-bg); transition:all 0.15s; }
.input::placeholder { color:var(--color-input-placeholder); }
.input:focus { outline:none; box-shadow:0 0 0 3px rgba(23,195,178,0.2); border-color:var(--color-accent); }
.input:disabled { opacity:0.5; cursor:not-allowed; background:var(--color-elevated); }
select.input { padding-left:2.5rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 0.75rem center; background-size:1rem; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
[data-theme="dark"] select.input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
input[type="date"].input, input[type="time"].input { padding-left:2.5rem; color-scheme: light; }
[data-theme="dark"] input[type="date"].input, [data-theme="dark"] input[type="time"].input { color-scheme: dark; }
.label { display:block; font-size:0.875rem; font-weight:500; color:var(--color-ink); margin-bottom:0.375rem; }

.btn-primary { background:var(--color-accent); color:white; border-radius:12px; padding:0.625rem 1.25rem; font-size:0.875rem; font-weight:500; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; border:none; text-decoration:none; line-height:1.25rem; }
.btn-primary:hover { background:var(--color-accent-dark); }
.btn-secondary { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-ink); border-radius:12px; padding:0.625rem 1.25rem; font-size:0.875rem; font-weight:500; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; text-decoration:none; line-height:1.25rem; }
.btn-secondary:hover { background:var(--color-elevated); }
.btn-ghost { color:var(--color-ink-secondary); border-radius:12px; padding:0.5rem 1rem; font-size:0.875rem; font-weight:500; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; background:transparent; border:none; text-decoration:none; line-height:1.25rem; }
.btn-ghost:hover { background:var(--color-nav-hover); color:var(--color-ink); }
.btn-danger { background:var(--color-danger); color:white; border-radius:12px; padding:0.625rem 1.25rem; font-size:0.875rem; font-weight:500; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; border:none; text-decoration:none; line-height:1.25rem; }
.btn-danger:hover { background:#DC2626; }
.btn-sm { padding:0.375rem 0.75rem; font-size:0.8125rem; }

.file-input { width:100%; font-size:0.875rem; color:var(--color-ink); }
.file-input::file-selector-button { margin-right:0.75rem; padding:0.5rem 1rem; border-radius:12px; border:0; font-size:0.875rem; font-weight:500; background:var(--color-accent); color:white; cursor:pointer; transition:all 0.15s; }
.file-input::file-selector-button:hover { background:var(--color-accent-dark); }

#sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: var(--sidebar-w); background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform 0.25s ease, width 0.25s ease;
}
#sidebar.sidebar-open { transform: translateX(0); }
#sidebar .nav-label { transition: opacity 0.15s, width 0.15s; overflow: hidden; white-space: nowrap; }
#sidebar.collapsed { width: var(--sidebar-w-collapsed); }
#sidebar.collapsed .nav-label { opacity: 0; width: 0; }
#sidebar.collapsed .sidebar-footer-text { opacity: 0; width: 0; overflow: hidden; }
#sidebar.collapsed .sidebar-brand-text { opacity: 0; width: 0; overflow: hidden; }
#sidebar.collapsed .nav-item { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
#sidebar.collapsed .nav-item .nav-badge { display: none; }
#sidebar.collapsed .sidebar-user-info { opacity: 0; width: 0; overflow: hidden; }
#sidebar.collapsed .sidebar-user-info-parent { justify-content: center; align-items: center; gap: 0 !important; padding: 0.5rem !important; margin: 0 !important; }
#sidebar.collapsed .sidebar-logout-text { display: none; }
#sidebar-overlay { display: none; }
.nav-item-active { background: var(--color-accent-light) !important; color: var(--color-accent) !important; font-weight: 500; }
.nav-item-active i { color: var(--color-accent) !important; }
.nav-item:hover { background: var(--color-nav-hover); }

[data-theme="dark"] .nav-item-active { background: rgba(23,195,178,.15) !important; }

.theme-toggle-track { width:40px; height:22px; border-radius:11px; background:var(--color-border); cursor:pointer; position:relative; transition:background 0.2s; flex-shrink:0; }
[data-theme="dark"] .theme-toggle-track { background:rgba(23,195,178,.3); }
.theme-toggle-thumb { width:18px; height:18px; border-radius:50%; background:white; position:absolute; top:2px; left:2px; transition:transform 0.2s, background 0.2s; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.15); }
[data-theme="dark"] .theme-toggle-thumb { transform:translateX(18px); background:#1E293B; }

@media (min-width: 1024px) {
    #sidebar { transform: translateX(0) !important; width: var(--sidebar-w) !important; }
    #sidebar.sidebar-open { transform: translateX(0) !important; }
    #sidebar.collapsed { width: var(--sidebar-w-collapsed) !important; }
    #sidebar-overlay { display: none !important; }
    #main-content { margin-right: var(--sidebar-w); transition: margin-right 0.25s ease; }
    #main-content.sidebar-collapsed { margin-right: var(--sidebar-w-collapsed); }
    html.sidebar-was-collapsed #sidebar { width: var(--sidebar-w-collapsed) !important; }
    html.sidebar-was-collapsed #main-content { margin-right: var(--sidebar-w-collapsed) !important; }
    html.sidebar-was-collapsed #sidebar .sidebar-brand-text { opacity: 0; width: 0; overflow: hidden; }
    html.sidebar-was-collapsed #sidebar .nav-label { opacity: 0; width: 0; overflow: hidden; }
    html.sidebar-was-collapsed #sidebar .sidebar-user-info { opacity: 0; width: 0; overflow: hidden; }
    html.sidebar-was-collapsed #sidebar .sidebar-logout-text { display: none; }
    html.sidebar-was-collapsed #sidebar .nav-badge { display: none; }
    html.sidebar-was-collapsed #sidebar .sidebar-user-info-parent { justify-content: center; align-items: center; gap: 0 !important; padding: 0.5rem !important; margin: 0 !important; }
    html.sidebar-was-collapsed #sidebar .nav-item { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
}

/* Dark mode: override common Tailwind utilities */
[data-theme="dark"] svg { color: var(--color-ink-secondary); }
[data-theme="dark"] .bg-white { background-color: var(--color-card) !important; }
[data-theme="dark"] .bg-gray-50 { background-color: var(--color-nav-hover) !important; }
[data-theme="dark"] .bg-gray-100 { background-color: var(--color-elevated) !important; }
[data-theme="dark"] .bg-surface { background-color: var(--color-surface) !important; }
[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,.12) !important; }
[data-theme="dark"] .bg-green-50 { background-color: rgba(34,197,94,.12) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16,185,129,.12) !important; }
[data-theme="dark"] .bg-blue-50 { background-color: rgba(59,130,246,.12) !important; }
[data-theme="dark"] .bg-violet-50 { background-color: rgba(139,92,246,.12) !important; }
[data-theme="dark"] .bg-purple-50 { background-color: rgba(168,85,247,.12) !important; }
[data-theme="dark"] .bg-amber-50 { background-color: rgba(245,158,11,.12) !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234,179,8,.12) !important; }

[data-theme="dark"] .border-border { border-color: var(--color-border) !important; }
[data-theme="dark"] .border-gray-200 { border-color: var(--color-border) !important; }
[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,.25) !important; }

[data-theme="dark"] .text-ink { color: var(--color-ink) !important; }
[data-theme="dark"] .text-ink-secondary { color: var(--color-ink-secondary) !important; }
[data-theme="dark"] .text-ink-muted { color: var(--color-ink-muted) !important; }
[data-theme="dark"] .text-gray-500 { color: var(--color-ink-muted) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--color-ink-secondary) !important; }
[data-theme="dark"] .text-gray-700 { color: var(--color-ink-secondary) !important; }
[data-theme="dark"] .text-gray-800 { color: var(--color-ink) !important; }
[data-theme="dark"] .text-gray-900 { color: var(--color-ink) !important; }
[data-theme="dark"] .text-red-700 { color: var(--color-danger) !important; }
[data-theme="dark"] .text-green-600 { color: #4ade80 !important; }
[data-theme="dark"] .text-green-700 { color: #4ade80 !important; }
[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }
[data-theme="dark"] .text-blue-700 { color: #60a5fa !important; }
[data-theme="dark"] .text-violet-700 { color: #a78bfa !important; }
[data-theme="dark"] .text-purple-700 { color: #c084fc !important; }
[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; }
[data-theme="dark"] .text-amber-700 { color: #fbbf24 !important; }
[data-theme="dark"] .text-yellow-700 { color: #facc15 !important; }
[data-theme="dark"] .text-orange-600 { color: #fb923c !important; }
[data-theme="dark"] .text-orange-700 { color: #fb923c !important; }

[data-theme="dark"] .ring-border { --tw-ring-color: var(--color-border); }
[data-theme="dark"] .ring-2 { --tw-ring-color: var(--color-border); }
[data-theme="dark"] .ring-amber-600\/20 { --tw-ring-color: rgba(245,158,11,.25); }
[data-theme="dark"] .ring-blue-600\/20 { --tw-ring-color: rgba(59,130,246,.25); }
[data-theme="dark"] .ring-violet-600\/20 { --tw-ring-color: rgba(139,92,246,.25); }
[data-theme="dark"] .ring-emerald-600\/20 { --tw-ring-color: rgba(16,185,129,.25); }
[data-theme="dark"] .ring-red-600\/20 { --tw-ring-color: rgba(239,68,68,.25); }
[data-theme="dark"] .ring-inset { --tw-ring-inset: inset; }

[data-theme="dark"] .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15) !important; }
[data-theme="dark"] .shadow-elevated { box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; }
[data-theme="dark"] .shadow-soft { box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; }
[data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; }

[data-theme="dark"] .placeholder-ink-muted { --tw-placeholder-opacity: 1; color: var(--color-ink-muted) !important; }
[data-theme="dark"] .placeholder-gray-400 { --tw-placeholder-opacity: 1; color: var(--color-ink-muted) !important; }
[data-theme="dark"] .placeholder-gray-500 { --tw-placeholder-opacity: 1; color: var(--color-ink-muted) !important; }

[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }
[data-theme="dark"] .divide-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }

[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,.03) !important; }
[data-theme="dark"] .hover\:bg-gray-50\/50:hover { background-color: rgba(255,255,255,.025) !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,.04) !important; }
[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--color-ink) !important; }
[data-theme="dark"] .hover\:bg-white\/5:hover { background-color: rgba(255,255,255,.05) !important; }

[data-theme="dark"] .bg-accent\/5 { background-color: rgba(23,195,178,.08) !important; }
[data-theme="dark"] .bg-accent\/10 { background-color: rgba(23,195,178,.12) !important; }
[data-theme="dark"] .bg-danger\/5 { background-color: rgba(239,68,68,.1) !important; }
[data-theme="dark"] .bg-success\/10 { background-color: rgba(34,197,94,.12) !important; }
[data-theme="dark"] .bg-warning\/10 { background-color: rgba(245,158,11,.12) !important; }

[data-theme="dark"] .border-accent\/20 { border-color: rgba(23,195,178,.25) !important; }
[data-theme="dark"] .border-danger\/20 { border-color: rgba(239,68,68,.25) !important; }

[data-theme="dark"] .bg-black\/30 { background-color: rgba(0,0,0,.5) !important; }

[data-theme="dark"] .bg-gradient-to-br { background-color: transparent !important; }
[data-theme="dark"] .from-white { --tw-gradient-from: var(--color-card) !important; }
[data-theme="dark"] .to-surface { --tw-gradient-to: var(--color-surface) !important; }

[data-theme="dark"] .bg-accent\/10 { background-color: rgba(23,195,178,.12) !important; }
[data-theme="dark"] .text-accent\/70 { color: rgba(23,195,178,.7) !important; }

.dropdown-item { display:flex; align-items:center; gap:0.5rem; padding:0.625rem 1rem; font-size:0.875rem; color:var(--color-ink); transition:all 0.15s; text-decoration:none; cursor:pointer; }
.dropdown-item:hover { background:var(--color-nav-hover); color:var(--color-ink) !important; }
.dropdown-item i { color:var(--color-ink-muted); flex-shrink:0; font-size:0; }
.dropdown-item i svg { width:1rem; height:1rem; }

.file-preview-thumb { width:68px; height:68px; border-radius:12px; object-fit:cover; border:1px solid var(--color-border); }
.file-preview-placeholder { width:68px; height:68px; border-radius:12px; background:var(--color-elevated); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }

@media (max-width: 640px) {
    :root { --sidebar-w: 280px; }
    .file-preview-thumb, .file-preview-placeholder { width:48px; height:48px; }
    .btn-primary, .btn-secondary, .btn-danger { padding: 0.5rem 0.875rem; }
}