/* ============================================================================
   Design tokens + reset.

   These values are lifted from the MUI theme (theme.ts) and palette.ts so the
   rewritten UI is visually identical to the React build, not merely similar.
   Change a colour here and it changes everywhere, exactly as the theme did.
   ========================================================================== */

:root {
  /* brand - the apna blue from the lockup, and the tints the mockup builds on */
  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-light:  #60a5fa;
  --primary-soft:   #eff6ff;
  --secondary:      #7c3aed;

  /* status */
  --success:        #16a34a;
  --success-soft:   #dcfce7;
  --error:          #dc2626;
  --error-soft:     #fee2e2;
  --warning:        #d97706;
  --warning-soft:   #fef3c7;
  --info:           #0284c7;
  --info-soft:      #e0f2fe;

  /* surfaces.
     The sidebar is light in this design, not the old navy slab. A white rail against an
     off-white page reads as part of the same surface, which is why the active item needs
     to be a filled pill - it is the only strong colour in the rail and so it is never
     ambiguous which page you are on. */
  --bg:             #f5f7fb;
  --surface:        #ffffff;
  --surface-sunken: #f8fafc;
  --sidebar:        #e0f2fe;
  --sidebar-hover:  #f1f5f9;
  --sidebar-active: #2563eb;
  --sidebar-accent: #2563eb;
  --sidebar-text:   #475569;
  --sidebar-muted:  #94a3b8;

  /* text */
  --text:           #0f172a;
  --text-secondary: #64748b;
  --text-disabled:  #94a3b8;

  /* lines */
  --border:         #e2e8f0;
  --border-strong:  #cbd5e1;
  --grid-line:      #eef2f7;
  --zebra:          #f8fafc;

  /* elevation - flatter than MUI's. These cards sit on a tinted page, so they read as
     raised from the contrast alone; a heavy shadow would make the page look cluttered. */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-3: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-4: 0 12px 32px rgba(16, 24, 40, .16);

  --radius:    14px;   /* cards */
  --radius-sm: 10px;   /* inputs, buttons */
  --radius-xs: 8px;    /* small controls */
  --radius-pill: 999px;

  /* ---- density scale ----

     These are the only knobs the breakpoints in layout.css turn. Every piece of chrome -
     the app bar, the sidebar, the page gutter, buttons, inputs, stat cards, table padding
     and type - reads them, so tightening the UI for a smaller screen happens in one place
     instead of each component carrying its own media query.

     The desktop values below are deliberately a notch tighter than the MUI defaults the
     app started from: at 34px tall a button is still a comfortable click target, and the
     rows that height buys back are worth more than the whitespace. */
  --appbar-h:    60px;
  --sidebar-w:   240px;
  --page-pad:    24px;

  --h1-size:     1.875rem;   /* page titles: "Tasks", "My Calendar" */
  --ctl-h:       34px;       /* buttons and icon buttons */
  --field-h:     38px;       /* inputs, selects, the closed multi-select box */

  --stat-icon:   42px;
  --stat-value:  1.5rem;
  --stat-pad-y:  14px;
  --stat-pad-x:  18px;
  --stat-min:    260px;      /* smallest a stat card may be before the grid drops a column */

  --table-pad-y: 9px;
  --table-pad-x: 14px;
  --table-font:  .875rem;
  --clip-w:      240px;      /* widest a one-line free-text cell may get */

  --font: "Roboto", "Helvetica", "Arial", sans-serif;
}

/* ---- reset (the part of CssBaseline that matters) ---- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- typography scale, matching MUI's variants ---- */

/* .h4 is what every page title uses, so it follows the density scale rather than the
   fixed 2.125rem MUI shipped - a 34px heading on a 1280px screen spends a whole row of
   table on the word "Tasks". */
.h4      { font-size: var(--h1-size); font-weight: 700; line-height: 1.235; }
.h5      { font-size: 1.5rem;   font-weight: 600; line-height: 1.334; }
.h6      { font-size: 1.25rem;  font-weight: 600; line-height: 1.6; }
.subtitle{ font-size: .875rem;  font-weight: 700; }
.body    { font-size: .875rem; }
.caption { font-size: .75rem;   line-height: 1.66; }
.overline{ font-size: .75rem;   font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.muted        { color: var(--text-secondary); }
.bold         { font-weight: 700; }
.semi         { font-weight: 600; }
.center       { text-align: center; }
.right        { text-align: right; }
.nowrap       { white-space: nowrap; }
.truncate     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- layout helpers (the sx={{ display:'flex' }} replacements) ---- */

.row     { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.col     { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: 8px; }  .gap-2 { gap: 16px; }  .gap-3 { gap: 24px; }
.mt-1 { margin-top: 8px; }   .mt-2 { margin-top: 16px; }   .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

.hidden { display: none !important; }

/* Wide content scrolls inside itself instead of stretching the page.

   This is the fix for the "only readable at 75% zoom" bug carried over from the React
   build: a flex child defaults to min-width:auto, so a wide table grows its parent past
   the viewport and the rest of the page becomes unreachable. Clamping min-width and
   scrolling locally keeps the page itself the right size at every zoom level. */
.scroll-x {
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.scroll-x::-webkit-scrollbar { height: 10px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }
.scroll-x::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
.scroll-x::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Screen-reader-only, for icon-only buttons that still need a name. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}