/*
 * theme.css — Leafwell's design-system values.
 * Studio-minimal ledger: warm paper, ink-black grotesque, one deep pine
 * accent. 0px corners, shadow tier 0 (see tailwind/components.css).
 */

:root {
  --canvas: #fafaf8;
  --surface: #fdfdfc;
  --surface-2: #f0efe9;
  --border: #e1ded4;
  --border-strong: #c7c2b3;
  --ink: #14161a;
  --muted: #67686a;
  --accent: #2f5d50;
  --accent-hover: #244a40;
  --accent-ink: #fbfbf6;
  --accent-text: #2f5d50;
  --accent-strong: #204238;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 38%, var(--border-strong));

  --success: #1f7a4d;
  --success-ink: #fbfbf6;
  --success-soft: #e3efe4;
  --success-strong: #1a6540;

  --warning: #96631a;
  --warning-ink: #fbfbf6;
  --warning-soft: #f4ead6;
  --warning-strong: #7d5215;

  --danger: #a63b32;
  --danger-ink: #fbfbf6;
  --danger-soft: #f3e0dd;
  --danger-strong: #8c3129;

  --chart-1: #2f5d50;
  --chart-2: #96631a;
  --chart-3: #a63b32;
  --chart-4: #45607a;
  --chart-5: #6c5a8c;
  --chart-6: #7a8a3c;

  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 8px 28px color-mix(in srgb, var(--ink) 16%, transparent);
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 500;
  --measure: 68ch;

  /* The reports page's dark statement band — deliberately dark in both modes. */
  --x-band-bg: #14211c;
  --x-band-ink: #f3f2ec;
  --x-band-muted: color-mix(in srgb, #f3f2ec 62%, transparent);
  --x-band-line: color-mix(in srgb, #f3f2ec 16%, transparent);
}

html[data-theme="dark"] {
  --canvas: #14161a;
  --surface: #1a1d20;
  --surface-2: #212427;
  --border: #2d3033;
  --border-strong: #464a4d;
  --ink: #f3f2ec;
  --muted: #a3a29a;
  --accent: #4f8873;
  --accent-hover: #5f9c86;
  --accent-ink: #0d1210;
  --accent-text: #74ab97;
  --accent-strong: #8fc3ad;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 45%, var(--border-strong));

  --success: #3f9c6e;
  --success-ink: #0d1210;
  --success-soft: #1c3327;
  --success-strong: #7cc9a0;

  --warning: #c68d3f;
  --warning-ink: #0d1210;
  --warning-soft: #362a17;
  --warning-strong: #e0ab63;

  --danger: #c2685d;
  --danger-ink: #0d1210;
  --danger-soft: #382220;
  --danger-strong: #e08e82;

  --chart-1: #6cae9a;
  --chart-2: #c68d3f;
  --chart-3: #c2685d;
  --chart-4: #7ea0bd;
  --chart-5: #a493c4;
  --chart-6: #a7bd6e;

  --x-band-bg: #0d1512;
  --x-band-ink: #f3f2ec;
  --x-band-muted: color-mix(in srgb, #f3f2ec 62%, transparent);
  --x-band-line: color-mix(in srgb, #f3f2ec 16%, transparent);
}

/*
 * app.css — Leafwell's own stylesheet. The side-rail shell, the ledger
 * tiles, the team calendar and the reports band — everything no primitive
 * covers, in tokens. Motion: none, per the brief — hover/focus states only.
 */

/* ---------------------------------------------------------------------
   Shell: a fixed left rail, a scrolling content pane. A checkbox drives
   the mobile drawer; behavior.js's own "drawer" enhancer closes it again
   on a nav click or Escape, because it targets .sidebar a already.
------------------------------------------------------------------------ */
.app-shell {
  @apply relative flex min-h-screen items-stretch;
}

.rail-backdrop {
  @apply fixed inset-0 z-40 hidden;
  background: rgba(0, 0, 0, 0.4);
}
.navopen:checked ~ .rail-backdrop {
  @apply block lg:hidden;
}

.sidebar {
  @apply fixed inset-y-0 left-0 z-50 flex w-72 shrink-0 -translate-x-full flex-col border-r border-border bg-surface
    transition-transform duration-200 lg:sticky lg:top-0 lg:h-screen lg:translate-x-0;
}
.navopen:checked ~ .sidebar {
  @apply translate-x-0;
}

.rail-brand {
  @apply flex items-center gap-2.5 border-b border-border px-6 py-5;
}
.rail-mark {
  @apply grid size-8 shrink-0 place-items-center bg-accent text-accent-ink;
}
.rail-mark .icon {
  @apply size-4.5;
}
.rail-word {
  @apply font-display text-lg font-semibold tracking-tight;
}

.rail-nav {
  @apply flex flex-col gap-0.5 overflow-y-auto px-3 py-4;
}
.nav-item {
  @apply flex items-center gap-3 border border-transparent px-3 py-2.5 text-sm font-medium text-muted transition-colors duration-150;
}
.nav-item:hover {
  @apply bg-surface-2 text-ink no-underline;
}
.nav-item .icon {
  @apply size-4.5 shrink-0;
}
.nav-item.is-active {
  @apply border-accent-border bg-accent-soft text-accent-strong;
}
.nav-badge {
  @apply ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-accent px-1 font-mono text-[11px] font-semibold text-accent-ink;
}

.rail-foot {
  @apply space-y-4 border-t border-border p-4;
}
.role-switch {
  @apply grid grid-cols-3 gap-1 border border-border-strong p-1;
}
.role-pill {
  @apply block px-1 py-1.5 text-center text-[11px] font-semibold uppercase tracking-wide text-muted transition-colors duration-150;
  letter-spacing: 0.02em;
}
.role-pill:hover {
  @apply bg-surface-2 text-ink no-underline;
}
.role-pill.is-active {
  @apply bg-accent text-accent-ink;
}
.rail-identity {
  @apply flex items-center gap-2.5;
}
.rail-identity-text {
  @apply flex min-w-0 flex-1 flex-col;
}
.rail-identity-name {
  @apply truncate text-sm font-semibold text-ink;
}
.rail-identity-role {
  @apply truncate text-xs text-muted;
}

.rail-main {
  @apply flex min-w-0 flex-1 flex-col;
}
.rail-topbar {
  @apply sticky top-0 z-30 flex items-center gap-3 border-b border-border bg-surface/95 px-4 py-3 backdrop-blur lg:hidden;
}
.rail-topbar-title {
  @apply font-display text-base font-semibold;
}
.rail-content {
  @apply mx-auto w-full max-w-[76rem] px-4 py-6 sm:px-6 lg:px-10 lg:py-10;
}

.page-head {
  @apply mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-border pb-5 lg:mb-8 lg:pb-6;
}
.page-title {
  @apply font-display text-2xl font-semibold tracking-tight text-ink lg:text-3xl;
}
.page-sub {
  @apply mt-1 text-sm text-muted;
}
.page-head-actions {
  @apply flex items-center gap-2;
}

/* ---------------------------------------------------------------------
   Balance strip — four ledger tiles, mono figures, no icons.
------------------------------------------------------------------------ */
.balance-strip {
  @apply mb-8 grid grid-cols-2 gap-px border border-border bg-border lg:grid-cols-4;
}
.balance-tile {
  @apply flex flex-col gap-1.5 bg-surface px-5 py-6;
}
.balance-tile-label {
  @apply text-xs font-semibold uppercase tracking-wide text-muted;
  letter-spacing: 0.04em;
}
.balance-tile-figure {
  @apply font-mono text-4xl font-medium leading-none text-ink lg:text-5xl;
}
.balance-tile-caption {
  @apply text-sm text-muted;
}

/* ---------------------------------------------------------------------
   New request panel — the live day-count preview.
------------------------------------------------------------------------ */
.dashboard-grid {
  @apply grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)];
}
.dashboard-section {
  @apply min-w-0;
}
.section-head {
  @apply mb-3 flex items-center justify-between gap-3;
}
.section-title {
  @apply font-display text-base font-semibold;
}

.day-preview {
  @apply mt-5 flex items-baseline gap-3 border border-border bg-surface-2 px-4 py-3;
}
.day-preview-figure {
  @apply font-mono text-2xl font-medium text-ink;
}
.day-preview-label {
  @apply text-sm text-muted;
}
.day-preview-error {
  @apply border-danger bg-danger-soft px-4 py-3 text-sm font-medium text-danger-strong;
}

/* ---------------------------------------------------------------------
   Team calendar — one row per report, leave as contiguous coloured cells,
   overlaps flagged with a warning strip.
------------------------------------------------------------------------ */
.team-grid {
  @apply grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem];
}
.cal-card {
  @apply min-w-0;
}
.cal-toolbar {
  @apply flex flex-wrap items-center justify-between gap-3 border-b border-border px-5 py-4;
}
.cal-toolbar-title {
  @apply flex items-center gap-3;
}
.cal-toolbar-nav {
  @apply flex items-center gap-1.5;
}
.cal-scroll {
  @apply overflow-x-auto;
}
.cal-row {
  @apply grid border-b border-border;
}
.cal-row:last-child {
  @apply border-b-0;
}
.cal-row-head {
  @apply sticky top-0 z-[1] bg-surface-2;
}
.cal-name-cell {
  @apply sticky left-0 z-[1] flex items-center gap-2 border-r border-border bg-surface px-3 py-2.5;
}
.cal-row-head .cal-name-cell {
  @apply bg-surface-2;
}
.cal-name-text {
  @apply truncate text-sm font-medium;
}
.cal-day-head {
  @apply flex items-center justify-center border-l border-border py-2.5 font-mono text-xs text-muted;
}
.cal-day-head.is-weekend {
  @apply bg-surface;
}
.cal-day-head.is-today {
  @apply bg-accent-soft font-semibold text-accent-strong;
}
.cal-day-head.is-conflict {
  @apply bg-warning-soft text-warning-strong;
}
.cal-cell {
  @apply relative flex h-9 items-center justify-center border-l border-border;
}
.cal-cell.is-conflict {
  box-shadow: inset 0 2px 0 var(--warning);
}
.cal-bar {
  @apply block h-5 w-full;
}
.cal-bar-approved {
  @apply bg-accent;
}
.cal-bar-pending {
  @apply bg-warning opacity-60;
}
.cal-legend {
  @apply flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border px-5 py-3 text-xs text-muted;
}
.cal-legend span {
  @apply inline-flex items-center gap-2;
}
.cal-legend .cal-bar {
  @apply h-3 w-5;
}
.cal-legend-strip {
  @apply inline-block h-3 w-5 border-t-2 border-warning;
}

/* ---------------------------------------------------------------------
   Approvals queue.
------------------------------------------------------------------------ */
.approvals-list {
  @apply divide-y divide-border;
}
.approval-item {
  @apply flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-start sm:justify-between;
}
.approval-item-main {
  @apply flex min-w-0 items-start gap-3;
}
.approval-item-text {
  @apply flex min-w-0 flex-col gap-0.5;
}
.approval-item-name {
  @apply text-sm font-semibold;
}
.approval-item-meta {
  @apply text-xs text-muted;
}
.approval-item-reason {
  @apply mt-1 text-sm italic text-muted;
}
.approval-item-actions {
  @apply flex shrink-0 items-start gap-2;
}
.acc-inline > summary {
  list-style: none;
  cursor: pointer;
}
.acc-inline > summary::-webkit-details-marker {
  display: none;
}
.reject-form {
  @apply mt-2 flex flex-col gap-2 border border-border bg-surface-2 p-3 sm:w-64;
}

/* ---------------------------------------------------------------------
   HR: directory, policy, audit trail.
------------------------------------------------------------------------ */
.hr-grid {
  @apply mb-6 grid grid-cols-1 items-start gap-6 lg:grid-cols-2;
}
.dcell-name {
  @apply flex items-center gap-2.5;
}
.dcell-name-text {
  @apply block text-sm font-medium;
}
.dcell-name-sub {
  @apply block text-xs text-muted;
}
.audit-list {
  @apply divide-y divide-border text-sm;
}
.audit-list li {
  @apply flex flex-wrap items-center gap-2 px-6 py-3;
}
.audit-list-by {
  @apply ml-auto text-xs text-muted;
}

.policy-list {
  @apply divide-y divide-border;
}
.policy-row {
  @apply flex flex-col gap-4 px-6 py-5 sm:flex-row sm:items-end;
}
.policy-row-name {
  @apply sm:w-28 sm:shrink-0 sm:pb-2.5;
}
.policy-row-rule {
  @apply flex-1;
}
.holiday-form {
  @apply flex flex-col items-end gap-4 border-t border-border px-6 py-5 sm:flex-row;
}

/* ---------------------------------------------------------------------
   Reports: the dark statement band and the charted breakdowns.
------------------------------------------------------------------------ */
.report-band {
  @apply mb-8 border px-6 py-8 lg:px-10 lg:py-10;
  border-color: var(--x-band-line);
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.report-band-head {
  @apply flex flex-wrap items-center justify-between gap-2 text-xs font-semibold uppercase tracking-wide;
  color: var(--x-band-muted);
  letter-spacing: 0.04em;
}
.report-band-figure {
  @apply mt-6 flex flex-wrap items-baseline gap-3;
}
.report-band-number {
  @apply font-mono text-6xl font-medium leading-none lg:text-8xl;
}
.report-band-unit {
  @apply text-sm;
  color: var(--x-band-muted);
}
.report-band-row {
  @apply mt-8 grid grid-cols-2 gap-x-6 gap-y-5 border-t pt-6 sm:grid-cols-5;
  border-color: var(--x-band-line);
}
.report-band-stat-figure {
  @apply block font-mono text-2xl font-medium;
}
.report-band-stat-label {
  @apply mt-1 block text-xs;
  color: var(--x-band-muted);
}

.reports-grid {
  @apply grid grid-cols-1 gap-6 lg:grid-cols-2;
}
.chart-pad {
  @apply p-5;
}
.chart {
  @apply relative h-64 w-full;
}