/* ============================================================
   COTA UI theme — interpolated from .dev/UI-Change/ui-prototype1.html
   Loaded AFTER main.css: overrides the compiled DaisyUI theme
   variables (OKLCH triplets) and layers component polish on top.
   No Tailwind rebuild needed.
   ============================================================ */

/* ---- Palette -------------------------------------------------
   Light-first modern SaaS look: soft gray canvas, white cards,
   indigo primary, quiet borders. The app renders pages on
   base-100 and cards on base-200, so base-200 is set LIGHTER
   (white) than the canvas — deliberate. */

[data-theme=light] {
  color-scheme: light;
  --p: 58.54% 0.196 277.1;        /* indigo #6366f1 */
  --pf: 51.1% 0.21 276.9;         /* indigo-600 */
  --pc: 100% 0 0;
  --s: 71.7% 0.13 215;            /* cyan accent */
  --sc: 100% 0 0;
  --a: 79.2% 0.15 165;            /* mint */
  --ac: 26% 0.02 262;
  --n: 27.8% 0.03 256.8;          /* slate-800 */
  --nc: 98% 0.002 247;
  --b1: 97.6% 0.004 252;          /* canvas #f5f6f8 */
  --b2: 100% 0 0;                 /* cards: white */
  --b3: 92.8% 0.006 264.5;        /* borders #e5e7eb */
  --bc: 27.8% 0.03 256.8;         /* text: slate-800 */
  --in: 62.3% 0.214 259.8;        /* blue-500 */
  --inc: 100% 0 0;
  --su: 69.6% 0.17 162.5;         /* emerald-500 */
  --suc: 100% 0 0;
  --wa: 76.9% 0.188 70.1;         /* amber-500 */
  --wac: 26% 0.02 262;
  --er: 63.7% 0.237 25.3;         /* red-500 */
  --erc: 100% 0 0;
  --rounded-box: 0.9rem;
  --rounded-btn: 0.55rem;
  --rounded-badge: 1.9rem;
}

[data-theme=dark] {
  color-scheme: dark;
  --p: 62% 0.19 277;              /* indigo, slightly lifted for dark */
  --pf: 55% 0.2 277;
  --pc: 100% 0 0;
  --s: 71.7% 0.13 215;
  --sc: 16% 0.014 262;
  --a: 79.2% 0.15 165;
  --ac: 16% 0.014 262;
  --n: 87% 0.008 255;
  --nc: 20% 0.015 262;
  --b1: 17.5% 0.012 264;          /* canvas #0f1218 */
  --b2: 21.5% 0.015 262;          /* cards #161b24 */
  --b3: 28% 0.02 262;             /* borders #232a37 */
  --bc: 88.5% 0.008 255;          /* text #d7dce4 */
  --in: 62.3% 0.214 259.8;
  --inc: 100% 0 0;
  --su: 69.6% 0.17 162.5;
  --suc: 16% 0.014 262;
  --wa: 76.9% 0.188 70.1;
  --wac: 16% 0.014 262;
  --er: 63.7% 0.237 25.3;
  --erc: 100% 0 0;
  --rounded-box: 0.9rem;
  --rounded-btn: 0.55rem;
  --rounded-badge: 1.9rem;
}

/* ---- Typography ---------------------------------------------- */

html, body {
  font-family: "Inter", "InterVariable", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv11";
  letter-spacing: -0.006em;
}

h1, h2, h3, .card-title {
  letter-spacing: -0.02em;
}

/* eyebrow labels (prototype: small caps section kickers) */
.eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: oklch(var(--bc) / 0.45);
}

/* ---- Cards ---------------------------------------------------- */

.card {
  border-radius: var(--rounded-box);
}

/* pages mostly build cards as bg-base-200 + border-base-300; give them
   the prototype's soft elevation */
.card.bg-base-200,
.card.bg-base-100 {
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05), 0 1px 3px oklch(0% 0 0 / 0.04);
}

/* ---- Tables ---------------------------------------------------- */

.table thead tr th,
.table thead tr:first-child th {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(var(--bc) / 0.5);
}

.table tbody tr:hover {
  background: oklch(var(--bc) / 0.03);
}

/* ---- Buttons & inputs ------------------------------------------ */

.btn {
  font-weight: 600;
  text-transform: none;
}

.btn-primary {
  box-shadow: 0 1px 2px oklch(var(--p) / 0.35);
}

.input:focus, .select:focus, .textarea:focus, .input:focus-within {
  outline: 2px solid oklch(var(--p) / 0.35);
  outline-offset: 1px;
}

/* ---- Status pills (prototype vocabulary, usable anywhere) ------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: oklch(var(--bc) / 0.07);
}
.pill.success, .status.implemented { background: oklch(var(--su) / 0.14); color: oklch(var(--su)); }
.pill.blue, .status.in-progress { background: oklch(var(--in) / 0.13); color: oklch(var(--in)); }
.pill.warn { background: oklch(var(--wa) / 0.16); color: oklch(var(--wa)); }
.pill.danger, .status.not-started { background: oklch(var(--bc) / 0.08); color: oklch(var(--bc) / 0.6); }

/* framework roundels (prototype "Your standards" table) */
.roundel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: oklch(var(--in));
  background: oklch(var(--in) / 0.12);
  flex: none;
}
.roundel.purple { color: oklch(var(--p)); background: oklch(var(--p) / 0.12); }
.roundel.green { color: oklch(var(--su)); background: oklch(var(--su) / 0.13); }
.roundel.amber { color: oklch(var(--wa)); background: oklch(var(--wa) / 0.15); }

/* thin progress tracks (prototype metric cards) */
.progress-track {
  height: 6px;
  border-radius: 999px;
  background: oklch(var(--bc) / 0.08);
  overflow: hidden;
}
.progress-track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: oklch(var(--p));
}
.progress-track.green-track > span { background: oklch(var(--su)); }
.progress-track.amber-track > span { background: oklch(var(--wa)); }
.progress-track.red-track > span { background: oklch(var(--er)); }

/* ---- Shell: sidebar -------------------------------------------- */

.cota-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: white;
  background: linear-gradient(135deg, oklch(var(--p)), oklch(62% 0.21 300));
  box-shadow: 0 2px 6px oklch(var(--p) / 0.35);
}

.cota-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: oklch(var(--bc) / 0.72);
  transition: background 0.12s ease, color 0.12s ease;
}
.cota-nav-item:hover {
  background: oklch(var(--bc) / 0.06);
  color: oklch(var(--bc));
}
.cota-nav-item.is-active {
  background: oklch(var(--p) / 0.11);
  color: oklch(var(--p));
  font-weight: 600;
}
.cota-nav-item .ti {
  font-size: 1.15rem;
}

.cota-side-card {
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b2));
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.cota-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.14);
  flex: none;
}

/* ---- Shell: topbar ---------------------------------------------- */

.cota-topbar {
  backdrop-filter: blur(8px);
  background: oklch(var(--b1) / 0.85);
}

.cota-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.6rem;
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b2));
  color: oklch(var(--bc) / 0.7);
  transition: color 0.12s ease, border-color 0.12s ease;
}
.cota-icon-btn:hover {
  color: oklch(var(--bc));
  border-color: oklch(var(--bc) / 0.25);
}

/* ---- Scrollbars -------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.18) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: oklch(var(--bc) / 0.18);
  border-radius: 999px;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Small refinements ------------------------------------------- */

/* page header title (block page_header in the layout) */
#main h1.text-2xl { font-weight: 700; }

/* drawer + modal surfaces pick up card borders */
.modal-box { border: 1px solid oklch(var(--b3)); }

/* dropdown menus */
.dropdown-content { border: 1px solid oklch(var(--b3)); }