:root{
  --sidebar-w: 260px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow: 0 8px 24px rgba(15,23,42,.08);
  /* --brand / --brand-2 / --accent are injected inline by the layout */
  --brand:   #1e3a8a;
  --brand-2: #3b82f6;
  --accent:  #60a5fa;
}

[data-bs-theme="light"]{ --page-bg:#f5f7fb; --panel:#fff; --ink:#0f172a; --muted:#64748b; --border:#e5e7eb; }
[data-bs-theme="dark"] { --page-bg:#0b1220; --panel:#111a2e; --ink:#e2e8f0; --muted:#94a3b8; --border:#1f2a44; }

/* ---------- Bootstrap overrides tied to brand ---------- */
/* Re-map Bootstrap's own primary variables so EVERY component (buttons, links,
   badges, pagination, nav-pills, form controls, alerts, progress bars…) follows
   the selected brand colour, not just the icons. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"]{
  --bs-primary: var(--brand-2);
  --bs-primary-rgb: 0,0,0; /* overridden below via color-mix fallbacks */
  --bs-link-color: var(--brand-2);
  --bs-link-hover-color: var(--brand);
  --bs-link-color-rgb: 0,0,0;
  --bs-primary-text-emphasis: var(--brand);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--brand-2) 15%, transparent);
  --bs-primary-border-subtle: color-mix(in srgb, var(--brand-2) 40%, transparent);
  --bs-focus-ring-color: color-mix(in srgb, var(--brand-2) 30%, transparent);
  --bs-btn-focus-shadow-rgb: 0,0,0;
  --bs-accordion-active-color: var(--brand);
  --bs-nav-pills-link-active-bg: var(--brand-2);
}
.badge.bg-primary, .btn-check:checked + .btn-outline-primary,
.nav-pills .nav-link.active, .page-item.active .page-link,
.progress-bar, .list-group-item.active{
  background-color: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
  color:#fff !important;
}
.page-link{ color:var(--brand-2); }
.border-primary{ border-color:var(--brand-2) !important; }
.nav-tabs .nav-link.active{ color:var(--brand-2); border-bottom-color:transparent; }
.spinner-border.text-primary{ color:var(--brand-2) !important; }
.btn-primary{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-outline-primary{ color:var(--brand-2); border-color:var(--brand-2); }
.btn-outline-primary:hover,.btn-outline-primary.active{ background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.text-primary, .text-primary-emphasis{ color:var(--brand-2) !important; }
.bg-primary{ background:var(--brand-2) !important; }
.bg-primary-subtle{ background: color-mix(in srgb, var(--brand-2) 15%, transparent) !important; }
a{ color:var(--brand-2); }
a:hover{ color:var(--brand); }
.form-control:focus,.form-select:focus{
  border-color:var(--brand-2);
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-2) 25%, transparent);
}
.form-check-input:checked{ background-color:var(--brand-2); border-color:var(--brand-2); }

html,body{ height:100%; }
body{ background:var(--page-bg); color:var(--ink); font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }

/* Auth */
.auth-body{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); min-height:100vh; }
.auth-wrap{ display:grid; place-items:center; min-height:100vh; padding:24px; }
.auth-card{ width:100%; max-width:420px; background:var(--panel); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.auth-brand{ text-align:center; margin-bottom:20px; }
.auth-brand h1{ font-size:1.5rem; margin:12px 0 4px; }
.auth-foot{ margin-top:16px; text-align:center; font-size:.85rem; }
.auth-foot a{ color:var(--brand-2); text-decoration:none; margin:0 6px; }
.muted{ color:var(--muted); }

.brand-mark{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); font-size:1.25rem; }
.brand-mark.lg{ width:64px; height:64px; margin:0 auto; font-size:1.75rem; }

/* ---------- Shell / RTL ---------- */
/* LTR: sidebar on left. RTL: sidebar on right — grid columns follow inline direction,
   so keeping [sidebar-w, 1fr] gives the sidebar the start column in both. */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

.sidebar{
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff;
  border-inline-end:1px solid color-mix(in srgb, #000 15%, transparent);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:0; height:100vh;
  z-index:6;
}
.sidebar .brand-name{ color:#fff; font-weight:700; }
.sidebar .brand-slogan{ font-size:.75rem; color:rgba(255,255,255,.75); }
.brand{ display:flex; gap:10px; align-items:center; padding:6px 8px; }
.brand img{ width:40px; height:40px; border-radius:10px; object-fit:cover; background:#fff; padding:2px; }
.sidebar .brand-mark{ background:rgba(255,255,255,.15); }

.side-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; flex:1; overflow:auto; }
.side-nav .nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.925rem;
}
.side-nav .nav-link:hover{ background:rgba(255,255,255,.12); color:#fff; }
.side-nav .nav-link.active{
  background:rgba(255,255,255,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.side-nav .nav-link i{ width:20px; text-align:center; }
.logout{ margin-top:auto; }
.btn-logout{ color:#fff; border:1px solid rgba(255,255,255,.4); background:transparent; }
.btn-logout:hover{ background:rgba(255,255,255,.15); color:#fff; }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; gap:16px; padding:12px 20px;
  background:var(--panel); border-block-end:1px solid var(--border);
  box-shadow:inset 0 -3px 0 0 var(--brand-2);
  position:sticky; top:0; z-index:5;
}
.topbar .search{ flex:1; max-width:520px; position:relative; }
.topbar .search i{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.topbar .search input{ width:100%; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--page-bg); color:var(--ink); padding-inline-start:36px; padding-inline-end:12px; outline:none; }
.topbar .search input:focus{ border-color:var(--brand-2); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--brand-2) 25%, transparent); }
.topbar-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.icon-btn{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; text-decoration:none; color:var(--ink); border:1px solid var(--border); background:var(--panel); font-weight:600; }
.icon-btn:hover{ background:var(--page-bg); color:var(--brand-2); border-color:var(--brand-2); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:4px 10px; border-radius:10px; border:1px solid var(--border); }
.avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:grid; place-items:center; font-weight:700; }
.u-name{ font-size:.85rem; font-weight:600; line-height:1; }
.u-role{ font-size:.72rem; color:var(--muted); }

.content{ padding:22px; flex:1; }
.app-footer{
  padding:14px 22px; border-block-start:1px solid var(--border);
  background:var(--panel); color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  box-shadow:inset 0 3px 0 0 var(--brand-2);
}

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0 18px; }
.date-range{ display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.date-range label{ display:flex; flex-direction:column; font-size:.78rem; color:var(--muted); }

.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.kpi-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm); }
.kpi-icon{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:1.35rem; background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.kpi-b .kpi-icon{ background:linear-gradient(135deg,var(--brand-2),var(--accent)); }
.kpi-c .kpi-icon{ background:linear-gradient(135deg,var(--brand),var(--accent)); }
.kpi-d .kpi-icon{ background:linear-gradient(135deg,var(--accent),var(--brand-2)); }
.kpi-label{ font-size:.8rem; color:var(--muted); }
.kpi-value{ font-size:1.5rem; font-weight:700; }

@media (max-width: 900px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; }
}

/* Documents / tables */
.filter-bar .form-control, .filter-bar .form-select{ background:var(--page-bg); color:var(--ink); border-color:var(--border); }
.doc-table thead th{ font-size:.78rem; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); border-bottom-color:var(--border); }
.doc-table tbody td{ border-color:var(--border); }
.btn-actions{ display:inline-flex; gap:4px; }
.btn-actions .btn{ padding:.25rem .5rem; }
.empty{ text-align:center; padding:36px 12px; color:var(--muted); }
.empty i{ font-size:2.25rem; opacity:.4; }
form.d-inline{ display:inline; }

/* Settings */
.stat{ background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.stat-label{ font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.stat-value{ font-size:1.6rem; font-weight:700; margin-top:2px; }
.list-group-item{ background:var(--panel); border-color:var(--border); color:var(--ink); }
.list-group-item:hover{ background:var(--page-bg); }
[dir="rtl"] .modal-header .btn-close{ margin-right:auto; margin-left:0; }

/* Color palette grid + custom color */
.color-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));
  gap:8px;
}
.color-dot{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:#fff; font-size:1rem;
  border:2px solid transparent;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .08s ease, border-color .15s ease;
}
.color-dot:hover{ transform:scale(1.08); }
.color-dot .tick{ opacity:0; transition:opacity .12s ease; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.color-dot.active .tick{ opacity:1; }
.color-dot.active{
  border-color: var(--ink);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-2) 30%, transparent);
}
input[type=color].form-control-color{ width:44px; height:38px; padding:2px; }

/* Inline "Manage" link next to combo boxes */
.combo-wrap{ display:flex; gap:6px; align-items:center; }
.combo-wrap .form-select, .combo-wrap .form-control{ flex:1; }
.btn-manage{
  border:1px solid var(--border); background:var(--panel);
  color:var(--brand-2); padding:.375rem .55rem; border-radius:.5rem;
  text-decoration:none; line-height:1;
}
.btn-manage:hover{ background:var(--brand-2); color:#fff; border-color:var(--brand-2); }