/* ============================================================================
   MONACO DESIGN SYSTEM  —  monaco_ui.css
   One visual identity for every internal ERP screen. Burgundy accent, warm-
   neutral base, clean Arabic sans, tabular numbers, restraint, zero slop.
   Injected globally (app_include_css + web_include_css). Defining the tokens
   changes NOTHING on its own — screens adopt the identity by referencing the
   --mc-* variables and the .mc-* base classes when they are restyled.
   Data-dashboard register (NOT marketing). Single accent. No AI-purple.
   ============================================================================ */

:root {
  /* -- Burgundy: the single accent / Monaco identity ------------------------ */
  --mc-burgundy:        #68141c;   /* base */
  --mc-burgundy-bright: #8a2130;   /* hover */
  --mc-burgundy-deep:   #4f0f16;   /* pressed / deep */
  --mc-burgundy-tint:   #f7edee;   /* subtle accent wash */

  /* -- Warm neutral family (one family; never pure black) ------------------- */
  --mc-ink:     #201a16;   /* primary text */
  --mc-muted:   #6b5f57;   /* secondary text */
  --mc-faint:   #9a8d84;   /* captions / tertiary */
  --mc-line:    #e9e1db;   /* hairline border */
  --mc-surface: #ffffff;   /* card surface */
  --mc-bg:      #faf7f4;   /* warm ivory page */
  --mc-sunken:  #f3ede8;   /* table header / sunken */

  /* -- Semantic (desaturated so nothing screams) --------------------------- */
  --mc-pos:  #1f7a5a;      /* collected / positive */
  --mc-neg:  #b23a3a;      /* shortage / negative */
  --mc-warn: #9a6b1e;      /* caution */
  --mc-pos-tint: #e7f2ec;
  --mc-neg-tint: #f7e9e9;

  /* -- Shape / elevation / motion ------------------------------------------ */
  --mc-r-sm: 10px;  --mc-r: 14px;  --mc-r-lg: 18px;
  --mc-shadow:    0 1px 2px rgba(32,26,22,.04), 0 10px 30px -14px rgba(104,20,28,.12);
  --mc-shadow-sm: 0 1px 2px rgba(32,26,22,.05);
  --mc-ease: cubic-bezier(.16, 1, .3, 1);
  --mc-t: .2s var(--mc-ease);

  /* -- Type ---------------------------------------------------------------- */
  --mc-font: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark: warm charcoal, never black. Triggered by OS preference OR any explicit
   toggle Frappe / the pages may set. Burgundy brightens for contrast on dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --mc-burgundy:#c9556a; --mc-burgundy-bright:#d96f82; --mc-burgundy-deep:#a83e52; --mc-burgundy-tint:#2a1a1d;
    --mc-ink:#ece5df; --mc-muted:#a89e96; --mc-faint:#7c716a; --mc-line:#2e2723;
    --mc-surface:#1d1815; --mc-bg:#141110; --mc-sunken:#241e1a;
    --mc-pos:#4ab88c; --mc-neg:#e07a7a; --mc-warn:#c79a4e; --mc-pos-tint:#18271f; --mc-neg-tint:#2a1a1a;
    --mc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.55);
  }
}
[data-theme="dark"], .dark, [data-theme-mode="dark"], html[data-theme="dark"], body.dark {
  --mc-burgundy:#c9556a; --mc-burgundy-bright:#d96f82; --mc-burgundy-deep:#a83e52; --mc-burgundy-tint:#2a1a1d;
  --mc-ink:#ece5df; --mc-muted:#a89e96; --mc-faint:#7c716a; --mc-line:#2e2723;
  --mc-surface:#1d1815; --mc-bg:#141110; --mc-sunken:#241e1a;
  --mc-pos:#4ab88c; --mc-neg:#e07a7a; --mc-warn:#c79a4e; --mc-pos-tint:#18271f; --mc-neg-tint:#2a1a1a;
  --mc-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 34px -14px rgba(0,0,0,.55);
}

/* ============================================================================
   BASE COMPONENTS  (.mc-*). Opt-in — no effect until a screen uses them.
   ============================================================================ */

/* tabular numbers — MANDATORY on every money/data figure */
.mc-num { font-variant-numeric: tabular-nums; letter-spacing: .01em; font-feature-settings: "tnum" 1; }

/* card — use ONLY where elevation communicates hierarchy; else hairline + space */
.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-r);
  box-shadow: var(--mc-shadow-sm);
}
.mc-hairline { border: 0; border-top: 1px solid var(--mc-line); }

/* buttons — real states, one accent */
.mc-btn {
  font: 600 14px/1 var(--mc-font);
  color: var(--mc-ink);
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-r-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--mc-t), border-color var(--mc-t), transform .12s var(--mc-ease);
}
.mc-btn:hover { background: var(--mc-sunken); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn:focus-visible { outline: 2px solid var(--mc-burgundy); outline-offset: 2px; }
.mc-btn-accent { background: var(--mc-burgundy); border-color: var(--mc-burgundy); color: #fff; }
.mc-btn-accent:hover { background: var(--mc-burgundy-bright); border-color: var(--mc-burgundy-bright); }

/* segmented tabs / pills */
.mc-pill {
  font: 600 13px/1 var(--mc-font);
  color: var(--mc-muted);
  background: transparent;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--mc-t);
}
.mc-pill:hover { color: var(--mc-ink); background: var(--mc-sunken); }
.mc-pill.is-active { color: #fff; background: var(--mc-burgundy); border-color: var(--mc-burgundy); }
.mc-pill:disabled { opacity: .5; cursor: default; }

/* KPI */
.mc-kpi-label { font: 600 11px/1.2 var(--mc-font); letter-spacing: .06em; color: var(--mc-faint); text-transform: none; }
.mc-kpi-value { font: 700 26px/1.1 var(--mc-font); color: var(--mc-ink); font-variant-numeric: tabular-nums; }

/* table — hairline rows, sunken header, RTL-correct numeric alignment */
.mc-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--mc-font); color: var(--mc-ink); }
.mc-table thead th { font-weight: 600; color: var(--mc-muted); background: var(--mc-sunken); text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--mc-line); }
.mc-table td { padding: 11px 12px; border-bottom: 1px solid var(--mc-line); }
.mc-table td.mc-n, .mc-table th.mc-n { text-align: start; font-variant-numeric: tabular-nums; }
.mc-table tbody tr { transition: background var(--mc-t); }
.mc-table tbody tr:hover { background: var(--mc-sunken); }

/* value tones */
.mc-pos { color: var(--mc-pos); } .mc-neg { color: var(--mc-neg); } .mc-warn { color: var(--mc-warn); }

/* skeleton loader (not a bare spinner) */
.mc-skeleton { position: relative; overflow: hidden; background: var(--mc-sunken); border-radius: var(--mc-r-sm); }
.mc-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: mc-shimmer 1.3s infinite; }
@keyframes mc-shimmer { 100% { transform: translateX(100%); } }

/* composed empty / inline error states */
.mc-empty { color: var(--mc-faint); font: 500 14px/1.5 var(--mc-font); text-align: center; padding: 40px 16px; }
.mc-error { color: var(--mc-neg); background: var(--mc-neg-tint); border: 1px solid color-mix(in srgb, var(--mc-neg) 30%, transparent); border-radius: var(--mc-r-sm); padding: 12px 14px; font: 500 14px/1.5 var(--mc-font); }

/* accessible focus ring, applied narrowly (opt-in class) */
.mc-focusable:focus-visible { outline: 2px solid var(--mc-burgundy); outline-offset: 2px; border-radius: 4px; }