/* ════════════════════════════════════════════════════════════════════
   PEARL COMMAND · Omniview — Premium White Edition
   Inspired by Stripe, Linear, and Apple design systems
   A refined, luminous, paper-forward command surface
   ──────────────────────────────────────────────────────────────────── */

/* ─── Design Tokens ───────────────────────────────────────────────── */
:root {
  /* Core surfaces — soft pearl whites */
  --bg: #f7f8fc;
  --bg-tint: #eef1f9;
  --bg-mesh: #ffffff;
  --paper: #ffffff;
  --paper-2: #fbfcfe;
  --paper-3: #f3f5fb;
  --ink: #0b1220;
  --ink-2: #1e293b;
  --text: #0f172a;
  --text-soft: #334155;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --hairline: #e5e9f2;
  --hairline-2: #eef1f8;
  --line-strong: #d6dbe8;

  /* Accent system — indigo/sky/amber/pink quadrille */
  --accent: #4f46e5;
  --accent-soft: #818cf8;
  --accent-deep: #3730a3;
  --accent-wash: #eef0ff;
  --accent-rgb: 79, 70, 229;
  --accent-dark: #3730a3;
  --accent-dark-rgb: 55, 48, 163;

  --accent-2: #0ea5e9;
  --accent-2-soft: #38bdf8;
  --accent-2-wash: #e6f6fe;
  --accent-2-rgb: 14, 165, 233;

  --accent-3: #f59e0b;
  --accent-3-soft: #fbbf24;
  --accent-3-wash: #fff6e4;
  --accent-3-rgb: 245, 158, 11;

  --accent-4: #ec4899;
  --accent-4-soft: #f472b6;
  --accent-4-wash: #fdeaf4;
  --accent-4-rgb: 236, 72, 153;

  --accent-5: #10b981;
  --accent-5-wash: #e4f6ef;
  --accent-5-rgb: 16, 185, 129;

  /* Functional palette */
  --danger: #e11d48;
  --danger-soft: #f43f5e;
  --danger-wash: #ffe4eb;
  --danger-rgb: 225, 29, 72;

  --success: #16a34a;
  --success-soft: #22c55e;
  --success-wash: #dcfce7;
  --success-rgb: 22, 163, 74;

  --warning: #d97706;
  --warning-soft: #f59e0b;
  --warning-wash: #fff3d6;
  --warning-rgb: 217, 119, 6;

  --info: #0284c7;
  --info-soft: #38bdf8;
  --info-wash: #e0f2fe;
  --info-rgb: 2, 132, 199;

  --neutral: #64748b;
  --neutral-wash: #f1f5f9;
  --neutral-rgb: 100, 116, 139;

  /* Shadows — layered premium depth */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, .04), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 16px -4px rgba(15, 23, 42, .06), 0 18px 32px -12px rgba(15, 23, 42, .08);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, .05), 0 18px 28px -8px rgba(15, 23, 42, .08), 0 28px 44px -18px rgba(15, 23, 42, .1);
  --shadow-lg: 0 8px 16px rgba(15, 23, 42, .06), 0 24px 48px -12px rgba(15, 23, 42, .1), 0 42px 64px -24px rgba(15, 23, 42, .12);
  --shadow-xl: 0 30px 60px -20px rgba(79, 70, 229, .18), 0 12px 24px -8px rgba(15, 23, 42, .1);
  --shadow-glow: 0 0 0 1px rgba(79, 70, 229, .14), 0 12px 28px -8px rgba(79, 70, 229, .24), 0 24px 48px -16px rgba(14, 165, 233, .18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(15, 23, 42, .04);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-xs: 140ms;
  --dur-sm: 220ms;
  --dur-md: 360ms;
  --dur-lg: 560ms;

  /* Cursor spotlight */
  --mx: 50%;
  --my: 50%;
}

/* ─── Reset & base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  font-family: 'Alexandria', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(79, 70, 229, .06), transparent 50%),
    radial-gradient(circle at 110% 10%, rgba(14, 165, 233, .06), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(236, 72, 153, .03), transparent 60%),
    linear-gradient(to bottom, #f7f8fc 0%, #fbfcfe 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, .012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .012) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent 80%);
}

body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-xs) var(--ease-swift); }
a:hover { color: var(--accent-deep); }
p { margin: 0 0 0.75em; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 20px 0; }

::selection { background: rgba(79, 70, 229, .18); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(79, 70, 229, .25), rgba(14, 165, 233, .2));
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(79, 70, 229, .45), rgba(14, 165, 233, .35));
}

/* ─── Keyframes ──────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fabPop {
  from { opacity: 0; transform: scale(.3) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes aurora-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes subtle-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(8px, -8px); }
  66% { transform: translate(-6px, 6px); }
}

/* ─── Layout container ───────────────────────────────────────────── */
.container {
  max-width: 1320px;
  margin: 28px auto 120px;
  padding: 0 28px;
  animation: fadeSlideUp var(--dur-lg) var(--ease-smooth) backwards;
}

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .7) 100%);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(226, 232, 245, .8);
  transition: background var(--dur-sm) var(--ease-swift), box-shadow var(--dur-sm) var(--ease-swift), border-color var(--dur-sm) var(--ease-swift);
  overflow: hidden;
}
.topbar.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9));
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .08);
  border-bottom-color: rgba(226, 232, 245, 1);
}
.topbar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, .4) 25%, rgba(14, 165, 233, .4) 50%, rgba(236, 72, 153, .4) 75%, transparent 100%);
  background-size: 300% 100%;
  animation: borderFlow 12s ease infinite;
  opacity: .7;
}
.topbar-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .5;
}
.topbar-glow--one {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(79, 70, 229, .22), transparent 70%);
  top: -160px; right: -100px;
  animation: subtle-float 14s ease-in-out infinite;
}
.topbar-glow--two {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(14, 165, 233, .18), transparent 70%);
  top: -130px; left: -80px;
  animation: subtle-float 18s ease-in-out infinite reverse;
}
.topbar-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand-wrap {
  display: flex; align-items: center; gap: 18px;
  order: 2;
}
.brand-copy {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  line-height: 1.25;
}
.topbar-kicker {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  font-family: 'Cairo', 'Alexandria', sans-serif;
}
.brand {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5ff 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-sm) var(--ease-spring), box-shadow var(--dur-sm) var(--ease-swift);
}
.brand::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(79, 70, 229, .15), transparent 60%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur-sm) var(--ease-swift);
}
.brand:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: var(--shadow); }
.brand:hover::before { opacity: 1; }
.brand-logo {
  width: 38px; height: 38px; object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .08));
}
.topbar-content {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  order: 1;
}
.topbar-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.topbar-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(79, 70, 229, .08), rgba(14, 165, 233, .05));
  border: 1px solid rgba(79, 70, 229, .14);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--shadow-xs);
}
.topbar-pill--soft {
  background: rgba(15, 23, 42, .04);
  border-color: var(--hairline);
  color: var(--text-soft);
}
.user {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-right: 4px;
  border-right: 1px solid var(--hairline);
  padding-inline: 14px;
  line-height: 1.3;
}
.company {
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: -.008em;
}
.user small { font-size: 11px; color: var(--muted); font-weight: 500; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-menu {
  display: inline-flex; align-items: center; gap: 8px;
}
.topbar-menu::before {
  content: ''; width: 14px; height: 10px;
  background: linear-gradient(to bottom, currentColor 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px);
  opacity: .85;
}

/* ─── App layout (sidebar + content) ─────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.app-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeSlideUp var(--dur-lg) var(--ease-smooth) backwards;
}

/* ─── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 92px;
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
  z-index: 50;
  overflow-x: hidden;
}

/* Body-level sidebar state classes (driven by nav.php JS) */
body.sidebar-collapsed .app-grid { grid-template-columns: 1fr; }
body.sidebar-collapsed .topbar-menu { display: inline-flex; }
body:not(.sidebar-floating).sidebar-collapsed .sidebar { display: none; }

body.sidebar-floating .app-grid { grid-template-columns: 1fr; }
body.sidebar-floating .sidebar {
  position: fixed;
  inset: 88px 20px auto auto;
  width: min(320px, 92vw);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-md) var(--ease-smooth), opacity var(--dur-sm);
  z-index: 90;
  box-shadow: var(--shadow-lg);
}
body.sidebar-floating.sidebar-open .sidebar {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
body.sidebar-floating.sidebar-open .app-content {
  filter: blur(1px);
  pointer-events: none;
}
body.sidebar-floating.sidebar-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 60;
  pointer-events: none;
  animation: fadeIn var(--dur-sm) var(--ease-swift);
}
body.sidebar-locked { overflow: hidden; }
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-4));
  background-size: 200% 100%;
  animation: borderFlow 9s ease infinite;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.sidebar-header {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-2);
}
.sidebar-overview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted-2); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.sidebar-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-toggle {
  display: none;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-sm), 0 4px 10px -2px rgba(79, 70, 229, .35);
  transition: transform var(--dur-xs) var(--ease-spring);
}
.sidebar-toggle:hover { transform: translateY(-1px); }
.sidebar-controls {
  display: flex; flex-direction: column; gap: 12px;
}
.sidebar-select {
  appearance: none;
  width: 100%;
  padding: 11px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: border-color var(--dur-xs), background var(--dur-xs), box-shadow var(--dur-xs);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 32px;
}
.sidebar-select:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.sidebar-nav {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.sidebar-nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 12px 4px 6px;
  border-top: 1px solid var(--hairline-2);
  margin-top: 6px;
}
.sidebar-nav-label:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  position: relative;
  transition: background var(--dur-xs) var(--ease-swift), color var(--dur-xs) var(--ease-swift), transform var(--dur-xs);
}
.sidebar-link::before {
  content: '';
  position: absolute;
  top: 50%; right: 0;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height var(--dur-sm) var(--ease-spring);
}
.sidebar-link:hover {
  background: var(--accent-wash);
  color: var(--accent-deep);
  transform: translateX(-3px);
}
.sidebar-link:hover::before { height: 60%; }
.sidebar-link.active {
  background: linear-gradient(135deg, var(--accent-wash), rgba(14, 165, 233, .06));
  color: var(--accent-deep);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .15);
}
.sidebar-link.active::before { height: 70%; }
.sidebar-link-indicator {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted-2);
  opacity: .5;
  transition: all var(--dur-xs);
}
.sidebar-link:hover .sidebar-link-indicator { background: var(--accent); opacity: 1; }
.sidebar-link.active .sidebar-link-indicator {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* Mobile FAB — only visible in floating sidebar mode */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 18px; left: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(79, 70, 229, .45);
  z-index: 80;
  place-items: center;
  animation: fabPop var(--dur-sm) var(--ease-spring);
  border: 1px solid rgba(255, 255, 255, .18);
}
.mobile-fab svg { width: 20px; height: 20px; stroke-width: 2.2; }
.mobile-fab:hover { transform: scale(1.06); box-shadow: 0 12px 24px -6px rgba(79, 70, 229, .55); }
body.sidebar-floating .mobile-fab { display: grid; }
body.sidebar-floating.sidebar-open .mobile-fab { opacity: 0; transform: scale(.7); pointer-events: none; }

/* ─── Card base ──────────────────────────────────────────────────── */
.card, .collapsible-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-md) var(--ease-smooth), box-shadow var(--dur-md) var(--ease-smooth), border-color var(--dur-md) var(--ease-smooth);
  margin-bottom: 20px;
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-4), transparent);
  background-size: 200% 100%;
  animation: borderFlow 10s ease infinite;
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-swift);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, .18);
}
.card:hover::before { opacity: 1; }

.card-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-2);
  position: relative;
}
.card-title::before {
  content: '';
  width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 4px;
}

/* Collapsible card specifics */
.collapsible-card > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 0 0 14px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--hairline-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.collapsible-card > summary::after {
  content: '+';
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 18px; font-weight: 700;
  transition: transform var(--dur-sm) var(--ease-spring);
}
.collapsible-card[open] > summary::after { transform: rotate(45deg); background: rgba(236, 72, 153, .12); color: var(--accent-4); }
.collapsible-card > summary::-webkit-details-marker { display: none; }

/* ─── Headings / typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: 'Cairo', 'Alexandria', sans-serif;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border: 1px solid rgba(79, 70, 229, .4);
  box-shadow: var(--shadow-sm), 0 4px 12px -4px rgba(79, 70, 229, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-xs) var(--ease-spring), box-shadow var(--dur-xs) var(--ease-swift), filter var(--dur-xs);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-xs) var(--ease-swift);
}
.btn::after {
  content: '';
  position: absolute;
  top: 0; right: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transition: right var(--dur-md) var(--ease-swift);
  pointer-events: none;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow), 0 8px 20px -4px rgba(79, 70, 229, .42), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn:hover::before { opacity: 1; }
.btn:hover::after { right: -120%; animation: aurora-sweep 700ms ease; }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn.disabled {
  opacity: .55; cursor: not-allowed;
  transform: none; filter: grayscale(.3);
}

.btn.outline, .btn-secondary, .btn-ghost {
  background: var(--paper);
  color: var(--accent-deep);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
}
.btn.outline:hover, .btn-secondary:hover, .btn-ghost:hover {
  background: var(--accent-wash);
  border-color: rgba(79, 70, 229, .3);
  color: var(--accent-deep);
  box-shadow: var(--shadow-sm);
}
.btn.danger, .btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #be123c 100%);
  border-color: rgba(225, 29, 72, .4);
  box-shadow: var(--shadow-sm), 0 4px 12px -4px rgba(225, 29, 72, .35);
}
.btn.danger:hover, .btn-danger:hover {
  box-shadow: var(--shadow), 0 8px 20px -4px rgba(225, 29, 72, .48);
}
.btn.success {
  background: linear-gradient(135deg, var(--success) 0%, #15803d 100%);
  border-color: rgba(22, 163, 74, .4);
  box-shadow: var(--shadow-sm), 0 4px 12px -4px rgba(22, 163, 74, .3);
}
.btn.success:hover { box-shadow: var(--shadow), 0 8px 20px -4px rgba(22, 163, 74, .45); }

.btn.primary, .btn-primary { /* alias */ }

.btn.small {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.btn.icon-only {
  padding: 9px;
  width: 38px; height: 38px;
}

.icon-btn {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border-radius: 10px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  color: var(--text-soft);
  transition: all var(--dur-xs) var(--ease-swift);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.icon-btn:hover {
  color: var(--accent);
  border-color: rgba(79, 70, 229, .3);
  background: var(--accent-wash);
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--shadow-xs);
}
.icon-btn--edit:hover { color: var(--accent-2); background: var(--accent-2-wash); border-color: rgba(14, 165, 233, .3); }
.icon-btn--delete:hover { color: var(--danger); background: var(--danger-wash); border-color: rgba(225, 29, 72, .3); }
.icon-btn--save:hover { color: var(--success); background: var(--success-wash); border-color: rgba(22, 163, 74, .3); }
.icon-btn--open:hover { color: var(--accent-2); background: var(--accent-2-wash); }
.icon-btn--shield:hover { color: var(--accent-3); background: var(--accent-3-wash); border-color: rgba(245, 158, 11, .3); }
.icon-btn--whatsapp {
  color: #25d366;
  border-color: rgba(37, 211, 102, .25);
}
.icon-btn--whatsapp:hover { background: rgba(37, 211, 102, .1); color: #128c7e; border-color: rgba(37, 211, 102, .4); }

/* ─── Inputs ─────────────────────────────────────────────────────── */
.input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="tel"], input[type="search"], select, textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color var(--dur-xs) var(--ease-swift), box-shadow var(--dur-xs) var(--ease-swift), background var(--dur-xs);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 36px;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14), inset 0 1px 2px rgba(15, 23, 42, .03);
  background: var(--paper);
}
.input::placeholder, textarea::placeholder, input::placeholder { color: var(--muted-2); font-weight: 500; }
textarea { resize: vertical; min-height: 88px; }

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  margin: 0 2px;
  vertical-align: middle;
  transition: all var(--dur-xs) var(--ease-spring);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ''; position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: -.005em;
}
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }

.input.error, input.error, select.error, textarea.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}
.input.success, input.success { border-color: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .12); }

/* ─── Grids ──────────────────────────────────────────────────────── */
.grid-1 { display: grid; gap: 18px; grid-template-columns: 1fr; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.grid-5 { display: grid; gap: 18px; grid-template-columns: repeat(5, 1fr); }
.grid-6 { display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }
.smart-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

@media (max-width: 1200px) {
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--neutral-wash);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
  letter-spacing: -.003em;
}
.badge.primary, .badge-primary { background: var(--accent-wash); color: var(--accent-deep); border-color: rgba(79, 70, 229, .2); }
.badge.success, .badge-success, .badge.positive, .badge-positive {
  background: var(--success-wash); color: #15803d; border-color: rgba(22, 163, 74, .25);
}
.badge.danger, .badge-danger, .badge.error, .badge.negative, .badge-negative {
  background: var(--danger-wash); color: #be123c; border-color: rgba(225, 29, 72, .25);
}
.badge.warning, .badge-warning { background: var(--warning-wash); color: #b45309; border-color: rgba(245, 158, 11, .25); }
.badge.info, .badge-info { background: var(--info-wash); color: #0369a1; border-color: rgba(2, 132, 199, .25); }
.badge.neutral, .badge-neutral { background: var(--neutral-wash); color: var(--text-soft); }
.badge.small, .small .badge { font-size: 10.5px; padding: 3px 8px; }

/* ─── Status cards ───────────────────────────────────────────────── */
.status-card, .notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  margin: 10px 0;
  position: relative;
  overflow: hidden;
  animation: fadeSlideDown var(--dur-sm) var(--ease-smooth);
}
.status-card::before, .notice::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 4px;
  background: var(--accent);
}
.status-card--danger {
  background: linear-gradient(135deg, var(--danger-wash), rgba(255, 255, 255, .4));
  border-color: rgba(225, 29, 72, .25);
  color: #9f1239;
}
.status-card--danger::before { background: var(--danger); }
.status-card--success {
  background: linear-gradient(135deg, var(--success-wash), rgba(255, 255, 255, .4));
  border-color: rgba(22, 163, 74, .25);
  color: #14532d;
}
.status-card--success::before { background: var(--success); }
.status-card--warning, .notice.warning {
  background: linear-gradient(135deg, var(--warning-wash), rgba(255, 255, 255, .4));
  border-color: rgba(245, 158, 11, .25);
  color: #92400e;
}
.status-card--warning::before { background: var(--warning); }
.status-card--info {
  background: linear-gradient(135deg, var(--info-wash), rgba(255, 255, 255, .4));
  border-color: rgba(2, 132, 199, .25);
  color: #075985;
}
.status-card--info::before { background: var(--info); }

/* ─── Login page ─────────────────────────────────────────────────── */
body.page-login { background-image: radial-gradient(circle at 50% 0%, rgba(79, 70, 229, .08), transparent 50%), radial-gradient(circle at 80% 100%, rgba(14, 165, 233, .06), transparent 50%), linear-gradient(to bottom, #f7f8fc, #fdfeff); }
body.page-login main.container { margin: 40px auto 60px; }
.login-center {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 220px);
  padding: 20px;
  animation: scaleIn var(--dur-md) var(--ease-spring);
}
.login-panel {
  width: min(480px, 100%);
  padding: 40px 36px 36px;
  background: var(--paper);
  border-radius: var(--r-2xl);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.login-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-4), var(--accent-3));
  background-size: 200% 100%;
  animation: borderFlow 8s ease infinite;
}
.login-panel::after {
  content: '';
  position: absolute;
  top: 5px; right: 0; left: 0;
  height: 180px;
  background: radial-gradient(ellipse at center top, rgba(79, 70, 229, .08), transparent 70%);
  pointer-events: none;
}
.login-panel__header {
  text-align: center;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}
.login-logo-wrap {
  min-width: 132px;
  width: auto;
  height: 96px;
  margin: 0 auto 18px;
  padding: 12px 20px;
  display: grid; place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, #f1f5ff);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 1);
  position: relative;
  animation: floatGentle 5s ease-in-out infinite;
}
.login-logo-wrap::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(79, 70, 229, .2), rgba(14, 165, 233, .15), rgba(236, 72, 153, .18));
  filter: blur(16px);
  opacity: .6;
  z-index: -1;
  animation: pulseSoft 4s ease-in-out infinite;
}
.login-logo { width: auto; height: 60px; max-width: 200px; object-fit: contain; }
.login-panel h2 {
  font-size: 26px; font-weight: 800; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent-deep) 50%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-company-name {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
}
.login-form {
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
}
.login-submit {
  margin-top: 10px;
  width: 100%;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .015em;
}

/* ─── Dashboard — Hero ───────────────────────────────────────────── */
.dashboard-hero {
  position: relative;
  padding: 40px 44px;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, #ffffff 0%, #f5f7ff 50%, #eef4fe 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  animation: fadeSlideUp var(--dur-lg) var(--ease-smooth);
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-4), var(--accent-3), var(--accent));
  background-size: 200% 100%;
  animation: borderFlow 10s ease infinite;
}
.dashboard-hero::after {
  content: '';
  position: absolute;
  top: -100px; right: -150px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(79, 70, 229, .14), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: subtle-float 20s ease-in-out infinite;
}
.dashboard-hero__content { position: relative; z-index: 1; }
.dashboard-hero__aside { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(79, 70, 229, .1);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid rgba(79, 70, 229, .18);
}
.dashboard-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .2);
  animation: pulseSoft 2.2s ease-in-out infinite;
}
.dashboard-hero h1, .dashboard-hero h2 {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent-deep) 55%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.dashboard-lead {
  font-size: 15px;
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 580px;
  font-weight: 500;
}
.dashboard-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.dashboard-chip {
  display: inline-flex;
  align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-xs) var(--ease-spring);
}
.dashboard-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 70, 229, .25);
  color: var(--accent-deep);
  background: var(--accent-wash);
  box-shadow: var(--shadow-sm);
}
.dashboard-highlight {
  background: linear-gradient(135deg, rgba(79, 70, 229, .1), rgba(14, 165, 233, .08));
  color: var(--accent-deep);
  border-color: rgba(79, 70, 229, .2);
  font-weight: 700;
}

/* Health indicator (inside chip) */
.health-indicator, .trend-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700;
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--text-soft);
}
.health-indicator.success, .trend-indicator.positive {
  background: var(--success-wash);
  color: #15803d;
  border-color: rgba(22, 163, 74, .25);
}
.health-indicator.danger, .trend-indicator.negative {
  background: var(--danger-wash);
  color: #be123c;
  border-color: rgba(225, 29, 72, .25);
}
.health-indicator.warning {
  background: var(--warning-wash);
  color: #b45309;
  border-color: rgba(245, 158, 11, .25);
}
.health-indicator.neutral, .trend-indicator.neutral {
  background: var(--neutral-wash);
  color: var(--text-soft);
}
.health-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.health-score { font-weight: 800; font-size: 14px; color: var(--ink); }

/* Insight badges */
.insight-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700;
  background: var(--neutral-wash);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
}
.insight-badge-critical, .insight-critical, .severity-badge-critical, .severity-critical { background: var(--danger-wash); color: #9f1239; border-color: rgba(225, 29, 72, .3); }
.insight-badge-warning, .insight-warning, .severity-badge-warning, .severity-warning { background: var(--warning-wash); color: #92400e; border-color: rgba(245, 158, 11, .3); }
.insight-badge-info, .insight-info, .severity-badge-info, .severity-info { background: var(--info-wash); color: #075985; border-color: rgba(2, 132, 199, .3); }
.insight-badge-success, .insight-success, .severity-badge-success, .severity-success { background: var(--success-wash); color: #14532d; border-color: rgba(22, 163, 74, .3); }

.severity-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  background: var(--neutral-wash);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
}

/* Dashboard spotlight */
.dashboard-spotlight {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-md) var(--ease-smooth);
}
.dashboard-spotlight::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-4));
}
.dashboard-spotlight__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 6px;
}

.dashboard-mini-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.dashboard-mini-card {
  background: linear-gradient(135deg, var(--paper-3), var(--paper));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-sm) var(--ease-smooth);
}
.dashboard-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(79, 70, 229, .2);
}
.dashboard-mini-card strong { font-size: 16px; color: var(--ink); font-weight: 800; }
.dashboard-mini-card small, .dashboard-mini-card .meta { font-size: 11px; color: var(--muted); font-weight: 500; }

/* Dashboard control card */
.dashboard-control-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
  position: relative;
  overflow: hidden;
}
.dashboard-control-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.dashboard-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.dashboard-panel-tag {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 4px 11px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(79, 70, 229, .2);
}
.dashboard-filter-form, .dashboard-limits-form {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.dashboard-filter-actions, .dashboard-limits-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.dashboard-filter-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

/* Dashboard metrics */
.dashboard-metric-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 20px;
}
.dashboard-metric-grid--columns {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.dashboard-metric--span-3 { grid-column: span 3; }
.dashboard-metric--span-4 { grid-column: span 4; }
.dashboard-metric--span-6 { grid-column: span 6; }
.dashboard-metric--span-12 { grid-column: span 12; }
/* للحفاظ على الـsetup القديم إن بقيت بطاقات تستعمل .dashboard-metric--wide في صفحات أخرى */
.dashboard-metric--wide { grid-column: span 6; }
@media (max-width: 900px) {
  .dashboard-metric--span-3 { grid-column: span 6; }
  .dashboard-metric--span-4 { grid-column: span 12; }
  .dashboard-metric--span-6 { grid-column: span 12; }
  .dashboard-metric--span-12 { grid-column: span 12; }
  .dashboard-metric--wide { grid-column: span 12; }
}
@media (max-width: 560px) {
  .dashboard-metric-grid--columns {
    grid-template-columns: 1fr;
  }
  .dashboard-metric--span-3,
  .dashboard-metric--span-4,
  .dashboard-metric--span-6,
  .dashboard-metric--span-12,
  .dashboard-metric--wide { grid-column: span 1; }
}
.dashboard-metric {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-md) var(--ease-smooth), box-shadow var(--dur-md) var(--ease-smooth), border-color var(--dur-md);
  box-shadow: var(--shadow-sm);
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
}
.dashboard-metric::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  opacity: .85;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.dashboard-metric::after {
  content: '';
  position: absolute;
  top: -30px; left: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(79, 70, 229, .08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-md);
}
.dashboard-metric:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, .2);
}
.dashboard-metric:hover::after { opacity: 1; }
.dashboard-metric--sales::before { background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.dashboard-metric--purchases::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-2-soft)); }
.dashboard-metric--expenses::before { background: linear-gradient(90deg, var(--danger), var(--danger-soft)); }
.dashboard-metric--payroll::before { background: linear-gradient(90deg, var(--accent-3), var(--accent-3-soft)); }
.dashboard-metric--net::before { background: linear-gradient(90deg, var(--accent-5), #34d399); }
.dashboard-metric--interactive::before { background: linear-gradient(90deg, var(--accent-4), var(--accent-4-soft)); }
.dashboard-metric--withhold::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dashboard-metric--after-net::before { background: linear-gradient(90deg, #0ea5e9, #34d399); }
.dashboard-metric--sales-net::before { background: linear-gradient(90deg, var(--accent), var(--accent-5)); }
.dashboard-metric--commitments-unpaid::before { background: linear-gradient(90deg, #ef4444, #f97316); }
.dashboard-metric--commitments-unpaid:hover { border-color: rgba(239, 68, 68, .25); }
.dashboard-metric--commitments-paid::before { background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80); }
.dashboard-metric--commitments-paid:hover { border-color: rgba(34, 197, 94, .25); }
.dashboard-metric--commitments-all::before { background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7); }
.dashboard-metric--commitments-all:hover { border-color: rgba(139, 92, 246, .25); }

/* ─── Smart Payroll Card (بطاقة الرواتب الذكية) ─────────────────── */
.smart-payroll-card {
  position: relative;
  background: linear-gradient(135deg, #fff8e1 0%, #fff 60%, #fef3c7 100%);
  overflow: visible !important;
}
.smart-payroll-card::before {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fde68a 100%) !important;
  height: 4px !important;
}
.smart-payroll-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.smart-payroll-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
}
.smart-payroll-card__badge--ok {
  background: rgba(34, 197, 94, .15);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, .35);
}
.smart-payroll-card__badge--warn {
  background: rgba(245, 158, 11, .15);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, .35);
}
.smart-payroll-card__value {
  font-size: 26px !important;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 4px !important;
}
.smart-payroll-card__currency {
  font-size: 14px;
  color: #b45309;
  -webkit-text-fill-color: #b45309;
  margin-inline-start: 4px;
  font-weight: 700;
}
.smart-payroll-card__source {
  font-size: 10.5px;
  color: var(--muted, #94a3b8);
  margin-bottom: 12px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, .08);
  border-radius: 5px;
  border-inline-start: 2px solid #f59e0b;
}
.smart-payroll-card__source a { font-weight: 700; color: #b45309 !important; }

.smart-payroll-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(245, 158, 11, .2);
  border-radius: 8px;
}
.smart-payroll-card__stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.smart-payroll-card__stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #92400e;
  line-height: 1;
}
.smart-payroll-card__stat-lbl {
  font-size: 9.5px;
  color: var(--muted, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.smart-payroll-card__breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.smart-payroll-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, .2);
}
.smart-payroll-card__row:last-child { border-bottom: none; }
.smart-payroll-card__row span { color: var(--text-soft, #475569); }
.smart-payroll-card__row b { color: #0f172a; font-weight: 700; font-variant-numeric: tabular-nums; }
.smart-payroll-card__hint { font-size: 10px; color: var(--muted, #94a3b8); font-weight: 400; }

.smart-payroll-card__notice {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(14, 165, 233, .08);
  border-inline-start: 3px solid #0ea5e9;
  border-radius: 5px;
  font-size: 10.5px;
  color: #0c4a6e;
  line-height: 1.5;
}
.smart-payroll-card__notice b { color: #075985; font-weight: 800; }

/* تخطيط أفقي للبطاقات بعرض كامل (span-12) — يوزّع المعلومات على الصف بدل التكدّس عمودياً */
.dashboard-metric--span-12 {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1.4fr);
  align-items: center;
  gap: 18px 24px;
  padding: 24px 26px;
}
.dashboard-metric--span-12 .dashboard-metric__label { margin-bottom: 0; }
.dashboard-metric--span-12 .dashboard-metric__value { margin-bottom: 0; font-size: 32px; }
.dashboard-metric--span-12 .dashboard-metric__meta { margin-top: 0; }
.dashboard-metric--span-12 .dashboard-metric__highlight {
  margin-top: 0;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.dashboard-metric--span-12 .dashboard-metric__label { grid-column: 1; grid-row: 1; }
.dashboard-metric--span-12 .dashboard-metric__value { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dashboard-metric--span-12 .dashboard-metric__meta { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
  .dashboard-metric--span-12 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-metric--span-12 .dashboard-metric__label,
  .dashboard-metric--span-12 .dashboard-metric__value,
  .dashboard-metric--span-12 .dashboard-metric__meta,
  .dashboard-metric--span-12 .dashboard-metric__highlight { grid-column: 1; grid-row: auto; align-self: auto; }
  .dashboard-metric--span-12 .dashboard-metric__highlight { display: block; }
}
.dashboard-metric--sales:hover { border-color: rgba(79, 70, 229, .25); }
.dashboard-metric--purchases:hover { border-color: rgba(14, 165, 233, .25); }
.dashboard-metric--expenses:hover { border-color: rgba(225, 29, 72, .25); }
.dashboard-metric--payroll:hover { border-color: rgba(245, 158, 11, .25); }
.dashboard-metric--net:hover { border-color: rgba(16, 185, 129, .25); }
.dashboard-metric--interactive:hover { border-color: rgba(236, 72, 153, .25); }
.dashboard-metric--withhold:hover { border-color: rgba(245, 158, 11, .25); }
.dashboard-metric--after-net:hover { border-color: rgba(16, 185, 129, .25); }
.dashboard-metric--sales-net:hover { border-color: rgba(79, 70, 229, .25); }

.dashboard-metric__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.dashboard-metric__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  font-family: 'Cairo', sans-serif;
  line-height: 1.1;
  margin-bottom: 8px;
}
.dashboard-metric__meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 11.5px; color: var(--muted); font-weight: 500;
  margin-top: 8px;
}
.dashboard-metric__highlight {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--paper-3);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.dashboard-secondary-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 22px;
}
.dashboard-chart-card, .dashboard-ai-card, .dashboard-table-card, .dashboard-net-card, .dashboard-settings-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
}
.dashboard-chart-card::before, .dashboard-ai-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* AI insights card */
.ai-insights-card, .insights-card, .invoice-insights-card {
  background: linear-gradient(135deg, var(--paper) 0%, rgba(79, 70, 229, .025) 50%, rgba(14, 165, 233, .02) 100%);
  border: 1px solid rgba(79, 70, 229, .15);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.ai-insights-card::before, .insights-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-4));
  background-size: 200% 100%;
  animation: borderFlow 8s ease infinite;
}
.ai-insights-list, .invoice-insights-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.insight-item, .invoice-insights__item {
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column; gap: 6px;
  transition: all var(--dur-sm) var(--ease-smooth);
}
.insight-item:hover, .invoice-insights__item:hover {
  transform: translateX(-3px);
  border-color: rgba(79, 70, 229, .25);
  box-shadow: var(--shadow-xs);
}
.insight-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; gap: 10px;
  font-weight: 700;
  color: var(--ink);
  font-size: 13.5px;
}
.insight-metrics {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

/* Chart shell */
.chart-shell {
  position: relative;
  height: 340px;
  margin-top: 12px;
  padding: 14px;
  background: var(--paper-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-2);
}
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.legend-item {
  display: inline-flex;
  align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-soft);
}
.legend-item::before {
  content: ''; width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* Net summary card */
.net-summary-card {
  background: linear-gradient(135deg, var(--paper), rgba(16, 185, 129, .03));
  border: 1px solid rgba(16, 185, 129, .18);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.net-summary-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-5), var(--accent-2));
}
.net-summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
}
.net-summary-formula {
  font-size: 13px;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.6;
}
.net-summary-values {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); font-weight: 500;
}
.net-summary-result {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--accent-5);
  font-family: 'Cairo', sans-serif;
  background: linear-gradient(135deg, var(--accent-5), #059669);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ─── Tables ─────────────────────────────────────────────────────── */
.table, table.table, table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--hairline);
}
.table th, table th {
  background: linear-gradient(180deg, var(--paper-3), var(--paper));
  padding: 12px 14px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-soft);
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  letter-spacing: -.005em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table td, table td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--hairline-2);
  font-weight: 500;
  vertical-align: middle;
}
.table tbody tr, table tbody tr {
  transition: background var(--dur-xs) var(--ease-swift);
}
.table tbody tr:hover, table tbody tr:hover { background: var(--accent-wash); }
.table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }

.table-striped tbody tr:nth-child(even), table.table-striped tbody tr:nth-child(even) { background: var(--paper-2); }
.table-striped tbody tr:nth-child(even):hover { background: var(--accent-wash); }

.table-balanced td, .table-balanced th { padding: 10px 12px; font-size: 12.5px; }
.table-compact td, .table-compact th { padding: 7px 10px; font-size: 12px; }
.table-slim td, .table-slim th { padding: 6px 9px; font-size: 11.5px; }

.table-responsive, .table-scroll, .scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-xs);
  max-width: 100%;
}
.table-responsive::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { height: 6px; }
.overflow-auto { overflow: auto; }

.table-summary, .report-summary-table { background: linear-gradient(180deg, var(--paper-3), var(--paper)); }
.table-summary th, .report-summary-table th { background: linear-gradient(180deg, var(--accent-wash), var(--paper-3)); color: var(--accent-deep); }
.report-summary-wrapper { margin-top: 18px; }

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper-3);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  border: 1px solid var(--hairline);
}
.table-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.table-actions-form, .actions-form { display: inline-flex; }
.actions-cell { white-space: nowrap; }
.actions-cell-inner { display: inline-flex; gap: 4px; align-items: center; }
.table-edit-row td, .table-nested td { background: linear-gradient(180deg, rgba(79, 70, 229, .04), transparent); }
.table-meta { font-size: 11px; color: var(--muted); font-weight: 500; padding: 8px 14px; }
.totals-box {
  margin-top: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--accent-wash), rgba(14, 165, 233, .04));
  border: 1px solid rgba(79, 70, 229, .18);
  border-radius: var(--r-md);
  display: flex; gap: 20px; flex-wrap: wrap;
  font-weight: 700; color: var(--accent-deep);
}

/* ─── Pager ──────────────────────────────────────────────────────── */
.pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 18px 0;
  flex-wrap: wrap;
}
.pager a, .pager span {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--text-soft);
  font-weight: 600; font-size: 12.5px;
  transition: all var(--dur-xs) var(--ease-swift);
}
.pager a:hover {
  background: var(--accent-wash);
  border-color: rgba(79, 70, 229, .25);
  color: var(--accent-deep);
  transform: translateY(-1px);
}
.pager .active, .pager span.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm), 0 4px 10px -2px rgba(79, 70, 229, .3);
}

/* ─── KPI Cards ──────────────────────────────────────────────────── */
.kpi-card, .stat-card, .ir-metric-card, .ir-summary-card, .treasury-summary-card, .invoice-metric, .anomaly-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-sm) var(--ease-smooth);
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth) backwards;
}
.kpi-card::before, .stat-card::before, .ir-metric-card::before, .treasury-summary-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: .85;
}
.kpi-card:hover, .stat-card:hover, .ir-metric-card:hover, .treasury-summary-card:hover, .anomaly-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(79, 70, 229, .2);
}
.kpi-label, .stat-label, .invoice-metric__label, .treasury-summary-label, .anomaly-meta, .sales-payment-breakdown__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kpi-value, .stat-val, .invoice-metric__value, .treasury-summary-value, .anomaly-primary, .sales-payment-breakdown__value {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  font-family: 'Cairo', sans-serif;
  line-height: 1.2;
}
.kpi-note, .invoice-metric__hint, .anomaly-average {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 500;
}
.kpi-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.kpi-entry { padding: 14px; background: var(--paper-3); border-radius: var(--r-md); border: 1px solid var(--hairline); }
.kpi-hidden { display: none !important; }
.kpi-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.metrics-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 14px 0 18px;
}
.metrics-focus-card { display: grid; gap: 14px; align-content: start; }
.metrics-focus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.metrics-focus-head h2 { margin: 0; font-size: 18px; }
.metrics-focus-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.metrics-focus-card--sales::before { background: linear-gradient(90deg, var(--accent), var(--accent-5)); }
.metrics-focus-card--activity::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-3)); }
.metrics-focus-card--quality::before { background: linear-gradient(90deg, var(--success), var(--accent-5)); }
.kpi-customization, .kpi-customization-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 14px 0; }
.kpi-toggle-grid, .kpi-toggle-panel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 10px; }
.kpi-target-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.toggle-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-xs);
}
.toggle-item:hover { background: var(--accent-wash); border-color: rgba(79, 70, 229, .2); }

/* Tone variants for cards */
.tone-success, .tone-positive { background: linear-gradient(135deg, var(--paper), var(--success-wash)); border-color: rgba(22, 163, 74, .22); }
.tone-success::before, .tone-positive::before { background: linear-gradient(90deg, var(--success), var(--accent-5)); }
.tone-danger, .tone-negative { background: linear-gradient(135deg, var(--paper), var(--danger-wash)); border-color: rgba(225, 29, 72, .22); }
.tone-danger::before, .tone-negative::before { background: linear-gradient(90deg, var(--danger), var(--accent-4)); }
.tone-warning { background: linear-gradient(135deg, var(--paper), var(--warning-wash)); border-color: rgba(245, 158, 11, .22); }
.tone-warning::before { background: linear-gradient(90deg, var(--warning), var(--accent-3)); }
.tone-info, .tone-primary { background: linear-gradient(135deg, var(--paper), var(--accent-wash)); border-color: rgba(79, 70, 229, .22); }
.tone-info::before, .tone-primary::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tone-neutral { background: linear-gradient(135deg, var(--paper), var(--neutral-wash)); border-color: var(--hairline); }

/* ─── Anomaly ────────────────────────────────────────────────────── */
.anomaly-group {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}
.anomaly-group-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--hairline);
}
.anomaly-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.anomaly-item {
  padding: 12px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}

/* ─── Invoice ────────────────────────────────────────────────────── */
.invoice-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 22px;
  background: linear-gradient(135deg, var(--paper), var(--paper-3));
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.invoice-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
}
.invoice-company { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.015em; }
.invoice-due {
  background: var(--paper);
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.invoice-due__label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.invoice-due__date { font-size: 15px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.invoice-due__status { font-size: 11px; font-weight: 700; margin-top: 3px; color: var(--accent); }
.invoice-select { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.invoice-copy-feedback {
  padding: 10px 14px;
  background: var(--success-wash);
  border: 1px solid rgba(22, 163, 74, .25);
  border-radius: var(--r-md);
  color: #14532d;
  font-size: 12.5px;
  font-weight: 600;
  animation: fadeSlideDown var(--dur-sm) var(--ease-smooth);
}

/* ─── Invoice Document ───────────────────────────────────────────── */
.invoice-document {
  --inv-red: #D21F2A;
  --inv-ink: #141414;
  --inv-mute: #6A6A6A;
  --inv-rule: #E7E7E7;
  --inv-paid: #1B7A3A;
  --inv-display: 'Barlow Condensed', 'Cairo', sans-serif;
  --inv-accent: var(--inv-red);
  --inv-gutter: 32px;
  padding: 0 !important;
  border: 1px solid var(--inv-rule);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 20, 20, .07);
  background: #fff;
  position: relative;
}
.invoice-document--paid { --inv-accent: var(--inv-red); }
.invoice-document::before,
.invoice-document::after,
.card.invoice-document::before {
  content: none !important;
  display: none !important;
}
.card.invoice-document:hover {
  transform: none;
  box-shadow: 0 12px 32px rgba(20, 20, 20, .07);
  border-color: var(--inv-rule);
}
.invoice-doc-film,
.invoice-doc-stub,
.invoice-doc-watermark,
.invoice-doc-hero,
.invoice-doc-tag,
.invoice-doc-tag-wrap,
.invoice-doc-tag__ring { display: none !important; }
.invoice-return-banner {
  margin: 16px 28px 0;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #F3D7A3;
  border-radius: 0;
  color: #8A5A12;
  font-size: 13px;
  font-weight: 600;
}
.invoice-return-banner a { color: #8A5A12; text-decoration: underline; }

.invoice-doc-header {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  gap: 16px 20px;
  align-items: center;
  padding: 22px var(--inv-gutter) 18px;
  background: #fff;
  border-bottom: 2px solid var(--inv-red);
  position: relative;
  z-index: 1;
}
.invoice-doc-header::before { content: none; display: none; }
.invoice-doc-brand,
.invoice-doc-partner {
  display: flex;
  align-items: center;
  width: auto;
  height: 64px;
  min-width: 0;
  min-height: 64px;
}
.invoice-doc-brand { justify-content: flex-start; }
.invoice-doc-partner { justify-content: flex-end; justify-self: end; }
.invoice-doc-logo,
.invoice-doc-partner-logo {
  width: auto;
  height: 58px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  background: transparent;
  image-rendering: auto;
}
.invoice-doc-logo { max-width: 200px; }
.invoice-doc-partner-logo { max-width: 92px; }
.invoice-doc-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.invoice-doc-kind {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--inv-mute);
}
.invoice-doc-id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.invoice-doc-id__no {
  font-family: var(--inv-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--inv-red);
  letter-spacing: .02em;
  line-height: 1;
}
.invoice-doc-stamp {
  width: 78px;
  height: 78px;
  margin: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: rotate(-10deg);
  color: var(--inv-red);
  background: rgba(255,255,255,.88);
  z-index: 5;
  position: relative;
  flex-shrink: 0;
}
.invoice-doc-stamp__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.invoice-doc-stamp__text {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 58px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.invoice-doc-stamp--unpaid  { color: var(--inv-red); }
.invoice-doc-stamp--partial { color: #A15C10; }
.invoice-doc-stamp--return  { color: #5B4B8A; }
.invoice-doc-stamp--paid {
  color: var(--inv-paid);
  background: rgba(255,255,255,.78);
  border-radius: 50%;
  box-shadow: none;
  transform: rotate(-18deg);
}
.invoice-doc-eyebrow,
.invoice-doc-title,
.invoice-doc-meta,
.invoice-doc-no,
.invoice-doc-no__label,
.invoice-doc-no__value,
.invoice-doc-status,
.invoice-doc-status__dot { display: none; }

.invoice-doc-parties,
.invoice-doc-items,
.invoice-doc-summary-wrap,
.invoice-doc-footer,
.invoice-doc-edit-customer { position: relative; z-index: 1; }
.invoice-doc-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 18px var(--inv-gutter) 14px;
  background: #fff;
  border-bottom: 1px solid var(--inv-rule);
  align-items: start;
}
.invoice-doc-party {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-height: 0;
}
.invoice-doc-party + .invoice-doc-party {
  padding-inline-start: 32px;
  border-inline-start: 1px solid var(--inv-rule);
  margin-inline-start: 0;
}
.invoice-doc-party__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--inv-mute);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
  padding-bottom: 0;
  border-bottom: 0;
  min-height: 16px;
}
.invoice-doc-party__name,
.invoice-doc-party__no {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  min-height: 28px;
  margin: 0 0 12px;
}
.invoice-doc-party__name {
  color: var(--inv-ink);
  text-wrap: balance;
}
.invoice-doc-party__no {
  font-family: var(--inv-display);
  color: var(--inv-red);
  letter-spacing: .02em;
}
.invoice-doc-party__line,
.invoice-doc-party__row {
  display: grid;
  grid-template-columns: 7.8rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  padding: 5px 0;
  border-bottom: 0;
}
.invoice-doc-party__line:last-child,
.invoice-doc-party__row:last-child { border-bottom: none; }
.invoice-doc-party__line span,
.invoice-doc-party__row span { color: var(--inv-mute); font-weight: 500; }
.invoice-doc-party__line b,
.invoice-doc-party__row b {
  color: var(--inv-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
  justify-self: end;
}

.invoice-doc-edit-customer {
  margin: 16px var(--inv-gutter);
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-top: 1px dashed var(--inv-rule);
  border-radius: 0;
}
.invoice-doc-edit-customer__hint {
  font-size: 12px;
  color: var(--inv-mute);
  margin-bottom: 10px;
}
.invoice-doc-edit-customer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.invoice-doc-edit-customer__btn { text-align: end; }

.invoice-doc-items { padding: 16px var(--inv-gutter) 0; }
.invoice-doc-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--inv-mute);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
  display: block;
  padding-inline-end: 0;
}
.invoice-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.invoice-doc-table thead th {
  background: transparent;
  color: var(--inv-mute);
  padding: 0 8px 8px;
  font-weight: 700;
  font-size: 12px;
  text-align: start;
  letter-spacing: 0;
  border-bottom: 1px solid var(--inv-ink);
}
.invoice-doc-table thead th:first-child { border-start-start-radius: 0; padding-inline-start: 0; }
.invoice-doc-table thead th:last-child  { border-start-end-radius: 0; padding-inline-end: 0; }
.invoice-doc-table tbody td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--inv-rule);
  vertical-align: middle;
  background: transparent;
}
.invoice-doc-table tbody td:first-child { padding-inline-start: 0; }
.invoice-doc-table tbody td:last-child { padding-inline-end: 0; }
.invoice-doc-table tbody tr:nth-child(even) td { background: transparent; }
.invoice-doc-table tbody tr:last-child td { border-bottom-color: var(--inv-ink); }
.invoice-doc-table__seq { width: 40px; text-align: center; }
.invoice-doc-table thead .invoice-doc-table__seq { color: var(--inv-mute); font-weight: 700; }
.invoice-doc-table tbody td.invoice-doc-table__seq {
  color: inherit;
  font-weight: 800;
  font-size: 12px;
  background: none;
}
.invoice-doc-table tbody td.invoice-doc-table__seq::before { content: none; }
.invoice-doc-table tbody td.invoice-doc-table__seq span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--inv-red);
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}
.invoice-doc-table__desc { font-weight: 700; color: var(--inv-ink); }
.invoice-doc-table__qty,
.invoice-doc-table__unit,
.invoice-doc-table__total { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-doc-table__total { font-weight: 800; color: var(--inv-ink); }

.invoice-doc-summary-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 16px var(--inv-gutter) 6px;
  align-items: start;
}
.invoice-doc-payment-info {
  font-size: 13.5px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.invoice-doc-payment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 0;
}
.invoice-doc-payment-row:last-of-type { border-bottom: none; }
.invoice-doc-payment-row span { color: var(--inv-mute); }
.invoice-doc-payment-row b { color: var(--inv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.invoice-doc-payment-row--balance { padding-top: 10px; border-top: 1px solid var(--inv-rule); }
.invoice-doc-payment-row--balance b { color: var(--inv-red); font-size: 15px; }
.invoice-document--paid .invoice-doc-payment-row--balance b { color: var(--inv-paid); }
.invoice-doc-payment-bank {
  margin-top: 14px;
  padding: 10px 0 0;
  background: transparent;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--inv-rule);
  border-inline-start: 0;
}
.invoice-doc-payment-bank__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--inv-mute);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.invoice-doc-payment-bank__line {
  font-size: 13px;
  color: var(--inv-ink);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.invoice-doc-totals {
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  align-self: start;
  padding-inline-start: 32px;
  border-inline-start: 1px solid var(--inv-rule);
}
.invoice-doc-totals__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13.5px;
  border-bottom: 0;
}
.invoice-doc-totals__row:last-child { border-bottom: none; }
.invoice-doc-totals__row span { color: var(--inv-mute); font-weight: 500; }
.invoice-doc-totals__row b { color: var(--inv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.invoice-doc-totals__row--grand {
  background: transparent;
  padding: 12px 0 0;
  margin-top: 6px;
  box-shadow: none;
  border-top: 2px solid var(--inv-red);
  align-items: center;
}
.invoice-doc-totals__row--grand span { color: var(--inv-ink); font-weight: 700; font-size: 13px; }
.invoice-doc-totals__row--grand b {
  font-family: var(--inv-display);
  color: var(--inv-red);
  font-size: 34px;
  letter-spacing: .01em;
  line-height: 1;
}

.invoice-doc-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 16px var(--inv-gutter) 22px;
  border-top: 1px solid var(--inv-rule);
  background: #fff;
  align-items: center;
}
.invoice-doc-footer__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.invoice-doc-footer__qr-img { width: 88px; height: 88px; display: block; }
.invoice-doc-footer__qr-label {
  font-size: 10.5px;
  color: var(--inv-mute);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  max-width: 110px;
}
.invoice-doc-footer__notes { padding-top: 2px; }
.invoice-doc-footer__thanks {
  font-size: 15px;
  font-weight: 800;
  color: var(--inv-ink);
  margin-bottom: 6px;
}
.invoice-doc-footer__contact {
  font-size: 12.5px;
  color: var(--inv-mute);
  margin-bottom: 8px;
  font-weight: 600;
}
.invoice-doc-footer__terms ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--inv-mute);
  line-height: 1.75;
}
.invoice-doc-footer__terms li { padding-inline-start: 0; }

@media (max-width: 720px) {
  .invoice-document { padding: 0 !important; }
  .invoice-doc-header {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    padding: 18px 16px 16px;
  }
  .invoice-doc-identity { grid-column: 1 / -1; }
  .invoice-doc-brand, .invoice-doc-partner { width: auto; min-width: 0; height: 54px; min-height: 54px; }
  .invoice-doc-logo { width: auto; height: 50px; max-width: 180px; }
  .invoice-doc-partner-logo { width: auto; height: 50px; max-width: 84px; }
  .invoice-doc-id__no { font-size: 26px; }
  .invoice-doc-stamp { width: 68px; height: 68px; }
  .invoice-doc-parties { grid-template-columns: 1fr; padding: 16px 18px 6px; }
  .invoice-doc-party { padding: 0 0 14px; }
  .invoice-doc-party + .invoice-doc-party {
    padding-inline-start: 0;
    margin-inline-start: 0;
    border-inline-start: 0;
    border-top: 1px solid var(--inv-rule);
    padding-top: 14px;
  }
  .invoice-doc-party__name { font-size: 22px; }
  .invoice-doc-items, .invoice-doc-edit-customer { padding-inline: 18px; margin-inline: 0; }
  .invoice-doc-summary-wrap { grid-template-columns: 1fr; padding: 16px 18px 8px; gap: 18px; }
  .invoice-doc-totals { padding-inline-start: 0; border-inline-start: 0; padding-top: 14px; border-top: 1px solid var(--inv-rule); }
  .invoice-doc-totals__row--grand b { font-size: 28px; }
  .invoice-doc-footer { grid-template-columns: 1fr; padding: 16px 18px 20px; }
  .invoice-doc-footer__qr { align-self: center; }
}

.invoice-insights, .invoice-insights-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.invoice-intel {
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.invoice-intel__summary { color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.invoice-intel__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.invoice-intel__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.invoice-progress {
  margin: 12px 0;
}
.invoice-progress__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.invoice-progress__bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--hairline-2);
}
.invoice-progress__value {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, .12);
  animation: fadeSlideUp var(--dur-md) var(--ease-smooth);
}
.invoice-progress__hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.invoice-status-badge {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  background: var(--neutral-wash);
  color: var(--text-soft);
  border: 1px solid var(--hairline);
}
.invoice-status-badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
  animation: pulseSoft 2s ease-in-out infinite;
}
.invoice-status-badge--paid, .invoice-status-badge--success { background: var(--success-wash); color: #15803d; border-color: rgba(22, 163, 74, .3); }
.invoice-status-badge--pending, .invoice-status-badge--warning { background: var(--warning-wash); color: #b45309; border-color: rgba(245, 158, 11, .3); }
.invoice-status-badge--overdue, .invoice-status-badge--danger { background: var(--danger-wash); color: #be123c; border-color: rgba(225, 29, 72, .3); }
.invoice-status-badge--draft, .invoice-status-badge--neutral { background: var(--neutral-wash); color: var(--text-soft); }
.invoice-status-description { font-size: 12.5px; color: var(--text-soft); margin: 8px 0; }

.invoice-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-right: 22px; }
.invoice-timeline::before {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px;
  right: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2), var(--hairline));
}
.invoice-timeline__item {
  position: relative;
  padding: 10px 0 14px;
}
.invoice-timeline__item::before {
  content: '';
  position: absolute;
  right: -20px; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
  transition: all var(--dur-sm) var(--ease-spring);
}
.invoice-timeline__item--completed::before { background: var(--accent); }
.invoice-timeline__item--pending::before { border-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
.invoice-timeline__item--overdue::before { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); }
.invoice-timeline__title { font-weight: 700; color: var(--ink); font-size: 13px; }
.invoice-timeline__value { color: var(--muted); font-size: 11.5px; margin-top: 2px; font-weight: 500; }

.invoice-print-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.invoice-print-summary__item {
  padding: 10px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.invoice-print-summary__label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.invoice-ai { background: linear-gradient(135deg, var(--paper), var(--accent-wash)); border: 1px solid rgba(79, 70, 229, .18); border-radius: var(--r-lg); padding: 14px 18px; margin: 12px 0; }

/* ─── Sales payment breakdown ────────────────────────────────────── */
.sales-payment-breakdown {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-top: 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.sales-payment-breakdown::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.sales-payment-breakdown__head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--hairline);
}
.sales-payment-breakdown__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sales-payment-breakdown__item {
  padding: 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
  transition: all var(--dur-sm);
}
.sales-payment-breakdown__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-xs); border-color: rgba(79, 70, 229, .2); }
.sales-payment-breakdown__meta { font-size: 11px; color: var(--muted); }
.sales-payment-breakdown__tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-wash);
  color: var(--accent-deep);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.sales-payment-breakdown__summary { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--text-soft); font-weight: 600; }

/* ─── Amount breakdown ──────────────────────────────────────────── */
.amount-breakdown { display: grid; gap: 10px; padding: 14px; background: var(--paper-3); border-radius: var(--r-md); border: 1px solid var(--hairline); margin: 12px 0; }
.amount-breakdown__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--text-soft); padding-bottom: 8px; border-bottom: 1px dashed var(--hairline-2); }
.amount-breakdown__row:last-child { border-bottom: 0; padding-bottom: 0; }
.amount-breakdown__label { color: var(--muted); font-weight: 600; }
.amount-breakdown__value { color: var(--ink); font-weight: 800; font-family: 'Cairo', sans-serif; }
.amounts-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-weight: 700; font-size: 13px; }

/* ─── Filter form ────────────────────────────────────────────────── */
.sales-filter-form, .treasury-report-filter, .ar-payment-form, .ir-range-form, .ir-form-grid, .inventory-manage-form, .photo-capture-controls {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  padding: 16px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.sales-filter-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--accent-wash); color: var(--accent-deep); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; border: 1px solid rgba(79, 70, 229, .2); }

/* ─── AR (Accounts Receivable) ─────────────────────────────────── */
.ar-customer-cell, .customer-cell { font-weight: 700; color: var(--ink); }
.plate-cell { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 700; letter-spacing: .02em; }
.ar-customer-header, .customer-header { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ar-phone-cell, .contact-value { font-family: 'Alexandria', monospace; direction: ltr; text-align: right; font-weight: 600; }
.ar-phone-header { font-size: 12px; color: var(--muted); }
.ar-date { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ar-due { font-size: 13.5px; font-weight: 800; color: var(--danger); font-family: 'Cairo', sans-serif; }
.ar-money { font-weight: 700; color: var(--ink); font-family: 'Cairo', sans-serif; }
.ar-actions, .commitment-actions, .investment-actions, .interactive-profit-actions, .treasury-actions, .ir-actions, .ir-table-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ar-summary-row { background: linear-gradient(180deg, var(--accent-wash), var(--paper-3)); font-weight: 700; color: var(--accent-deep); }
.ar-summary-row td { border-top: 1px solid rgba(79, 70, 229, .2); }
.ar-details-row td { background: var(--paper-3); padding: 14px; border-top: 1px dashed var(--hairline); }
.ar-payment-form { grid-column: 1 / -1; }

/* ─── Warranty ───────────────────────────────────────────────────── */
.warranty-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.warranty-stat-item, .commitments-summary__count {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-sm);
}
.warranty-stat-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-4));
}
.warranty-stat-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.warranty-stat-label { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.warranty-stat-value { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.015em; font-family: 'Cairo', sans-serif; }

.warranty-search-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.warranty-search-bar input { flex: 1; min-width: 200px; }

.warranty-desktop-table { display: block; }
.warranty-mobile-cards { display: none; }
@media (max-width: 860px) {
  .warranty-desktop-table { display: none; }
  .warranty-mobile-cards { display: grid; gap: 12px; }
}

.warranty-form-mobile { background: var(--paper-3); padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--hairline); margin-bottom: 14px; }

.w-card-item {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-sm);
}
.w-card-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.w-card-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent-4));
}
.w-card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--hairline); }
.w-card-body { display: grid; gap: 8px; }
.w-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.w-card-field { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.w-card-label { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.w-card-value { color: var(--ink); font-weight: 700; }
.w-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.w-card-seq { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.w-card-cert { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--accent-3-wash); color: #b45309; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; border: 1px solid rgba(245, 158, 11, .25); }
.w-card-qr { max-width: 80px; }
.cert-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--success-wash); color: #15803d; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; border: 1px solid rgba(22, 163, 74, .25); }

.warranty-table { width: 100%; }
.warranty-seq, .warranty-seq-num { font-weight: 800; color: var(--accent); font-family: 'Cairo', sans-serif; }
.warranty-id { font-family: 'Alexandria', monospace; direction: ltr; font-weight: 600; font-size: 11.5px; }
.warranty-date { font-size: 11.5px; color: var(--muted); }
.warranty-plate { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--accent-3-wash); border: 1px solid rgba(245, 158, 11, .25); border-radius: var(--r-sm); font-weight: 800; color: #b45309; font-family: 'Alexandria', monospace; direction: ltr; }
.warranty-remaining { font-weight: 800; font-family: 'Cairo', sans-serif; }
.warranty-service { color: var(--text-soft); font-size: 12.5px; font-weight: 600; }
.warranty-visits { font-size: 11.5px; color: var(--muted); }
.warranty-link { color: var(--accent); font-weight: 600; }
.warranty-qr { width: 70px; height: 70px; border: 1px solid var(--hairline); border-radius: 8px; padding: 4px; background: #fff; }

/* ─── Treasury ───────────────────────────────────────────────────── */
.treasury-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }
.treasury-report-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.treasury-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.treasury-deposit-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding: 14px; background: var(--paper-3); border: 1px solid var(--hairline); border-radius: var(--r-md); margin-bottom: 14px; }
.treasury-edit-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 12px; background: var(--paper-3); border-radius: var(--r-md); }
.treasury-deposit-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
}
.treasury-deposit-status.yes { background: var(--success-wash); color: #15803d; border: 1px solid rgba(22, 163, 74, .25); }
.treasury-deposit-status.no { background: var(--warning-wash); color: #b45309; border: 1px solid rgba(245, 158, 11, .25); }
.treasury-diff { font-weight: 800; font-family: 'Cairo', sans-serif; }
.treasury-diff.positive { color: var(--success); }
.treasury-diff.negative { color: var(--danger); }

/* ─── Commitments (financial commitments) ────────────────────────── */
/* ★ إصلاح: القواعد القديمة كانت تفرض display:grid على عناصر أصبحت الآن جداول حقيقية:
   • ‎.commitments-input-table‎ صار وسم <table> — فرض الشبكة عليه كان يُحوّل <thead>/<tbody>
     إلى خانتين متجاورتين فتختفي خلايا الإدخال في نموذج "إضافة التزام مالي".
   • ‎.commitments-summary‎ صار <tr> داخل <tfoot> — لذلك أُزيلت قاعدة الشبكة عنه.
   التنسيق الحالي يعتمد على تخطيط الجدول الطبيعي + شبكة الحقول أدناه. ★ */
.commitments-table { width: 100%; }
.commitment-row { transition: background var(--dur-xs); }
.commitment-row.editing { background: var(--accent-wash); }
.commitment-actions__edit, .investment-actions__edit { color: var(--accent-2); }
.commitment-actions__view, .investment-actions__view { color: var(--accent); }
.commitments-empty {
  padding: 40px 22px;
  text-align: center;
  background: linear-gradient(135deg, var(--paper), var(--paper-3));
  border: 2px dashed var(--hairline);
  border-radius: var(--r-xl);
  color: var(--muted);
  font-weight: 600;
}
.commitment-editor { background: var(--paper-3); padding: 12px; border-radius: var(--r-md); display: grid; gap: 10px; }

/* نموذج "إضافة التزام مالي" — شبكة حقول متجاوبة بعناوين ظاهرة.
   كان النموذج سابقاً جدولاً بثمانية أعمدة داخل حاوية تمرير أفقي، فكانت خلايا
   الإدخال تخرج خارج الشاشة على الجوال ولا تظهر إطلاقاً. */
.form-commitment { display: block; }
.commitment-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: start;
  padding: 16px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.commitment-fields .field { margin-bottom: 0; }
.commitment-fields .input { width: 100%; }
.commitment-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
@media (min-width: 720px) {
  .commitment-field--wide { grid-column: span 2; }
}

/* ─── Investment / Interactive Profit ───────────────────────────── */
.investment-table, .interactive-profit-table, .ir-table, .ir-kpi-table { width: 100%; }
.investment-bulk-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; background: var(--accent-wash); border: 1px solid rgba(79, 70, 229, .2); border-radius: var(--r-md); margin-bottom: 12px; }
.investment-editor { background: var(--paper-3); padding: 12px; border-radius: var(--r-md); }
.investment-row.editing { background: var(--accent-wash); }
.form-investment { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.investment-select { width: 18px; height: 18px; }
.interactive-profit-summary { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 14px; }
.interactive-profit-custom { background: var(--paper-3); border: 1px dashed var(--hairline); border-radius: var(--r-md); padding: 14px; margin-top: 12px; }
.interactive-profit-empty { padding: 30px 20px; text-align: center; color: var(--muted); background: var(--paper-3); border: 2px dashed var(--hairline); border-radius: var(--r-lg); }

/* ─── IR / Investment Recovery ──────────────────────────────────── */
.ir-section { margin-bottom: 20px; }
.ir-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 14px; }
.ir-metrics { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; }
.ir-summary { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 14px; background: linear-gradient(135deg, var(--accent-wash), var(--paper-3)); border: 1px solid rgba(79, 70, 229, .2); border-radius: var(--r-md); margin-bottom: 14px; }
.ir-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  background: var(--warning-wash);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: var(--r-md);
  color: #92400e;
  font-size: 12.5px; font-weight: 600;
  margin-bottom: 12px;
}

/* ─── Inventory / Stock / Purchases etc ─────────────────────────── */
.inventory-category-breakdown { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 12px 0; }
.inventory-summary { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 14px; }
.inventory-item-edit-row td, .stock-log-edit-row td, .adjustment-edit-row td, .manual-value-edit-row td { background: var(--accent-wash); padding: 14px; }
.search-select { min-width: 200px; }
.form-import { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }

/* ─── Bulk / Cleanup / Selection ────────────────────────────────── */
.bulk-select, .select-cell, .select-cell-header { width: 36px; text-align: center; }
.bulk-delete-form { display: inline-flex; gap: 8px; }
.cleanup-filter, .cleanup-filter-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px; background: var(--paper-3); border-radius: var(--r-md); border: 1px solid var(--hairline); margin-bottom: 12px; }
.cleanup-select, .cleanup-select-all { min-width: 160px; }
.cleanup-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.compact-col { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ─── Photo capture ──────────────────────────────────────────────── */
.photo-capture { padding: 16px; background: var(--paper-3); border: 1px dashed var(--hairline); border-radius: var(--r-lg); }
.photo-capture-controls { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: transparent; border: 0; padding: 0; }
.photo-capture-count { font-weight: 700; color: var(--accent-deep); }
.photo-capture-list, .photo-grid, .inspection-photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 12px; }
.photo-capture-video { width: 100%; max-height: 400px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: #000; }
.photo-capture-remove {
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(225, 29, 72, .9);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}

.inspection-photo {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
  aspect-ratio: 4/3;
}
.inspection-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Inspection / Vehicle ───────────────────────────────────────── */
.inspection-form { display: grid; gap: 14px; }
.inspection-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.inspection-section {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 14px;
}
.inspection-checklist, .inspection-detail-checklist, .checklist { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.inspection-checklist-item, .inspection-detail-check, .inspection-check {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: all var(--dur-xs);
}
.inspection-checklist-item:hover { background: var(--accent-wash); border-color: rgba(79, 70, 229, .2); }
.inspection-detail-check-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

.inspection-service-row { background: linear-gradient(180deg, var(--accent-wash), var(--paper-3)); }
.inspection-agreement, .agreement, .inspection-detail-agreement {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--paper-3), var(--paper));
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.7;
  margin: 12px 0;
}

.inspection-detail { display: grid; gap: 14px; margin-top: 14px; }
.inspection-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--hairline);
}
.inspection-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.inspection-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inspection-detail-list { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }

.inspection-signatures-images { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }

/* Signature pad */
.signature-pad {
  background: var(--paper);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  padding: 14px;
  position: relative;
}
.signature-pad-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.signature-canvas {
  width: 100%;
  height: 160px;
  background: #ffffff;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  cursor: crosshair;
  touch-action: none;
}
.signature-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
.signature-preview { max-width: 240px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: #fff; padding: 8px; box-shadow: var(--shadow-xs); }

/* ─── Contact list ───────────────────────────────────────────────── */
.contact-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: all var(--dur-xs);
}
.contact-item:hover { background: var(--paper); border-color: rgba(79, 70, 229, .2); box-shadow: var(--shadow-xs); }
.contact-cell { display: flex; align-items: center; gap: 10px; }
.contact-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}
.contact-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.contact-details { display: flex; flex-direction: column; gap: 2px; }

/* ─── Perm grid ─────────────────────────────────────────────────── */
.perm-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 12px 0; }
.perm-grid label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--paper-3); border: 1px solid var(--hairline); border-radius: var(--r-sm); font-size: 12.5px; cursor: pointer; transition: all var(--dur-xs); }
.perm-grid label:hover { background: var(--accent-wash); border-color: rgba(79, 70, 229, .2); }
.perm-grid label.override { background: var(--warning-wash); border-color: rgba(245, 158, 11, .25); }

/* ─── User meta / misc ──────────────────────────────────────────── */
.user-meta { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.progress-track {
  height: 8px;
  background: var(--paper-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--hairline-2);
  position: relative;
  margin: 8px 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
  transition: width var(--dur-md) var(--ease-smooth);
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
.monthly-performance { display: grid; gap: 10px; margin: 14px 0; }

/* Withhold / payroll */
.withhold-deficit-row { background: var(--danger-wash); }
.withhold-deficit-row td { color: #9f1239; font-weight: 700; }

/* CP grid (custom profit) */
.cp-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 12px 0; }
.cp-item { padding: 12px; background: var(--paper-3); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.cp-input { margin-top: 6px; }
.cp-scroll { max-height: 280px; overflow-y: auto; padding: 8px; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); }

/* ─── Smart table ───────────────────────────────────────────────── */
.smart-table { width: 100%; }
.smart-table thead th { background: linear-gradient(180deg, var(--accent-wash), var(--paper-3)); color: var(--accent-deep); }

/* ─── Table performance: only safe optimizations ──────────────────── */
/* تحسين أداء التمرير الأفقي في الحاويات الطويلة (آمن — لا يؤثر على Layout) */
@media (min-width: 769px) {
  .table-responsive {
    will-change: scroll-position;
  }
}
/* ملاحظة: تمت إزالة content-visibility: auto على <tr> لأنها تكسر تخطيط
   الجداول في بعض المتصفحات (table-row لا يدعم content-visibility كاملاً).
   كانت تسبّب شاشة بيضاء في صفحات الضمانات وغيرها. */

/* ─── Utility classes ───────────────────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.block { display: block; }
.hidden { display: none !important; }
.full-width { width: 100%; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-small, .small { font-size: 12px; }
.text-xxs { font-size: 10.5px; }
.text-muted, .muted { color: var(--muted); }
.text-primary, .primary { color: var(--accent); }
.text-success, .success { color: var(--success); }
.text-danger, .danger, .error { color: var(--danger); }
.text-orange { color: var(--warning); }
.font-bold { font-weight: 700; }
.cursor-pointer { cursor: pointer; }
.bg-gray-50 { background: var(--paper-3); }
.bg-transparent { background: transparent; }
.border { border: 1px solid var(--hairline); }
.border-0 { border: 0; }
.border-bottom { border-bottom: 1px solid var(--hairline); }
.rounded { border-radius: var(--r-md); }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; } .mb-4 { margin-bottom: 18px; }
.mt-1 { margin-top: 4px; } .mt-4 { margin-top: 18px; }
.pb-1 { padding-bottom: 4px; }
.p-2 { padding: 8px; } .p-3 { padding: 14px; }
.px-1 { padding-left: 4px; padding-right: 4px; }
.nested { padding-right: 18px; border-right: 2px solid var(--hairline); }
.meta { font-size: 11.5px; color: var(--muted); }
.summary { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.icon { display: inline-flex; align-items: center; justify-content: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.logo-link { display: inline-block; }

/* ─── Footer shell ───────────────────────────────────────────────── */
.footer-shell {
  max-width: 1320px;
  margin: 60px auto 0;
  padding: 24px 28px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .6));
  border-top: 1px solid var(--hairline);
  position: relative;
}
.footer-shell::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .5;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: var(--muted);
}

/* ─── Loader / spinner ──────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  animation: spin 700ms linear infinite;
}

/* ─── Page-specific wrappers ─────────────────────────────────────── */
body.page-dashboard .container { animation-duration: var(--dur-lg); }
body.is-guest .topbar-actions { display: none; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .dashboard-hero { grid-template-columns: 1fr; padding: 32px 28px; }
  .dashboard-hero h1, .dashboard-hero h2 { font-size: 28px; }
  .container { padding: 0 20px; }
}
@media (max-width: 960px) {
  .dashboard-hero { padding: 26px 22px; }
  .dashboard-hero h1, .dashboard-hero h2 { font-size: 24px; }
  .topbar-inner { padding: 12px 18px; gap: 14px; }
  .topbar-content { gap: 10px; width: 100%; justify-content: space-between; }
  .user { display: none; }
  .container { padding: 0 16px; margin-top: 18px; }
  .app-grid { gap: 18px; }
}
@media (max-width: 640px) {
  .topbar-pill--soft { display: none; }
  .brand-copy { display: none; }
  .card { padding: 18px; border-radius: var(--r-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dashboard-hero { padding: 22px 18px; border-radius: var(--r-xl); }
  .dashboard-hero h1, .dashboard-hero h2 { font-size: 22px; }
  .dashboard-lead { font-size: 13.5px; }
  .kpi-value, .dashboard-metric__value, .stat-val { font-size: 20px; }
  /* منع التكبير التلقائي في آيفون + أهداف لمس مريحة */
  .input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="tel"], input[type="search"], select, textarea {
    font-size: 16px;
    min-height: 46px;
  }
  .btn { padding: 12px 18px; font-size: 14px; min-height: 46px; }
  .table th, .table td, table th, table td { padding: 9px 10px; font-size: 12px; }
  /* صفحة الدخول على الجوال */
  .login-center { padding: 12px; min-height: calc(100dvh - 170px); }
  .login-panel { padding: 28px 20px 24px; border-radius: var(--r-xl); }
  .login-panel h2 { font-size: 22px; }
  .login-logo-wrap { min-width: 116px; height: 84px; padding: 10px 16px; border-radius: 20px; }
  .login-logo { height: 50px; max-width: 170px; }
  .login-submit { min-height: 52px; font-size: 15px; }
}
@media (max-width: 420px) {
  .container { padding: 0 12px; }
  .topbar-inner { padding: 10px 14px; }
  .brand { width: 44px; height: 44px; }
  .brand-logo { width: 30px; height: 30px; }
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; }
}

/* لمسات جوال عامة */
* { -webkit-tap-highlight-color: transparent; }
body.page-login .login-center { padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* ─── Reduce motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Services page — refined layout ────────────────────────────── */
body.page-services .grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
body.page-services .grid-4 > .card {
  padding: 22px 22px 20px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-services .grid-4 > .card h3 {
  font-size: 15px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-2);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
body.page-services .grid-4 > .card h3::before {
  content: '';
  width: 4px; height: 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 4px;
}
/* Outer add/new form (direct child of card) — stacked layout */
body.page-services .grid-4 > .card > form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-services .grid-4 > .card > form > br { display: none; }
body.page-services .grid-4 > .card > form > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: -.003em;
  margin: 2px 0 -4px;
}
body.page-services .grid-4 > .card > form > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur-xs);
}
body.page-services .grid-4 > .card > form > label:has(input[type="checkbox"]):hover {
  background: var(--accent-wash);
  border-color: rgba(79, 70, 229, .2);
}
body.page-services .grid-4 > .card > form > .input,
body.page-services .grid-4 > .card > form > select.input {
  width: 100%;
  font-size: 13px;
  padding: 10px 12px;
  text-overflow: ellipsis;
}
body.page-services .grid-4 > .card > form > select.input {
  padding-left: 32px;
  padding-right: 12px;
}
body.page-services .grid-4 > .card > form > .btn {
  margin-top: 6px;
  align-self: stretch;
  padding: 11px 18px;
  font-size: 13px;
}

/* Nested forms inside tables (rename, department-assign) — inline row */
body.page-services .table td form,
body.page-services .grid-4 > .card .table td form {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0;
}
body.page-services .table td form .input,
body.page-services .table td form select.input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  font-size: 12.5px;
  padding: 7px 10px;
  margin: 0;
}
body.page-services .table td form .icon-btn {
  flex: 0 0 auto;
  width: 32px; height: 32px;
}
body.page-services .table-responsive {
  border: 1px solid var(--hairline);
  margin-top: 14px;
}
body.page-services .table-compact th,
body.page-services .table-compact td {
  padding: 8px 10px;
  font-size: 12.5px;
  vertical-align: middle;
}
body.page-services .table-compact th:first-child,
body.page-services .table-compact td:first-child {
  width: 48px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

/* Current services table — give select column enough room */
body.page-services .card table.table-compact td:nth-child(3) {
  min-width: 220px;
}
body.page-services .card table.table-compact td:nth-child(3) form {
  display: flex;
  gap: 6px;
  align-items: center;
}
body.page-services .card table.table-compact td:nth-child(3) form select.input {
  flex: 1 1 auto;
  min-width: 140px;
}

/* BOM links table — breathing room */
body.page-services .card h3 + table.table-balanced {
  margin-top: 8px;
}

/* Report filter header — cleaner grid on narrow screens */
body.page-services .grid-4 > div > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 4px;
}

/* Empty-state hint inside departments table */
body.page-services .table .muted {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
}

@media (max-width: 1200px) {
  body.page-services .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  body.page-services .grid-4 { grid-template-columns: 1fr; }
  body.page-services .card table.table-compact td:nth-child(3) { min-width: auto; }
  body.page-services .card table.table-compact td:nth-child(3) form { flex-wrap: wrap; }
}

/* ─── Print ──────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 7mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11px; }
  body::before, .topbar, .sidebar, .mobile-fab, .topbar-glow, .btn, .table-toolbar, .footer-shell, .no-print { display: none !important; }
  .app-grid, .app-content { display: block !important; grid-template-columns: none !important; padding: 0 !important; margin: 0 !important; }
  .container { margin: 0; padding: 0; max-width: 100%; }
  #invoiceArea.card { padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: 1px solid #D8D8D8 !important; }
  .card, .dashboard-hero, .dashboard-metric, .kpi-card, .stat-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card::before, .dashboard-hero::before, .dashboard-metric::before, .kpi-card::before { display: none !important; }
  h1, h2, h3, h4 { color: #000 !important; -webkit-text-fill-color: initial !important; background: none !important; }
  .table, .table th, .table td, table, table th, table td { color: #000 !important; border-color: #999 !important; }
  .table th, .table td { padding: 4px 6px !important; font-size: 11px !important; }
  .brand-logo { max-height: 60px !important; }
  .grid-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 6px 16px !important; font-size: 11px !important; }
  a { color: #000 !important; text-decoration: none !important; }
  img { max-width: 100% !important; }

  /* فاتورة صفحة واحدة */
  .invoice-document {
    border: 1px solid #D8D8D8 !important;
    box-shadow: none !important;
    padding: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .invoice-document::before,
  .invoice-document::after,
  .card.invoice-document::before { display: none !important; content: none !important; }
  .invoice-doc-header {
    background: #fff !important;
    border-bottom: 2px solid #D21F2A !important;
    padding: 10px 16px 8px !important;
    gap: 8px 12px !important;
  }
  .invoice-doc-header::before { display: none !important; }
  .invoice-doc-brand, .invoice-doc-partner { width: auto !important; min-width: 0 !important; height: 50px !important; min-height: 50px !important; }
  .invoice-doc-logo {
    width: auto !important;
    height: 46px !important;
    max-width: 170px !important;
    background: transparent !important;
  }
  .invoice-doc-partner-logo {
    width: auto !important;
    height: 46px !important;
    max-width: 78px !important;
    background: transparent !important;
  }
  .invoice-doc-id__no { font-size: 22px !important; color: #D21F2A !important; }
  .invoice-doc-stamp--paid {
    background: rgba(255,255,255,.88) !important;
    color: #1B7A3A !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  .invoice-doc-stamp {
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .invoice-doc-stamp__text { font-size: 10px !important; }
  .invoice-doc-parties { padding: 8px 14px 4px !important; background: #fff !important; gap: 0 !important; }
  .invoice-doc-party { padding: 0 0 6px !important; background: transparent !important; border: 0 !important; }
  .invoice-doc-party + .invoice-doc-party { margin-inline-start: 16px !important; padding-inline-start: 16px !important; }
  .invoice-doc-party__name { font-size: 16px !important; margin-bottom: 4px !important; }
  .invoice-doc-party__no { font-size: 20px !important; margin-bottom: 6px !important; color: #D21F2A !important; }
  .invoice-doc-party__row, .invoice-doc-party__line { padding: 2px 0 !important; font-size: 11px !important; }
  .invoice-doc-items { padding: 8px 14px 0 !important; }
  .invoice-doc-section-title { font-size: 10px !important; margin-bottom: 6px !important; color: #6A6A6A !important; border: 0 !important; }
  .invoice-doc-table thead th {
    background: transparent !important;
    color: #6A6A6A !important;
    font-size: 10px !important;
    padding: 0 8px 6px !important;
    border-bottom: 1px solid #141414 !important;
  }
  .invoice-doc-table tbody td { padding: 5px 8px !important; font-size: 10.5px !important; background: transparent !important; }
  .invoice-doc-table tbody tr td.invoice-doc-table__seq {
    color: #fff !important;
    background: no-repeat center / 20px 20px linear-gradient(#D21F2A, #D21F2A) !important;
  }
  .invoice-doc-summary-wrap { padding: 8px 14px 4px !important; gap: 14px !important; }
  .invoice-doc-payment-info, .invoice-doc-totals { background: transparent !important; border: 0 !important; }
  .invoice-doc-totals__row { padding: 3px 0 !important; font-size: 11px !important; }
  .invoice-doc-totals__row--grand {
    background: transparent !important;
    padding: 8px 0 0 !important;
    box-shadow: none !important;
    border-top: 2px solid #D21F2A !important;
  }
  .invoice-doc-totals__row--grand span { color: #141414 !important; }
  .invoice-doc-totals__row--grand b { color: #D21F2A !important; font-size: 22px !important; }
  .invoice-doc-footer { padding: 8px 14px 10px !important; gap: 12px !important; }
  .invoice-doc-footer__qr { padding: 0 !important; border: 0 !important; box-shadow: none !important; }
  .invoice-doc-footer__qr-img { width: 60px !important; height: 60px !important; }
  .invoice-doc-footer__qr-label { font-size: 8.5px !important; max-width: 72px !important; }
  .invoice-doc-footer__thanks { font-size: 12px !important; margin-bottom: 4px !important; }
  .invoice-doc-footer__contact { font-size: 10.5px !important; margin-bottom: 4px !important; }
  .invoice-doc-footer__terms ul { font-size: 9px !important; line-height: 1.45 !important; }


}