/* ===========================================================================
   Jasas AI — dashboard styling, built on the Rōnin app design system
   (app.ronin-ai.tech, not the marketing site).

   Warm paper, sumi ink, one seal-red accent. Cards sit FLAT on paper with a
   hairline; shadow means "floating above" and is reserved for popovers,
   slide-overs and modals. Anything countable is mono and tabular so digits
   do not jitter as values change.

   The markup this styles was written for an all-dark theme and is full of
   `text-white`, `bg-white/5` and `border-white/10`. Rather than rewrite
   1,600 lines of markup — which would break the JS that owns those nodes —
   the dark-assuming utilities are re-pointed inside `main` only. The
   `aside` rail stays genuinely dark, so `text-white` remains correct there.
   =========================================================================== */

:root {
  /* --- Core palette --------------------------------------------------- */
  /* Seal red is reserved for the primary action and the active rail item.
     Destructive uses the deeper crimson so "destructive" never reads as
     "primary". */
  --seal: #cf3423;
  --seal-hover: #a52a1c;
  --seal-press: #8f1f14;
  --seal-tint: #fdece9;

  --ink: #1c1917;
  --paper: #e6e0d9;
  --surface: #ffffff;

  /* Warm stone neutrals */
  --ink-700: #44403c;
  --ink-600: #57534e;
  --ink-500: #78716c;
  --ink-400: #a8a29e;
  --ink-300: #d6d3d1;
  --ink-250: #d3ccc3;
  --ink-200: #e7e2dc;
  --ink-150: #ece7e1;
  --ink-100: #efeae4;
  --ink-50: #faf8f6;
  --muted: #8b8178;

  /* Semantic */
  --success: #1f6b48;
  --success-tint: #eaf4ee;
  --warning: #96650b;
  --warning-tint: #fdf4e3;
  --danger: #8f1f14;
  --danger-tint: #fdece9;
  --info: #3a4a63;
  --info-tint: #eef1f6;

  /* Lightened variants for the dark rail. The paper-surface semantics are
     chosen for contrast against white, so #1f6b48 on near-black ink lands
     around 2:1 — "Executive Online" was effectively unreadable. These clear
     4.5:1 on the rail. */
  --success-on-ink: #5fbd8a;
  --warning-on-ink: #d1a054;
  --danger-on-ink: #e8705f;
  --seal-on-ink: #e8705f;

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Shippori Mincho B1", Georgia, serif;
  --font-sans: "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Radius ---------------------------------------------------------- */
  --radius-chip: 10px;
  --radius-control: 14px;
  --radius-card: 22px;
  --radius-pill: 999px;

  /* --- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.08);
  --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.12);
  --shadow-lg: 0 24px 56px rgba(28, 25, 23, 0.18);
}

/* ===========================================================================
   Base
   =========================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Counters, metrics, IDs and timestamps. Tabular numerals are what make a
   panel of figures read as instrumentation rather than prose. */
.tnum,
.font-mono,
[id$="-count"],
[id$="-total"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--seal);
  color: #fff;
}

/* Scrollbars, warmed to match paper rather than defaulting to cool grey. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-400); background-clip: content-box; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-pill);
}
.custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ===========================================================================
   The rail. Genuinely dark, so the white-on-dark utilities in the markup
   stay correct inside it.
   =========================================================================== */

aside {
  background: var(--ink) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}

aside .border-borderLight,
aside [class*="border-borderLight"] { border-color: rgba(255, 255, 255, 0.10) !important; }

/* Surfaces inside the rail are tints of the ink it sits on, never the paper
   card colour. cardBg now resolves to white, which put a bright card at the
   foot of a near-black rail. */
aside [class*="bg-cardBg"],
aside [class*="bg-cardHover"] { background-color: rgba(255, 255, 255, 0.06) !important; }

/* Nav labels at 45% white land under 4.5:1 on ink. 0.62 reads comfortably
   while still sitting behind the active item. */
aside .text-textMuted { color: rgba(255, 255, 255, 0.62) !important; }

/* Semantic text on the rail uses the lightened variants. */
aside .text-accentGreen { color: var(--success-on-ink) !important; }
aside .text-accentYellow { color: var(--warning-on-ink) !important; }
aside .text-accentRed { color: var(--seal-on-ink) !important; }
aside .bg-accentGreen { background-color: var(--success-on-ink) !important; }

/* The avatar was a 20%-opacity seal wash carrying white initials — a pale
   pink chip with near-invisible text. A solid seal chip is both legible and
   what the system actually specifies for a mark. */
aside [class*="bg-accentRed/"] {
  background-color: var(--seal) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* A full-contrast scrollbar on a near-black rail reads as a UI element in
   its own right. Recessive until used. */
aside::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }

.nav-item {
  border-radius: var(--radius-control);
  color: rgba(255, 255, 255, 0.70);
  transition: background-color .14s ease, color .14s ease;
}
.nav-item:hover { background-color: rgba(255, 255, 255, 0.06); color: #fff; }

/* The active item is the one place seal red appears in the rail. */
.nav-item.active {
  color: #fff;
  background-color: var(--seal);
  box-shadow: 0 2px 10px rgba(207, 52, 35, 0.35);
}
/* The old build drew a glowing left bar. The seal fill is the signal now, so
   the bar would be a second one saying the same thing. */
.nav-item.active::before { content: none; }

/* ===========================================================================
   Content area. Re-points the dark-theme utilities the markup is built from.
   Scoped to `main` so the rail above is untouched.
   =========================================================================== */

main { background: var(--paper); }

main .text-white { color: var(--ink) !important; }
main .text-gray-100,
main .text-gray-200,
main .text-gray-300 { color: var(--ink-700) !important; }

/* --muted (#8b8178) is ~3.7:1 on white, under the 4.5:1 AA floor, and the
   markup uses text-textMuted for real body copy rather than only for faint
   labels. ink-600 clears 6:1 and still reads as secondary. The genuinely
   faint uses — uppercase micro-labels at 10-11px — keep the lighter tone
   below, where they are large-ish relative to their weight and decorative. */
main .text-gray-400,
main .text-textMuted { color: var(--ink-600) !important; }
main .text-\[10px\].text-textMuted,
main .text-\[9px\].text-textMuted,
main .uppercase.text-textMuted { color: var(--ink-500) !important; }

main .bg-black,
main [class*="bg-black"] { background-color: var(--surface) !important; }

/* Tailwind's slash-opacity utilities, used throughout for subtle fills and
   hairlines on the old dark ground. */
main [class*="bg-white/"] { background-color: var(--ink-50) !important; }
main [class*="border-white/"] { border-color: var(--ink-200) !important; }
main [class*="border-borderLight"] { border-color: var(--ink-200) !important; }

main input,
main textarea,
main select {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--ink-200) !important;
  border-radius: var(--radius-control);
}
main input::placeholder,
main textarea::placeholder { color: var(--ink-400) !important; }

/* Header strip sits on paper, not on a translucent dark pane. */
main > header {
  background: color-mix(in srgb, var(--paper) 85%, transparent) !important;
  border-bottom: 1px solid var(--ink-200) !important;
}

/* ===========================================================================
   Surfaces
   =========================================================================== */

/* Was a blurred translucent pane. Flat white on paper with a hairline — the
   glass effect belonged to the dark theme and muddies a light one. */
.glass-panel {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
}

main [class*="rounded-2xl"],
main [class*="rounded-xl"] { border-radius: var(--radius-card); }

/* Cards are flat. A glow around them would contradict the whole system. */
.red-glow { box-shadow: none; }

.audit-card {
  background: var(--surface);
  border-radius: var(--radius-control);
  transition: border-color .14s ease, background-color .14s ease;
}
.audit-card:hover {
  transform: none;
  background: var(--ink-50);
  border-color: var(--ink-250) !important;
}

.card-safe-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
   Controls
   =========================================================================== */

/* Buttons and links only. A bare `.bg-accentRed` also matches the small
   sparkline bars in the metric row, which would take a pill radius and a
   white text colour they have no use for. */
main button.bg-accentRed,
main a.bg-accentRed {
  background-color: var(--seal) !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
  box-shadow: none !important;
}
main .bg-accentRed { background-color: var(--seal) !important; }
main .hover\:bg-accentRedHover:hover { background-color: var(--seal-hover) !important; }
main .text-accentRed { color: var(--seal) !important; }
main .border-accentRed { border-color: var(--seal) !important; }

main .text-accentGreen { color: var(--success) !important; }
main .bg-accentGreen { background-color: var(--success) !important; color: #fff !important; }
main .text-accentYellow { color: var(--warning) !important; }
main .bg-accentYellow { background-color: var(--warning) !important; color: #fff !important; }
main .text-accentBlue { color: var(--info) !important; }

main button { border-radius: var(--radius-pill); }
main button[class*="rounded-lg"],
main button[class*="rounded-xl"] { border-radius: var(--radius-control); }

/* Tabs inside modals: an underline, not a pill — a row of pills is the thing
   that reads as a template. */
.modal-tab {
  border-radius: 0;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.modal-tab:hover { color: var(--ink); }
.modal-tab.active {
  color: var(--seal);
  background-color: transparent;
  border-bottom-color: var(--seal);
}
.modal-tab.active::before { content: none; }

/* ===========================================================================
   Toasts — these float, so they are the one place a shadow is correct.
   =========================================================================== */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-control);
  font-size: 13px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--warning); }

/* ===========================================================================
   Fine-tuning
   =========================================================================== */

/* Figures. `font-light` at 3xl reads as a hero number on a marketing page;
   on instrumentation it reads as thin. Mono, tabular and bold so a column
   of values lines up and does not reflow as it updates. */
main [id$="-count"],
main [id$="-total"],
main .text-3xl,
main .text-2xl {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  color: var(--ink) !important;
}

/* Micro-labels: one treatment everywhere, so a row of them reads as a system
   rather than as six individually-styled captions. */
main .uppercase {
  letter-spacing: 0.11em;
  font-weight: 700;
  font-size: 9.5px;
}

/* Section titles sit in the display face, like the rest of the system. */
main h2, main h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Hairlines, not shaded panes. The markup separates metric cells with
   border-l; making that a true hairline is what turns the row into a grid. */
main [class*="border-l"] { border-left-color: var(--ink-200) !important; }

/* Icons were set at 60% opacity on a dark ground to keep them quiet. On
   paper that just makes them muddy — a lighter stone tone is cleaner. */
main .opacity-60 { opacity: 1; color: var(--ink-400) !important; }

/* Status dots: the pulse is reserved for something genuinely live. */
main .animate-pulse { animation: none; }
aside .animate-pulse { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Tables read as data, not as prose. */
main table { width: 100%; border-collapse: collapse; background: var(--surface); }
main th {
  text-align: left;
  background: var(--ink-50);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: var(--ink-500);
  padding: 9px 14px;
  border-bottom: 1px solid var(--ink-200);
}
main td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-150);
  font-size: 12.5px;
}
main tbody tr:last-child td { border-bottom: none; }
main tbody tr:hover td { background: var(--ink-50); }

/* Modal and overlay surfaces float, so they take a shadow; the backdrop is
   warm rather than pure black so it does not punch a hole in the paper. */
main [class*="backdrop-blur"],
[id$="-modal"] { backdrop-filter: blur(2px); }
[id$="-modal"] > div { box-shadow: var(--shadow-lg); border-radius: var(--radius-card); }

/* ===========================================================================
   Reduced motion
   =========================================================================== */

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

/* ===========================================================================
   Arabic / RTL Support
   =========================================================================== */

/* Arabic display font — Noto Kufi gives a clean geometric look that pairs
   well with the Rōnin system without competing with Shippori Mincho. */
:root {
  --font-arabic: "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;
}

/* Arabic labels in the rail (nav items, buttons) */
.arabic-label {
  font-family: var(--font-arabic);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}

/* Sidebar subtitle and "متصل الآن" label */
aside .text-\[10px\],
aside p.text-\[10px\] {
  font-family: var(--font-arabic);
}

/* ==========================================================================
   Chat messages — bidi isolation for mixed Arabic/English content
   ========================================================================== */

/* Every chat bubble enforces Unicode bidirectional isolation so that mixing
   Arabic and English text in the same paragraph cannot flip punctuation or
   numbers to wrong positions. */
#chat-messages .chat-bubble {
  unicode-bidi: isolate;
}

/* Arabic-detected bubbles: right-aligned, RTL direction */
#chat-messages .chat-bubble[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: 13.5px;
  line-height: 1.65;
}

/* English/LTR bubbles stay left-aligned */
#chat-messages .chat-bubble[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Chat input auto-dir: browser handles dir=auto natively for RTL detection */
#chat-input {
  font-family: var(--font-arabic), var(--font-sans);
  text-align: start;           /* adapts to dir=auto */
  unicode-bidi: plaintext;     /* renders bidi correctly */
}

/* Quick-prompt buttons that contain Arabic text */
#chat-messages button[onclick] {
  font-family: var(--font-arabic);
  unicode-bidi: isolate;
  direction: rtl;
  text-align: right;
}

/* Placeholder for the chat input */
#chat-input::placeholder {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
}