/* ═══════════════════════════════════════════════════════════════
 *  Twig LLC ERP — Unified Design System
 *  Matches: accounting/public/css/style.css 100%
 *  Used by: ALL standalone pages + legacy production overrides
 * ═══════════════════════════════════════════════════════════════ */

:root {
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --primary-dark: #3730a3;
    --success: #10b981;
    --success-light: #d1fae5;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
    --shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
    --shadow-md: 0 4px 10px -2px rgba(16,24,40,0.08), 0 2px 6px -2px rgba(16,24,40,0.05);
    --shadow-lg: 0 12px 24px -6px rgba(16,24,40,0.10), 0 4px 8px -4px rgba(16,24,40,0.05);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --transition: .18s cubic-bezier(.4,0,.2,1);
    --ring: 0 0 0 3px rgba(79,70,229,0.18);
    --sidebar-width: 250px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ═══════════════ Layout ═══════════════ */
.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: white;
    border-inline-end: 1px solid var(--gray-200);
    position: fixed;
    top: 0; inset-inline-start: 0; bottom: 0;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.3s;
    /* hide the always-on scrollbar track (Windows/Chrome/laptops) but keep it scrollable */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* old Edge/IE */
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* Chromium/Safari */

.sidebar-header {
    display: block;
    text-align: center;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}
.sidebar-logo { display: block; margin: 0 auto; }
.sidebar-header h4 { margin: 0; font-size: 1rem; font-weight: 700; color: white; }
.sidebar-header small { color: rgba(255,255,255,0.85); font-size: 0.75rem; }
.sidebar-brand { font-size: 1.1rem; font-weight: 800; color: white; }

.sidebar-section { padding: 0.5rem 0; }
.sidebar-section-title {
    font-size: 0.7rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; padding: 0.5rem 1rem; letter-spacing: 0.05em;
}

.sidebar-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 1rem; color: var(--gray-700);
    text-decoration: none; font-size: 0.875rem; font-weight: 500;
    border-inline-start: 3px solid transparent; transition: all 0.15s;
}
.sidebar-link:hover { background: var(--gray-50); color: var(--primary); }
.sidebar-link.active {
    background: var(--primary-light); color: var(--primary-dark);
    border-inline-start-color: var(--primary); font-weight: 600;
}
.sidebar-link i, .sidebar-link .bi { font-size: 1.1rem; width: 20px; text-align: center; }

.main-content { margin-inline-start: var(--sidebar-width); flex: 1; min-width: 0; }

/* ═══════════════ Topbar ═══════════════ */
.topbar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.875rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 90;
    flex-wrap: wrap; gap: 0.75rem;
}
.topbar-title { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin: 0; }

.topbar-user {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.75rem; border-radius: var(--radius-sm);
    background: var(--gray-50); color: var(--gray-700);
    text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.topbar-user:hover { background: var(--gray-100); color: var(--gray-900); }

.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem;
}

.topbar-date { font-size: 0.78rem; color: var(--gray-500); font-weight: 600; }

.menu-toggle {
    display: none; background: none; border: none;
    font-size: 1.4rem; color: var(--gray-700); cursor: pointer;
}

@media (max-width: 992px) {
    .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }   /* RTL: hide off the right */
    [dir="ltr"] .sidebar { transform: translateX(-100%); }                     /* LTR: hide off the left */
    .sidebar.open, [dir="ltr"] .sidebar.open { transform: translateX(0); }
    .main-content { margin-inline-start: 0; }
    .menu-toggle { display: block !important; }
}

.content-area { padding: 1.5rem; max-width: 100%; }

/* ═══════════════ Page Header ═══════════════ */
.page-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.75rem;
    margin-bottom: 1.25rem; padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-100);
}
.page-header h1, .page-header h2 {
    margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--gray-800);
    display: flex; align-items: center; gap: 0.5rem;
}
.page-header h1 i, .page-header h2 i { color: var(--primary); font-size: 1.4rem; }
.page-header .actions, .page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ═══════════════ Cards ═══════════════ */
.card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 700; color: var(--gray-800);
    background: var(--gray-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.5rem;
}
.card-body { padding: 1.25rem; }
.card-body.p-0 { padding: 0; }
.card-footer {
    padding: 0.875rem 1.25rem; border-top: 1px solid var(--gray-200);
    background: var(--gray-50); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ═══════════════ Dashboard Stats ═══════════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-stat {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    transition: transform 0.15s;
}
.dashboard-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dashboard-stat-icon {
    width: 40px; height: 40px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 0.75rem;
}
.dashboard-stat-icon.bg-primary { background: var(--primary-light); color: var(--primary); }
.dashboard-stat-icon.bg-success { background: var(--success-light); color: var(--success); }
.dashboard-stat-icon.bg-danger  { background: var(--danger-light);  color: var(--danger); }
.dashboard-stat-icon.bg-warning { background: var(--warning-light); color: var(--warning); }
.dashboard-stat-icon.bg-info    { background: var(--info-light);    color: var(--info); }
.dashboard-stat-label {
    font-size: 0.75rem; color: var(--gray-500);
    font-weight: 600; margin-bottom: 0.25rem;
}
.dashboard-stat-value {
    font-size: 1.5rem; font-weight: 800; color: var(--gray-800);
    margin: 0; font-variant-numeric: tabular-nums;
}
.dashboard-stat-sub { font-size: 0.72rem; color: var(--gray-400); margin-top: 0.25rem; }

/* ═══════════════ Tables ═══════════════ */
.table { width: 100%; border-collapse: collapse; margin: 0; }
/* Frozen header rows: the common scroll wrappers (style="...overflow-x:auto") become vertical scrollers with
   a max-height, and their table heads stick to the top — so the header stays visible while scrolling long
   lists (payroll, loans, attendance, ...). Short tables never reach the cap, so they're unaffected. */
[style*="overflow-x:auto"]{ max-height: calc(100vh - 180px); overflow: auto; }
[style*="overflow-x:auto"] > table thead th{ position: sticky; top: 0; z-index: 3; }
[style*="overflow-x:auto"] > table thead th:not([style*="background"]){ background: var(--gray-100); }
.table thead th {
    background: var(--gray-50); color: var(--gray-700);
    padding: 0.65rem 0.875rem;
    font-size: 0.75rem; font-weight: 700;
    text-align: start; white-space: nowrap;
    border-bottom: 2px solid var(--gray-200);
}
.table tbody td {
    padding: 0.65rem 0.875rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem; vertical-align: middle;
}
.table tbody tr:hover td { background: var(--gray-50); }
.table tfoot td {
    background: var(--gray-50); font-weight: 700;
    padding: 0.75rem 0.875rem;
    border-top: 2px solid var(--gray-300);
}

/* ═══════════════ Forms ═══════════════ */
.form-control, .form-select {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-family: inherit; font-size: 0.875rem;
    width: 100%; transition: all 0.15s;
    background: white; color: var(--gray-800);
}
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.form-label {
    font-size: 0.78rem; font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.35rem; display: block;
}

/* ═══════════════ Buttons ═══════════════ */
.btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 600; font-size: 0.85rem;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
    font-family: inherit; line-height: 1.4;
}
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); color: white; }
.btn-success { background: var(--success); color: white; border-color: var(--success); }
.btn-success:hover { background: #059669; color: white; }
.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
.btn-danger:hover { background: #dc2626; color: white; }
.btn-warning { background: var(--warning); color: white; border-color: var(--warning); }
.btn-warning:hover { background: #d97706; color: white; }
.btn-info { background: var(--info); color: white; border-color: var(--info); }
.btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); color: white; }
.btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: white; }
.btn-light { background: white; color: var(--gray-700); border-color: var(--gray-300); }
.btn-light:hover { background: var(--gray-50); color: var(--gray-900); }
.btn-outline-secondary { background: transparent; color: var(--gray-600); border-color: var(--gray-300); }
.btn-outline-secondary:hover { background: var(--gray-100); }

/* ═══════════════ Badges ═══════════════ */
.badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; line-height: 1.4;
}
.badge.bg-primary { background: var(--primary); color: white; }
.badge.bg-success { background: var(--success); color: white; }
.badge.bg-danger  { background: var(--danger);  color: white; }
.badge.bg-warning { background: var(--warning); color: white; }
.badge.bg-info    { background: var(--info);    color: white; }
.badge.bg-light   { background: var(--gray-100); color: var(--gray-800); }
.badge.bg-secondary { background: var(--gray-500); color: white; }
/* when a badge is explicitly marked text-dark (e.g. the «liquidity» badge on yellow), honour it in BOTH
   themes — the .badge.bg-* rules above otherwise force white text, which is unreadable on light badges. */
.badge.text-dark, .badge.bg-warning.text-dark, .badge.bg-info.text-dark { color: #1f2937 !important; }

/* English mode: Title-Case the UI chrome — every word's first letter, not just the sentence (owner pref).
   Scoped to labels/headings/buttons/nav/table-headers/badges so data values, inputs, codes & emails stay as-is.
   (capitalize only upper-cases each word's first letter; acronyms like PDF/CNC/EGP keep their existing caps.) */
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3, html[dir="ltr"] h4, html[dir="ltr"] h5, html[dir="ltr"] h6,
html[dir="ltr"] .nav-link, html[dir="ltr"] .sidebar-link, html[dir="ltr"] .sidebar-section-title,
html[dir="ltr"] label, html[dir="ltr"] .form-label, html[dir="ltr"] .btn,
html[dir="ltr"] thead th, html[dir="ltr"] .badge, html[dir="ltr"] .tw-card-header, html[dir="ltr"] .card-header,
html[dir="ltr"] .page-title, html[dir="ltr"] .tw-ph-title { text-transform: capitalize; }

.code-pill {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    background: var(--primary-light); color: var(--primary-dark);
    padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
    font-size: 0.72rem; font-weight: 700;
}

.type-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    border: 1.5px solid transparent;
}
.type-pill.manufacturing { background: var(--info-light); color: #1e40af; border-color: var(--info); }
.type-pill.contracting   { background: var(--warning-light); color: #92400e; border-color: var(--warning); }
.type-pill.maintenance   { background: var(--success-light); color: #065f46; border-color: var(--success); }

.status-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
}
.status-pill.open { background: var(--success-light); color: var(--success); }
.status-pill.closed { background: var(--gray-100); color: var(--gray-500); }

/* ═══════════════ Alerts ═══════════════ */
.alert {
    padding: 0.875rem 1rem; border-radius: var(--radius);
    margin-bottom: 1rem; font-weight: 500; font-size: 0.875rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.alert-success { background: var(--success-light); color: #065f46; border: 1px solid var(--success); }
.alert-danger  { background: var(--danger-light);  color: #991b1b; border: 1px solid var(--danger); }
.alert-warning { background: var(--warning-light); color: #92400e; border: 1px solid var(--warning); }
.alert-info    { background: var(--info-light);    color: #1e40af; border: 1px solid var(--info); }

/* ═══════════════ Progress bars ═══════════════ */
.progress-bar-wrap {
    height: 6px; background: var(--gray-200);
    border-radius: 999px; overflow: hidden; margin-top: 4px;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #34d399);
    transition: width 0.3s;
}
.progress-bar-fill.low { background: linear-gradient(90deg, var(--danger), var(--warning)); }

/* ═══════════════ Modal ═══════════════ */
.tw-modal {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 1100;
    align-items: center; justify-content: center;
}
.tw-modal.open { display: flex; }
.tw-modal-box {
    background: white; padding: 1.5rem;
    border-radius: var(--radius-lg);
    max-width: 90%; max-height: 90vh;
    overflow: auto; box-shadow: var(--shadow-lg);
}
.tw-modal-box img { max-width: 100%; max-height: 80vh; border-radius: var(--radius); }

/* ═══════════════ "Chart any table" (universal) ═══════════════ */
.tw-chart-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
  font-size:.78rem; font-weight:600; line-height:1; cursor:pointer;
  padding:.3rem .55rem; border-radius:var(--radius); white-space:nowrap;
  color:var(--gray-600); background:#fff; border:1px solid var(--gray-300);
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.tw-chart-btn:hover{ background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
/* toolbar strip above a header-less table — keeps the Analyze button OUT of the table content (no overlap) */
.tw-chart-strip{ display:flex; justify-content:flex-end; align-items:center; gap:.4rem; padding:.2rem 0 .45rem; }
html[dir=rtl] .tw-chart-strip{ justify-content:flex-start; }

/* ── Dark-mode remap for the remaining hardcoded LIGHT inline backgrounds across ALL pages (the base dark theme
   already handles #fff/#f8fafc/#fff3cd/#fef2f2; these are the leftover pastel tints that still read as white/cream
   strips on a dark page). Scoped to data-theme=dark only, so light mode is never touched. */
/* warm cream (custody bars/banners, info strips) → warm-dark with readable text + amber accent */
html[data-theme="dark"] [style*="#fff7ed"],
html[data-theme="dark"] [style*="#fffaf3"],
html[data-theme="dark"] [style*="#fff7e6"]{ background-color:#2a2014 !important; border-color:#4a3a26 !important; color:#e8eaed !important; }
html[data-theme="dark"] [style*="#9a3412"]{ color:#fdba74 !important; }
/* pale red tints (warning/danger banners) → dark red with light-red text */
html[data-theme="dark"] [style*="#fff5f5"],
html[data-theme="dark"] [style*="#fde8e8"]{ background-color:#3a1d1d !important; border-color:#7f1d1d !important; color:#fca5a5 !important; }
/* pale yellow tint → dark amber with light text */
html[data-theme="dark"] [style*="#fef9c3"]{ background-color:#3a2f12 !important; border-color:#a16207 !important; color:#fcd34d !important; }
/* near-white & pale gray-blue surfaces → subtle dark slate */
html[data-theme="dark"] [style*="#fafbfc"],
html[data-theme="dark"] [style*="#f3f4f8"],
html[data-theme="dark"] [style*="#e9eef3"]{ background-color:#1a2536 !important; color:#e2e8f0 !important; }
/* pale blue/indigo tints (info cards) → dark blue with light text */
html[data-theme="dark"] [style*="#eef2ff"],
html[data-theme="dark"] [style*="#e3ecfb"]{ background-color:#16233a !important; border-color:#1e3a8a !important; color:#dbeafe !important; }
/* floating variant kept only as an exotic-DOM fallback */
.tw-chart-btn.tw-chart-float{ position:absolute; top:.4rem; inset-inline-end:.4rem; z-index:5; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.tw-chart-host{ position:relative; }   /* anchor for the floating button */

.tw-chart-modal .tw-modal-box{ width:min(1040px,96vw); max-width:96vw; max-height:92vh; overflow:auto; }
/* the block list: stacked full-width, 2-up on wide screens */
.tw-chart-blocks{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:1100px){ .tw-chart-blocks{ grid-template-columns:1fr 1fr; } }
.tw-chart-block{ border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:.85rem; background:var(--gray-50); }
.tw-chart-block-head{ display:flex; justify-content:flex-end; margin-bottom:.4rem; }
.tw-chart-block-actions{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:flex-end; margin-top:.6rem; }
.tw-chart-ctl{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:flex-end; margin-bottom:.85rem; }
.tw-chart-ctl label{ font-size:.74rem; font-weight:700; color:var(--gray-500); display:block; margin-bottom:.2rem; }
.tw-chart-ctl .form-select, .tw-chart-ctl .form-select-sm{ min-width:130px; }
.tw-chart-vals{ display:flex; flex-wrap:wrap; gap:.25rem .8rem; max-width:100%; }
.tw-chart-vals label{ font-weight:600; color:var(--gray-700); display:inline-flex; align-items:center; gap:.3rem; margin:0; cursor:pointer; font-size:.8rem; }
/* compact per-series secondary-axis picker (يسار/يمين) sitting next to each value checkbox */
.tw-chart-vals .tw-chart-axis.form-select-sm{ min-width:auto; width:auto; padding:.05rem 1.2rem .05rem .35rem; font-size:.7rem; height:auto; line-height:1.3; }
.tw-chart-canvas-wrap{ position:relative; height:380px; width:100%; }
.tw-chart-note{ font-size:.75rem; color:var(--gray-500); margin-top:.4rem; min-height:1em; }
.tw-chart-actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; margin-top:.9rem; }
/* Claude analysis section */
.tw-chart-ai{ margin-top:1.1rem; border-top:1px solid var(--gray-200); padding-top:.9rem; }
.tw-chart-ai-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.5rem; }
.tw-chart-ai-body{ font-size:.86rem; line-height:1.7; }
.tw-chart-ai-out{ background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius); padding:.7rem .85rem; }
.tw-chart-ai-list{ margin:.25rem 0; padding-inline-start:1.3rem; }
.tw-chart-ai-list li{ margin-bottom:.3rem; }
.tw-chart-ai-gap{ height:.45rem; }
.tw-chart-ai-note{ font-size:.82rem; color:var(--gray-600); background:#fef3c7; border:1px solid #fcd34d; color:#92400e; border-radius:var(--radius); padding:.5rem .7rem; }
.tw-chart-suggest-loading{ grid-column:1 / -1; align-self:start; display:flex; align-items:center; gap:.5rem; padding:.6rem .2rem; }
/* the note lives INSIDE the 2-col blocks grid — span the full row and never stretch, else it balloons
 * to the height of the chart block next to it (the giant purple box bug, owner 2026-06-11) */
.tw-chart-suggest-note{ grid-column:1 / -1; align-self:start; display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.82rem; background:#ede9fe; border:1px solid #c4b5fd; color:#5b21b6; border-radius:var(--radius); padding:.45rem .7rem; margin-bottom:.2rem; }
.tw-chart-suggest-note .btn-close-sm{ width:.6rem; height:.6rem; opacity:.6; }

html[data-theme="dark"] .tw-chart-btn{ background:#1e293b; color:#cbd5e1; border-color:#334155; }
html[data-theme="dark"] .tw-chart-btn:hover{ background:#243348; color:#e2e8f0; border-color:#475569; }
html[data-theme="dark"] .tw-chart-modal .tw-modal-box{ background:#1e293b; color:#e2e8f0; }
html[data-theme="dark"] .tw-chart-ctl label{ color:#94a3b8; }
html[data-theme="dark"] .tw-chart-vals label{ color:#e2e8f0; }
html[data-theme="dark"] .tw-chart-note{ color:#94a3b8; }
html[data-theme="dark"] .tw-chart-block{ background:#0f172a; border-color:#334155; }
html[data-theme="dark"] .tw-chart-ai{ border-top-color:#334155; }
html[data-theme="dark"] .tw-chart-ai-out{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .tw-chart-ai-note{ background:#3a2e0c; border-color:#a16207; color:#fde68a; }
html[data-theme="dark"] .tw-chart-suggest-note{ background:#2e1065; border-color:#6d28d9; color:#ddd6fe; }

@media print{ .tw-chart-btn, .tw-chart-modal{ display:none !important; visibility:hidden !important; } }

/* ═══════════════ Empty state ═══════════════ */
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--gray-400); }
.empty-state .icon { font-size: 3rem; opacity: 0.3; margin-bottom: 0.75rem; }

/* ═══════════════ Utilities ═══════════════ */
.fmt-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info    { color: var(--info) !important; }
.text-muted, .text-secondary { color: var(--gray-500) !important; }
.text-nowrap { white-space: nowrap; }

/* Print — see the consolidated print section at the END of this file
 * (single authoritative @media print block: fixed top-left TWIG logo on
 *  every page, hidden screen chrome, clean tables, page footer). */

/* ═══════════════════════════════════════════════════════════════
 *  LEGACY OVERRIDES — apply unified style to production index.php
 *  Targets classes used in the legacy 3.4MB index.php
 * ═══════════════════════════════════════════════════════════════ */

body.twig-legacy .sidebar {
    background: white !important;
    border-left: 1px solid var(--gray-200) !important;
    color: var(--gray-800) !important;
    width: 250px !important;
}
body.twig-legacy .sidebar-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    border-bottom: 1px solid var(--gray-100) !important;
    padding: 1.25rem 1rem !important;
}
body.twig-legacy .sidebar-title,
body.twig-legacy .sidebar-title > div { color: white !important; }
body.twig-legacy .sidebar-user { color: rgba(255,255,255,.9) !important; }

body.twig-legacy nav#sidebarNav { padding: 0.5rem 0 !important; }
body.twig-legacy nav > a.nav-item,
body.twig-legacy .nav-group-head {
    color: var(--gray-700) !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 3px solid transparent !important;
    padding: 0.6rem 1rem !important;
    margin: 0 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
body.twig-legacy nav > a.nav-item:hover,
body.twig-legacy .nav-group-head:hover {
    background: var(--gray-50) !important;
    color: var(--primary) !important;
}
body.twig-legacy nav > a.nav-item.active,
body.twig-legacy .nav-group.has-active > .nav-group-head {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border-right-color: var(--primary) !important;
    font-weight: 600 !important;
}
body.twig-legacy .nav-group { background: transparent !important; margin: 0 !important; border-radius: 0 !important; }
body.twig-legacy .nav-group-body a {
    color: var(--gray-600) !important;
    padding: 0.5rem 1rem 0.5rem 2.5rem !important;
    font-size: 0.82rem !important;
    background: transparent !important;
}
body.twig-legacy .nav-group-body a:hover {
    background: var(--gray-50) !important; color: var(--primary) !important;
}
body.twig-legacy .nav-group-body a.active {
    background: var(--primary-light) !important; color: var(--primary-dark) !important;
    border-right: 3px solid var(--primary) !important;
}
body.twig-legacy .nav-group-icon { background: transparent !important; color: var(--gray-500) !important; }
body.twig-legacy .nav-group-count {
    background: var(--gray-100) !important; color: var(--gray-700) !important;
}
body.twig-legacy .nav-search-wrap input {
    background: var(--gray-50) !important; color: var(--gray-700) !important;
    border-color: var(--gray-200) !important;
}
body.twig-legacy .nav-toolbar button {
    color: var(--gray-600) !important;
    background: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
}

/* Hide the legacy topbar entirely — navigation is sidebar-only */
body.twig-legacy .topbar { display: none !important; }
body.twig-legacy .twig-cross-nav { display: none !important; }

/* Make sidebar a flex-column so logout sticks at bottom */
.sidebar { display: flex; flex-direction: column; }
.sidebar-section:last-child { margin-top: auto; }

/* Make the sidebar header clickable area look natural */
a.sidebar-header { color: white !important; text-decoration: none !important; }
a.sidebar-header:hover { opacity: 0.9; }

body.twig-legacy .twig-cross-nav .twig-nav-pill {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-200) !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.75rem !important;
}
body.twig-legacy .twig-cross-nav .twig-nav-pill:hover {
    background: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    border-color: var(--primary) !important;
}
body.twig-legacy .twig-cross-nav .twig-nav-pill.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/* Print foundation lives in the single consolidated section at the
 * END of this file. `.print-only` default (hidden on screen) declared there. */

/* ─── twig_clean-inspired polish (additive: softer-deep shadows, rounded, interactive) ─── */
:root{
  --shadow: 0 4px 20px rgba(13,27,53,.07);
  --shadow-md: 0 8px 28px rgba(13,27,53,.10);
  --shadow-lg: 0 16px 44px rgba(13,27,53,.14);
  --radius-lg: 14px;
  --gold: #e8a020;
}
.btn{ transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border:none; box-shadow:0 4px 14px rgba(79,70,229,.26); }
.btn-primary:hover{ filter: brightness(1.06); box-shadow:0 6px 18px rgba(79,70,229,.34); }
.btn-success{ background: linear-gradient(135deg,#16a34a,#15803d); border:none; }
.btn-success:hover{ filter: brightness(1.05); }
.btn-danger{ background: linear-gradient(135deg,#ef4444,#dc2626); border:none; }
.table thead th{ letter-spacing:.2px; }
.table tbody tr{ transition: background .12s ease; }
.table tbody tr:hover{ background: var(--primary-light); }
.badge{ font-weight:600; letter-spacing:.2px; }
.form-control, .form-select{ transition: border-color .12s ease, box-shadow .12s ease; }
.tw-modal__box{ box-shadow:0 24px 70px rgba(13,27,53,.34); }

/* ═══════════════ Level-Up components (2026-06-05) ═══════════════ */

/* Page header */
.tw-page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.tw-page-header .tw-ph-title{display:flex;align-items:center;gap:.6rem;font-size:1.4rem;font-weight:800;color:var(--gray-800);margin:0}
.tw-page-header .tw-ph-title i{color:var(--primary)}
.tw-page-header .tw-ph-count{font-size:.8rem;font-weight:600;color:var(--gray-500);background:var(--gray-100);padding:.15rem .55rem;border-radius:999px}
.tw-page-header .tw-ph-sub{font-size:.82rem;color:var(--gray-500);margin-top:.15rem}
.tw-page-header .tw-ph-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* Stat card (KPI) */
.tw-stat{display:block;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition);height:100%}
a.tw-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.tw-stat-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tw-stat-label{font-size:.8rem;color:var(--gray-500);font-weight:600}
.tw-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:var(--primary-light);color:var(--primary)}
.tw-stat-icon.success{background:var(--success-light);color:var(--success)}
.tw-stat-icon.danger{background:var(--danger-light);color:var(--danger)}
.tw-stat-icon.warning{background:var(--warning-light);color:var(--warning)}
.tw-stat-value{font-size:1.5rem;font-weight:800;color:var(--gray-800);margin-top:.45rem;line-height:1.1}
.tw-stat-value.success{color:var(--success)}
.tw-stat-value.danger{color:var(--danger)}
.tw-stat-value.primary{color:var(--primary)}
.tw-stat-hint{font-size:.73rem;color:var(--gray-400);margin-top:.2rem}

/* Refined card */
.tw-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tw-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--gray-100);font-weight:700;color:var(--gray-700);font-size:.92rem}
.tw-card-header i{color:var(--primary)}
.tw-card-body{padding:1.1rem}
.tw-card-body.p-0{padding:0}

/* Modern table */
.tw-table-wrap{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tw-table-wrap .table{margin:0}
.tw-table-wrap thead th{background:var(--gray-50);color:var(--gray-500);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--gray-200);padding:.7rem .9rem;white-space:nowrap}
.tw-table-wrap tbody td{padding:.7rem .9rem;border-top:1px solid var(--gray-100);vertical-align:middle}
.tw-table-wrap tbody tr{transition:background var(--transition)}
.tw-table-wrap tbody tr:hover{background:var(--primary-light)}

/* Pill badge */
.tw-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;line-height:1.4}
.tw-badge.success{background:var(--success-light);color:#047857}
.tw-badge.danger{background:var(--danger-light);color:#b91c1c}
.tw-badge.warning{background:var(--warning-light);color:#b45309}
.tw-badge.info{background:var(--info-light);color:#1d4ed8}
.tw-badge.gray{background:var(--gray-100);color:var(--gray-600)}

/* Action / module card */
.tw-action-card{display:block;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1rem;height:100%;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition)}
.tw-action-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none}
.tw-action-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:var(--primary-light);color:var(--primary)}
.tw-action-title{font-weight:700;color:var(--gray-700);margin-top:.6rem}
.tw-action-desc{color:var(--gray-400);font-size:.78rem}

/* Soft button + input polish (layered, non-conflicting with existing gradient btns) */
.btn-soft-primary{background:var(--primary-light);color:var(--primary-dark);border:0}
.btn-soft-primary:hover{background:#e0e7ff;color:var(--primary-dark)}
.form-control,.form-select{border-radius:var(--radius-sm);border-color:var(--gray-300)}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:var(--ring)}
.form-label{font-weight:600;color:var(--gray-600);font-size:.82rem;margin-bottom:.3rem}

/* ═══════════════════════════════════════════════════════════════
 *  PROFESSIONAL REFRESH — 2026-06-05  (additive, wins the cascade)
 *  Lifts the WHOLE app from one file by upgrading the base classes
 *  that every page already uses (.card/.page-header/.dashboard-stat/
 *  .table/.badge/.btn) — no per-page markup change required.
 *  Brand kept: navy sidebar + gold accent + indigo primary, RTL, Cairo.
 * ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#eef1f7;
  --ink:#0d1b35;                 /* navy ink for headings/numbers */
  --accent:#e8a020;              /* gold (matches sidebar) */
  --card-radius:14px;
  --shadow-card:0 1px 2px rgba(13,27,53,.04), 0 10px 30px -16px rgba(13,27,53,.20);
  --shadow-card-h:0 6px 12px rgba(13,27,53,.07), 0 22px 48px -18px rgba(13,27,53,.28);
}

/* ── App canvas ── */
body{ background:var(--bg)!important; color:var(--gray-800); }
/* top padding reserves a strip for the fixed search/bell (and mobile menu) icons so a page's
   action buttons (+ مستند/سند/مشروع جديد …) drop BELOW them instead of overlapping — AR & EN. */
.content-area{ padding:3.75rem 1.75rem 1.5rem; }
@media (max-width:991.98px){ .content-area{ padding:3.5rem 1.1rem 1.1rem; } }
body.embed .content-area{ padding-top:14px; }   /* embed has no fixed icons */
/* The fixed search + bell sit in the top-right corner (≈110px wide). Reserve that column on the page's
   FIRST header row so its right-aligned action buttons clear the icons instead of being covered by them. */
/* Top-right overlap is now solved purely by VERTICAL clearance: `body .content-area` (layout/sidebar.php) has a
   top padding (~3.9rem) so ALL page content — including any top button row, anywhere on the page — starts BELOW
   the fixed search+bell (≈54px). No per-element inline-end reservation needed (it only added a right-side gap). */
/* When ANY popup/modal is open, hide the floating search+bell so they can never cover the popup's buttons. */
body.modal-open #tw-bell, body.modal-open #tw-gsearch,
body:has(.tw-modal.open) #tw-bell, body:has(.tw-modal.open) #tw-gsearch,
body:has(.tw-modal.show) #tw-bell, body:has(.tw-modal.show) #tw-gsearch,
body:has(.modal.show) #tw-bell, body:has(.modal.show) #tw-gsearch{ display:none !important; }

/* ── Page header: gradient icon chip + strong navy title ── */
.page-header,.tw-page-header{ margin-bottom:1.4rem; padding-bottom:1rem; border-bottom:1px solid var(--gray-200); }
.page-header h1,.page-header h2,.tw-page-header .tw-ph-title{ font-size:1.5rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; align-items:center; }
.page-header h1 > i:first-child,.page-header h2 > i:first-child,.tw-page-header .tw-ph-title > i:first-child{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff!important; font-size:1.15rem;
  box-shadow:0 8px 18px -8px rgba(79,70,229,.7);
}
.tw-ph-count{ background:var(--primary-light)!important; color:var(--primary-dark)!important; font-weight:700; }
.tw-ph-sub,.page-header .subtitle{ color:var(--gray-500); }

/* ── Cards: deeper, softer, crisp white header ── */
.card,.tw-card{ border:1px solid #e7eaf2; border-radius:var(--card-radius); box-shadow:var(--shadow-card); transition:box-shadow var(--transition),transform var(--transition); }
.card-header,.tw-card-header{ background:#fff; border-bottom:1px solid var(--gray-100); font-weight:800; color:var(--ink); font-size:.95rem; padding:.9rem 1.25rem; border-radius:var(--card-radius) var(--card-radius) 0 0; }
.card-header i,.tw-card-header i{ color:var(--primary); }
.card-footer{ background:var(--gray-50); }

/* ── KPI stat cards (the hero): accent bar + big navy number + lift ── */
.stats-grid{ gap:1.1rem; }
.dashboard-stat,.tw-stat{ position:relative; border:1px solid #e7eaf2; border-radius:var(--card-radius); box-shadow:var(--shadow-card); overflow:hidden; }
.dashboard-stat::before,.tw-stat::before{ content:''; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:linear-gradient(180deg,var(--primary),var(--primary-dark)); }
.dashboard-stat:hover,a.tw-stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-h); }
.dashboard-stat-value,.tw-stat-value{ font-size:1.7rem; font-weight:800; color:var(--ink); }
.dashboard-stat-icon{ box-shadow:inset 0 0 0 1px rgba(13,27,53,.03); }
/* tint the accent bar to match the stat's icon tone where present */
.dashboard-stat:has(.dashboard-stat-icon.bg-success)::before{ background:linear-gradient(180deg,#10b981,#059669); }
.dashboard-stat:has(.dashboard-stat-icon.bg-danger)::before{ background:linear-gradient(180deg,#ef4444,#dc2626); }
.dashboard-stat:has(.dashboard-stat-icon.bg-warning)::before{ background:linear-gradient(180deg,#f59e0b,#d97706); }
.dashboard-stat:has(.dashboard-stat-icon.bg-info)::before{ background:linear-gradient(180deg,#3b82f6,#2563eb); }
.tw-stat:has(.tw-stat-value.success)::before{ background:linear-gradient(180deg,#10b981,#059669); }
.tw-stat:has(.tw-stat-value.danger)::before{ background:linear-gradient(180deg,#ef4444,#dc2626); }

/* ── Tables: uppercase muted headers, zebra rows, primary hover ── */
.table thead th,.tw-table-wrap thead th{ background:var(--gray-50); color:var(--gray-500); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--gray-200); }
.table tbody tr:nth-child(even) td{ background:rgba(248,249,252,.7); }
.table tbody tr:hover td,.tw-table-wrap tbody tr:hover{ background:var(--primary-light); }
.table tbody td{ border-bottom:1px solid var(--gray-100); }
/* legacy bare tables sitting directly on the page get a card surface */
.content-area > .table:not(.card .table){ background:#fff; border:1px solid #e7eaf2; border-radius:var(--card-radius); box-shadow:var(--shadow-card); overflow:hidden; }

/* ── Buttons & inputs: a touch more presence ── */
.btn{ border-radius:9px; }
.btn-light{ box-shadow:0 1px 2px rgba(13,27,53,.06); }
.form-control,.form-select{ border-radius:9px; padding:.55rem .8rem; }
.form-control:focus,.form-select:focus{ box-shadow:var(--ring); border-color:var(--primary); }

/* ── Searchable dropdowns (Tom Select, wired in footer.php twWireSelects) ──
 * Owner 2026-06-11: the big clear native-datalist look (requested-by field) is the standard for EVERY
 * dropdown — large readable rows, generous panel, crisp hover. Applied here so all wired selects get it. */
.ts-dropdown .ts-dropdown-content{ max-height:min(64vh, 480px); padding:4px 0; }
.ts-dropdown .option{ padding:.62rem .95rem; font-size:1rem; line-height:1.35; border-radius:6px; margin:1px 4px; }
.ts-dropdown .option.active{ background:var(--primary, #0d1b35); color:#fff; }
.ts-control{ border-radius:9px; min-height:42px; font-size:1rem; padding:.5rem .8rem; }
.ts-control input{ font-size:1rem; }
.ts-dropdown{ box-shadow:0 12px 32px rgba(13,27,53,.18); border:1px solid var(--gray-300); border-radius:10px; font-size:1rem; z-index:4000 !important; }
/* multi-select tags (assignees, permits…) — same big clean look */
.ts-control .item{ font-size:.95rem; padding:.15rem .55rem; border-radius:7px; }
/* Any dropdown menu (Tom Select on <body>, native, Bootstrap) must layer ABOVE every section/banner/top-bar icon. */
.ts-dropdown, .dropdown-menu.show, ul.dropdown-menu{ z-index:4000 !important; }

/* ── 📝 Claude analysis report (modal + shared) ── */
.tw-ai-summary{background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:.7rem .9rem;margin-bottom:.8rem;line-height:1.8}
.tw-ai-nums{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.tw-ai-num{background:var(--gray-50,#f9fafb);border:1px solid var(--gray-200,#e5e7eb);border-radius:10px;padding:.45rem .8rem;display:flex;flex-direction:column;min-width:110px}
.tw-ai-num b{font-size:1rem}
.tw-ai-num small{color:var(--gray-500,#6b7280);font-size:.72rem}
.tw-ai-sec-h{font-weight:800;font-size:.95rem;background:var(--gray-100,#f3f4f6);border-radius:8px;padding:.35rem .7rem;margin:.8rem 0 .35rem}
.tw-ai-recs-h{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}
.tw-ai-list{margin:0;padding-inline-start:1.4rem;line-height:1.9}
.tw-ai-list li{margin-bottom:.25rem}
html[data-theme="dark"] .tw-ai-summary{background:#1e1b4b;border-color:#4338ca;color:#e0e7ff}
html[data-theme="dark"] .tw-ai-num{background:#0f172a;border-color:#334155;color:#e2e8f0}
html[data-theme="dark"] .tw-ai-sec-h{background:#1e293b;color:#e2e8f0}
html[data-theme="dark"] .tw-ai-recs-h{background:#451a03;border-color:#92400e;color:#fde68a}
html[data-theme="dark"] #twAiModal .tw-modal-box{background:#1e293b!important;color:#e2e8f0}

/* ── Badges & alerts: slightly rounder/cleaner ── */
.badge{ padding:.28rem .62rem; letter-spacing:.2px; }
.alert{ border-radius:12px; border-width:1px; }

/* ── Sidebar active-link gold glow (subtle polish) ── */
body .sidebar#sidebar .sidebar-link.active{ box-shadow:inset 3px 0 0 #e8a020, 0 0 0 1px rgba(232,160,32,.08); }

/* ═══════════════════════════════════════════════════════════════
 *  PRINT / PDF — SINGLE AUTHORITATIVE SECTION (2026-06-06)
 *  One @media print block for the whole app. Guarantees:
 *   • grey TWIG logo FIXED at top-LEFT of EVERY printed page
 *   • a clean document header band (title / subtitle / date) below it
 *   • all screen chrome (sidebar, top bar, buttons, nav, filters) hidden
 *   • readable tables, repeating header rows, no awkward row breaks
 *   • centered page number footer (browsers permitting)
 *  Orientation: global default = portrait (below). Pages override per-page
 *  via print_orientation('landscape') which emits its own @page rule.
 * ═══════════════════════════════════════════════════════════════ */

/* Print-only nodes are hidden on screen; revealed only inside @media print. */
.print-only{ display:none; }

@media print{
  /* ── 1. Hide every bit of screen chrome ── */
  #sidebar,.sidebar,.topbar,.menu-toggle,.sidebar-backdrop,#tw-bell,.tw-bell,
  .tw-flash-wrap,.tw-qs-wrap,.page-actions,.actions,.no-print{ display:none !important; visibility:hidden !important; }

  /* ── 2. Reset the canvas so content uses the full page width ── */
  html,body,.app-wrapper,.main-content,.content-area{
    margin:0 !important; padding:0 !important; background:#fff !important;
  }
  body{ color:#000 !important; }

  /* ── 2b. DARK MODE → force a clean LIGHT printout (don't print dark backgrounds = the «prints the screen» look) ── */
  html[data-theme="dark"] *{ background-color:#fff !important; color:#000 !important; border-color:#bbb !important; box-shadow:none !important; text-shadow:none !important; }
  html[data-theme="dark"] thead th{ background:#f0f0f0 !important; }

  /* ── 3. Fixed grey TWIG logo header — pinned TOP-LEFT, repeats on every page ── */
  .print-only{ display:block !important; }
  .tw-print-head{
    position:fixed; top:0; left:0; right:0;          /* span the top; logo sits at the LEFT edge */
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    padding:2mm 5mm 1.5mm; border-bottom:1.5px solid #333; background:#fff;
    direction:ltr;                                    /* keep logo physically left even in RTL */
  }
  .tw-print-head .tw-print-logo{
    height:11mm; width:auto; display:block;
    filter:grayscale(100%);                           /* guarantee a grey mark even if asset changes */
  }
  .tw-print-head .tw-print-co{
    font-size:11px; font-weight:800; color:#333; letter-spacing:.5px; margin-inline-start:auto;
  }

  /* ── 4. Page footer: centered company name + (browser) page number ── */
  .tw-print-foot{
    position:fixed; bottom:3mm; left:0; right:0;
    text-align:center; font-size:9px; color:#888;
  }

  /* ── 5. Document header band (title / subtitle / date) from print_header() ── */
  .print-header{
    display:block !important; margin-bottom:12px;
    border-bottom:2px solid #333; padding-bottom:8px; text-align:start;
  }
  .print-header .ph-brand{ display:none !important; }   /* logo header replaces the old text brand */
  .print-header .ph-title{ font-size:16px; font-weight:800; color:#111; }
  .print-header .ph-meta { font-size:11px; color:#444; margin-top:2px; }

  /* ── 6. Tables: full width, repeating heads, clean borders, no mid-row breaks ── */
  .card,.tw-card,.tw-table-wrap,.table-responsive,[style*="overflow"]{
    overflow:visible !important; box-shadow:none !important; border:0 !important;
  }
  table{ width:100% !important; border-collapse:collapse !important; table-layout:auto !important; }
  thead{ display:table-header-group !important; }       /* repeat header row on each page */
  tfoot{ display:table-footer-group !important; }
  tr,td,th{ page-break-inside:avoid !important; }
  /* wrap long/wide content so wide tables FIT the page instead of overflowing («نص الجدول بيطير») */
  th,td{ font-size:10.5px !important; border:1px solid #999 !important; padding:4px 6px !important; word-break:break-word !important; overflow-wrap:anywhere !important; white-space:normal !important; vertical-align:top !important; }
  thead th{ background:#f0f0f0 !important; color:#111 !important; }

  /* ── 7. Misc print hygiene ── */
  a[href]{ text-decoration:none !important; color:inherit !important; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  /* ── 8. Default page geometry. Top margin clears the fixed logo band,
   *      bottom margin clears the footer. Landscape override comes from
   *      print_orientation() which emits its own <style media=print> @page. ── */
  @page{ size:A4 portrait; margin:22mm 10mm 14mm; }
  @page{ @bottom-center{ content: counter(page); } }    /* page number where supported */
}

/* ============================ Dark mode (html[data-theme="dark"]) ============================ */
/* Toggled from the sidebar (under the language switch). Pairs with data-bs-theme="dark" so Bootstrap's own
   components go dark automatically; the rules below cover twig-custom surfaces that hardcode white/#fff. */
html[data-theme="dark"]{
  --bg:#0f1521; --ink:#f1f5f9;   /* page bg matches the dark sidebar (#0f1521) so cards "bezel" cleanly on top */
  --gray-50:#0f172a;  --gray-100:#1e293b; --gray-200:#334155; --gray-300:#475569;
  --gray-400:#64748b; --gray-500:#94a3b8; --gray-600:#cbd5e1; --gray-700:#dbe2ea;
  --gray-800:#e8edf3; --gray-900:#f8fafc;
  --primary-light:#312e81; --success-light:#064e3b; --danger-light:#7f1d1d;
  --warning-light:#78350f; --info-light:#1e3a8a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow:0 2px 6px rgba(0,0,0,.5);
  --shadow-md:0 6px 14px -2px rgba(0,0,0,.55); --shadow-lg:0 16px 32px -8px rgba(0,0,0,.62);
  --shadow-card:0 2px 6px rgba(0,0,0,.5); --shadow-card-h:0 8px 20px rgba(0,0,0,.6);
  color-scheme:dark;
}
html[data-theme="dark"] body{ background:var(--bg)!important; color:#e2e8f0; }
/* surfaces that hardcode white/#fff */
html[data-theme="dark"] .card,
html[data-theme="dark"] .tw-card,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .tw-stat,
html[data-theme="dark"] .dashboard-stat,
html[data-theme="dark"] .tw-table-wrap,
html[data-theme="dark"] .tw-action-card,
html[data-theme="dark"] .content-area > .table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .btn-light{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .card-header, html[data-theme="dark"] .tw-card-header{ background:#243348; border-color:#334155; color:#f1f5f9; }
/* Bootstrap tables drive striping/hover via --bs-table-* — set them to subtle dark with LIGHT text so
   the row-to-row highlight stays readable (was a too-light band hiding the text). */
html[data-theme="dark"] .table{
  --bs-table-bg:#1e293b; --bs-table-color:#e2e8f0; --bs-table-border-color:#334155;
  --bs-table-striped-bg:#1b2638; --bs-table-striped-color:#e2e8f0;
  --bs-table-hover-bg:#22304a; --bs-table-hover-color:#f1f5f9;
  --bs-table-active-bg:#22304a; --bs-table-active-color:#f1f5f9;
}
/* Row separators: Bootstrap's --bs-border-color is light in dark theme → the lines BETWEEN rows looked like
   bright bands. Force a subtle dark separator on every cell (covers the dashboard "آخر الحركات" table etc.). */
html[data-theme="dark"] .table{ --bs-table-bg:#1e293b; --bs-table-color:#e2e8f0; --bs-border-color:#273141; --bs-table-border-color:#273141; }
html[data-theme="dark"] .table > :not(caption) > * > *{ border-color:#273141 !important; }
html[data-theme="dark"] .table thead th{ background:#243348; color:#cbd5e1; border-color:#273141 !important; }
html[data-theme="dark"] .table tbody td, html[data-theme="dark"] .table tbody th{ color:#e2e8f0; }
/* THE zebra: line ~636 stripes EVEN rows with near-white rgba(248,249,252,.7) on plain .table (not
   .table-striped) — that was the "light band" hiding white text. Make the zebra a subtle DARK shade.
   Placed BEFORE the hover rule so hover still wins. */
html[data-theme="dark"] .table tbody tr:nth-child(even) td,
html[data-theme="dark"] .table tbody tr:nth-child(even) th{ background:#1a2536 !important; color:#e2e8f0 !important; }
html[data-theme="dark"] .table tbody tr:nth-child(odd) td,
html[data-theme="dark"] .table tbody tr:nth-child(odd) th{ background:#1e293b; color:#e2e8f0; }
/* Row hover: twig sets it to var(--primary-light) on the <tr> in 3 places (lines ~512/555/637) which read
   too light. Force a clear DARK GRAY with white text across .table AND .tw-table-wrap, row + cells. */
html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover > td,
html[data-theme="dark"] .table tbody tr:hover > th,
html[data-theme="dark"] .tw-table-wrap tbody tr:hover,
html[data-theme="dark"] .tw-table-wrap tbody tr:hover > td,
html[data-theme="dark"] .tw-table-wrap tbody tr:hover > th,
html[data-theme="dark"] .table-hover > tbody > tr:hover > *{ background-color:#374151 !important; color:#f8fafc !important; }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{ background:#1b2638; color:#e2e8f0; }
/* Bootstrap contextual row variants (.table-light/.table-active) and bg utilities use FIXED light colors that
   ignore data-bs-theme — they were the light bands hiding text. Force them dark with light text. */
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th, html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] thead.table-light th, html[data-theme="dark"] .table .table-light > *{
  --bs-table-bg:#26344b; --bs-table-color:#f1f5f9; background-color:#26344b !important; color:#f1f5f9 !important;
}
html[data-theme="dark"] .table-active, html[data-theme="dark"] .table-active > *{ background-color:#2a3a55 !important; color:#f1f5f9 !important; }
html[data-theme="dark"] .bg-light, html[data-theme="dark"] .bg-white{ background-color:#1e293b !important; color:#e2e8f0 !important; }
/* ============================ Mobile layer (owner 2026-06-12) ============================
   Generic, system-wide rules so EVERY page reads well on phones — no per-page edits needed. */
.tw-dash-split{display:grid;grid-template-columns:3fr 2fr;gap:1rem;align-items:stretch}
.tw-dash-split.tw-dash-single{grid-template-columns:1fr}
@media (max-width: 992px){
  .tw-dash-split{grid-template-columns:1fr}   /* dashboard: quick actions stack ABOVE the waterfall chart */
}
@media (max-width: 768px){
  .content-area{padding:12px 10px !important}
  /* KPI/stat cards: compact, numbers scale down and NEVER clip */
  .tw-stat{padding:.7rem .8rem !important}
  .tw-stat-value{font-size:clamp(1rem, 5.5vw, 1.4rem) !important;word-break:break-word;line-height:1.25}
  .tw-stat-label{font-size:.78rem !important}
  .tw-stat-hint{font-size:.72rem !important}
  .tw-stat-icon{width:34px !important;height:34px !important;font-size:1rem !important}
  /* page titles + header rows wrap instead of overflowing */
  .content-area h1{font-size:1.15rem !important}
  .tw-page-header{flex-wrap:wrap;gap:.5rem}
  .tw-ph-actions{flex-wrap:wrap}
  /* tables: tighter cells (horizontal scroll stays via tw-table-wrap/overflow-x wrappers) */
  .table{font-size:.8rem}
  .table td, .table th{padding:.35rem .45rem}
  /* filter/selector forms: fields share the row two-up and stretch full width */
  form .col-auto{flex:1 1 46%;max-width:100%}
  form .col-auto .form-select, form .col-auto .form-control{width:100% !important;min-width:0 !important}
  /* modals practically full-screen */
  .tw-modal__box{width:96vw !important;max-width:96vw !important;max-height:92vh;overflow-y:auto}
  /* generic flex button rows wrap */
  .d-flex.gap-2, .d-flex.gap-1{flex-wrap:wrap}
  /* action/nav cards: tighter so titles fit */
  .tw-action-card{padding:.6rem !important;gap:8px !important}
  /* collapse pill injected next to H1 drops to its own line gracefully */
  .content-area h1 .btn{margin-top:.25rem}
}

/* ── Global-search palette polish (owner 2026-06-10): bigger, bolder input + explicit dark-mode colors.
   Position nudged toward the middle (18vh, not 50% — results need up to 64vh below the input). ── */
#tw-gsearch-box{top:18vh !important}
#tw-gsearch-input{height:62px;font-size:1.18rem;font-weight:600;padding-inline:1.15rem;border-radius:14px !important;
  background:#fff;color:#111827;border:1px solid #cbd5e1}
#tw-gsearch-input:focus{border-color:#d97757;box-shadow:0 0 0 4px rgba(217,119,87,.18),0 12px 40px rgba(0,0,0,.28) !important}
#tw-gsearch-results a:hover{background:var(--gray-100)}
html[data-theme="dark"] #tw-gsearch-input{background:#243348 !important;color:#f8fafc !important;border-color:#475569 !important}
html[data-theme="dark"] #tw-gsearch-input::placeholder{color:#a8b7c9}
html[data-theme="dark"] #tw-gsearch-btn{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0}
html[data-theme="dark"] #tw-gsearch-results{background:#1e293b !important;color:#e2e8f0 !important;border-color:#334155 !important}
html[data-theme="dark"] #tw-gsearch-results .border-bottom{border-color:#273141 !important}
/* alerts keep their light-mode DARK text (#92400e etc.) over the dark-mode *-light backgrounds → unreadable
   (e.g. the orange "notional costs" banner). Give each variant a LIGHT text tone instead. */
html[data-theme="dark"] .alert-success{ color:#6ee7b7; }
html[data-theme="dark"] .alert-danger{ color:#fca5a5; }
html[data-theme="dark"] .alert-warning{ color:#fde68a; }
html[data-theme="dark"] .alert-info{ color:#93c5fd; }
html[data-theme="dark"] .alert-secondary{ background:#1e293b; color:#cbd5e1; border-color:#334155; }
html[data-theme="dark"] .badge.bg-light{ background-color:#334155 !important; }
/* bg-light flips to dark slate above → its text must lighten. Colored badges (warning/info) KEEP their yellow/cyan
   background in dark mode, so their text must stay dark (rule at the top of the file) — don't catch them here. */
html[data-theme="dark"] .badge.bg-light.text-dark{ color:#e2e8f0 !important; }
/* INLINE light backgrounds across HR-finance & report pages (cards/table wrappers/tabs use style="background:#fff").
   !important beats inline styles that aren't themselves !important. Anchored to "#fff;" so #fff3cd is untouched. */
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#ffffff"]{ background-color:#1e293b !important; color:#e2e8f0; }
html[data-theme="dark"] [style*="background:#fff8"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background:#f1f5f9"]{ background-color:#1a2536 !important; color:#e2e8f0; }
html[data-theme="dark"] [style*="#fff3cd"]{ background-color:#3a2f12 !important; color:#fcd34d !important; }
html[data-theme="dark"] [style*="background:#fef2f2"]{ background-color:#3a1d1d !important; color:#fca5a5 !important; border-color:#7f1d1d !important; }
/* embed (iframe) pages forced a light body — make it dark too so HR-finance tabs match */
html[data-theme="dark"] body.embed{ background:#0f172a !important; }
/* payroll sticky first column */
html[data-theme="dark"] .pr-tbl .pr-sticky{ background:#1e293b !important; }
html[data-theme="dark"] .pr-tbl tr.pr-emp:hover .pr-sticky{ background:#243348 !important; }
/* page <style>-block light surfaces (CSS rules — attribute selectors can't reach these) */
html[data-theme="dark"] .tw-typecard,
html[data-theme="dark"] .qe-fund,
html[data-theme="dark"] .qe-seg button,
html[data-theme="dark"] .tw-tabs .tw-tab.active{ background:#1e293b !important; color:#e2e8f0; border-color:#334155; }
/* page-specific inline light tints (employees dept header, attendance holiday cell, team map) */
html[data-theme="dark"] [style*="#fde8e8"]{ background-color:#3a1d1d !important; color:#fca5a5 !important; }
html[data-theme="dark"] [style*="#e3ecfb"]{ background-color:#22304a !important; color:#dbe6ff !important; border-color:#3a4a66 !important; }
html[data-theme="dark"] [style*="#e9eef3"]{ background-color:#1a2536 !important; }
/* computed net/total summary boxes (invoice & statement totals: green = positive, red = negative) */
html[data-theme="dark"] [style*="#eef7f0"]{ background-color:#14321f !important; color:#bbf7d0 !important; }
html[data-theme="dark"] [style*="#fdeeee"]{ background-color:#3a1d1d !important; color:#fecaca !important; }
/* Bootstrap contextual table rows are FIXED light tints even under data-bs-theme — tint them dark */
html[data-theme="dark"] .table-success, html[data-theme="dark"] .table-success > *{ background-color:#14321f !important; color:#bbf7d0 !important; }
html[data-theme="dark"] .table-info,    html[data-theme="dark"] .table-info > *{    background-color:#102a3a !important; color:#bae6fd !important; }
html[data-theme="dark"] .table-warning, html[data-theme="dark"] .table-warning > *{ background-color:#3a2f12 !important; color:#fde68a !important; }
html[data-theme="dark"] .table-danger,  html[data-theme="dark"] .table-danger > *{  background-color:#3a1d1d !important; color:#fecaca !important; }
html[data-theme="dark"] .table-primary, html[data-theme="dark"] .table-primary > *{ background-color:#1e2a4a !important; color:#c7d2fe !important; }
html[data-theme="dark"] .table-secondary, html[data-theme="dark"] .table-secondary > *{ background-color:#293141 !important; color:#e2e8f0 !important; }
/* inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{ background:#0f172a; border-color:#334155; color:#e2e8f0; }
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder{ color:#64748b; }
/* headings + muted + content links */
html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2,
html[data-theme="dark"] .dashboard-stat-value, html[data-theme="dark"] .tw-stat-value{ color:#f1f5f9; }
html[data-theme="dark"] .text-muted{ color:#94a3b8!important; }
html[data-theme="dark"] .content-area a:not(.btn):not(.tw-action-card):not(.tw-stat):not([class*="badge"]){ color:#93c5fd; }
/* searchable dropdowns + popover surfaces */
html[data-theme="dark"] .ts-control, html[data-theme="dark"] .ts-dropdown{ background:#0f172a; color:#e2e8f0; border-color:#334155; }
html[data-theme="dark"] .ts-dropdown{ box-shadow:0 12px 32px rgba(0,0,0,.5); }
html[data-theme="dark"] .ts-dropdown .option.active{ background:#D97757; color:#fff; }
html[data-theme="dark"] .dropdown-menu{ background:#1e293b; border-color:#334155; }
html[data-theme="dark"] .dropdown-item{ color:#e2e8f0; }
html[data-theme="dark"] .dropdown-item:hover{ background:#243348; }
/* modal (tw_modal.css surfaces) */
html[data-theme="dark"] .tw-modal__box{ background:#1e293b; color:#e2e8f0; }
html[data-theme="dark"] .tw-modal__head, html[data-theme="dark"] .tw-modal__info{ background:#243348; color:#f1f5f9; border-color:#334155; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-top{ border-color:#334155!important; }

/* ── Dark-mode badge contrast (owner 2026-06-10: badge text was ≈ its background) ──
   Deep colored bg + LIGHT text + faint border so the chip reads clearly on dark surfaces. */
html[data-theme="dark"] .tw-badge.success{background:#14532d;color:#86efac;border:1px solid #16a34a}
html[data-theme="dark"] .tw-badge.danger{background:#7f1d1d;color:#fecaca;border:1px solid #dc2626}
html[data-theme="dark"] .tw-badge.warning{background:#78350f;color:#fde68a;border:1px solid #d97706}
html[data-theme="dark"] .tw-badge.info{background:#1e3a8a;color:#bfdbfe;border:1px solid #3b82f6}
html[data-theme="dark"] .tw-badge.gray{background:#334155;color:#cbd5e1;border:1px solid #475569}
/* workflow «تنفيذ» chip — Claude orange, readable on BOTH themes */
.tw-badge.exec{background:#FBEFEA;color:#C2410C;border:1px solid #D97757}
html[data-theme="dark"] .tw-badge.exec{background:#4a2113;color:#FDBA8C;border:1px solid #D97757}
/* icon-only light buttons: make the glyph clearly visible on dark surfaces */
html[data-theme="dark"] .btn-light i,
html[data-theme="dark"] .btn-outline-secondary i{color:#e2e8f0}
html[data-theme="dark"] .btn-outline-secondary{border-color:#475569;color:#cbd5e1}
html[data-theme="dark"] .btn-outline-dark{border-color:#64748b;color:#cbd5e1}
html[data-theme="dark"] .text-muted{color:#94a3b8 !important}
.tw-rejected-row{background:#FEF2F2}
html[data-theme="dark"] .tw-rejected-row{background:#3b1212}

/* ── Auth screens (login / reset / forced change) — dark glass card on the Twig navy→terracotta gradient ── */
.tw-auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;
  background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);font-family:'Cairo',sans-serif;padding:1rem}
.tw-auth-card{width:100%;max-width:400px;padding:2.2rem 2rem;border-radius:18px;
  background:rgba(17,24,39,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.45);color:#e6ebf5}
.tw-auth-card .tw-auth-logo{display:block;margin:0 auto .6rem;max-height:62px}
.tw-auth-title{text-align:center;letter-spacing:.18em;font-weight:300;font-size:1.35rem;color:#e6ebf5;margin:.2rem 0 1.4rem}
.tw-auth-field{position:relative;margin-bottom:1rem}
.tw-auth-field .bi{position:absolute;inset-inline-start:0;top:0;width:46px;height:100%;display:flex;
  align-items:center;justify-content:center;color:#0d1b35;background:#cfd6e0;border-radius:10px 0 0 10px}
html[dir=rtl] .tw-auth-field .bi{border-radius:0 10px 10px 0}
.tw-auth-field input{width:100%;height:48px;padding-inline-start:58px;border:0;border-radius:10px;
  background:#cfd6e0;color:#0d1b35;font-size:.98rem}
.tw-auth-field input::placeholder{color:#5b6472}
.tw-auth-btn{width:100%;height:48px;border:0;border-radius:10px;background:#5b7a8a;color:#fff;
  letter-spacing:.15em;font-weight:600;cursor:pointer;transition:filter .15s}
.tw-auth-btn:hover{filter:brightness(1.08)}
.tw-auth-row{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:#c2cad6;margin:.2rem 0 1.1rem}
.tw-auth-link{color:#e0b9a6;text-decoration:none}.tw-auth-link:hover{text-decoration:underline}
.tw-auth-alert{border-radius:10px;padding:.6rem .8rem;margin-bottom:1rem;font-size:.9rem}
.tw-auth-alert.err{background:rgba(220,53,69,.18);border:1px solid rgba(220,53,69,.4);color:#ffd7da}
.tw-auth-alert.ok{background:rgba(25,135,84,.18);border:1px solid rgba(25,135,84,.4);color:#c8f3da}
.tw-auth-lang{position:fixed;top:14px;inset-inline-end:18px;color:#e6ebf5;font-size:.85rem}
.tw-auth-lang a{color:#e0b9a6;text-decoration:none;margin:0 .25rem}