/* =====================================================================
   Sovereign Archival Suite — Enterprise design system for DemoDMS
   Navy (#0F2042) · Sapphire (#1E6091) · Emerald (#059669) · Slate (#475569)
   Loaded after Bootstrap; restyles every screen without touching markup logic.
   ===================================================================== */

:root {
    --sv-navy: #0f2042;
    --sv-navy-deep: #000922;
    --sv-sapphire: #1e6091;
    --sv-sapphire-2: #216293;
    --sv-emerald: #059669;
    --sv-amber: #d97706;
    --sv-crimson: #dc2626;
    --sv-slate: #475569;

    --sv-bg: #f8f9ff;
    --sv-surface: #ffffff;
    --sv-surface-low: #eff4ff;
    --sv-surface-mid: #e6eeff;
    --sv-surface-high: #dce9ff;
    --sv-surface-highest: #d5e3fc;
    --sv-ink: #0d1c2e;
    --sv-ink-2: #45464e;
    --sv-muted: #75777f;
    --sv-line: #e2e8f0;
    --sv-line-soft: #edf2f7;
    --sv-outline: #c5c6cf;

    --sv-ok-bg: #dcfce7;   --sv-ok-fg: #166534;
    --sv-warn-bg: #fef3c7; --sv-warn-fg: #92400e;
    --sv-err-bg: #fee2e2;  --sv-err-fg: #991b1b;
    --sv-info-bg: #eff6ff; --sv-info-fg: #1e40af;

    --sv-radius-sm: 6px;
    --sv-radius: 8px;
    --sv-radius-lg: 12px;
    --sv-radius-xl: 16px;

    --sv-elev-1: 0 1px 4px rgba(15, 32, 66, .05);
    --sv-elev-2: 0 10px 25px -5px rgba(15, 32, 66, .08), 0 8px 10px -6px rgba(15, 32, 66, .04);
    --sv-elev-3: 0 24px 48px -12px rgba(15, 32, 66, .25);
    --sv-focus: 0 0 0 3px rgba(30, 96, 145, .25);

    --sv-sidebar-w: 272px;
    --sv-sidebar-w-collapsed: 76px;
    --sv-header-h: 64px;

    --sv-font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Cairo', 'Segoe UI', Tahoma, sans-serif;

    --bs-body-font-family: var(--sv-font);
    --bs-body-color: var(--sv-ink);
    --bs-body-bg: var(--sv-bg);
    --bs-border-color: var(--sv-line);
    --bs-primary: var(--sv-navy);
    --bs-primary-rgb: 15, 32, 66;
    --bs-link-color: var(--sv-sapphire);
    --bs-link-color-rgb: 30, 96, 145;
    --bs-link-hover-color: var(--sv-navy);
}

/* ---------- Base ---------- */
html, body { overflow-x: hidden; }
/* clip بدل hidden: يمنع التمرير الأفقي دون أن يحوّل الصفحة لحاوية تمرير (يُبقي العناصر الثابتة sticky تعمل) */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
body {
    font-family: var(--sv-font) !important;
    background:
        radial-gradient(at 100% 0%, #eef4fa 0px, transparent 50%),
        var(--sv-bg) !important;
    background-attachment: fixed !important;
    color: var(--sv-ink) !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    -webkit-font-smoothing: antialiased;
}
body, .btn, .form-control, .form-select, .nav-link, .dropdown-menu, .card, .table,
h1, h2, h3, h4, h5, h6, input, select, textarea, button { font-family: var(--sv-font) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--sv-navy); font-weight: 700; letter-spacing: 0; }
.page-content > h4:first-child, .page-content > h3:first-child, main h4.page-title-legacy {
    font-size: 1.35rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem;
}
h4 > i, h5 > i, h3 > i { color: var(--sv-sapphire); }
a { color: var(--sv-sapphire); text-decoration: none; }
a:hover { color: var(--sv-navy); }
.text-muted { color: var(--sv-muted) !important; }
.text-primary { color: var(--sv-sapphire) !important; }
.bg-primary { background-color: var(--sv-navy) !important; }
.tnum, td, .kpi-value { font-variant-numeric: tabular-nums; }
::selection { background: rgba(30, 96, 145, .18); }

* { scrollbar-width: thin; scrollbar-color: #c5cfdd transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c5cfdd; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }

/* =====================================================================
   App shell — sidebar + glass header
   ===================================================================== */
.sv-sidebar {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: var(--sv-sidebar-w);
    background: var(--sv-surface);
    box-shadow: 0 1px 8px rgba(15, 32, 66, .06);
    border-inline-end: 1px solid rgba(226, 232, 240, .7);
    z-index: 1040;
    display: flex; flex-direction: column;
    transition: width .22s ease, transform .25s ease;
    user-select: none;
}
.sv-brand {
    height: var(--sv-header-h); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: 0 1rem 0 1.1rem;
    background: var(--sv-surface-low);
}
.sv-brand-link { display: flex; align-items: center; gap: .6rem; min-width: 0; color: inherit; }
.sv-brand-logo { height: 36px; width: auto; max-width: 64px; object-fit: contain; flex: 0 0 auto; }
.sv-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sv-brand-title { font-size: 15px; font-weight: 700; color: var(--sv-navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-brand-sub { font-size: 11px; font-weight: 600; color: var(--sv-sapphire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sv-icon-btn {
    width: 36px; height: 36px; border-radius: var(--sv-radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--sv-ink-2);
    transition: background .15s, color .15s; position: relative; flex: 0 0 auto;
    cursor: pointer;
}
.sv-icon-btn:hover, .sv-icon-btn:focus-visible { background: var(--sv-surface-high); color: var(--sv-ink); outline: none; }
.sv-icon-btn i { font-size: 16px; }

.sv-sidebar-cta { padding: 1rem; }
.sv-cta {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem;
    background: var(--sv-navy); color: #fff !important; font-weight: 600; font-size: 14px;
    padding: .7rem 1rem; border-radius: var(--sv-radius); border: 0;
    box-shadow: 0 2px 4px rgba(15, 32, 66, .15);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.sv-cta:hover { background: var(--sv-navy-deep); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 32, 66, .22); color: #fff; }

.sv-nav { flex: 1 1 auto; overflow-y: auto; padding: .25rem .6rem 1rem; display: flex; flex-direction: column; gap: 3px; }
.sv-nav-label { font-size: 11px; font-weight: 600; color: var(--sv-muted); letter-spacing: .04em; padding: .9rem .9rem .35rem; text-transform: uppercase; }
.sv-nav-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .62rem .9rem; border-radius: var(--sv-radius);
    color: var(--sv-ink-2) !important; font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s; white-space: nowrap;
}
.sv-nav-link i { width: 20px; text-align: center; font-size: 16px; color: var(--sv-sapphire-2); flex: 0 0 20px; }
.sv-nav-link:hover { background: var(--sv-surface-mid); color: var(--sv-ink) !important; }
.sv-nav-link.active {
    background: var(--sv-surface-high); color: var(--sv-ink) !important; font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 32, 66, .05);
}
.sv-nav-link.active i { color: var(--sv-navy); }
.sv-nav-text { overflow: hidden; text-overflow: ellipsis; }

.sv-sidebar-foot { padding: 1rem; background: rgba(239, 244, 255, .6); }
.sv-foot-card {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .7rem; background: var(--sv-surface); border-radius: var(--sv-radius);
    box-shadow: 0 1px 3px rgba(15, 32, 66, .04); font-size: 11px; font-weight: 600; color: var(--sv-ink-2);
}
.sv-foot-card .sv-foot-ok { color: var(--sv-sapphire); display: flex; align-items: center; gap: .35rem; }

/* Collapsed sidebar (desktop) */
@media (min-width: 992px) {
    html.sv-collapsed .sv-sidebar { width: var(--sv-sidebar-w-collapsed); }
    html.sv-collapsed .sv-brand-text,
    html.sv-collapsed .sv-nav-text,
    html.sv-collapsed .sv-nav-label,
    html.sv-collapsed .sv-cta span,
    html.sv-collapsed .sv-foot-card span.sv-foot-hide { display: none; }
    html.sv-collapsed .sv-brand { padding: 0 .5rem; justify-content: center; flex-direction: column; height: auto; min-height: var(--sv-header-h); gap: 4px; padding-block: .5rem; }
    html.sv-collapsed .sv-brand-logo { height: 28px; }
    html.sv-collapsed .sv-nav-link { justify-content: center; padding: .7rem 0; }
    html.sv-collapsed .sv-sidebar-cta { padding: 1rem .6rem; }
    html.sv-collapsed .sv-foot-card { justify-content: center; }
    html.sv-collapsed .sv-collapse-btn i { transform: scaleX(-1); }
    html.sv-collapsed .sv-main { padding-inline-start: var(--sv-sidebar-w-collapsed); }
    html.sv-collapsed .sv-header { inset-inline-start: var(--sv-sidebar-w-collapsed); }
}

.sv-main { padding-inline-start: var(--sv-sidebar-w); min-height: 100vh; transition: padding .22s ease; display: flex; flex-direction: column; }

.sv-header {
    position: sticky; top: 0; z-index: 1030;
    height: var(--sv-header-h);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 8px rgba(15, 32, 66, .04);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.5rem;
}
.sv-header-start { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; max-width: 620px; }
.sv-header-end { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.sv-menu-btn { display: none; }

.sv-search { position: relative; width: 100%; margin: 0; }
.sv-search > i { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--sv-ink-2); font-size: 14px; pointer-events: none; }
.sv-search input {
    width: 100%; height: 40px; border: 1px solid transparent; outline: none;
    background: var(--sv-surface-low); color: var(--sv-ink);
    border-radius: var(--sv-radius); font-size: 13px;
    padding-inline-start: 38px; padding-inline-end: 84px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.sv-search input::placeholder { color: var(--sv-muted); }
.sv-search input:focus { background: var(--sv-surface); border-color: #cbd5e1; box-shadow: var(--sv-focus); }
.sv-kbd {
    position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
    background: var(--sv-surface-highest); color: var(--sv-ink-2); border-radius: 4px;
    font-size: 11px; font-weight: 600; padding: 2px 6px; direction: ltr; pointer-events: none;
}

.sv-lang { display: flex; align-items: center; gap: 2px; background: var(--sv-surface-low); padding: 3px; border-radius: var(--sv-radius); margin: 0; }
.sv-lang button {
    border: 0; background: transparent; color: var(--sv-ink-2);
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 5px; line-height: 1.4; cursor: pointer;
}
.sv-lang button.on { background: var(--sv-surface); color: var(--sv-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.sv-lang button:not(.on):hover { color: var(--sv-ink); }

.sv-badge-dot {
    position: absolute; top: -5px; inset-inline-end: -7px; z-index: 1; pointer-events: none;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: #ba1a1a; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
    border: 2px solid #fff; box-sizing: content-box;
}
/* جرس الإشعارات: الرقم خارج الأيقونة، والجرس يهتز عند وجود إشعارات غير مقروءة */
#reminderDropdown { position: relative; overflow: visible; }
body.dark-mode .sv-badge-dot { border-color: var(--sv-surface); }
@keyframes sv-bell-ring {
    0%, 60%, 100% { transform: rotate(0); }
    6% { transform: rotate(16deg); } 12% { transform: rotate(-14deg); } 18% { transform: rotate(11deg); }
    24% { transform: rotate(-8deg); } 30% { transform: rotate(5deg); } 36% { transform: rotate(-3deg); }
}
#reminderDropdown.has-new > i { transform-origin: 50% 8%; animation: sv-bell-ring 3.2s ease-in-out infinite; color: var(--sv-amber); }
#reminderDropdown.has-new[aria-expanded="true"] > i { animation: none; }
@media (prefers-reduced-motion: reduce) { #reminderDropdown.has-new > i { animation: none; } }
.sv-divider { width: 1px; height: 24px; background: var(--sv-surface-high); margin: 0 .25rem; }

.sv-user { display: flex; align-items: center; gap: .6rem; background: transparent; border: 0; padding: 4px 6px; border-radius: var(--sv-radius); cursor: pointer; color: inherit; }
.sv-user:hover { background: var(--sv-surface-low); }
.sv-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    background: linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 32, 66, .15);
}
.sv-user-meta { display: flex; flex-direction: column; text-align: start; line-height: 1.25; }
.sv-user-name { font-size: 13px; font-weight: 600; color: var(--sv-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-user-role { font-size: 11px; color: var(--sv-ink-2); }
.sv-user .fa-chevron-down { font-size: 11px; color: var(--sv-ink-2); }

.sv-content { flex: 1 1 auto; padding: 1.5rem; width: 100%; max-width: 1680px; margin: 0 auto; }
.sv-footer { padding: 1rem 1.5rem 1.25rem; font-size: 12px; color: var(--sv-muted); text-align: center; }

.sv-backdrop { display: none; }

/* Notifications panel */
.sv-notify-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0 !important; overflow: hidden; }
.sv-notify-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--sv-line-soft); }
.sv-notify-head strong { font-size: 14px; color: var(--sv-navy); }
.sv-notify-head a { font-size: 12px; font-weight: 600; }
#reminderList { max-height: 340px; overflow-y: auto; padding: .5rem !important; }
#reminderList > li > a {
    background: var(--sv-surface) !important; border: 1px solid var(--sv-line-soft) !important;
    border-radius: var(--sv-radius) !important; padding: .6rem .75rem !important; transition: background .15s;
}
#reminderList > li > a:hover { background: var(--sv-surface-low) !important; }
#reminderList .fw-bold { color: var(--sv-ink); font-size: 13px; }

/* Mobile / tablet shell */
@media (max-width: 991.98px) {
    .sv-sidebar { transform: translateX(-105%); box-shadow: var(--sv-elev-3); }
    [dir="rtl"] .sv-sidebar { transform: translateX(105%); }
    html.sv-nav-open .sv-sidebar { transform: none; }
    .sv-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 32, 66, .45); backdrop-filter: blur(4px); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s; }
    html.sv-nav-open .sv-backdrop { opacity: 1; pointer-events: auto; }
    .sv-main { padding-inline-start: 0; }
    .sv-menu-btn { display: inline-flex; }
    .sv-collapse-btn { display: none; }
    .sv-header { padding: 0 1rem; gap: .5rem; }
    .sv-user-meta, .sv-kbd { display: none; }
    .sv-search input { padding-inline-end: 12px; }
    .sv-content { padding: 1rem; }
}
@media (max-width: 575.98px) {
    .sv-header-search { display: none; }
    .sv-header-start { flex: 0 0 auto; }
    .sv-header-end { margin-inline-start: auto; gap: .35rem; }
    .sv-divider { display: none; }
}

/* Loading bar & page transitions */
#app-loadbar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 20000; pointer-events: none;
    background: linear-gradient(90deg, var(--sv-sapphire), #8ec6fd);
    box-shadow: 0 0 10px rgba(30, 96, 145, .55);
}
#app-loadbar.go { width: 92%; transition: width 10s cubic-bezier(.1, .7, .1, 1); }
#app-loadbar.done { width: 100%; opacity: 0; transition: width .2s ease, opacity .3s ease .1s; }
@view-transition { navigation: auto; }

/* =====================================================================
   Page building blocks
   ===================================================================== */
.sv-page-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--sv-surface); padding: 1rem 1.25rem; border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-elev-1); border: 1px solid rgba(226, 232, 240, .8);
    margin-bottom: 1.25rem;
}
.sv-page-head.plain { background: transparent; box-shadow: none; border: 0; padding: .25rem 0; }
.sv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 12px; font-weight: 500; color: var(--sv-ink-2); margin-bottom: .2rem; }
.sv-crumbs i.lead { color: var(--sv-sapphire); }
.sv-crumbs .sep { font-size: 9px; color: var(--sv-muted); }
[dir="rtl"] .sv-crumbs .sep { transform: scaleX(-1); }
.sv-crumbs a { color: var(--sv-ink-2); }
.sv-crumbs a:hover { color: var(--sv-sapphire); }
.sv-crumbs .current { color: var(--sv-sapphire); font-weight: 600; }
.sv-title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; font-size: 22px; line-height: 1.45; font-weight: 700; color: var(--sv-navy-deep); }
.sv-subtitle { margin: .25rem 0 0; font-size: 13px; color: var(--sv-ink-2); max-width: 720px; }
.sv-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--sv-surface-high); color: var(--sv-sapphire-2);
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; line-height: 1.5;
}
.sv-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.sv-card {
    background: rgba(255, 255, 255, .96); border: 1px solid rgba(226, 232, 240, .8);
    border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-1);
}
.sv-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1.25rem .6rem; }
.sv-card-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 16px; font-weight: 700; color: var(--sv-navy-deep); }
.sv-card-title i { color: var(--sv-sapphire); }
.sv-card-sub { font-size: 12px; color: var(--sv-ink-2); margin: .1rem 0 0; }
.sv-card-body { padding: 1rem 1.25rem 1.25rem; }

.sv-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    background: var(--sv-surface); border: 1px solid rgba(226, 232, 240, .8);
    border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-1);
    padding: .85rem 1rem; margin-bottom: 1rem;
}
.sv-field { position: relative; flex: 1 1 260px; max-width: 520px; }
.sv-field > i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--sv-muted); font-size: 14px; pointer-events: none; }
.sv-field .form-control { padding-inline-start: 40px !important; background: var(--sv-surface-low) !important; border-color: transparent !important; height: 42px; border-radius: var(--sv-radius) !important; }
.sv-field .form-control:focus { background: var(--sv-surface) !important; border-color: #cbd5e1 !important; }
.sv-check {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0;
    background: var(--sv-surface-low); border-radius: var(--sv-radius); padding: .5rem .8rem; min-height: 42px;
    font-size: 13px; font-weight: 500; color: var(--sv-ink);
}
.sv-check .form-check-input { margin: 0; float: none; }
.sv-check .dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-crimson); }

/* KPI tiles */
.sv-kpi {
    display: flex; flex-direction: column; height: 100%;
    background: var(--sv-surface); border: 1px solid rgba(226, 232, 240, .8);
    border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-1);
    color: inherit !important; transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}
a.sv-kpi:hover { transform: translateY(-2px); box-shadow: var(--sv-elev-2); }
.sv-kpi-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 1rem; }
.sv-kpi-label { font-size: 12px; font-weight: 500; color: var(--sv-ink-2); margin-bottom: .35rem; }
.sv-kpi-value { font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--sv-navy-deep); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sv-kpi-icon {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--sv-radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sv-surface-high); color: var(--sv-sapphire); font-size: 20px;
}
.sv-kpi-icon.ok { background: #e5f6ef; color: var(--sv-emerald); }
.sv-kpi-icon.err { background: #fde8e8; color: var(--sv-crimson); }
.sv-kpi-icon.warn { background: #fdf3df; color: var(--sv-amber); }
.sv-kpi-foot {
    margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border-top: 1px solid var(--sv-line-soft); padding: .65rem 1.25rem; font-size: 12px; font-weight: 600; color: var(--sv-sapphire);
}
.sv-kpi-foot .go { color: var(--sv-muted); font-size: 11px; }
[dir="rtl"] .sv-kpi-foot .go { transform: scaleX(-1); }
.sv-kpi-foot.ok { color: var(--sv-emerald); }

/* Status pills */
.sv-pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.sv-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv-pill.ok { background: var(--sv-ok-bg); color: var(--sv-ok-fg); }
.sv-pill.err { background: var(--sv-err-bg); color: var(--sv-err-fg); }
.sv-pill.warn { background: var(--sv-warn-bg); color: var(--sv-warn-fg); }
.sv-pill.info { background: var(--sv-info-bg); color: var(--sv-info-fg); }
.sv-pill.navy { background: var(--sv-navy); color: #fff; }
.sv-pill.slate { background: #f1f5f9; color: #334155; }

.sv-ext { display: inline-block; min-width: 48px; text-align: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; direction: ltr; background: #f1f5f9; color: #334155; }
.sv-ext.pdf { background: #fde8e8; color: #c81e1e; }
.sv-ext.doc, .sv-ext.docx { background: #e1effe; color: #1e40af; }
.sv-ext.xls, .sv-ext.xlsx, .sv-ext.csv { background: #def7ec; color: #03543f; }
.sv-ext.png, .sv-ext.jpg, .sv-ext.jpeg, .sv-ext.gif { background: #f3e8ff; color: #6b21a8; }

/* Row action cluster (32px round targets) */
.sv-row-actions { display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: nowrap; }
.sv-act, .sv-row-actions > a, .sv-row-actions form > button {
    width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; color: var(--sv-ink-2) !important; box-shadow: none !important;
    transition: background .15s, color .15s; font-size: 14px; cursor: pointer;
}
.sv-act:hover, .sv-row-actions > a:hover, .sv-row-actions form > button:hover { background: #f1f5f9 !important; color: var(--sv-navy) !important; transform: none; }
.sv-act.edit:hover { color: var(--sv-amber) !important; }
.sv-act.del:hover { color: var(--sv-crimson) !important; background: #fef2f2 !important; }
.sv-act.dl:hover { color: var(--sv-emerald) !important; }
.sv-act i { font-size: 14px !important; color: inherit !important; }

/* Avatar initials in tables */
.sv-ava-sm { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sv-surface-high); color: var(--sv-sapphire); font-weight: 700; font-size: 13px; flex: 0 0 34px; }
.sv-cell-user { display: flex; align-items: center; gap: .65rem; text-align: start; }
.sv-cell-user .n { font-weight: 600; color: var(--sv-ink); }
.sv-cell-user .s { font-size: 12px; color: var(--sv-muted); }
.sv-mono { font-family: 'IBM Plex Mono', Consolas, monospace !important; direction: ltr; unicode-bidi: isolate; font-size: 13px; }

.sv-empty { text-align: center; padding: 2.25rem 1rem; color: var(--sv-muted); }
.sv-empty i { font-size: 30px; color: var(--sv-outline); display: block; margin-bottom: .5rem; }

/* =====================================================================
   Bootstrap component overrides
   ===================================================================== */
.card {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(226, 232, 240, .8) !important;
    border-radius: var(--sv-radius-lg) !important;
    box-shadow: var(--sv-elev-1) !important;
}
.card > .card-header {
    background: transparent !important; border-bottom: 1px solid var(--sv-line-soft) !important;
    padding: 1rem 1.25rem; font-weight: 700; color: var(--sv-navy-deep); font-size: 15px;
}
.card > .card-header.bg-primary, .card > .card-header.bg-info, .card > .card-header.bg-success, .card > .card-header.bg-dark {
    background: var(--sv-surface-low) !important; color: var(--sv-navy-deep) !important;
}
.card > .card-body { padding: 1.25rem; }
.card > .card-footer { background: var(--sv-surface-low); border-top: 1px solid var(--sv-line-soft); }
.shadow-sm { box-shadow: var(--sv-elev-1) !important; }
.shadow, .shadow-lg { box-shadow: var(--sv-elev-2) !important; }

/* Buttons */
.btn {
    border-radius: var(--sv-radius); font-weight: 600; font-size: 13px; letter-spacing: 0;
    padding: .55rem 1rem; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:focus-visible { box-shadow: var(--sv-focus) !important; }
.btn-sm { padding: .35rem .7rem; font-size: 12px; border-radius: var(--sv-radius-sm); }
.btn-lg { padding: .75rem 1.4rem; font-size: 15px; }
.btn-link { box-shadow: none !important; }
.btn-link:hover { transform: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 100%) !important;
    border: 0 !important; color: #fff !important; box-shadow: 0 2px 4px rgba(15, 32, 66, .15);
}
.btn-primary:hover, .btn-primary:focus { box-shadow: 0 6px 16px rgba(15, 32, 66, .22); color: #fff !important; filter: brightness(1.08); }
.btn-success { background: var(--sv-navy) !important; border-color: var(--sv-navy) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(0, 9, 34, .2); }
.btn-success:hover, .btn-success:focus { background: var(--sv-navy-deep) !important; border-color: var(--sv-navy-deep) !important; color: #fff !important; }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark {
    background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover { background: #e2e8f0 !important; color: var(--sv-navy) !important; }
.btn-outline-primary, .btn-info, .btn-outline-info {
    background: var(--sv-surface-high) !important; border: 1px solid transparent !important; color: var(--sv-sapphire-2) !important;
}
.btn-outline-primary:hover, .btn-info:hover, .btn-outline-info:hover { background: #8ec6fd !important; color: #025283 !important; }
.btn-outline-success { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; color: #047857 !important; }
.btn-outline-success:hover { background: var(--sv-emerald) !important; border-color: var(--sv-emerald) !important; color: #fff !important; }
.btn-danger, .btn-outline-danger { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: var(--sv-crimson) !important; }
.btn-danger:hover, .btn-outline-danger:hover, .btn-danger:focus { background: var(--sv-crimson) !important; border-color: var(--sv-crimson) !important; color: #fff !important; }
.btn-warning, .btn-outline-warning { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #b45309 !important; }
.btn-warning:hover, .btn-outline-warning:hover { background: var(--sv-amber) !important; border-color: var(--sv-amber) !important; color: #fff !important; }
.btn.rounded-pill { border-radius: var(--sv-radius) !important; }
.btn-close { box-shadow: none !important; }

/* Forms */
.form-control, .form-select {
    min-height: 42px; border-radius: var(--sv-radius) !important; border: 1px solid #cbd5e1;
    background-color: var(--sv-surface); color: var(--sv-ink); font-size: 14px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.form-control-sm, .form-select-sm { min-height: 36px; font-size: 13px; }
.form-control::placeholder { color: #94a3b8; }
.form-control:focus, .form-select:focus { border-color: var(--sv-sapphire); box-shadow: var(--sv-focus); }
.form-control.rounded-pill { border-radius: var(--sv-radius) !important; }
.form-control[readonly], .form-control:disabled, .form-select:disabled { background: #f8fafc; }
.form-label, label.control-label { font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: .4rem; }
.form-text { color: var(--sv-muted); font-size: 12px; }
.form-check-input { border-color: #94a3b8; width: 1.1em; height: 1.1em; }
.form-check-input:checked { background-color: var(--sv-sapphire); border-color: var(--sv-sapphire); }
.form-check-input:focus { box-shadow: var(--sv-focus); border-color: var(--sv-sapphire); }
.form-switch .form-check-input { width: 2.2em; }
.input-group-text { background: var(--sv-surface-low); border-color: #cbd5e1; color: var(--sv-ink-2); border-radius: var(--sv-radius); }
.text-danger, .field-validation-error { color: var(--sv-crimson) !important; }
input[type="date"] { direction: ltr; unicode-bidi: plaintext; }
.border-primary-subtle { border-color: #cbd5e1 !important; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(248, 250, 252, .6); --bs-table-hover-bg: #f0f7ff; color: var(--sv-ink); margin-bottom: 0; font-size: 13.5px !important; }
.table td, .table th { vertical-align: middle; text-align: center; }
.table > thead th, .table > thead.table-light th {
    background: #f8fafc !important; color: #475569 !important;
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    padding: .85rem 1rem; border-bottom: 1px solid var(--sv-line) !important; border-top: 0 !important; white-space: nowrap;
}
.table > tbody > tr > td { padding: .9rem 1rem; border-bottom: 1px solid var(--sv-line-soft); color: #1e293b; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(248, 250, 252, .6); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f0f7ff; background-color: #f0f7ff; }
.table-responsive { border: 1px solid rgba(226, 232, 240, .8); border-radius: var(--sv-radius-lg); background: var(--sv-surface); overflow: auto; }
.card .table-responsive { box-shadow: none; }
.table > tbody > tr.table-danger > * {
    background-color: rgba(254, 242, 242, .7) !important; color: #7f1d1d;
}
.table > tbody > tr.table-danger > *:first-child { box-shadow: inset -3px 0 0 var(--sv-crimson); }
[dir="ltr"] .table > tbody > tr.table-danger > *:first-child { box-shadow: inset 3px 0 0 var(--sv-crimson); }
.table > tbody > tr.table-danger:hover > * { background-color: #fee2e2 !important; }
.table a { font-weight: 600; }

/* DataTables */
.dataTables_wrapper { padding: 0; }
.dataTables_wrapper > .d-flex:first-child, .dataTables_wrapper > .d-flex.mb-2 { flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info { font-size: 12.5px; color: var(--sv-ink-2); }
.dataTables_wrapper .dataTables_length select { min-height: 36px; border-radius: var(--sv-radius) !important; margin: 0 .35rem; padding-inline: .6rem 1.8rem; }
.dataTables_wrapper .dataTables_info { padding-top: 1rem !important; }
.dataTables_wrapper .dataTables_paginate { padding-top: .75rem !important; }
.dataTables_wrapper .dataTables_processing {
    background: var(--sv-surface) !important; border: 1px solid var(--sv-line) !important; border-radius: var(--sv-radius) !important;
    box-shadow: var(--sv-elev-2) !important; color: var(--sv-navy); font-weight: 600; padding: .6rem 1rem !important; height: auto !important;
}
.dt-buttons { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.dt-buttons .btn, .dataTables_wrapper .dt-buttons .btn {
    background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important;
    border-radius: var(--sv-radius) !important; font-size: 12px; padding: .42rem .8rem;
}
.dt-buttons .btn:hover { background: #e2e8f0 !important; color: var(--sv-navy) !important; }
.dt-buttons .btn i.fa-file-excel { color: var(--sv-emerald); }
.dt-buttons .btn i.fa-print { color: var(--sv-sapphire); }
div.dataTables_filter { display: none; }
.dataTables_wrapper .Table1SearchDiv .dataTables_filter { display: block; }

/* Pagination */
.pagination { gap: 4px; flex-wrap: wrap; }
.page-link {
    border: 1px solid transparent !important; border-radius: var(--sv-radius) !important;
    color: var(--sv-ink) !important; font-size: 13px; font-weight: 600; min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 .65rem; background: transparent;
}
.page-link:hover { background: var(--sv-surface-low) !important; }
.page-item.active .page-link { background: var(--sv-navy) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(15, 32, 66, .2); }
.page-item.disabled .page-link { color: #94a3b8 !important; background: transparent !important; }

/* Badges */
.badge { border-radius: 999px; font-weight: 700; font-size: 11px; padding: .38em .8em; letter-spacing: 0; }
.badge.bg-success { background: var(--sv-ok-bg) !important; color: var(--sv-ok-fg) !important; }
.badge.bg-danger { background: var(--sv-err-bg) !important; color: var(--sv-err-fg) !important; }
.badge.bg-warning { background: var(--sv-warn-bg) !important; color: var(--sv-warn-fg) !important; }
.badge.bg-info { background: var(--sv-info-bg) !important; color: var(--sv-info-fg) !important; }
.badge.bg-primary { background: var(--sv-surface-high) !important; color: var(--sv-sapphire-2) !important; }
.badge.bg-secondary { background: #f1f5f9 !important; color: #334155 !important; }
.sv-badge-dot.badge, #reminderCount { background: #ba1a1a !important; color: #fff !important; }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: var(--sv-radius-lg); font-size: 13.5px; padding: .85rem 1rem; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info, .alert-primary { background: var(--sv-info-bg); border-color: #bfdbfe; color: var(--sv-info-fg); }

/* Dropdowns */
.dropdown-menu {
    border: 1px solid rgba(226, 232, 240, .9); border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-elev-2); padding: .4rem; font-size: 13px; min-width: 180px;
}
.dropdown-item { border-radius: var(--sv-radius-sm); padding: .5rem .75rem; color: var(--sv-ink); display: flex; align-items: center; gap: .55rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sv-surface-low); color: var(--sv-navy); }
.dropdown-item i { width: 16px; text-align: center; color: var(--sv-ink-2); }
.dropdown-item.text-danger i { color: var(--sv-crimson); }
.dropdown-header { color: var(--sv-ink-2); font-size: 12px; }

/* Modals */
.modal-backdrop.show { opacity: 1; background: rgba(15, 32, 66, .45); backdrop-filter: blur(8px); }
.modal-content { border: 0; border-radius: var(--sv-radius-xl); box-shadow: var(--sv-elev-3); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--sv-line-soft); padding: 1rem 1.25rem; }
.modal-header.bg-primary, .modal-header.bg-danger, .modal-header.bg-success, .modal-header.bg-info, .modal-header.bg-dark {
    background: linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 100%) !important; color: #fff;
}
.modal-header.bg-danger { background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%) !important; }
.modal-title { font-weight: 700; font-size: 16px; }
.modal-footer { border-top: 1px solid var(--sv-line-soft); background: #f8fafc; }

/* Breadcrumb, nav tabs, list groups */
.breadcrumb { background: transparent; font-size: 12.5px; margin-bottom: .75rem; }
.breadcrumb-item a { color: var(--sv-ink-2); }
.breadcrumb-item.active { color: var(--sv-sapphire); font-weight: 600; }
.nav-tabs { border-bottom: 1px solid var(--sv-line); gap: .25rem; }
.nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; color: var(--sv-ink-2) !important; font-weight: 600; font-size: 13.5px; padding: .65rem 1rem; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--sv-navy) !important; }
.nav-tabs .nav-link.active { color: var(--sv-sapphire) !important; border-bottom-color: var(--sv-sapphire) !important; background: transparent !important; }
.nav-pills .nav-link { border-radius: var(--sv-radius); color: var(--sv-ink-2); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--sv-navy); color: #fff; }
.list-group-item { border-color: var(--sv-line-soft); }
.progress { background: var(--sv-surface-mid); border-radius: 999px; }
.progress-bar { background: var(--sv-sapphire); }

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 42px; border: 1px solid #cbd5e1 !important; border-radius: var(--sv-radius) !important; background: var(--sv-surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; color: var(--sv-ink); padding-inline: .8rem 2rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--sv-sapphire) !important; box-shadow: var(--sv-focus); }
.select2-dropdown { border: 1px solid var(--sv-line) !important; border-radius: var(--sv-radius) !important; box-shadow: var(--sv-elev-2); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--sv-sapphire) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--sv-surface-high); border: 0; border-radius: 999px; color: var(--sv-sapphire-2); font-weight: 600; font-size: 12px; }

/* Flatpickr */
.flatpickr-calendar { border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-2) !important; border: 1px solid var(--sv-line); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--sv-navy); border-color: var(--sv-navy); }

/* File drop zone */
#fileDropZone { border: 2px dashed #cbd5e1 !important; border-radius: var(--sv-radius-lg) !important; background: var(--sv-surface-low) !important; transition: border-color .15s, background .15s; }
#fileDropZone.dragover { border-color: var(--sv-sapphire) !important; background: var(--sv-surface-high) !important; }

/* Folder tree (Folders screen) */
.folder-tree .ft-node { border-radius: var(--sv-radius) !important; padding: 6px 8px !important; color: var(--sv-ink-2); font-size: 13.5px; transition: background .15s; }
.folder-tree .ft-node:hover { background: var(--sv-surface-mid) !important; color: var(--sv-ink); }
.folder-tree .ft-node.ft-active { background: var(--sv-surface-high) !important; color: var(--sv-navy) !important; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 32, 66, .05); }
.folder-tree .ft-node.ft-active .ft-link { color: var(--sv-navy) !important; }
.folder-tree .ft-icon { color: var(--sv-amber) !important; }
.folder-tree .ft-node.ft-active .ft-icon { color: var(--sv-sapphire) !important; }
.folder-tree .ft-link { color: inherit !important; font-weight: inherit; }
.folder-tree ul.ft-children { border-inline-start: 1px solid var(--sv-line) !important; }
.folder-tree .ft-node.ft-match { background: #fef3c7 !important; box-shadow: inset 0 0 0 1px #fde68a !important; }
.ft-gutter::before { background: var(--sv-line) !important; }
.ft-gutter:hover::before, .ft-gutter.ft-dragging::before { background: var(--sv-sapphire) !important; }

/* FullCalendar */
.fc .fc-button-primary { background: var(--sv-navy) !important; border-color: var(--sv-navy) !important; border-radius: var(--sv-radius) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--sv-sapphire) !important; }
.fc .fc-toolbar-title { color: var(--sv-navy); font-weight: 700; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--sv-line-soft) !important; }

/* =====================================================================
   Dark mode (body.dark-mode) — navy-night palette
   ===================================================================== */
body.dark-mode {
    --sv-bg: #0b1322;
    --sv-surface: #121d31;
    --sv-surface-low: #172338;
    --sv-surface-mid: #1b2a43;
    --sv-surface-high: #22355a;
    --sv-surface-highest: #2a3f66;
    --sv-ink: #e3eaf6;
    --sv-ink-2: #a9b6cb;
    --sv-muted: #7f8ca3;
    --sv-line: #24324b;
    --sv-line-soft: #1d2a40;
    --sv-navy-deep: #eef3fb;
    --sv-navy: #b6c6f1;
    --sv-sapphire: #8ec6fd;
    --sv-sapphire-2: #97cbff;
    background: radial-gradient(at 100% 0%, #13213a 0px, transparent 50%), var(--sv-bg) !important;
    color: var(--sv-ink) !important;
}
body.dark-mode .sv-sidebar { background: var(--sv-surface); border-color: var(--sv-line); }
body.dark-mode .sv-brand { background: var(--sv-surface-low); }
body.dark-mode .sv-cta, body.dark-mode .btn-success, body.dark-mode .page-item.active .page-link { background: #2a5ea0 !important; border-color: #2a5ea0 !important; color: #fff !important; }
body.dark-mode .sv-header { background: rgba(18, 29, 49, .88); }
body.dark-mode .sv-sidebar-foot { background: rgba(23, 35, 56, .6); }
body.dark-mode .sv-badge-dot { border-color: var(--sv-surface); }
body.dark-mode .card, body.dark-mode .sv-card, body.dark-mode .sv-kpi, body.dark-mode .sv-page-head,
body.dark-mode .sv-toolbar, body.dark-mode .table-responsive, body.dark-mode .modal-content, body.dark-mode .dropdown-menu {
    background: var(--sv-surface) !important; border-color: var(--sv-line) !important;
}
body.dark-mode .table { color: var(--sv-ink); --bs-table-striped-bg: rgba(255, 255, 255, .02); --bs-table-hover-bg: #1b2a43; }
body.dark-mode .table > thead th { background: var(--sv-surface-low) !important; color: var(--sv-ink-2) !important; border-color: var(--sv-line) !important; }
body.dark-mode .table > tbody > tr > td { color: var(--sv-ink); border-color: var(--sv-line-soft); }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, .02); color: var(--sv-ink); }
body.dark-mode .table-hover > tbody > tr:hover > * { background-color: #1b2a43; color: var(--sv-ink); }
body.dark-mode .table > tbody > tr.table-danger > * { background-color: rgba(127, 29, 29, .25) !important; color: #fecaca; }
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .input-group-text,
body.dark-mode .select2-container--default .select2-selection--single, body.dark-mode .select2-dropdown {
    background-color: var(--sv-surface-low) !important; border-color: var(--sv-line) !important; color: var(--sv-ink) !important;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sv-ink); }
body.dark-mode .form-label { color: var(--sv-ink-2); }
/* عناوين الحقول في كل النماذج (إضافة/تعديل الوثيقة والمجلد...) تكون واضحة في الوضع الليلي */
body.dark-mode label.control-label, body.dark-mode form label:not(.btn):not(.sv-chip),
body.dark-mode .form-check-label { color: var(--sv-ink-2); }
body.dark-mode .bg-light-subtle, body.dark-mode .bg-light { background-color: var(--sv-surface-low) !important; color: var(--sv-ink); }
body.dark-mode .form-control.bg-light { color: var(--sv-ink); border-color: var(--sv-line); }
body.dark-mode .border-primary-subtle { border-color: rgba(96, 165, 250, .35) !important; }
body.dark-mode .text-primary { color: #93c5fd !important; }
body.dark-mode .badge.bg-info.text-dark { background: rgba(96, 165, 250, .22) !important; color: #dbeafe !important; }
body.dark-mode .btn-secondary, body.dark-mode .btn-light, body.dark-mode .btn-outline-secondary, body.dark-mode .dt-buttons .btn {
    background: var(--sv-surface-low) !important; border-color: var(--sv-line) !important; color: var(--sv-ink) !important;
}
body.dark-mode .modal-footer, body.dark-mode .card > .card-footer { background: var(--sv-surface-low); border-color: var(--sv-line); }
body.dark-mode .dropdown-item { color: var(--sv-ink); }
body.dark-mode .bg-light, body.dark-mode .bg-white { background-color: var(--sv-surface-low) !important; color: var(--sv-ink); }
body.dark-mode .text-dark { color: var(--sv-ink) !important; }
body.dark-mode .list-group-item { background: transparent; color: var(--sv-ink); border-color: var(--sv-line-soft); }
body.dark-mode .sv-ext, body.dark-mode .sv-pill.slate { background: var(--sv-surface-high); color: var(--sv-ink); }
body.dark-mode .sv-kpi-icon { background: var(--sv-surface-high); }
body.dark-mode .sv-act:hover, body.dark-mode .sv-row-actions > a:hover { background: var(--sv-surface-high) !important; }
body.dark-mode .sv-lang button.on { background: var(--sv-surface-high); }
body.dark-mode #reminderList > li > a { background: var(--sv-surface-low) !important; border-color: var(--sv-line) !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: var(--sv-navy-deep); }
body.dark-mode a:not(.btn):not(.sv-nav-link):not(.dropdown-item) { color: var(--sv-sapphire); }

/* =====================================================================
   Legacy page patterns (sub-pages: Create/Edit/Details/Delete...)
   ===================================================================== */
.sv-file-ico {
    width: 36px; height: 36px; border-radius: var(--sv-radius); display: inline-flex; align-items: center; justify-content: center;
    background: var(--sv-surface-high); color: var(--sv-sapphire); font-size: 15px;
}
.sv-file-ico .fa-file-pdf { color: #c81e1e; }
.sv-file-ico .fa-file-word { color: #1e40af; }
.sv-file-ico .fa-file-excel { color: #047857; }
.sv-file-ico .fa-file-image { color: #7e22ce; }

/* Back arrow link that sub-pages render next to their title */
.sv-content a.navbar-brand {
    width: 40px; height: 40px; border-radius: var(--sv-radius); margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
    background: var(--sv-surface); border: 1px solid rgba(226, 232, 240, .9); box-shadow: var(--sv-elev-1);
    color: var(--sv-navy) !important; font-size: 14px; transition: background .15s, transform .15s;
}
.sv-content a.navbar-brand:hover { background: var(--sv-surface-high); transform: translateY(-1px); }
.sv-content a.navbar-brand .fa-lg { font-size: 15px; }
.sv-content > h4, .sv-content > .row > .col > h4, .sv-content > .row h4.mb-0, .sv-content > div > .col > h4 {
    font-size: 22px; font-weight: 700; color: var(--sv-navy-deep); margin: 0;
}
.sv-content > h4 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.sv-content > h4 > i { width: 40px; height: 40px; border-radius: var(--sv-radius); background: var(--sv-surface-high); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.sv-content > .row.mb-3:first-child, .sv-content > .row.mb-3 { margin-bottom: 1.25rem !important; }
.form-group { margin-bottom: 1rem; }
dl.row dt { color: var(--sv-ink-2); font-weight: 600; font-size: 13px; }
dl.row dd { color: var(--sv-ink); }
hr { border-color: var(--sv-line); opacity: 1; }

/* Guest (non-authenticated) pages such as Forgot / Reset password */
.sv-main-guest .sv-content { max-width: 560px; padding-top: 8vh; }

/* Dark mode: translucent status pills / file-type chips */
body.dark-mode .sv-pill.ok, body.dark-mode .badge.bg-success { background: rgba(16, 185, 129, .16) !important; color: #6ee7b7 !important; }
body.dark-mode .sv-pill.err, body.dark-mode .badge.bg-danger { background: rgba(239, 68, 68, .18) !important; color: #fca5a5 !important; }
body.dark-mode .sv-pill.warn, body.dark-mode .badge.bg-warning { background: rgba(245, 158, 11, .18) !important; color: #fcd34d !important; }
body.dark-mode .sv-pill.info, body.dark-mode .badge.bg-info { background: rgba(96, 165, 250, .16) !important; color: #93c5fd !important; }
body.dark-mode .sv-ext.pdf { background: rgba(239, 68, 68, .18); color: #fca5a5; }
body.dark-mode .sv-ext.doc, body.dark-mode .sv-ext.docx { background: rgba(96, 165, 250, .16); color: #93c5fd; }
body.dark-mode .sv-ext.xls, body.dark-mode .sv-ext.xlsx, body.dark-mode .sv-ext.csv { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
body.dark-mode .sv-kpi-icon.ok { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
body.dark-mode .sv-kpi-icon.err { background: rgba(239, 68, 68, .18); color: #fca5a5; }
body.dark-mode .sv-kpi-icon.warn { background: rgba(245, 158, 11, .18); color: #fcd34d; }
body.dark-mode .alert-success { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); color: #a7f3d0; }
body.dark-mode .alert-danger { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #fecaca; }
body.dark-mode .btn-danger { background: rgba(239, 68, 68, .14) !important; border-color: rgba(239, 68, 68, .35) !important; color: #fca5a5 !important; }

/* =====================================================================
   Approval workflow (Maker / Checker)
   ===================================================================== */
.sv-nav-count {
    margin-inline-start: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--sv-amber); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
html.sv-collapsed .sv-nav-link { position: relative; }
html.sv-collapsed .sv-nav-count { position: absolute; top: 4px; inset-inline-end: 10px; min-width: 16px; height: 16px; line-height: 16px; font-size: 9px; padding: 0 4px; }

.sv-note {
    display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--sv-radius);
    background: var(--sv-surface-low); color: var(--sv-ink-2); font-size: 13px; border: 1px solid var(--sv-line-soft);
}
.sv-note > i { color: var(--sv-sapphire); margin-top: 3px; }

.wf-banner {
    display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; margin-bottom: 1rem;
    border-radius: var(--sv-radius-lg); border: 1px solid transparent; font-size: 14px;
}
.wf-banner > i { font-size: 20px; }
.wf-banner.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.wf-banner.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wf-banner.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* Stepper */
.wf-steps { list-style: none; display: flex; margin: .5rem 0 0; padding: 0; counter-reset: none; overflow-x: auto; }
.wf-step { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 .25rem; }
.wf-step::before {
    content: ''; position: absolute; top: 17px; inset-inline-start: -50%; width: 100%; height: 3px;
    background: var(--sv-line); z-index: 0;
}
.wf-step:first-child::before { display: none; }
.wf-step.done::before, .wf-step.current::before, .wf-step.rejected::before { background: var(--sv-emerald); }
.wf-dot {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sv-surface); border: 2px solid var(--sv-line); color: var(--sv-muted); font-weight: 700; font-size: 13px;
    position: relative; z-index: 1; transition: all .2s;
}
.wf-step.done .wf-dot { background: var(--sv-emerald); border-color: var(--sv-emerald); color: #fff; }
.wf-step.current .wf-dot { border-color: var(--sv-amber); color: var(--sv-amber); box-shadow: 0 0 0 5px rgba(217, 119, 6, .14); animation: wfPulse 1.8s ease-in-out infinite; }
.wf-step.rejected .wf-dot { background: var(--sv-crimson); border-color: var(--sv-crimson); color: #fff; }
@keyframes wfPulse { 50% { box-shadow: 0 0 0 9px rgba(217, 119, 6, .06); } }
.wf-label { margin-top: .45rem; font-size: 12px; font-weight: 600; color: var(--sv-ink); }
.wf-by { font-size: 11px; color: var(--sv-muted); }

/* Mini stage bar (tables) */
.wf-mini { display: inline-flex; gap: 4px; }
.wf-mini > span { width: 22px; height: 6px; border-radius: 999px; background: var(--sv-line); }
.wf-mini > span.done { background: var(--sv-emerald); }
.wf-mini > span.current { background: var(--sv-amber); }

/* Review form */
.wf-actions, .wf-form { background: var(--sv-surface-low); border: 1px solid var(--sv-line-soft); border-radius: var(--sv-radius-lg); padding: 1rem; }

/* Timeline */
.wf-history-title { font-size: 14px; font-weight: 700; color: var(--sv-navy-deep); margin: 1.5rem 0 .75rem; }
.wf-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.wf-timeline::before { content: ''; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 15px; width: 2px; background: var(--sv-line-soft); }
.wf-timeline > li { display: flex; gap: .85rem; padding: .5rem 0; position: relative; }
.wf-tl-ico {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; position: relative; z-index: 1; border: 3px solid var(--sv-surface);
}
.wf-tl-ico.ok { background: var(--sv-ok-bg); color: var(--sv-ok-fg); }
.wf-tl-ico.err { background: var(--sv-err-bg); color: var(--sv-err-fg); }
.wf-tl-ico.info { background: var(--sv-info-bg); color: var(--sv-info-fg); }
.wf-tl-body { flex: 1 1 auto; min-width: 0; background: var(--sv-surface); border: 1px solid var(--sv-line-soft); border-radius: var(--sv-radius); padding: .6rem .85rem; }
.wf-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 13px; }
.wf-tl-comment { margin-top: .4rem; font-size: 13px; color: var(--sv-ink-2); white-space: pre-wrap; border-inline-start: 3px solid var(--sv-line); padding-inline-start: .6rem; }

/* Submit-for-approval box (Create / Edit) */
.wf-submit { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: var(--sv-radius-lg); border: 1px dashed #fcd34d; background: #fffbeb; }
.wf-submit-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }

body.dark-mode .wf-banner.warn, body.dark-mode .wf-submit { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
body.dark-mode .wf-banner.err { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
body.dark-mode .wf-banner.ok { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
body.dark-mode .wf-tl-ico.ok { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
body.dark-mode .wf-tl-ico.err { background: rgba(239, 68, 68, .18); color: #fca5a5; }
body.dark-mode .wf-tl-ico.info { background: rgba(96, 165, 250, .18); color: #93c5fd; }

/* =====================================================================
   Folder tree picker (svFolderTreeSelect) — dashboard, create/edit document
   ===================================================================== */
.select2-dropdown.ft-tree-dropdown { min-width: 480px; max-width: calc(100vw - 24px); }
.ft-tree-dropdown .select2-results > .select2-results__options { max-height: 460px !important; }
.ft-tree-dropdown .select2-search--dropdown { padding: .6rem; }
.ft-tree-dropdown .select2-search--dropdown .select2-search__field { height: 40px; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0 .75rem; }
.ft-tree-dropdown .select2-results__option { padding: 0; }
.ft-opt { display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem; font-size: 13.5px; position: relative; }
.ft-opt .ft-guide { position: absolute; top: 0; bottom: 0; width: 1px; background: #e2e8f0; }
.ft-opt > i { width: 16px; text-align: center; flex: 0 0 16px; }
.ft-opt > i.fa-folder, .ft-opt > i.fa-folder-open { color: var(--sv-amber); }
.ft-opt > i.fa-archive { color: var(--sv-sapphire); }
.ft-opt.depth-0 { font-weight: 700; color: var(--sv-navy-deep); }
.ft-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ft-txt .ft-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-txt .ft-path { font-size: 11.5px; font-weight: 500; color: var(--sv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-dup { margin-inline-start: auto; font-size: 10px; color: var(--sv-amber); }
.select2-results__option--highlighted .ft-opt, .select2-results__option--highlighted .ft-opt i,
.select2-results__option--highlighted .ft-path, .select2-results__option--highlighted .ft-dup { color: #fff !important; }
.select2-results__option--highlighted .ft-opt .ft-guide { background: rgba(255, 255, 255, .35); }
.select2-results__option--selected:not(.select2-results__option--highlighted) .ft-opt { background: var(--sv-surface-high); }
.ft-sel { display: inline-flex; min-width: 0; max-width: 100%; }
.ft-sel-path { color: var(--sv-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.ft-sel > span:last-child { font-weight: 700; white-space: nowrap; }
body.dark-mode .ft-opt .ft-guide { background: var(--sv-line); }

/* =====================================================================
   AI document chat
   ===================================================================== */
.sv-act.ai:hover { color: #7c3aed !important; background: #f5f3ff !important; }
.ai-avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
/* (single-chat layout superseded by .ai-layout grid below) */
.ai-chat-box { min-height: 340px; max-height: 58vh; overflow-y: auto; padding: 1.1rem 1.25rem; background: var(--sv-bg); display: flex; flex-direction: column; gap: .75rem; }
.ai-msg { display: flex; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 85%; padding: .7rem .95rem; border-radius: 14px; font-size: 14px; line-height: 1.7; box-shadow: var(--sv-elev-1); word-break: break-word; }
.ai-msg.model .ai-bubble { background: var(--sv-surface); border: 1px solid var(--sv-line-soft); color: var(--sv-ink); border-start-start-radius: 4px; }
.ai-msg.user .ai-bubble { background: linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 100%); color: #fff; border-start-end-radius: 4px; }
.ai-msg.error .ai-bubble { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ai-msg.welcome .ai-bubble { background: var(--sv-surface-low); }
.ai-msg.typing .ai-bubble { color: var(--sv-muted); font-style: italic; }
.ai-msg.typing .ai-bubble::after { content: ''; display: inline-block; width: 1.2em; text-align: start; animation: aiDots 1.2s steps(4, end) infinite; }
@keyframes aiDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.ai-bubble .ai-p { margin: 0; }
.ai-bubble .ai-li { position: relative; padding-inline-start: 1rem; }
.ai-bubble .ai-li::before { content: '•'; position: absolute; inset-inline-start: .2rem; color: var(--sv-sapphire); }
.ai-msg.user .ai-li::before { color: #fff; }
.ai-bubble .ai-gap { height: .4rem; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px solid var(--sv-line-soft); background: var(--sv-surface); }
.ai-suggest[hidden] { display: none; }
.ai-suggest button { border: 1px solid var(--sv-line); background: var(--sv-surface-low); color: var(--sv-ink); border-radius: 999px; padding: .35rem .85rem; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.ai-suggest button:hover { background: var(--sv-surface-high); border-color: #bcd6f5; color: var(--sv-navy); }
.ai-suggest button i { color: var(--sv-sapphire); margin-inline-end: .25rem; }
.ai-chat-input { gap: .5rem; flex-wrap: nowrap; align-items: flex-end; }
.ai-chat-input textarea { resize: none; min-height: 44px; max-height: 140px; }
.ai-chat-input .btn { height: 44px; width: 48px; flex: 0 0 48px; }
body.dark-mode .ai-msg.model .ai-bubble { background: var(--sv-surface-low); border-color: var(--sv-line); }
body.dark-mode .ai-msg.error .ai-bubble { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .3); color: #fecaca; }

/* ---------- AI chat: multi-chat layout, save / share ---------- */
.ai-chat { overflow: hidden; }
.ai-head { gap: .75rem; flex-wrap: nowrap; }
.ai-title-input {
    width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px; color: #fff;
    font-weight: 700; font-size: 15px; padding: 1px 6px; margin-inline-start: -6px; outline: none;
}
.ai-title-input:not([readonly]):hover, .ai-title-input:focus { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.ai-head-actions { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.ai-state { font-size: 11.5px; opacity: .8; white-space: nowrap; }
.ai-icon-btn {
    display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .65rem; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ai-icon-btn:hover { background: rgba(255, 255, 255, .18); }
.ai-icon-btn.danger:hover { background: #dc2626; border-color: #dc2626; }
.ai-icon-btn[hidden] { display: none; }
.ai-chat .modal-body.ai-layout { display: grid; grid-template-columns: 270px 1fr; height: min(72vh, 720px); position: relative; }
.ai-side { border-inline-end: 1px solid var(--sv-line-soft); background: var(--sv-surface); padding: .85rem; overflow-y: auto; }
.ai-side-label { font-size: 11.5px; font-weight: 700; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; margin: .85rem 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-list li { padding: .5rem .65rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; position: relative; }
.ai-list li:hover { background: var(--sv-surface-low); }
.ai-list li.active { background: var(--sv-surface-high); border-color: #bcd6f5; }
.ai-list li.empty { cursor: default; color: var(--sv-muted); font-size: 12.5px; background: none; }
.ai-list li.unread::after { content: ''; position: absolute; top: 12px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-amber); }
.ai-li-title { font-size: 13px; font-weight: 600; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 12px; }
.ai-li-meta { font-size: 11px; color: var(--sv-muted); }
.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.ai-main .ai-chat-box { flex: 1 1 auto; max-height: none; min-height: 0; }
.ai-main .ai-chat-input { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem 1rem; border-top: 1px solid var(--sv-line-soft); background: var(--sv-surface); }
.ai-main .ai-chat-input[hidden] { display: none; }
.ai-shared-banner { padding: .65rem 1rem; background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; font-size: 13px; font-weight: 600; }
.ai-shared-banner[hidden] { display: none; }
.ai-shared-banner .ai-note { font-weight: 400; margin-top: .25rem; white-space: pre-wrap; }
.ai-share { position: absolute; inset: 0; background: rgba(15, 32, 66, .35); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 5; }
.ai-share[hidden] { display: none; }
.ai-share-card { width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; background: var(--sv-surface); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-3); padding: 1rem 1.1rem; }
.ai-share-users { max-height: 240px; overflow-y: auto; border: 1px solid var(--sv-line-soft); border-radius: var(--sv-radius); padding: .25rem; }
.ai-share-user { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; margin: 0; }
.ai-share-user:hover { background: var(--sv-surface-low); }
.ai-share-user:has(input:checked) { background: var(--sv-surface-high); }
.ai-share-user[hidden] { display: none; }
.ai-share-user .form-check-input { margin: 0; flex: 0 0 auto; }
@media (max-width: 991.98px) {
    .ai-chat .modal-body.ai-layout { grid-template-columns: 1fr; height: 78vh; }
    .ai-side { position: absolute; inset-block: 0; inset-inline-start: 0; width: 280px; z-index: 6; box-shadow: var(--sv-elev-3); transform: translateX(-105%); transition: transform .2s; }
    [dir="rtl"] .ai-side { transform: translateX(105%); }
    .ai-side.open { transform: none; }
    .ai-icon-btn span { display: none; }
}
body.dark-mode .ai-shared-banner { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #fcd34d; }
.ai-chat-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ai-chat-card { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .85rem; border: 1px solid var(--sv-line-soft); border-radius: var(--sv-radius-lg); background: var(--sv-surface); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; position: relative; }
.ai-chat-card:hover { background: var(--sv-surface-low); border-color: #bcd6f5; transform: translateY(-1px); }
.ai-chat-card[hidden] { display: none; }
.ai-chat-card.unread { border-inline-start: 3px solid var(--sv-amber); }
.ai-chat-card .t { font-weight: 700; color: var(--sv-ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-card .d { font-size: 12px; color: var(--sv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chat-card .n { font-size: 12.5px; color: var(--sv-ink-2); background: var(--sv-surface-low); border-radius: 6px; padding: .3rem .55rem; margin-top: .35rem; white-space: pre-wrap; }
.ai-chat-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #f5f3ff; color: #7c3aed; }
.ai-chat-ico.shared { background: #fef3c7; color: var(--sv-amber); }
body.dark-mode .ai-chat-ico { background: rgba(124, 58, 237, .18); color: #c4b5fd; }
body.dark-mode .ai-chat-ico.shared { background: rgba(245, 158, 11, .18); color: #fcd34d; }

/* Header search: own clear button (the browser's native one sat at the far left in RTL, over the Ctrl+K hint) */
.sv-search input::-webkit-search-cancel-button, .sv-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sv-search-clear {
    position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--sv-surface-high); color: var(--sv-ink-2);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer;
}
.sv-search-clear:hover { background: var(--sv-crimson); color: #fff; }
.sv-search-clear[hidden] { display: none; }
.sv-search.has-value .sv-kbd { display: none; }

/* Select2 clear "×": vertically centred next to the arrow (not stuck in the corner) */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute; top: 50%; transform: translateY(-50%); margin: 0; float: none; z-index: 2;
    inset-inline-end: 34px; width: 22px; height: 22px; border-radius: 50%; line-height: 20px; text-align: center;
    color: var(--sv-muted); font-size: 16px; font-weight: 700; background: transparent; border: 0; padding: 0;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { background: var(--sv-surface-high); color: var(--sv-crimson); }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-inline-end: 60px !important; }

/* Dark-mode toggle: moon in light mode, sun in dark mode (inline SVG — the icon-font sun looked like a gear) */
.ico-sun { display: none; }
body.dark-mode .ico-moon { display: none; }
body.dark-mode .ico-sun { display: inline-block; color: #fbbf24; }

/* Attachment viewer (documents with several files) */
.sv-act.has-count { position: relative; }
.sv-act-count { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--sv-sapphire); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.att-layout { display: grid; grid-template-columns: 260px 1fr; height: min(78vh, 780px); }
.att-side { border-inline-end: 1px solid var(--sv-line-soft); padding: .85rem; overflow-y: auto; background: var(--sv-surface); }
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.att-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.att-list li:hover { background: var(--sv-surface-low); }
.att-list li.active { background: var(--sv-surface-high); border-color: #bcd6f5; }
.att-list li > i { font-size: 18px; width: 20px; text-align: center; color: var(--sv-sapphire); flex: 0 0 20px; }
.att-list li > i.fa-file-pdf { color: #c81e1e; }
.att-list li > i.fa-file-word { color: #1e40af; }
.att-list li > i.fa-file-excel { color: #047857; }
.att-li-name { font-size: 13px; font-weight: 600; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-li-meta { font-size: 11px; color: var(--sv-muted); }
.att-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sv-bg); }
.att-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--sv-line-soft); background: var(--sv-surface); }
.att-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.att-preview { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.att-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.att-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 991.98px) {
    .att-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 82vh; }
    .att-side { border-inline-end: 0; border-bottom: 1px solid var(--sv-line-soft); max-height: 170px; }
}

/* =====================================================================
   Notifications (bell)
   ===================================================================== */
.sv-notify-menu { width: 400px; }
.sv-notify-tabs { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.sv-notify-tabs button { border: 0; background: transparent; padding: .35rem .7rem; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--sv-ink-2); display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.sv-notify-tabs button.active { background: var(--sv-surface-high); color: var(--sv-navy); }
.sv-notify-markall { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 8px; color: var(--sv-ink-2); cursor: pointer; }
.sv-notify-markall:hover { background: var(--sv-surface-low); color: var(--sv-emerald); }
.sv-notify-sub { padding: .45rem 1rem; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--sv-line-soft); }
[data-npane][hidden] { display: none; }
.sv-notif-list { max-height: 400px; overflow-y: auto; padding: .35rem !important; }
.sv-notif { display: flex; gap: .65rem; padding: .6rem .65rem; border-radius: 10px; color: var(--sv-ink) !important; text-decoration: none; position: relative; }
.sv-notif:hover { background: var(--sv-surface-low); }
.sv-notif.unread { background: #f0f7ff; }
.sv-notif.unread::after { content: ''; position: absolute; top: 14px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-sapphire); }
.sv-notif-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sv-notif-ico.ok { background: var(--sv-ok-bg); color: var(--sv-ok-fg); }
.sv-notif-ico.err { background: var(--sv-err-bg); color: var(--sv-err-fg); }
.sv-notif-ico.warn { background: var(--sv-warn-bg); color: var(--sv-warn-fg); }
.sv-notif-ico.info { background: #f5f3ff; color: #7c3aed; }
.sv-notif-body { display: flex; flex-direction: column; min-width: 0; padding-inline-end: 14px; }
.sv-notif-title { font-size: 13px; font-weight: 600; line-height: 1.45; }
.sv-notif-subject { font-size: 12.5px; color: var(--sv-sapphire); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-notif-comment { font-size: 12px; color: var(--sv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-notif-at { font-size: 11px; color: var(--sv-muted); margin-top: 2px; }
body.dark-mode .sv-notif.unread { background: rgba(96, 165, 250, .08); }
body.dark-mode .sv-notif-ico.ok { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
body.dark-mode .sv-notif-ico.err { background: rgba(239, 68, 68, .18); color: #fca5a5; }
body.dark-mode .sv-notif-ico.warn { background: rgba(245, 158, 11, .18); color: #fcd34d; }

/* =====================================================================
   User profile
   ===================================================================== */
.pf-hero { overflow: hidden; }
.pf-cover { height: 110px; background: radial-gradient(600px 200px at 85% 0%, rgba(142, 198, 253, .35), transparent 60%), linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 60%, #000922 100%); }
body.dark-mode .pf-cover { background: linear-gradient(135deg, #1e3a66 0%, #0b1322 100%); }
.pf-hero-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.25rem; padding: 0 1.5rem 1.25rem; margin-top: -48px; }
.pf-avatar-wrap { position: relative; flex: 0 0 auto; }
.pf-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid var(--sv-surface); box-shadow: var(--sv-elev-2); background: var(--sv-surface); display: block; }
.pf-initials { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--sv-sapphire) 0%, var(--sv-navy) 100%); }
.pf-avatar-edit { position: absolute; bottom: 4px; inset-inline-end: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--sv-surface); color: var(--sv-navy); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--sv-elev-2); cursor: pointer; margin: 0; }
.pf-avatar-edit:hover { background: var(--sv-surface-high); }
.pf-id { flex: 1 1 280px; min-width: 0; padding-top: 52px; }
.pf-hero-actions { display: flex; gap: .5rem; padding-top: 52px; }
.pf-strength { height: 6px; border-radius: 999px; background: var(--sv-line-soft); overflow: hidden; }
.pf-strength span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.pf-strength span.weak { background: var(--sv-crimson); }
.pf-strength span.fair { background: var(--sv-amber); }
.pf-strength span.strong { background: var(--sv-emerald); }
.pf-access { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: var(--sv-radius); background: var(--sv-surface-low); font-size: 13px; }
.pf-access > i { color: var(--sv-amber); font-size: 16px; }
.pf-perm-group { margin-bottom: .85rem; }
.pf-perm-title { font-size: 12px; font-weight: 700; color: var(--sv-ink-2); margin-bottom: .35rem; }
img.sv-avatar { object-fit: cover; padding: 0; }
img.sv-ava-sm { object-fit: cover; padding: 0; }
/* initials drawn by CSS: not part of the cell text, so copy/Excel/print exports show the name only */
.sv-ava-sm[data-ini]::before { content: attr(data-ini); }

/* Clear ("×") button inside search fields */
.sv-field-clear {
    position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0;
    background: var(--sv-surface-high); color: var(--sv-ink-2); font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.sv-field-clear:hover { background: var(--sv-crimson); color: #fff; }
.sv-field-clear[hidden] { display: none; }
.sv-field.has-clear .form-control { padding-inline-end: 40px !important; }
.sv-kpi-icon.violet { background: #f5f3ff; color: #7c3aed; }
body.dark-mode .sv-kpi-icon.violet { background: rgba(124, 58, 237, .18); color: #c4b5fd; }

/* =====================================================================
   Centered table columns everywhere (headers + cells + inner blocks)
   (DataTables' own CSS aligns th to the left/right — overridden here)
   ===================================================================== */
.table > thead > tr > th, .table > thead > tr > td,
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td,
table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > th,
.table > tbody > tr > td, .table > tbody > tr > th { text-align: center !important; }
table.dataTable > thead > tr > th.sorting, table.dataTable > thead > tr > th.sorting_asc, table.dataTable > thead > tr > th.sorting_desc { padding-inline: 1.6rem !important; }
.table td .text-start, .table th .text-start, .table td.text-start, .table th.text-start { text-align: center !important; }
.table td > .d-flex, .table td .text-start > .d-flex, .table td > div > .d-flex { justify-content: center; }
.table .sv-cell-user { justify-content: center; text-align: center; }
.table td .small.text-muted { text-align: center; }
/* شاشتا إضافة/تعديل الوثيقة: أقسام واضحة + شريط إجراءات ثابت */
.doc-section { border: 1px solid var(--sv-line-soft); border-radius: var(--sv-radius-lg); padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--sv-surface); }
.doc-section-title { font-size: 14px; font-weight: 700; color: var(--sv-navy-deep); margin: 0 0 .85rem; display: flex; align-items: center; gap: .45rem; }
.doc-section-title i { color: var(--sv-sapphire); }
body.dark-mode .doc-section-title { color: var(--sv-ink); }
.doc-section .form-group { margin-bottom: 0; }
.doc-section label.control-label { margin-bottom: .3rem; }
.doc-dropzone { border: 2px dashed var(--sv-line); border-radius: var(--sv-radius-lg); padding: 1.25rem; text-align: center; color: var(--sv-ink-2); background: var(--sv-surface-low); cursor: pointer; min-height: 120px; transition: border-color .15s, background .15s; }
.doc-dropzone:hover, .doc-dropzone.dragover { border-color: var(--sv-sapphire); background: var(--sv-surface); }
.doc-dropzone .fa-cloud-upload-alt { color: var(--sv-sapphire); }
.doc-actions { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; margin: 1rem -1rem -1rem; padding: .75rem 1rem;
    background: var(--sv-surface); border-top: 1px solid var(--sv-line); box-shadow: 0 -6px 16px rgba(15, 32, 66, .06); border-radius: 0 0 var(--sv-radius-lg) var(--sv-radius-lg); }

/* مرفقات الوثيقة (إضافة/تعديل): الأسماء الطويلة تُقص بـ "..." ويبقى زر الحذف ظاهراً دائماً */
.file-preview-item { max-width: 100%; min-width: 0; }
.file-preview-item > * { flex-shrink: 0; }
.file-preview-item > .file-name-box { flex: 1 1 auto; min-width: 0; }
.file-preview-item > .file-name-box strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-item > embed { max-width: 38%; }
.file-preview-item > .btn { margin-inline-start: auto; }
.old-file-item { min-width: 0; }
.old-file-item > input.form-control { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.old-file-item > a, .old-file-item > button { flex-shrink: 0; }

/* وضع التضمين (معاينة لوحة المعلومات الحيّة داخل شاشة التخصيص): بدون القائمة والشريط، والروابط معطّلة */
body.sv-embed .sv-sidebar, body.sv-embed .sv-header, body.sv-embed .sv-footer, body.sv-embed .sv-page-head,
body.sv-embed .sv-backdrop, body.sv-embed #app-loadbar { display: none !important; }
body.sv-embed .sv-main { padding-inline-start: 0 !important; }
body.sv-embed .sv-content { padding-top: 12px !important; }
body.sv-embed a { pointer-events: none; }

/* هوية الشركة في الشريط العلوي (الشعار + الاسم) */
.sv-company { display: inline-flex; align-items: center; gap: .55rem; padding-inline-end: .85rem; margin-inline-end: .35rem; border-inline-end: 1px solid var(--sv-line-soft); text-decoration: none; flex: 0 0 auto; max-width: 300px; }
.sv-company img { height: 34px; width: auto; max-width: 120px; object-fit: contain; border-radius: 6px; }
.sv-company span { font-weight: 700; font-size: 14px; color: var(--sv-navy-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode .sv-company span { color: var(--sv-ink); }
body.dark-mode .sv-company img { background: rgba(255, 255, 255, .92); padding: 2px 4px; }
@media (max-width: 991.98px) { .sv-company span { display: none; } }
@media (max-width: 575.98px) { .sv-company { display: none; } }

/* البحث الشامل: صندوق البحث + اختصار Ctrl+K خارجه + لوحة النتائج الفورية */
.sv-header-search { position: relative; display: flex; align-items: center; gap: .5rem; }
.sv-search-box { position: relative; flex: 1 1 auto; min-width: 0; }
.sv-search-box > i { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--sv-ink-2); font-size: 14px; pointer-events: none; }
.sv-header-search input { padding-inline-end: 40px; }
.sv-header-search .sv-kbd { position: static; transform: none; flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--sv-line); background: var(--sv-surface); box-shadow: 0 1px 0 var(--sv-line); }
.sv-search.has-value .sv-kbd { display: inline-block; }
.sv-gs-panel { position: absolute; top: calc(100% + 6px); inset-inline: 0; min-width: 420px; max-height: 70vh; overflow-y: auto; z-index: 1060;
    background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: 0 18px 40px rgba(15, 32, 66, .18); padding: .35rem; }
.sv-gs-group + .sv-gs-group { border-top: 1px solid var(--sv-line-soft); margin-top: .25rem; padding-top: .25rem; }
.sv-gs-head { font-size: 11px; font-weight: 700; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; padding: .35rem .6rem; }
.sv-gs-head .tnum { background: var(--sv-surface-high); border-radius: 999px; padding: 0 .45rem; margin-inline-start: .25rem; }
.sv-gs-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: var(--sv-radius); color: var(--sv-ink); text-decoration: none; }
.sv-gs-item:hover, .sv-gs-item.on { background: var(--sv-surface-low); color: var(--sv-ink); }
.sv-gs-item.on { outline: 2px solid var(--sv-sapphire); outline-offset: -2px; }
.sv-gs-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; background: var(--sv-surface-high); color: var(--sv-sapphire); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sv-gs-text { min-width: 0; flex: 1; }
.sv-gs-title { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-gs-sub { display: block; font-size: 11.5px; color: var(--sv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-gs-title mark, .sv-gs-sub mark { background: #fde68a; color: inherit; padding: 0 2px; border-radius: 3px; }
body.dark-mode .sv-gs-title mark, body.dark-mode .sv-gs-sub mark { background: rgba(245, 158, 11, .35); }
.sv-gs-empty { padding: 1rem; text-align: center; color: var(--sv-muted); font-size: 13px; }
.sv-gs-empty i { margin-inline-end: .4rem; }
.sv-gs-all { display: block; text-align: center; padding: .55rem; margin-top: .25rem; border-top: 1px solid var(--sv-line-soft); font-weight: 600; font-size: 13px; color: var(--sv-sapphire); text-decoration: none; border-radius: 0 0 var(--sv-radius) var(--sv-radius); }
.sv-gs-all:hover, .sv-gs-all.on { background: var(--sv-surface-low); }
[dir="ltr"] .sv-gs-all i { transform: scaleX(-1); }
@media (max-width: 767.98px) { .sv-gs-panel { min-width: 0; position: fixed; top: 64px; inset-inline: 8px; } }

/* نماذج المستخدمين (إضافة/تعديل): عناوين الأقسام + صورة المستخدم */
.form-section-title { font-size: 13px; font-weight: 700; color: var(--sv-navy-deep); padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--sv-line-soft); }
body.dark-mode .form-section-title { color: var(--sv-ink); }
.ue-photo { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--sv-radius-lg); background: var(--sv-surface-low); border: 1px solid var(--sv-line-soft); }
.ue-avatar { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--sv-surface-high); color: var(--sv-sapphire); font-size: 28px; font-weight: 700; border: 3px solid var(--sv-surface); box-shadow: var(--sv-elev-1); }
.ue-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* أعمدة الأسماء: من اليمين في العربي ومن اليسار في الإنجليزي (اتجاه الصفحة) */
table.table > thead > tr > th.sv-col-name, table.table > tbody > tr > td.sv-col-name,
table.dataTable > thead > tr > th.sv-col-name, table.dataTable > tbody > tr > td.sv-col-name { text-align: start !important; }
.table td.sv-col-name .sv-cell-user { justify-content: flex-start; text-align: start; }
.table td.sv-col-name .sv-cell-user .n, .table td.sv-col-name .sv-cell-user .s { white-space: nowrap; }

/* =====================================================================
   Print: clean output for every page (no sidebar/header/buttons)
   ===================================================================== */
@media print {
    @page { margin: 12mm; }
    body { background: #fff !important; color: #000 !important; }
    .sv-sidebar, .sv-header, .sv-footer, .sv-backdrop, #app-loadbar, .modal, .modal-backdrop, .dropdown-menu,
    .sv-toolbar, .sv-actions, .dt-buttons, .dataTables_length, .dataTables_filter, .dataTables_paginate, .dataTables_info,
    .btn, .sv-row-actions, .sv-field-clear, .wf-actions, .wf-form, .sv-crumbs, .navbar-brand { display: none !important; }
    .sv-main { padding: 0 !important; }
    .sv-content { padding: 0 !important; max-width: none !important; }
    .card, .sv-card, .sv-kpi, .sv-page-head, .table-responsive { box-shadow: none !important; border-color: #ccc !important; background: #fff !important; }
    .table > thead > tr > th { background: #f1f1f1 !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    /* svPrintArea(id): print only the requested element */
    body.sv-print-area * { visibility: hidden !important; }
    body.sv-print-area .sv-print-target, body.sv-print-area .sv-print-target * { visibility: visible !important; }
    body.sv-print-area .sv-print-target { position: absolute; inset: 0; margin: 0; padding: 0; width: 100%; }
}

/* Dark mode: stronger secondary text (labels, sub-titles, hints were too faint) */
body.dark-mode {
    --sv-ink: #eef3fb;
    --sv-ink-2: #c9d4e5;
    --sv-muted: #a3b2c9;
}
body.dark-mode .sv-kpi-label, body.dark-mode .sv-card-sub, body.dark-mode .sv-subtitle,
body.dark-mode .form-text, body.dark-mode .text-muted, body.dark-mode .small.text-muted { color: var(--sv-muted) !important; }
body.dark-mode .sv-kpi-value, body.dark-mode .sv-title, body.dark-mode .sv-card-title { color: #fff; }
body.dark-mode .dash-feed .t { color: var(--sv-ink); }
body.dark-mode .dash-feed .d { color: var(--sv-ink-2); }
body.dark-mode .dataTables_wrapper .dataTables_info, body.dark-mode .dataTables_wrapper .dataTables_length { color: var(--sv-ink-2); }
body.dark-mode .page-link { color: var(--sv-ink) !important; }
/* Dates / numbers never wrap or reorder in RTL; description gets room */
.table td.tnum, .table td .tnum { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
#DocTable > tbody > tr > td:nth-child(2) { min-width: 240px; }
#DocTable > tbody > tr > td:nth-child(6) { white-space: nowrap; }

/* =====================================================================
   Calendar (FullCalendar themed)
   ===================================================================== */
.cal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cal-stat { border: 1px solid var(--sv-line); background: var(--sv-surface); border-radius: var(--sv-radius-lg); padding: .7rem .85rem; text-align: start; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--sv-elev-1); transition: transform .15s; }
.cal-stat:hover { transform: translateY(-1px); }
.cal-stat .n { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cal-stat .l { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); }
.cal-stat.err .n { color: var(--sv-crimson); }
.cal-stat.warn .n { color: var(--sv-amber); }
.cal-stat.info .n { color: var(--sv-sapphire); }
.cal-stat.ok .n { color: var(--sv-emerald); }
.cal-filter-label { font-size: 11.5px; font-weight: 700; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.cal-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--sv-radius); background: var(--sv-surface-low); flex-wrap: wrap; }
.cal-seg button { border: 0; background: transparent; padding: .35rem .8rem; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); cursor: pointer; }
.cal-seg button.on { background: var(--sv-surface); color: var(--sv-navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
body.dark-mode .cal-seg button.on { background: var(--sv-surface-high); color: #fff; }
.cal-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.cal-chips label { margin: 0; cursor: pointer; }
.cal-chips input { display: none; }
.cal-chips span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--sv-line); color: var(--sv-muted); background: var(--sv-surface); }
.cal-chips span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.cal-chips input:checked + span { color: var(--sv-ink); border-color: transparent; background: var(--sv-surface-high); }
.cal-chips input:checked + span::before { opacity: 1; }
.cal-chips .u-overdue::before, .cal-chips .st-closed::before { background: var(--sv-crimson); }
.cal-chips .u-soon::before, .cal-chips .st-inactive::before { background: var(--sv-amber); }
.cal-chips .u-later::before, .cal-chips .st-active::before { background: var(--sv-sapphire); }
.cal-chips .u-done::before, .cal-chips .st-completed::before { background: var(--sv-emerald); }
.cal-chips .st-inprogress::before { background: #7c3aed; }
.cal-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cal-upcoming li { display: flex; gap: .65rem; align-items: center; padding: .45rem .5rem; border-radius: 8px; cursor: pointer; border-inline-start: 3px solid var(--sv-sapphire); background: var(--sv-surface-low); }
.cal-upcoming li:hover { background: var(--sv-surface-high); }
.cal-upcoming li.u-overdue { border-color: var(--sv-crimson); }
.cal-upcoming li.u-soon { border-color: var(--sv-amber); }
.cal-up-date { display: flex; flex-direction: column; align-items: center; min-width: 40px; line-height: 1.1; }
.cal-up-date b { font-size: 18px; }
.cal-up-date small { font-size: 11px; color: var(--sv-muted); }
.cal-up-text { display: flex; flex-direction: column; min-width: 0; }
.cal-up-text .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-up-text .s { font-size: 11.5px; color: var(--sv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; }
.cal-range { font-size: 18px; font-weight: 700; margin: 0 .5rem; color: var(--sv-navy-deep); }

/* FullCalendar re-theme */
.fc { --fc-border-color: var(--sv-line-soft); --fc-page-bg-color: var(--sv-surface); --fc-neutral-bg-color: var(--sv-surface-low);
      --fc-today-bg-color: rgba(30, 96, 145, .07); --fc-now-indicator-color: var(--sv-crimson); --fc-highlight-color: rgba(30, 96, 145, .12);
      --fc-list-event-hover-bg-color: var(--sv-surface-low); font-size: 13px; }
.fc .fc-col-header-cell { background: var(--sv-surface-low); }
.fc .fc-col-header-cell-cushion { color: var(--sv-ink-2); font-weight: 700; font-size: 12px; padding: .55rem 0; text-decoration: none; }
.fc .fc-daygrid-day-number { color: var(--sv-ink-2); font-weight: 600; text-decoration: none; padding: .4rem .55rem; }
.fc .fc-day-today .fc-daygrid-day-number { background: var(--sv-navy); color: #fff; border-radius: 999px; min-width: 26px; text-align: center; margin: 4px; padding: .1rem .45rem; }
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number { opacity: .4; }
.fc .fc-daygrid-day:hover { background: var(--sv-surface-low); cursor: pointer; }
.fc .fc-daygrid-more-link { font-size: 11.5px; font-weight: 700; color: var(--sv-sapphire); }
.fc-event.cal-ev { border: 0; border-radius: 6px; padding: 1px 2px; margin: 1px 3px; cursor: pointer; box-shadow: none; }
.fc-event.cal-ev .cal-ev-inner { display: flex; align-items: center; gap: .3rem; padding: 2px 6px; overflow: hidden; }
.fc-event.cal-ev .cal-ev-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-event.cal-ev .cal-ev-doc { font-size: 11.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-event.u-overdue { background: #fee2e2; color: #991b1b; border-inline-start: 3px solid #dc2626; }
.fc-event.u-soon { background: #fef3c7; color: #92400e; border-inline-start: 3px solid #d97706; }
.fc-event.u-later { background: #dbeafe; color: #1e40af; border-inline-start: 3px solid #1e6091; }
.fc-event.u-done { background: #dcfce7; color: #166534; border-inline-start: 3px solid #059669; text-decoration: line-through; opacity: .8; }
.fc-event.cal-ev .fc-event-main { color: inherit; }
.fc .fc-list-event-dot { border-color: var(--sv-sapphire); }
.fc .fc-list-event.u-overdue .fc-list-event-dot { border-color: var(--sv-crimson); }
.fc .fc-list-event.u-soon .fc-list-event-dot { border-color: var(--sv-amber); }
.fc .fc-list-event.u-done .fc-list-event-dot { border-color: var(--sv-emerald); }
.fc .fc-list-event { background: transparent !important; color: var(--sv-ink) !important; text-decoration: none; }
.fc .fc-list-day-cushion { background: var(--sv-surface-low) !important; color: var(--sv-ink); }
.fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--sv-ink); text-decoration: none; font-weight: 700; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--sv-muted); font-size: 11.5px; }
body.dark-mode .fc { --fc-today-bg-color: rgba(142, 198, 253, .08); }
body.dark-mode .fc-event.u-overdue { background: rgba(239, 68, 68, .2); color: #fecaca; }
body.dark-mode .fc-event.u-soon { background: rgba(245, 158, 11, .18); color: #fde68a; }
body.dark-mode .fc-event.u-later { background: rgba(96, 165, 250, .18); color: #bfdbfe; }
body.dark-mode .fc-event.u-done { background: rgba(16, 185, 129, .16); color: #a7f3d0; }
body.dark-mode .fc .fc-day-today .fc-daygrid-day-number { background: #2a5ea0; }
/* Dark mode: colored modal headers and primary buttons keep a deep background (white text stays readable) */
body.dark-mode .modal-header.bg-primary, body.dark-mode .modal-header.bg-info, body.dark-mode .modal-header.bg-success, body.dark-mode .modal-header.bg-dark {
    background: linear-gradient(135deg, #1f5a8f 0%, #13294a 100%) !important;
}
body.dark-mode .modal-header.bg-danger { background: linear-gradient(135deg, #b91c1c 0%, #5f1414 100%) !important; }
body.dark-mode .btn-primary { background: linear-gradient(135deg, #2a6cad 0%, #1a3b66 100%) !important; color: #fff !important; }
body.dark-mode .ai-head .ai-title-input { color: #fff; }

/* =====================================================================
   Workflow designer + stage-based approval panel
   ===================================================================== */
.wfd-flow { display: flex; flex-direction: column; align-items: stretch; }
.wfd-stage { background: var(--sv-surface); border: 1px solid var(--sv-line); border-inline-start: 4px solid var(--sv-sapphire); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-elev-1); padding: 1rem 1.25rem; }
.wfd-stage-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.wfd-num { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--sv-navy); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
body.dark-mode .wfd-num { background: #2a5ea0; }
.wfd-name { font-weight: 700; font-size: 15px; max-width: 520px; }
.wfd-tools { margin-inline-start: auto; display: flex; gap: .25rem; }
.wfd-tools .sv-icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.wfd-tools .wfd-del:hover { color: var(--sv-crimson); }
.wfd-section-title { font-size: 12px; font-weight: 700; color: var(--sv-ink-2); margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.wfd-section-title i { color: var(--sv-sapphire); }
.wfd-opt { display: flex; align-items: center; gap: .5rem; font-size: 13px; margin: 0 0 .45rem; cursor: pointer; }
.wfd-opt .form-check-input { margin: 0; }
.wfd-opt i { width: 16px; text-align: center; color: var(--sv-muted); }
.wfd-opt.disabled { opacity: .45; cursor: not-allowed; }
.wfd-users-box[hidden] { display: none; }
.wfd-arrow { align-self: center; color: var(--sv-muted); padding: .35rem 0; font-size: 14px; }
.wfd-final { align-self: center; padding: .5rem 1.25rem; border-radius: 999px; background: var(--sv-ok-bg); color: var(--sv-ok-fg); font-weight: 700; font-size: 13px; }
body.dark-mode .wfd-final { background: rgba(16, 185, 129, .16); color: #6ee7b7; }

.wf-current { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); padding: .85rem 1rem; background: var(--sv-surface-low); }
.wf-current-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.wf-current-label { font-size: 11.5px; font-weight: 700; color: var(--sv-muted); text-transform: uppercase; letter-spacing: .03em; }
.wf-current-name { font-size: 16px; font-weight: 700; color: var(--sv-navy-deep); }
.wf-current-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-size: 13px; color: var(--sv-ink-2); }
.wf-current-meta i { color: var(--sv-sapphire); margin-inline-end: .25rem; }
.wf-allowed { display: inline-flex; gap: .35rem; }
.wf-allowed span { width: 26px; height: 26px; border-radius: 50%; background: var(--sv-surface); border: 1px solid var(--sv-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--sv-ink-2); }
.wf-allowed span i { color: inherit; margin: 0; }
.wf-row-overdue > td { background: rgba(254, 242, 242, .6) !important; }
body.dark-mode .wf-row-overdue > td { background: rgba(127, 29, 29, .2) !important; }
.wf-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 12px; }
.wf-chain-step { background: var(--sv-surface); border: 1px solid #fde68a; border-radius: 999px; padding: .15rem .6rem; font-weight: 600; }
.wf-chain-step b { color: var(--sv-amber); margin-inline-end: .2rem; }
.wf-chain-sep { color: var(--sv-amber); font-size: 10px; }
[dir="ltr"] .wf-chain-sep { transform: scaleX(-1); }
.wf-tl-ico.warn { background: var(--sv-warn-bg); color: var(--sv-warn-fg); }
.wf-tl-ico.slate { background: #f1f5f9; color: #334155; }
body.dark-mode .wf-tl-ico.warn { background: rgba(245, 158, 11, .18); color: #fcd34d; }
body.dark-mode .wf-tl-ico.slate { background: var(--sv-surface-high); color: var(--sv-ink); }
.wf-step .wf-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }