/* =====================================================================
   MOTOGIATHINH — Visual Foundations
   Glassmorphism · Neon · Confident with numbers
   ===================================================================== */

/* ---------- WEB FONTS ------------------------------------------------ */
/* San Francisco — the brand fonts. Files in fonts/.                    */
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("fonts/SFProDisplay-Heavy.otf")    format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: "SF Pro Text"; src: url("fonts/SFProText-Regular.otf")  format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text"; src: url("fonts/SFProText-Medium.otf")   format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text"; src: url("fonts/SFProText-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Pro Text"; src: url("fonts/SFProText-Bold.otf")     format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* JetBrains Mono for tabular numbers and codes (no SF Mono in upload). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- DESIGN TOKENS -------------------------------------------- */
:root {
  /* --- Surface palette (deep, dark, slight blue ink) ---------------- */
  --ink-0: #05060A;          /* page void */
  --ink-1: #0A0C13;          /* canvas base */
  --ink-2: #10131C;          /* raised surface */
  --ink-3: #161A25;          /* hover surface */
  --ink-4: #1E2330;          /* divider / inset */

  /* --- Glass (apply over a dark or photo bg, with backdrop-blur) --- */
  --glass-1: rgba(255, 255, 255, 0.03);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-3: rgba(255, 255, 255, 0.10);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-stroke-strong: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(24px) saturate(140%);
  --glass-blur-soft: blur(14px) saturate(130%);

  /* --- Foreground (text + icons) ----------------------------------- */
  --fg-1: #F4F6FB;           /* primary text on dark */
  --fg-2: #B6BCCC;           /* secondary text */
  --fg-3: #7A8298;           /* tertiary / captions */
  --fg-4: #4E5566;           /* disabled / placeholder */
  --fg-inverse: #07090F;     /* text on neon fills */

  /* --- Neon accents (the "signature") ------------------------------ */
  --neon-cyan:   #00E5FF;    /* primary action, links, focus */
  --neon-cyan-glow: rgba(0, 229, 255, 0.55);
  --neon-cyan-haze: rgba(0, 229, 255, 0.12);

  --neon-lime:   #B6FF3C;    /* income, positive, success */
  --neon-lime-glow: rgba(182, 255, 60, 0.50);
  --neon-lime-haze: rgba(182, 255, 60, 0.10);

  --neon-pink:   #FF3D8A;    /* expense, danger, attention */
  --neon-pink-glow: rgba(255, 61, 138, 0.55);
  --neon-pink-haze: rgba(255, 61, 138, 0.12);

  --neon-amber:  #FFB020;    /* pending, warning */
  --neon-amber-glow: rgba(255, 176, 32, 0.50);
  --neon-amber-haze: rgba(255, 176, 32, 0.12);

  --neon-violet: #8B6CFF;    /* informational, scheduling */
  --neon-violet-glow: rgba(139, 108, 255, 0.50);
  --neon-violet-haze: rgba(139, 108, 255, 0.12);

  /* --- Semantic ---------------------------------------------------- */
  --color-action:   var(--neon-cyan);
  --color-success:  var(--neon-lime);
  --color-danger:   var(--neon-pink);
  --color-warning:  var(--neon-amber);
  --color-info:     var(--neon-violet);

  --color-income:   var(--neon-lime);
  --color-expense:  var(--neon-pink);

  /* --- Typography -------------------------------------------------- */
  --font-display: "SF Pro Display", "Space Grotesk", system-ui, sans-serif;
  --font-ui:      "SF Pro Text", "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;
  --text-6xl:  84px;

  /* --- Spacing scale (4px base) ------------------------------------ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;

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

  /* --- Elevation (outer shadow + neon glow) ----------------------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 32px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 60px rgba(0,0,0,0.6);

  /* Glow effects — used sparingly, never on body text */
  --glow-cyan:  0 0 0 1px var(--neon-cyan), 0 0 24px var(--neon-cyan-glow);
  --glow-lime:  0 0 0 1px var(--neon-lime), 0 0 24px var(--neon-lime-glow);
  --glow-pink:  0 0 0 1px var(--neon-pink), 0 0 24px var(--neon-pink-glow);

  /* --- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ---------- BASE + RESET (minimal, scoped) --------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink-1);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* The signature background — subtle mesh of neon haze + grain */
.mgt-canvas {
  background:
    radial-gradient(1100px 700px at 12% -10%, var(--neon-cyan-haze), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, var(--neon-violet-haze), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, var(--neon-pink-haze), transparent 60%),
    var(--ink-1);
  position: relative;
}
.mgt-canvas::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* ---------- SEMANTIC TYPE ROLES ------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-6xl);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.t-body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg-2);
}
.t-body-strong {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--fg-1);
}
.t-small {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-metric {
  /* The signature: huge confident numbers */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}
.t-metric-sm {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.t-code {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  background: var(--ink-3);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

/* Neon text — never on body, only on labels, glyphs, accents */
.t-neon-cyan  { color: var(--neon-cyan);  text-shadow: 0 0 14px var(--neon-cyan-glow); }
.t-neon-lime  { color: var(--neon-lime);  text-shadow: 0 0 14px var(--neon-lime-glow); }
.t-neon-pink  { color: var(--neon-pink);  text-shadow: 0 0 14px var(--neon-pink-glow); }
.t-neon-amber { color: var(--neon-amber); text-shadow: 0 0 14px var(--neon-amber-glow); }

/* ---------- GLASS PANEL UTILITY ------------------------------------- */
.glass {
  background: var(--glass-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.glass-soft {
  background: var(--glass-1);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-md);
}

/* Focus ring */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--neon-cyan);
  border-radius: inherit;
}
/* =====================================================================
   LIGHT THEME
   Toggle by setting `data-theme="light"` on <html> or any ancestor.
   We override the same tokens — no component changes required.
   The palette stays neon, but accents are nudged slightly darker so
   they read on light surfaces (cyan especially).
   ===================================================================== */
[data-theme="light"] {
  /* Surfaces — paper, not bright white. Cool-leaning. */
  --ink-0: #E2E6EE;
  --ink-1: #F1F3F8;
  --ink-2: #FFFFFF;
  --ink-3: #F4F6FB;
  --ink-4: #E2E6EE;

  /* Glass over a light page is a very light-tinted, low-alpha surface. */
  --glass-1: rgba(15, 22, 41, 0.025);
  --glass-2: rgba(255, 255, 255, 0.62);
  --glass-3: rgba(255, 255, 255, 0.86);
  --glass-stroke:        rgba(15, 22, 41, 0.08);
  --glass-stroke-strong: rgba(15, 22, 41, 0.16);

  /* Foreground — near-black ink with a slight blue tilt. */
  --fg-1: #0B1020;
  --fg-2: #4A546A;
  --fg-3: #6E7894;
  --fg-4: #A2ABBE;
  --fg-inverse: #FFFFFF;

  /* Neon nudges — tuned for AA contrast + brand energy on light surface. */
  --neon-cyan:        #0096C7;
  --neon-cyan-glow:   rgba(0, 150, 199, 0.38);
  --neon-cyan-haze:   rgba(0, 150, 199, 0.10);

  --neon-lime:        #1E8F37;
  --neon-lime-glow:   rgba(30, 143, 55, 0.32);
  --neon-lime-haze:   rgba(30, 143, 55, 0.10);

  --neon-pink:        #D81B60;
  --neon-pink-glow:   rgba(216, 27, 96, 0.32);
  --neon-pink-haze:   rgba(216, 27, 96, 0.10);

  --neon-amber:       #D97500;
  --neon-amber-glow:  rgba(217, 117, 0, 0.34);
  --neon-amber-haze:  rgba(217, 117, 0, 0.10);

  --neon-violet:      #6E48F2;
  --neon-violet-glow: rgba(110, 72, 242, 0.32);
  --neon-violet-haze: rgba(110, 72, 242, 0.10);

  /* Outer shadow — softer, no inner highlight (looks weird on white). */
  --shadow-1: 0 1px 2px rgba(15, 22, 41, 0.06), 0 2px 8px rgba(15, 22, 41, 0.04);
  --shadow-2: 0 1px 2px rgba(15, 22, 41, 0.06), 0 12px 28px rgba(15, 22, 41, 0.07);
  --shadow-3: 0 4px 14px rgba(15, 22, 41, 0.08), 0 24px 56px rgba(15, 22, 41, 0.12);
}

[data-theme="light"] html,
[data-theme="light"] body,
html[data-theme="light"],
html[data-theme="light"] body,
body[data-theme="light"] {
  background: var(--ink-1);
  color: var(--fg-1);
}

/* Canvas mesh: keep the same neon haze blobs but at lower opacity,
   and swap the grain overlay to a dark-on-light multiply. */
[data-theme="light"] .mgt-canvas {
  background:
    radial-gradient(1100px 700px at 12% -10%, var(--neon-cyan-haze), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, var(--neon-violet-haze), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, var(--neon-pink-haze), transparent 60%),
    var(--ink-1);
}
[data-theme="light"] .mgt-canvas::after {
  mix-blend-mode: multiply;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Glow effects re-tinted to match the darker neon */
[data-theme="light"] {
  --glow-cyan:  0 0 0 1px var(--neon-cyan), 0 0 18px var(--neon-cyan-glow);
  --glow-lime:  0 0 0 1px var(--neon-lime), 0 0 18px var(--neon-lime-glow);
  --glow-pink:  0 0 0 1px var(--neon-pink), 0 0 18px var(--neon-pink-glow);
}

/* Focus ring offset color */
[data-theme="light"] *:focus-visible {
  box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--neon-cyan);
}

/* ---------- PHONE LAYOUT (the same rules as dev) ---------------------- */
/* Layout only, no colour. Below 760px the website switches to the phone
   layout too (shell.jsx useIsMobile): a phone, or a window too narrow for the
   side rail and the tables. Desktop widths keep main's layout. Inline styles
   cannot be collapsed by a media query, but they
   can read a variable the query redefines: hence these instead of literal
   splits. Their defaults are main's own values. */
:root {
  /* minmax(0, …): a track may shrink below its content's width (the content
     wraps or truncates) instead of pushing the page wider than the window. */
  --grid-halves:    minmax(0, 1fr) minmax(0, 1fr);
  --grid-thirds:    minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  --grid-main-side: minmax(0, 1.4fr) minmax(0, 1fr);
  --grid-kpi3:      minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);   /* KPI row, lead card wider */
  --grid-hero:      repeat(4, minmax(0, 1fr));                          /* dashboard's four cards */
}

/* Medium widths (a tablet, a narrow window): KPI cards wrap, two then one
   per row, instead of squeezing their big numbers word by word; the four
   dashboard cards go two by two. */
@media (max-width: 1180px) {
  :root {
    --grid-kpi3: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    --grid-hero: repeat(2, minmax(0, 1fr));
  }
}

.mgt-tabs-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mgt-tabs-scroll::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* Side-by-side panels stack. */
  :root {
    --grid-halves:    1fr;
    --grid-thirds:    1fr;
    --grid-main-side: 1fr;
    --grid-kpi3:      repeat(2, minmax(0, 1fr));
  }

  /* Three KPI cards (Thanh toán): two to a line, not three stacked (user,
     2026-10-06). The lead card goes across, so a large amount still fits;
     the two counts share the line below. */
  .mgt-kpi3 > :first-child { grid-column: 1 / -1; }

  /* A wide grid that has no phone layout scrolls inside its own box. */
  .mgt-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .mgt-scroll-x > * { min-width: max-content; }

  /* Tab toolbar buttons share the row. */
  .mgt-toolbar-actions button { flex: 1; justify-content: center; }

  /* Sheets and popovers never exceed the screen. */
  .mgt-canvas { max-width: 100vw; }
}

/* ---------- TABLE ROWS (div grids) ------------------------------------ */
/* A row's cells may shrink below their content (the grid tracks use
   minmax(0, …)); text in a cell then ends in "…" instead of running into the
   next column. Cells themselves do not clip, so a row's menu still opens. */
.mgt-table-row > * { min-width: 0; }
.mgt-table-row > span,
.mgt-table-row > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Very narrow phones (under 360px): a form's two columns become one, so
   each field keeps a usable width. */
@media (max-width: 359px) {
  .mgt-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .mgt-form-grid > * { grid-column: auto !important; }
}