/*
 * theme.css — YogKulam Ops design values. Calm, dense, ledger-like:
 * a deep sage green brand on near-white, built for long working sessions.
 */

:root {
  --canvas: #f5f7f4;
  --surface: #ffffff;
  --surface-2: #edf1ec;
  --border: #dde3dc;
  --border-strong: #b4bfb3;
  --ink: #16201a;
  --muted: #56625a;
  --accent: #1f5c45;
  --accent-hover: #184b38;
  --accent-ink: #ffffff;
  --accent-text: #1d5741;
  --accent-strong: #163f30;
  --accent-soft: #e2eee7;
  --accent-border: #b3d0c0;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfefe4;
  --success-strong: #116a33;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eadc;
  --warning-strong: #8f4207;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f6e1e1;
  --danger-strong: #9b1818;
  --chart-1: #1f5c45;
  --chart-2: #b45309;
  --chart-3: #5152a5;
  --chart-4: #0b5668;
  --chart-5: #7c285c;
  --chart-6: #425605;

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.015em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-input: 8px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] {
  --canvas: #101613;
  --surface: #171f1b;
  --surface-2: #1e2823;
  --border: #2a352f;
  --border-strong: #46534b;
  --ink: #edf2ee;
  --muted: #9ba89f;
  --accent: #5fbf93;
  --accent-hover: #74cca3;
  --accent-ink: #0c1912;
  --accent-text: #72ca9f;
  --accent-strong: #93dbb7;
  --accent-soft: #1b3328;
  --accent-border: #2f5a46;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #62b07f;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #d79461;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #df8585;
  --chart-1: #5fbf93;
  --chart-2: #d79461;
  --chart-3: #9a9be0;
  --chart-4: #4fb3c9;
  --chart-5: #cb70a4;
  --chart-6: #a7b84a;
}

/* app.css — YogKulam Ops shell and the pieces no primitive covers. Tokens only. */

body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.icon-xs { width: 0.75rem; height: 0.75rem; }

/* ---- Shell: fixed sidebar on desktop, a bar with a fold-out menu on phones */
.app-shell { display: flex; min-height: 100vh; }
.app-side {
  display: none; position: sticky; top: 0; height: 100vh; width: 15.5rem; flex-shrink: 0;
  flex-direction: column; gap: 1rem; padding: 1.25rem 0.75rem;
  background: var(--surface); border-right: 1px solid var(--border);
}
@media (min-width: 64rem) { .app-side { display: flex; } }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px);
}
@media (min-width: 64rem) { .app-bar { padding: 0.625rem 2rem; } }
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.app-content { padding: 1.25rem 1rem 3rem; width: 100%; max-width: 92rem; }
@media (min-width: 64rem) { .app-content { padding: 1.75rem 2rem 4rem; } }

.brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.5rem; color: var(--ink); text-decoration: none; }
.brand strong { display: block; font-size: 0.9375rem; line-height: 1.1; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 0.75rem; color: var(--muted); }
.brand-mark {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 0.625rem;
  background: linear-gradient(140deg, var(--accent), var(--accent-hover)); color: var(--accent-ink);
  font-weight: 800; font-family: var(--font-display); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.app-nav { display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; flex: 1 1 auto; scrollbar-width: thin; }
.nav-group { display: flex; flex-direction: column; gap: 0.125rem; }
.nav-items { display: flex; flex-direction: column; gap: 0.125rem; padding-bottom: 0.375rem; }
.nav-label {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  padding: 0.5rem 0.625rem 0.25rem; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--muted);
}
.nav-label::-webkit-details-marker { display: none; }
.nav-label:hover { color: var(--ink); }
.nav-chev { width: 0.875rem; height: 0.875rem; transition: transform 160ms ease; }
details[open] > summary .nav-chev { transform: rotate(180deg); }
.nav-link {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: background-color 120ms ease, color 120ms ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-link .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.side-foot { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.875rem 0.5rem 0; border-top: 1px solid var(--border); }

.mobile-nav { position: relative; }
.mobile-nav > summary { list-style: none; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
@media (min-width: 64rem) { .mobile-nav { display: none; } }
.mobile-panel {
  position: absolute; left: 0; top: calc(100% + 0.5rem); width: min(18rem, calc(100vw - 2rem));
  max-height: 78vh; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}
.bar-search { position: relative; flex: 1 1 auto; max-width: 30rem; display: flex; align-items: center; }
.bar-search > .icon { position: absolute; left: 0.75rem; width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.bar-search .input { padding-left: 2.25rem; padding-right: 2rem; height: 2.25rem; font-size: 0.875rem; background: var(--surface-2); border-color: transparent; }
.bar-search .input:focus { background: var(--surface); }
.kbd {
  position: absolute; right: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 0.3rem; padding: 0 0.3rem; pointer-events: none;
}
@media (max-width: 40rem) { .kbd { display: none; } }

/* ---- Page head */
.page-head { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
@media (min-width: 40rem) { .page-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.page-actions { display: flex; flex-direction: column; gap: 0.5rem; }
@media (min-width: 40rem) { .page-actions { flex-direction: row; align-items: center; } }
.page-title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.25rem; }
.section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--muted); margin: 1.5rem 0 0.75rem; }

/* ---- Dashboard hero */
.hero {
  display: grid; gap: 1.25rem; align-items: end; padding: 1.5rem;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface));
}
@media (min-width: 48rem) { .hero { grid-template-columns: minmax(0, 1fr) auto; padding: 1.75rem 2rem; } }
.hero.card > * + * { margin-top: 0; }
.hero-title { font-family: var(--font-display); font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
@media (min-width: 48rem) { .hero-title { font-size: 2.25rem; } }
.hero-sub { margin-top: 0.5rem; color: var(--muted); max-width: 60ch; }
.hero-sub strong { color: var(--ink); }
.hero-net { display: flex; flex-direction: column; gap: 0.125rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--accent-soft); min-width: 12rem; }
.hero-net-value { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero-net-value.is-neg { color: var(--danger-strong); }

/* ---- KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 64rem) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; color: var(--ink); text-decoration: none; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.kpi.card > * + * { margin-top: 0; }
a.kpi:hover { border-color: var(--accent-border); transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kpi-icon { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; background: var(--surface-2); color: var(--muted); }
.kpi-icon .icon { width: 1rem; height: 1rem; }
.kpi-accent .kpi-icon { background: var(--accent-soft); color: var(--accent-strong); }
.kpi-warn .kpi-icon { background: var(--warning-soft); color: var(--warning-strong); }
.kpi-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--muted); }
.kpi-value { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 0.75rem; color: var(--muted); }

/* ---- Operations strip */
.op-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 48rem) { .op-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-tile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.625rem; background: var(--surface-2); color: var(--ink); text-decoration: none; transition: background-color 120ms ease; }
.op-tile:hover { background: var(--accent-soft); }
.op-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.5rem; background: var(--surface); color: var(--accent-text); }
.op-value { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.op-label { display: block; font-size: 0.75rem; color: var(--muted); }
.mini-list { display: flex; flex-direction: column; }
.mini-list > li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.mini-list > li:last-child { border-bottom: 0; }
.mini-list a { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-weight: 500; min-width: 0; }
.mini-list a:hover { color: var(--accent-text); }

/* ---- Filters, forms, inputs */
.filters { display: grid; gap: 0.75rem; padding: 0.875rem; }
@media (min-width: 48rem) { .filters { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: center; } }
.filters.card > * + * { margin-top: 0; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-grid > .field + .field { margin-top: 0; }
.input-sm { height: 2rem; font-size: 0.8125rem; padding-left: 0.5rem; padding-right: 0.5rem; }
select.input-sm { padding-right: 1.75rem; background-position: right 0.4rem center; }
.num-input { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.input-group .prefix { position: absolute; left: 0.75rem; color: var(--muted); font-size: 0.9375rem; pointer-events: none; }
.input-group .prefix ~ .input { padding-left: 1.75rem; }

.segmented { display: inline-flex; padding: 0.1875rem; border-radius: 0.625rem; background: var(--surface-2); gap: 0.125rem; }
.segmented a { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.125rem; padding: 0 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.segmented a.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* ---- Tables */
.row-link { cursor: pointer; }
.link-strong { font-weight: 600; color: var(--accent-text); text-decoration: none; }
.link-strong:hover { text-decoration: underline; }

/* ---- Pipeline (lead status counts) */
.pipeline { display: flex; flex-direction: column; gap: 0.75rem; }
.pipeline-row { display: flex; flex-direction: column; gap: 0.375rem; color: var(--ink); text-decoration: none; font-size: 0.875rem; }
.pipeline-row:hover { color: var(--accent-text); }
.pipeline-bar { appearance: none; width: 100%; height: 0.5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.pipeline-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.pipeline-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.pipeline-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* ---- Timelines */
.timeline { display: flex; flex-direction: column; gap: 0.875rem; }
.timeline > li { padding-left: 0.875rem; border-left: 2px solid var(--accent-border); display: flex; flex-direction: column; gap: 0.25rem; }

/* ---- Facts grid */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts.facts-1 { grid-template-columns: minmax(0, 1fr); }
.facts > div { min-width: 0; }
.facts dt { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.125rem; }
.facts dd { font-size: 0.9375rem; overflow-wrap: anywhere; }

/* ---- Age bands (pending fees) */
.bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; }
@media (min-width: 48rem) { .bands { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bands.card > * + * { margin-top: 0; }
.band { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; color: var(--ink); text-decoration: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band:hover { background: var(--surface-2); }
.band.is-active { background: var(--accent-soft); }
.band-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--muted); }
.band-value { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--danger-strong); font-variant-numeric: tabular-nums; }
.band-sub { font-size: 0.75rem; color: var(--muted); }

/* ---- Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0.625rem; overflow: hidden; }
.cal-head { background: var(--surface-2); padding: 0.375rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; color: var(--muted); text-align: center; }
.cal-cell { background: var(--surface); min-height: 5.5rem; padding: 0.375rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
@media (max-width: 40rem) { .cal-cell { min-height: 3.75rem; padding: 0.25rem; } }
.cal-cell.is-blank { background: var(--surface-2); }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.cal-add { opacity: 0; color: var(--muted); display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 0.3rem; }
.cal-add .icon { width: 0.875rem; height: 0.875rem; }
.cal-cell:hover .cal-add, .cal-add:focus-visible { opacity: 1; }
.cal-add:hover { background: var(--surface-2); color: var(--ink); }
.cal-item { display: block; font-size: 0.75rem; padding: 0.125rem 0.375rem; border-radius: 0.3rem; background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item:hover { filter: brightness(0.96); }
.cal-item.t-posted, .cal-item.t-done, .cal-item.t-results-declared { background: var(--success-soft); color: var(--success-strong); }
.cal-item.t-idea, .cal-item.t-planned, .cal-item.t-writing, .cal-item.t-design { background: var(--surface-2); color: var(--ink); }
.cal-item.t-cancelled { background: var(--danger-soft); color: var(--danger-strong); text-decoration: line-through; }
.cal-more { font-size: 0.6875rem; color: var(--muted); }

/* ---- Attendance pills */
.att-pills { display: flex; gap: 0.25rem; flex-wrap: nowrap; }
.att-pill { position: relative; cursor: pointer; }
.att-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att-pill span {
  display: grid; place-items: center; min-width: 2.25rem; height: 2rem; padding: 0 0.5rem; border-radius: 0.5rem;
  border: 1px solid var(--border-strong); font-size: 0.75rem; font-weight: 700; color: var(--muted); transition: all 120ms ease;
}
.att-pill:hover span { border-color: var(--ink); color: var(--ink); }
.att-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.att-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-border); }
.att-clear input:checked + span { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); }

/* ---- Masters and data cards */
.master-group { padding: 0; }
.master-group.card > * + * { margin-top: 0; }
.master-summary { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; }
.master-summary::-webkit-details-marker { display: none; }
.master-summary .nav-chev { margin-left: auto; }
.master-group > div { padding: 0 1.25rem 1.25rem; }
.master-group + .master-group { margin-top: 0.75rem; }
.master-box { border: 1px solid var(--border); border-radius: 0.625rem; padding: 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; }
.master-list { display: flex; flex-direction: column; margin-top: 0.25rem; }
.master-list > li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.125rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; min-width: 0; }
.master-list > li.is-off { color: var(--muted); text-decoration: line-through; }
.data-card.card > * + * { margin-top: 0.75rem; }

/* ---- Sign-in */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.auth-card { max-width: 26rem; box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 10%, transparent); }
.auth-card.card > * + * { margin-top: 0; }

/* ---- Entrance: cards rest visible and rise in once as they appear */
@keyframes rise { from { opacity: 0.001; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.is-in { animation: rise 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.reduced-motion .is-in { animation: none; }