/* Direction: Slate blue + copper business operations — off-white workspace, dark slate sidebar */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f4;
  --border: #d7dde1;
  --border-strong: #b4b1b1;
  --ink: #202a32;
  --muted: #5f6a72;
  --accent: #c47a4a;
  --accent-hover: #a7683f;
  --accent-ink: #1b110a;
  --accent-text: #9a5429;
  --accent-strong: #46657a;
  --accent-soft: #f7e9df;
  --accent-border: #dfbeaa;
  --success: #5d8b70;
  --success-ink: #ffffff;
  --success-soft: #e3e9e8;
  --success-strong: #496d57;
  --warning: #c08a43;
  --warning-ink: #202a32;
  --warning-soft: #efe9e2;
  --warning-strong: #7f5b2c;
  --danger: #b85e67;
  --danger-ink: #ffffff;
  --danger-soft: #eee4e7;
  --danger-strong: #9b4f57;
  --chart-1: #c47a4a;
  --chart-2: #8e9423;
  --chart-3: #1f8a71;
  --chart-4: #0898ce;
  --chart-5: #7763b9;
  --chart-6: #cd6e9a;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --shadow-card: 0 1px 2px rgba(32, 42, 50, 0.06), 0 1px 3px rgba(32, 42, 50, 0.04);
  --card-pad: 1.1rem;
  --x-sidebar: #1e2935;
  --x-side-ink: #e9ecf0;
  --x-side-muted: #9fb0bd;
  --x-side-hover: #2a3846;
  --x-slate: #46657a;
  --x-deep: #304858;
  --x-soft-blue: #d8e3ea;
  --x-light-copper: #e5bfa5;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #170e09;
  --surface: #2e2622;
  --surface-2: #231a15;
  --border: #37302b;
  --border-strong: #5d5653;
  --ink: #f5f6f8;
  --muted: #9c9998;
  --accent: #c47a4a;
  --accent-hover: #cd8e65;
  --accent-ink: #1b110a;
  --accent-text: #c98558;
  --accent-strong: #c98558;
  --accent-soft: #3d2617;
  --accent-border: #653f26;
  --success: #5d8b70;
  --success-ink: #ffffff;
  --success-soft: #262a20;
  --success-strong: #769d86;
  --warning: #c08a43;
  --warning-ink: #ffffff;
  --warning-soft: #3c2916;
  --warning-strong: #c08a43;
  --danger: #b85e67;
  --danger-ink: #ffffff;
  --danger-soft: #3a201e;
  --danger-strong: #c88288;
  --chart-1: #c47a4a;
  --chart-2: #acb248;
  --chart-3: #1a9579;
  --chart-4: #38b1e7;
  --chart-5: #8370c6;
  --chart-6: #e583af;
}

/* Contractly — app-specific styling */
#sidebar[data-open] { display: flex; }

.navlink {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.8rem; border-radius: 8px;
  color: var(--x-side-muted); font-size: 0.9rem; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.navlink:hover { background: var(--x-side-hover); color: var(--x-side-ink); }
.navlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.navlink[aria-current="page"] {
  background: var(--x-side-hover); color: var(--x-side-ink);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600; padding: 0.7rem 0.9rem; background: var(--surface-2);
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl td.nw { white-space: nowrap; }
.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* status tones */
.tone { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.tone-good { background: var(--success-soft); color: var(--success-strong); }
.tone-warn { background: var(--warning-soft); color: var(--warning-strong); }
.tone-bad { background: var(--danger-soft); color: var(--danger-strong); }
.tone-info { background: color-mix(in srgb, var(--accent-strong) 16%, var(--surface)); color: color-mix(in srgb, var(--accent-strong) 70%, var(--ink)); }
.tone-mute { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

/* mini status select */
.sel-mini { font-size: 0.78rem; padding: 0.25rem 1.6rem 0.25rem 0.5rem; min-height: 0; height: auto; width: auto; }

/* timeline */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.tl-step { position: relative; text-align: center; padding-top: 1.7rem; font-size: 0.78rem; color: var(--muted); }
.tl-step::before { content: ""; position: absolute; top: 0.45rem; left: 0; right: 0; height: 3px; background: var(--border); }
.tl-step:first-child::before { left: 50%; }
.tl-step:last-child::before { right: 50%; }
.tl-step::after {
  content: ""; position: absolute; top: 0; left: calc(50% - 0.5rem); width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--surface); border: 3px solid var(--border);
}
.tl-step.done { color: var(--ink); }
.tl-step.done::before { background: var(--accent-strong); }
.tl-step.done::after { border-color: var(--accent-strong); background: var(--accent-strong); }
.tl-step.now::after { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-step.now { color: var(--ink); font-weight: 600; }
.tl-step b { display: block; font-weight: 600; color: var(--ink); }

/* bars + donut */
.bar-track { height: 0.55rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent-strong); }
.vbars { display: flex; align-items: flex-end; gap: 0.6rem; height: 9rem; }
.vbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.3rem; height: 100%; font-size: 0.72rem; color: var(--muted); }
.vbar i { display: block; width: 100%; max-width: 2.6rem; border-radius: 6px 6px 0 0; background: var(--accent); min-height: 4px; transform-origin: bottom; animation: grow 0.6s ease-out; }
.donut { width: 9rem; height: 9rem; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut::after { content: ""; position: absolute; inset: 1.7rem; border-radius: 50%; background: var(--surface); }
@keyframes grow { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
html.reduced-motion .vbar i { animation: none; }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cal-h { background: var(--surface-2); text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted); padding: 0.4rem 0; text-transform: uppercase; }
.cal-d { background: var(--surface); min-height: 5.2rem; padding: 0.3rem; font-size: 0.7rem; overflow: hidden; }
.cal-d.out { background: var(--surface-2); color: var(--muted); }
.cal-d.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-d .ev { display: block; margin-top: 2px; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--accent-strong) 16%, var(--surface)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-d .ev.done { background: var(--success-soft); }
@media (max-width: 640px) { .cal-d { min-height: 3.2rem; } .cal-d .ev { font-size: 0; height: 6px; padding: 0; } }

.stat-link { transition: transform 0.15s, box-shadow 0.15s; }
.stat-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(32, 42, 50, 0.1); }
.unread-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 0.4rem; }
dialog.modal { max-width: min(42rem, 94vw); width: 100%; }
dialog.modal::backdrop { background: rgba(20, 28, 36, 0.55); }