/* ============================================================================
 * AURA design system — shadcn-style HSL tokens (shared across all aura-* apps).
 * Gold (#c9a84c) primary on near-black (#07090d); dark by DEFAULT (the <html>
 * ships class="dark"), light theme via the toggle (removes .dark). Same
 * architecture as graylin (darkMode:'class', hsl(var(--token)) in tailwind).
 * ========================================================================== */

/* LIGHT (base) — applies when .dark is absent */
:root {
  --background: 210 30% 98%;
  --foreground: 220 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 220 25% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 12%;
  --primary: 42 58% 44%;                 /* gold, darkened for contrast on light */
  --primary-foreground: 40 60% 97%;
  --secondary: 210 20% 94%;
  --secondary-foreground: 220 25% 18%;
  --muted: 210 20% 94%;
  --muted-foreground: 215 16% 42%;
  --accent: 172 60% 38%;                 /* teal */
  --accent-foreground: 220 25% 12%;      /* dark — black-ish text reads on the light-green accent */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 20% 88%;
  --input: 214 20% 88%;
  --ring: 42 58% 44%;
  --radius: 0.5rem;

  /* status */
  --success: 142 71% 41%;                /* green  #22c55e */
  --warning: 43 90% 48%;                 /* amber  #fbbf24 */
  --danger: 0 74% 56%;                   /* red    #f87171 */

  /* entity / business-unit colours */
  --entity-xpi: 142 71% 45%;             /* XPI       green  #22c55e */
  --entity-xgrowth: 172 66% 50%;         /* X-Growth  teal   #2dd4bf */
  --entity-xcap: 255 92% 76%;            /* X-Cap     purple #a78bfa */
  --entity-academy: 25 95% 53%;          /* Academy   orange #f97316 */
  --entity-xe: 44 54% 54%;               /* XE        gold   #c9a84c */
}

/* DARK (default) — the aura palette from the design table */
.dark,
[data-theme="dark"] {
  --background: 220 33% 4%;              /* near-black #07090d */
  --foreground: 210 20% 92%;
  --card: 215 28% 7%;                    /* surface 1  #0d1117 */
  --card-foreground: 210 20% 92%;
  --popover: 213 26% 10%;                /* surface 2  #131920 */
  --popover-foreground: 210 20% 92%;
  --primary: 44 54% 54%;                 /* gold       #c9a84c */
  --primary-foreground: 220 33% 6%;
  --secondary: 213 26% 12%;
  --secondary-foreground: 210 20% 92%;
  --muted: 215 20% 14%;
  --muted-foreground: 215 14% 60%;
  --accent: 172 66% 50%;                 /* teal       #2dd4bf */
  --accent-foreground: 220 33% 6%;
  --destructive: 0 91% 71%;              /* red        #f87171 */
  --destructive-foreground: 220 33% 6%;
  --border: 215 20% 16%;
  --input: 215 20% 16%;
  --ring: 44 54% 54%;

  --success: 142 71% 45%;
  --warning: 43 96% 56%;
  --danger: 0 91% 71%;

  --entity-xpi: 142 71% 45%;
  --entity-xgrowth: 172 66% 50%;
  --entity-xcap: 255 92% 76%;
  --entity-academy: 25 95% 53%;
  --entity-xe: 44 54% 54%;
}

/* base surface so even un-tokenised pages get the right backdrop */
html { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
}

/* Themed scrollbars — track transparent, thumb on the border token, hover on
   muted-foreground. Both tokens flip with `.dark`, so scrollbars follow the
   active theme (the bright default bars over the dark UI are killed). */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* Readable foreground on the teal/green accent everywhere it's used: the
   waltzing-ui components apply `bg-accent` (selected day, today, month/year
   hover, the days-view icon) WITHOUT `text-accent-foreground`, so the text/icon
   would inherit the light popover colour — low contrast. Pin it to the dark
   accent-foreground (owner: "light-green background → black foreground"). */
.bg-accent,
.hover\:bg-accent:hover,
.focus\:bg-accent:focus {
  color: hsl(var(--accent-foreground));
}

/* ============================================================================
 * The standard data table — `.aura-table` (see specs/cms-admin-ui.md §19).
 * ONE table look across every aura admin (cms + cdp). Non-uppercase muted
 * headers, row dividers, a soft-green hover, and a soft-green + left-bar
 * SELECTED row. Defined identically in aura-cdp's inline CSS — keep them in sync.
 * ========================================================================== */
.aura-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.aura-table thead th {
  text-align: left;
  font-weight: 500;
  text-transform: none;            /* headers are NEVER uppercased */
  color: hsl(var(--muted-foreground));
  padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
.aura-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid hsl(var(--border));
}
.aura-table tbody tr:last-child td { border-bottom: none; }
.aura-table tbody tr { transition: background-color .12s, box-shadow .12s; }
.aura-table tbody tr:hover { background-color: hsl(var(--success) / 0.06); }
/* the only selected-row highlight: soft green fill + a left accent bar */
.aura-table tbody tr.is-selected,
.aura-table tbody tr.is-selected:hover {
  background-color: hsl(var(--success) / 0.12);
  box-shadow: inset 3px 0 0 hsl(var(--success));
}

/* Outline status pill — never filled. Bare = muted; modifier = semantic colour. */
.aura-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.aura-pill.ok     { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.4); }
.aura-pill.warn   { color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.4); }
.aura-pill.danger { color: hsl(var(--danger));  border-color: hsl(var(--danger) / 0.4); }
.aura-pill.info   { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.45); }

/* Initial avatar in a rounded square — leads a primary identity cell. */
.aura-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 8px; font-weight: 700;
  color: hsl(var(--primary));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
}
.aura-avatar.lg { width: 56px; height: 56px; border-radius: 10px; font-size: 18px; }

/* view-edit-mode: prebuilt-Tailwind gap-fill */
.min-h-8 { min-height: 2rem; }

/* Prebuilt-Tailwind gap-fill — the .5 spacing step and px-5 are absent from the
   prebuilt build, so every use rendered with NO padding/margin (pills and small
   buttons sat flush against their borders). px-2.5 alone is used in ~54 places. */
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }