/* ============================================================================
   Teachfluence Admin — WEB Design Kit (_kit.css)
   Single source of truth for tokens + component classes across every web
   canvas. Author screens by composing these classes; never hand-roll colors.

   FAITHFUL CAPTURE: the token layer below is the app's REAL shadcn token set,
   copied verbatim from `pi-education-web/app/globals.css` (HSL channel triples,
   used via `hsl(var(--token))`). So this file IS the shipped design system's
   token contract — not a hand-transcribed approximation.

   Frame model: FULL-BLEED DESKTOP (1440px), no browser chrome. Theme is set
   per-frame with .theme-light / .theme-dark on .tf-web.
   Rules: Inter only · radius 0.5rem (8px) · border-first (1px hairline) ·
          card shadows only where the real app uses them · Light is the
          production admin theme (Dark authored for Phase-2, admin is light-only).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS  — verbatim from app/globals.css (:root and .dark)
      HSL channel triples; consume as hsl(var(--x)) / hsl(var(--x) / <alpha>).
---------------------------------------------------------------------------- */
.theme-light {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;

  --primary: 240 84% 42%;
  --primary-foreground: 210 100% 93.3%;

  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 42%;

  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --destructive-deep: 0 72% 42%;
  --destructive-solid: 0 74% 42%;

  --warning: 17 88.3% 40.4%;
  --warning-foreground: 34 100% 91.8%;
  --warning-deep: 17 88.3% 32%;

  --info: 221.2 83.2% 53.3%;
  --info-foreground: 210 40% 98%;
  --info-deep: 221.2 83.2% 38%;

  --success: 142.1 76.2% 36.3%;
  --success-foreground: 210 40% 98%;
  --success-deep: 142.1 76.2% 28%;
  --success-solid: 142.1 72% 26%;

  --radius: 0.5rem;

  /* canvas-only presentation surfaces (not app tokens) */
  --screen: 220 20% 97%;   /* page bg behind cards in content area */
  --hair: var(--border);
  color-scheme: light;
}
.theme-dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;

  --primary: 210 100% 80%;
  --primary-foreground: 210 100% 93.3%;

  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  --accent: 12 6.5% 15.1%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --destructive-deep: 0 62.8% 30.6%;
  --destructive-solid: 0 62.8% 30.6%;

  --warning: 17 88.3% 40.4%;
  --warning-foreground: 34 100% 91.8%;
  --warning-deep: 17 88.3% 40.4%;

  --info: 213.1 93.9% 67.8%;
  --info-foreground: 210 40% 98%;
  --info-deep: 213.1 93.9% 67.8%;

  --success: 142.1 70.6% 45.3%;
  --success-foreground: 210 40% 98%;
  --success-deep: 142.1 70.6% 45.3%;
  --success-solid: 142.1 70.6% 28%;

  --radius: 0.5rem;
  --screen: 222 47% 7%;
  --hair: var(--border);
  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   2. RESET / BASE
---------------------------------------------------------------------------- */
* { box-sizing: border-box; }
.tf-web, .tf-web * {
  font-family: Inter, -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
.tf-web a { color: hsl(var(--primary)); text-decoration: none; }
.tf-num { font-variant-numeric: tabular-nums; }
.tf-web .grow { flex: 1 1 auto; min-width: 0; }
.tf-web .row { display: flex; align-items: center; }
.tf-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------------------------
   3. DESKTOP APP FRAME  — full-bleed 1440, topbar + rail + content
      .tf-web  → outer window (presentation border/radius on the canvas)
      .tf-top  → 64px top bar (org switcher · search · actions · avatar)
      .tf-shell→ flex row: rail + content
      .tf-rail → left nav (56 collapsed / 256 expanded)
      .tf-main → scroll content area
---------------------------------------------------------------------------- */
.tf-web {
  width: 1440px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -30px hsl(222 84% 4.9% / .35);  /* canvas presentation only */
  color: hsl(var(--foreground));
}
.tf-web.h-auto { }                         /* height grows with content */
.tf-web.tall .tf-body { height: 900px; }   /* fixed viewport height for scroll screens */

/* top bar */
.tf-top {
  height: 64px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background));
}
.tf-top .brand { display: flex; align-items: center; gap: 10px; }
.tf-top .logo { width: 30px; height: 30px; border-radius: 8px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center; font: 800 15px Inter; }
.tf-org { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 8px; border: 1px solid hsl(var(--border)); }
.tf-org .nm { font: 700 14px Inter; color: hsl(var(--foreground)); letter-spacing: -.2px; }
.tf-org .sub { font: 500 12px Inter; color: hsl(var(--muted-foreground)); }
.tf-top .spacer { flex: 1 1 auto; }
.tf-top-actions { display: flex; align-items: center; gap: 8px; }

/* shell + rail + main */
.tf-shell { flex: 1 1 auto; display: flex; min-height: 0; }
.tf-rail {
  flex: none; width: 256px;
  border-right: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  display: flex; flex-direction: column;
  padding: 8px 0;
}
.tf-rail.collapsed { width: 56px; }
.tf-main {
  flex: 1 1 auto; min-width: 0;
  background: hsl(var(--screen));
  overflow: hidden;
}
.tf-body { overflow: hidden; }
.tf-scroll { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 22px; max-width: 1180px; }
.tf-scroll.wide { max-width: none; }

/* ----------------------------------------------------------------------------
   4. SIDEBAR NAV  (mirrors AdminSidebar.tsx: top-level links + accordion groups)
---------------------------------------------------------------------------- */
.tf-nav { display: flex; flex-direction: column; }
.tf-navitem {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 16px;
  font: 600 15px Inter; color: hsl(var(--foreground) / .9);
}
.tf-navitem .tf-ic { width: 22px; height: 22px; flex: none; }
.tf-navitem:hover { background: hsl(var(--primary) / .08); color: hsl(var(--primary)); }
.tf-navitem.active { color: hsl(var(--primary)); }
.tf-navitem.active::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: hsl(var(--primary)); }
.tf-rail.collapsed .tf-navitem { justify-content: center; padding: 0; }
.tf-rail.collapsed .tf-navitem .lbl,
.tf-rail.collapsed .tf-navgroup > .tf-navitem .chev { display: none; }
.tf-navitem .chev { margin-left: auto; color: hsl(var(--muted-foreground)); transition: transform .2s; }
.tf-navitem .chev.open { transform: rotate(90deg); }
.tf-navgroup.open > .tf-navitem { background: hsl(var(--muted) / .6); color: hsl(var(--primary)); }
.tf-subnav { display: flex; flex-direction: column; gap: 2px; margin-left: 27px; border-left: 1px solid hsl(var(--muted-foreground) / .3); padding: 4px 0 6px 8px; }
.tf-sublink { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 8px; font: 500 14px Inter; color: hsl(var(--foreground) / .8); }
.tf-sublink .tf-ic { width: 18px; height: 18px; opacity: .7; flex: none; }
.tf-sublink:hover { background: hsl(var(--accent)); color: hsl(var(--primary)); }
.tf-sublink.active { background: hsl(var(--accent)); font-weight: 600; color: hsl(var(--primary)); }
.tf-rail .sep { margin-top: auto; border-top: 1px solid hsl(var(--border)); padding-top: 8px; }

/* ----------------------------------------------------------------------------
   5. PAGE HEADER + TYPOGRAPHY
---------------------------------------------------------------------------- */
.tf-pagehd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tf-h1 { font: 800 28px Inter; letter-spacing: -.7px; color: hsl(var(--foreground)); }
.tf-h1-sub { font: 500 14px Inter; color: hsl(var(--muted-foreground)); margin-top: 5px; max-width: 640px; line-height: 1.5; }
.tf-eyebrow { font: 600 11px Inter; letter-spacing: .5px; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.tf-title { font: 700 17px Inter; letter-spacing: -.3px; color: hsl(var(--foreground)); }
.tf-strong { font: 600 15px Inter; color: hsl(var(--foreground)); }
.tf-text { font: 500 14px Inter; color: hsl(var(--foreground) / .82); }
.tf-meta { font: 500 12.5px Inter; color: hsl(var(--muted-foreground)); }
.tf-mut { color: hsl(var(--muted-foreground)); }
.tf-crumb { display: flex; align-items: center; gap: 8px; font: 500 13px Inter; color: hsl(var(--muted-foreground)); }
.tf-crumb .tf-ic { width: 14px; height: 14px; }
.tf-crumb .here { color: hsl(var(--foreground)); font-weight: 600; }

/* ----------------------------------------------------------------------------
   6. CARD + SECTION
---------------------------------------------------------------------------- */
.tf-card { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.tf-card.p { padding: 20px; }
.tf-card.pad { padding: 16px 20px; }
.tf-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); }
.tf-card-hd .tf-title { font-size: 15px; }
.tf-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tf-divider { height: 1px; background: hsl(var(--border)); border: 0; margin: 0; }
.tf-grid { display: grid; gap: 20px; }
.tf-grid.c1 { grid-template-columns: 1fr; }
.tf-grid.c2 { grid-template-columns: 1fr 1fr; }
.tf-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.tf-grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* mini month-day cells (coaching slot picker etc.; shared so bands don't inline) */
.tf-day { padding: 8px 0; border-radius: 8px; font: 600 13px Inter; color: hsl(var(--foreground)); cursor: pointer; }
.tf-day.mut { color: hsl(var(--muted-foreground)); opacity: .5; }
.tf-day.sel { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tf-cell-off { }

/* ----------------------------------------------------------------------------
   7. STAT CARD  (label · value · delta)
---------------------------------------------------------------------------- */
.tf-stat { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px 20px; }
.tf-stat .lbl { font: 500 13px Inter; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 7px; }
.tf-stat .val { font: 700 28px Inter; letter-spacing: -.7px; color: hsl(var(--foreground)); margin-top: 8px; line-height: 1.05; }
.tf-stat.hero .val { font-size: 36px; letter-spacing: -1.1px; }
.tf-delta { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px Inter; margin-top: 9px; }
.tf-delta .cap { color: hsl(var(--muted-foreground)); font-weight: 500; }
.tf-up { color: hsl(var(--success-deep)); }
.tf-down { color: hsl(var(--destructive-deep)); }

/* ----------------------------------------------------------------------------
   8. LIST ROW  (leading · title/subtitle · trailing)
---------------------------------------------------------------------------- */
.tf-list { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.tf-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.tf-row + .tf-row { border-top: 1px solid hsl(var(--border)); }
.tf-row .lead { flex: none; }
.tf-row .t { font: 600 14.5px Inter; color: hsl(var(--foreground)); letter-spacing: -.1px; }
.tf-row .s { font: 500 12.5px Inter; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.tf-row .trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tf-row .trail .v { font: 600 14px Inter; color: hsl(var(--foreground)); }
.tf-row .trail .m { font: 500 12px Inter; color: hsl(var(--muted-foreground)); }
.tf-row.unread { background: hsl(var(--primary) / .05); }
.tf-row .chev { color: hsl(var(--muted-foreground)); flex: none; }
.tf-row:hover { background: hsl(var(--muted) / .5); }

/* leading icon tile */
.tf-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.tf-ico .tf-ic { width: 20px; height: 20px; }
.tf-ico.neutral { background: hsl(var(--muted)); color: hsl(var(--foreground) / .7); }
.tf-ico.primary { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.tf-ico.success { background: hsl(var(--success) / .12); color: hsl(var(--success-deep)); }
.tf-ico.warning { background: hsl(var(--warning) / .12); color: hsl(var(--warning-deep)); }
.tf-ico.danger  { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive-deep)); }
.tf-ico.info    { background: hsl(var(--info) / .12); color: hsl(var(--info-deep)); }

/* ----------------------------------------------------------------------------
   9. DATA TABLE  (the admin's primary list surface)
---------------------------------------------------------------------------- */
.tf-tablewrap { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.tf-table { width: 100%; border-collapse: collapse; }
.tf-table thead th {
  text-align: left; font: 600 12px Inter; letter-spacing: .2px; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .4);
  white-space: nowrap;
}
.tf-table thead th.num, .tf-table td.num { text-align: right; }
.tf-table tbody td { padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); font: 500 14px Inter; color: hsl(var(--foreground)); vertical-align: middle; }
.tf-table tbody tr:last-child td { border-bottom: 0; }
.tf-table tbody tr:hover { background: hsl(var(--muted) / .45); }
.tf-table .cellsub { font: 500 12.5px Inter; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.tf-table .cellmain { display: flex; align-items: center; gap: 12px; }
.tf-table td.actions { text-align: right; white-space: nowrap; }
.tf-checkcol { width: 44px; }

/* toolbar above a table / list */
.tf-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tf-toolbar .spacer { flex: 1 1 auto; }

/* pagination footer */
.tf-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid hsl(var(--border)); font: 500 13px Inter; color: hsl(var(--muted-foreground)); }
.tf-pgbtns { display: flex; gap: 6px; }

/* ----------------------------------------------------------------------------
   10. AVATAR
---------------------------------------------------------------------------- */
.tf-av { border-radius: 50%; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); display: inline-flex; align-items: center; justify-content: center; font: 600 13px Inter; flex: none; overflow: hidden; }
.tf-av.s24 { width: 24px; height: 24px; font-size: 10px; }
.tf-av.s32 { width: 32px; height: 32px; font-size: 12px; }
.tf-av.s40 { width: 40px; height: 40px; font-size: 14px; }
.tf-av.s48 { width: 48px; height: 48px; font-size: 16px; }
.tf-av.s64 { width: 64px; height: 64px; font-size: 22px; }
.tf-av.sq { border-radius: 10px; }

/* ----------------------------------------------------------------------------
   11. PILLS / BADGES / CHIPS / TAGS  (shadcn Badge + StatusBadge vocabulary)
---------------------------------------------------------------------------- */
.tf-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 600 12px Inter; letter-spacing: .1px; }
.tf-pill .tf-ic { width: 13px; height: 13px; }
.tf-pill.success { background: hsl(var(--success) / .12); color: hsl(var(--success-deep)); }
.tf-pill.warning { background: hsl(var(--warning) / .12); color: hsl(var(--warning-deep)); }
.tf-pill.danger  { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive-deep)); }
.tf-pill.info    { background: hsl(var(--info) / .12); color: hsl(var(--info-deep)); }
.tf-pill.primary { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.tf-pill.neutral { background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); }
.tf-pill.solid   { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tf-pill.dotlead::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tf-pill.outline { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground) / .72); }

.tf-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 6px; border: 1px solid hsl(var(--border)); font: 600 12px Inter; color: hsl(var(--foreground) / .72); background: hsl(var(--background)); }
.tf-tag.solid { background: hsl(var(--muted)); border-color: transparent; }

/* SLA chip (support) */
.tf-sla { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 7px; font: 700 12px Inter; }
.tf-sla.ok { background: hsl(var(--muted)); color: hsl(var(--foreground) / .72); }
.tf-sla.warn { background: hsl(var(--warning) / .12); color: hsl(var(--warning-deep)); }
.tf-sla.over { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive-deep)); }

/* filter chips */
.tf-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--background)); font: 600 13px Inter; color: hsl(var(--foreground) / .72); white-space: nowrap; }
.tf-chip .ct { color: hsl(var(--muted-foreground)); font-weight: 700; }
.tf-chip.active { background: hsl(var(--primary)); border-color: transparent; color: hsl(var(--primary-foreground)); }
.tf-chip.active .ct { color: hsl(var(--primary-foreground) / .8); }

/* ----------------------------------------------------------------------------
   12. BUTTONS  (shadcn Button variants: default/secondary/outline/destructive/ghost/link)
---------------------------------------------------------------------------- */
.tf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius); border: 1px solid transparent; font: 600 14px Inter; letter-spacing: -.1px; cursor: default; white-space: nowrap; }
.tf-btn .tf-ic { width: 17px; height: 17px; }
.tf-btn.block { width: 100%; }
.tf-btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.tf-btn.lg { height: 46px; font-size: 15px; padding: 0 20px; }
.tf-btn.icon { width: 40px; padding: 0; }
.tf-btn.primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.tf-btn.secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.tf-btn.outline { background: hsl(var(--background)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.tf-btn.ghost { background: transparent; color: hsl(var(--foreground)); }
.tf-btn.link { background: transparent; color: hsl(var(--primary)); height: auto; padding: 0; }
.tf-btn.destructive { background: hsl(var(--destructive-solid)); color: hsl(var(--destructive-foreground)); }
.tf-btn.dangeroutline { background: transparent; border-color: hsl(var(--destructive) / .45); color: hsl(var(--destructive-deep)); }
.tf-btn[disabled], .tf-btn.disabled { opacity: .5; }
/* AI-gradient CTA ("... ile Oluştur") — the app's violet→fuchsia AI action */
.tf-btn.ai { background: linear-gradient(90deg, hsl(266 85% 58%), hsl(291 85% 55%)); color: #fff; border-color: transparent; }

/* ----------------------------------------------------------------------------
   13. FIELDS / INPUTS / SEARCH / SELECT / OTP
---------------------------------------------------------------------------- */
.tf-fieldlbl { font: 600 13px Inter; color: hsl(var(--foreground)); margin-bottom: 7px; display: block; }
.tf-input { height: 40px; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); padding: 0 12px; font: 500 14px Inter; color: hsl(var(--foreground)); display: flex; align-items: center; gap: 8px; }
.tf-input .ph { color: hsl(var(--muted-foreground)); }
.tf-input .suffix { margin-left: auto; color: hsl(var(--muted-foreground)); }
.tf-input .tf-ic { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
.tf-input.focus { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }
.tf-input.error { border-color: hsl(var(--destructive)); }
.tf-input.select { justify-content: space-between; }
.tf-help { font: 500 12.5px Inter; color: hsl(var(--muted-foreground)); margin-top: 7px; }
.tf-help.error { color: hsl(var(--destructive-deep)); }
.tf-textarea { min-height: 92px; width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); padding: 10px 12px; font: 500 14px Inter; color: hsl(var(--foreground)); }
.tf-search { display: flex; align-items: center; gap: 9px; height: 40px; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); padding: 0 12px; color: hsl(var(--muted-foreground)); font: 500 14px Inter; min-width: 240px; }
.tf-search .tf-ic { width: 16px; height: 16px; }
.tf-otp { display: flex; gap: 9px; }
.tf-otp .cell { width: 46px; height: 54px; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); display: flex; align-items: center; justify-content: center; font: 700 24px Inter; color: hsl(var(--foreground)); }
.tf-otp .cell.on { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }

/* ----------------------------------------------------------------------------
   14. SWITCH ROW / SETTINGS CONTROLS
---------------------------------------------------------------------------- */
.tf-srow { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: hsl(var(--background)); }
.tf-srow + .tf-srow { border-top: 1px solid hsl(var(--border)); }
.tf-srow .t { font: 600 14.5px Inter; color: hsl(var(--foreground)); }
.tf-srow .s { font: 500 12.5px Inter; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.tf-switch { width: 42px; height: 24px; border-radius: 999px; background: hsl(var(--border)); position: relative; flex: none; }
.tf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.tf-switch.on { background: hsl(var(--primary)); }
.tf-switch.on::after { left: 20px; }
.tf-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid hsl(var(--border)); flex: none; }
.tf-radio.on { border-color: hsl(var(--primary)); }
.tf-radio.on::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--primary)); margin: 3px; }
.tf-check { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid hsl(var(--border)); flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tf-check.on { background: hsl(var(--primary)); border-color: transparent; }
.tf-check .tf-ic { width: 14px; height: 14px; stroke-width: 3; }

/* segmented control */
.tf-seg { display: inline-flex; padding: 3px; background: hsl(var(--muted)); border-radius: var(--radius); gap: 2px; }
.tf-seg .opt { text-align: center; padding: 6px 14px; border-radius: calc(var(--radius) - 2px); font: 600 13px Inter; color: hsl(var(--muted-foreground)); }
.tf-seg .opt.active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(222 84% 4.9% / .1); }

/* underline tabs */
.tf-tabs { display: flex; gap: 24px; border-bottom: 1px solid hsl(var(--border)); }
.tf-tabs .tab { padding: 12px 0; font: 600 14px Inter; color: hsl(var(--muted-foreground)); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.tf-tabs .tab.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); }
.tf-tabs .tab .ct { font-size: 12px; color: hsl(var(--muted-foreground)); }

/* ----------------------------------------------------------------------------
   15. MODAL DIALOG / DROPDOWN MENU  (desktop overlays — centered, not sheets)
---------------------------------------------------------------------------- */
.tf-modalwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; }
.tf-overlay { position: absolute; inset: 0; background: hsl(222 84% 4.9% / .5); }
.tf-modal { position: relative; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 12px; box-shadow: 0 24px 60px -20px hsl(222 84% 4.9% / .4); width: 520px; max-width: 100%; overflow: hidden; }
.tf-modal-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 12px; }
.tf-modal-hd .mt { font: 700 18px Inter; color: hsl(var(--foreground)); letter-spacing: -.3px; }
.tf-modal-hd .ms { font: 500 13.5px Inter; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.tf-modal-bd { padding: 4px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.tf-modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; }
.tf-menu { position: absolute; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 10px; box-shadow: 0 12px 32px -12px hsl(222 84% 4.9% / .35); padding: 6px; min-width: 200px; }
.tf-menu .mi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font: 500 14px Inter; color: hsl(var(--foreground)); }
.tf-menu .mi:hover { background: hsl(var(--accent)); }
.tf-menu .mi.danger { color: hsl(var(--destructive-deep)); }
.tf-menu .mi .tf-ic { width: 16px; height: 16px; color: hsl(var(--muted-foreground)); }
.tf-menu .msep { height: 1px; background: hsl(var(--border)); margin: 6px 4px; }

/* ----------------------------------------------------------------------------
   16. TOAST / BANNER
---------------------------------------------------------------------------- */
.tf-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; color: #fff; font: 600 14px Inter; box-shadow: 0 10px 30px -12px hsl(222 84% 4.9% / .4); }
.tf-toast .act { margin-left: auto; font: 700 13px Inter; opacity: .9; text-decoration: underline; }
.tf-toast.success { background: hsl(var(--success-solid)); }
.tf-toast.danger { background: hsl(var(--destructive-solid)); }
.tf-toast.neutral { background: #1F2937; }
.tf-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font: 500 13.5px Inter; }
.tf-banner.info { background: hsl(var(--info) / .1); color: hsl(var(--info-deep)); border: 1px solid hsl(var(--info) / .25); }
.tf-banner.warning { background: hsl(var(--warning) / .1); color: hsl(var(--warning-deep)); border: 1px solid hsl(var(--warning) / .25); }
.tf-banner.danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive-deep)); border: 1px solid hsl(var(--destructive) / .25); }

/* ----------------------------------------------------------------------------
   17. SKELETON / EMPTY / ERROR / PERMISSION
---------------------------------------------------------------------------- */
@keyframes tfpulse { 0%,100%{opacity:.65} 50%{opacity:1} }
.tf-skel { background: hsl(var(--muted)); border-radius: 6px; animation: tfpulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tf-skel { animation: none; opacity: .85; } }
.tf-skel.line { height: 12px; }
.tf-skel.circle { border-radius: 50%; }
.tf-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 64px 26px; }
.tf-state .ic { width: 60px; height: 60px; border-radius: 16px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); display: flex; align-items: center; justify-content: center; }
.tf-state .ic .tf-ic { width: 28px; height: 28px; }
.tf-state .h { font: 700 17px Inter; color: hsl(var(--foreground)); }
.tf-state .p { font: 500 14px Inter; color: hsl(var(--muted-foreground)); max-width: 340px; line-height: 1.5; }

/* ----------------------------------------------------------------------------
   18. CHAT (support / community)
---------------------------------------------------------------------------- */
.tf-thread { display: flex; flex-direction: column; gap: 12px; padding: 8px 4px; }
.tf-msg { max-width: 70%; padding: 10px 13px; border-radius: 14px; font: 500 14px Inter; line-height: 1.45; }
.tf-msg.in { align-self: flex-start; background: hsl(var(--muted)); color: hsl(var(--foreground)); border-bottom-left-radius: 5px; }
.tf-msg.out { align-self: flex-end; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-bottom-right-radius: 5px; }
.tf-msg .time { display: block; font: 500 10.5px Inter; margin-top: 4px; opacity: .7; }
.tf-note { background: hsl(var(--warning) / .12); border: 1px solid hsl(var(--warning) / .3); color: hsl(var(--warning-deep)); border-radius: 12px; padding: 10px 12px; font: 500 13px Inter; }
.tf-sysline { align-self: center; font: 500 11.5px Inter; color: hsl(var(--muted-foreground)); padding: 2px 0; }
.tf-composer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.tf-composer .box { flex: 1; height: 40px; border-radius: 20px; background: hsl(var(--muted)); padding: 0 14px; display: flex; align-items: center; font: 500 14px Inter; color: hsl(var(--muted-foreground)); }

/* ----------------------------------------------------------------------------
   19. CHART PRIMITIVES  (inline SVG per screen; these are containers)
---------------------------------------------------------------------------- */
.tf-chart { width: 100%; }
.tf-chart svg { width: 100%; display: block; }
.tf-axis { display: flex; justify-content: space-between; font: 500 11px Inter; color: hsl(var(--muted-foreground)); margin-top: 8px; }
.tf-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.tf-legend .it { display: flex; align-items: center; gap: 6px; font: 500 12px Inter; color: hsl(var(--muted-foreground)); }
.tf-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.tf-bar { display: flex; align-items: center; gap: 12px; }
.tf-bar .track { flex: 1; height: 8px; border-radius: 4px; background: hsl(var(--muted)); overflow: hidden; }
.tf-bar .fill { height: 100%; border-radius: 4px; background: hsl(var(--primary)); }

/* ----------------------------------------------------------------------------
   20. ICONS
---------------------------------------------------------------------------- */
.tf-ic { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.tf-ic.fill { fill: currentColor; stroke: none; }

/* ----------------------------------------------------------------------------
   21. CANVAS LAYOUT  (banded flow — titles + wrapping rows of frames)
---------------------------------------------------------------------------- */
.dc-page { background: #ECEEF1; padding: 44px 52px 90px; min-height: 100vh; }
.dc-band { margin: 0 0 64px; }
.dc-band > .bt { font: 800 22px Inter; color: #0B0E14; letter-spacing: -.5px; margin: 0 0 5px; }
.dc-band > .bd { font: 500 14px Inter; color: #5A6B82; margin: 0 0 26px; max-width: 860px; line-height: 1.55; }
.dc-row { display: flex; flex-wrap: wrap; gap: 48px 44px; align-items: flex-start; }
.dc-cap { font: 600 12.5px Inter; color: #5A6B82; margin: 0 0 12px; }
.dc-fig { display: flex; flex-direction: column; }
.dc-note { font: 500 12.5px Inter; color: #64748B; margin-top: 10px; max-width: 460px; line-height: 1.5; }
.dc-hr { height: 1px; background: #D8DBDF; border: 0; margin: 0 0 48px; }

/* utility spacing helpers used inline across bands */
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.wrap{flex-wrap:wrap}

/* ----------------------------------------------------------------------------
   22. CURRENT vs PLANNED  (provenance markers — what ships today vs what the
       team will build later). Badges live on the light canvas page, so a single
       light palette works for both light and org-dark frames.
---------------------------------------------------------------------------- */
/* Inline status pill — used in canvas headers, band titles, index cards. */
.dc-badge { display:inline-flex; align-items:center; gap:5px; font:800 11px Inter; letter-spacing:.4px; text-transform:uppercase; padding:3px 10px; border-radius:999px; vertical-align:middle; white-space:nowrap; }
.dc-badge svg { width:12px; height:12px; }
.dc-badge.current { background:#E7F3EC; color:#137A43; border:1px solid #BCE3CB; }
.dc-badge.planned { background:#FFF3DE; color:#96610A; border:1px solid #F2D69A; }
.dc-badge.wip     { background:#E9EEFF; color:#3A46C9; border:1px solid #C6D0FA; }

/* Whole-band "planned" treatment: amber rail + corner ribbon on the band title.
   Add `is-planned` to a band root:  <div class="dc-band is-planned"> … </div> */
.dc-band.is-planned { position:relative; border-left:4px solid #E8A93B; border-radius:0 10px 10px 0; padding:16px 0 4px 20px; margin-left:-4px; background:linear-gradient(90deg,#FFFBF2 0%,rgba(255,251,242,0) 340px); }
.dc-band.is-planned > .bt::after { content:"PLANLANAN"; margin-left:12px; font:800 11px Inter; letter-spacing:.4px; color:#96610A; background:#FFF3DE; border:1px solid #F2D69A; border-radius:999px; padding:3px 10px; vertical-align:middle; }
.dc-band.is-current > .bt::after { content:"MEVCUT"; margin-left:12px; font:800 11px Inter; letter-spacing:.4px; color:#137A43; background:#E7F3EC; border:1px solid #BCE3CB; border-radius:999px; padding:3px 10px; vertical-align:middle; }

/* Per-frame provenance tag (sits under a .dc-cap for a single planned frame in
   an otherwise-current band). */
.dc-fig .dc-cap .tag-new { display:inline-block; margin-left:8px; font:800 10px Inter; letter-spacing:.3px; color:#96610A; background:#FFF3DE; border:1px solid #F2D69A; border-radius:6px; padding:1px 6px; text-transform:uppercase; }
.dc-fig .dc-cap .tag-cur { display:inline-block; margin-left:8px; font:800 10px Inter; letter-spacing:.3px; color:#137A43; background:#E7F3EC; border:1px solid #BCE3CB; border-radius:6px; padding:1px 6px; text-transform:uppercase; }

/* Provenance legend block — dropped at the top of every canvas by the assembler. */
.dc-legend { display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:#fff; border:1px solid #E4E7EC; border-radius:12px; padding:12px 18px; margin:0 0 40px; }
.dc-legend .lg { display:flex; align-items:center; gap:8px; font:600 13px Inter; color:#3A4658; }
.dc-legend .lg .dc-badge { font-size:10px; }
.dc-legend .sep { width:1px; height:22px; background:#E4E7EC; }
.dc-legend .hint { font:500 12.5px Inter; color:#7A8699; }