/* letty — lty v3 stylesheet.
   Base, shell and shared components in the Letty "ledger" look: paper canvas,
   black rail with a yellow active marker, hairline-ruled panels, uppercase
   micro-labels, square-cornered controls, dot-based status.
   Page-specific components live in lty.css. Fonts are self-hosted (fonts.css).
   White-label: only --lty-brand / --lty-brand-ink change per tenant. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --lty-brand: #111110;            /* per-tenant accent (marks, active states) */
  --lty-brand-ink: #111110;
  --lty-accent: #FFD000;           /* Letty yellow: highlights only, always with black text */
  --lty-accent-soft: #FFE58A;

  --lty-bg: #FDFDFC;               /* paper */
  --lty-rail: #111110;             /* sidebar */
  --lty-rail-ink: #A9A8A3;
  --lty-soft: #F4F4F1;             /* hover and quiet fills */
  --lty-surface: #FFFFFF;
  --lty-ink: #111110;
  --lty-ink-2: #4A4943;
  --lty-ink-3: #75746D;
  --lty-line: #E4E3DE;
  --lty-line-2: #D6D5CF;

  --lty-ok: #16A34A;
  --lty-warn: #D97706;
  --lty-danger: #DC2626;
  --lty-ai: #7C3AED;

  --lty-font: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --lty-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --lty-r: 10px;
  --lty-r-md: 8px;
  --lty-r-sm: 6px;
  --lty-pill: 9999px;
  --lty-shadow: none;
  --lty-shadow-lg: 0 24px 60px rgba(0, 0, 0, .18);
}

/* ============================================================
   BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 15px; }
body {
  font-family: var(--lty-font);
  color: var(--lty-ink);
  background: var(--lty-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex: none; }
::selection { background: var(--lty-accent); color: #000; }
a:focus-visible, button:focus-visible, label:focus-visible, summary:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* status dot — the only status device in the system */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--lty-ink-3); flex: none; }
.dot.ok { background: var(--lty-ok); }
.dot.warn { background: var(--lty-warn); }
.dot.danger { background: var(--lty-danger); }
.dot.ai { background: var(--lty-ai); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .79rem; color: var(--lty-ink-2); white-space: nowrap; }
.status.strong { color: var(--lty-ink); }

.mono { font-family: var(--lty-mono); font-variant-numeric: tabular-nums; font-size: .79rem; }
.ref { font-family: var(--lty-mono); font-size: .72rem; color: var(--lty-ink-3); }
.muted { color: var(--lty-ink-2); }
.dim { color: var(--lty-ink-3); }

/* ============================================================
   SHELL
   ============================================================ */
.lty-app { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; background: linear-gradient(to right, var(--lty-rail) 228px, transparent 228px); }
.lty-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lty-ink-3); }

.lty-sidebar {
  background: var(--lty-rail); color: var(--lty-rail-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.lty-brandrow { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; }
.lty-sidebar .lty-mark { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.lty-mark {
  width: 34px; height: 34px; border-radius: 6px; background: var(--lty-brand); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700; letter-spacing: -.02em; flex: none;
}
.lty-brand-name { font-size: .93rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; display: block; color: #fff; }
.lty-brand-sub { font-size: .7rem; color: #8A8A86; display: block; }

.lty-nav { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
.lty-nav-label { padding: 18px 20px 6px; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #77766F; }
.lty-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 20px 8px 17px; border-left: 3px solid transparent;
  font-size: .9rem; font-weight: 500; letter-spacing: -.015em; color: var(--lty-rail-ink);
}
.lty-nav-item:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.lty-nav-item.is-active { background: rgba(255, 255, 255, .07); color: #fff; border-left-color: var(--lty-accent); }
.lty-nav-item .n {
  margin-left: auto; font-family: var(--lty-mono); font-size: .68rem; color: var(--lty-ink-3);
}
.lty-nav-item .n.alert { color: #FF8A80; }

.lty-userfoot { border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 10px; padding: 14px 20px; }
.lty-avatar {
  width: 32px; height: 32px; border-radius: var(--lty-pill); flex: none; background: var(--lty-accent-soft); color: #000;
  display: grid; place-items: center; font-size: .66rem; font-weight: 700;
}
.lty-userfoot-name { color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.2; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lty-userfoot-role { font-size: .68rem; color: #8A8A86; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lty-main { display: flex; flex-direction: column; min-width: 0; }
.lty-topbar {
  display: flex; align-items: center; gap: 14px;
  background: var(--lty-bg); border-bottom: 1px solid var(--lty-line);
  padding: 0 28px; height: 60px; position: sticky; top: 0; z-index: 20;
}
.lty-search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px;
  border: 1px solid var(--lty-line-2); border-radius: var(--lty-r-sm);
  background: var(--lty-surface); padding: 8px 12px; color: var(--lty-ink-3);
}
.lty-search:focus-within { border-color: var(--lty-ink); }
.lty-search input { border: none; background: none; outline: none; flex: 1; font: inherit; font-size: .86rem; color: var(--lty-ink); min-width: 0; }
.lty-search input::placeholder { color: var(--lty-ink-3); }
.lty-search kbd { font-family: var(--lty-mono); font-size: .62rem; color: var(--lty-ink-3); border: 1px solid var(--lty-line); border-radius: 4px; padding: 1px 5px; background: var(--lty-surface); }
.lty-topbar-spacer { flex: 1; }
.lty-host { font-family: var(--lty-mono); font-size: .7rem; color: var(--lty-ink-3); }

.lty-content { padding: 32px 28px 64px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ============================================================
   PAGE HEADER  (legacy .page-header maps to the lty head)
   ============================================================ */
.lty-head, .page-header { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.lty-crumb, .page-kicker { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lty-ink-3); margin-bottom: 10px; }
.lty-crumb a:hover { color: var(--lty-ink); }
.lty-head h1, .page-header-copy h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: #000; text-wrap: balance; }
.page-header-copy p, .page-subheading, .form-intro { font-size: .9rem; color: var(--lty-ink-2); margin-top: 8px; max-width: 64ch; line-height: 1.55; }
.lty-head-meta { margin-left: auto; text-align: right; font-size: .76rem; color: var(--lty-ink-2); line-height: 1.7; }
.lty-head-meta b { font-weight: 600; color: var(--lty-ink); }
.lty-head-actions, .page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.lty-btn, .button-link,
.form-card button[type="submit"], .stack button[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; letter-spacing: -.02em;
  border-radius: var(--lty-r-sm); padding: 8px 14px; border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.form-card button[type="submit"], .stack button[type="submit"] { background: #000; color: #FBFBF9; }
.form-card button[type="submit"]:hover, .stack button[type="submit"]:hover { background: #2A2A28; }
.button-link { border-color: var(--lty-line-2); background: var(--lty-surface); color: var(--lty-ink); }
.button-link:hover { border-color: var(--lty-ink); }
.button-link-danger { color: var(--lty-danger); }
.button-link-danger:hover { border-color: var(--lty-danger); }
.button-link-quiet { border-color: transparent; background: none; color: var(--lty-ink-2); }
.button-link-quiet:hover { color: var(--lty-ink); border-color: transparent; }
.inline-form { display: inline-flex; }
.lty-link { font-size: .82rem; font-weight: 500; color: var(--lty-brand-ink); text-decoration: underline; text-decoration-color: var(--lty-line-2); text-underline-offset: 4px; }
.lty-link:hover { text-decoration-color: currentColor; }

/* ============================================================
   CARDS
   ============================================================ */
.lty-card, .card {
  background: var(--lty-surface); border: 1px solid var(--lty-line);
  border-radius: var(--lty-r); min-width: 0;
}
.lty-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 12px; border-bottom: 1px solid var(--lty-line); }
.lty-card-title { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lty-ink); }
.lty-card-head .lty-link { margin-left: auto; }
.lty-card-body { padding: 18px 20px; }

.section-card { padding: 20px; }
.section-card > h3, .form-card > h3, .table-card > h3, .section-head h3, .section-card > div > h3 { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.section-divider { border-top: 1px solid var(--lty-line); margin: 16px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-head h3 { margin-bottom: 0; }
.card-kicker { font-size: .7rem; font-weight: 500; color: var(--lty-ink-3); margin-bottom: 2px; }
.table-card { padding: 0; overflow-x: auto; }
.table-card > h3 { padding: 16px 20px 0; margin-bottom: 4px; }
.wide-card { grid-column: 1 / -1; }
.table-meta { font-size: .75rem; color: var(--lty-ink-2); line-height: 1.55; }

/* ============================================================
   STATS
   ============================================================ */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--lty-ink); border-bottom: 1px solid var(--lty-line); }
.summary-metric { padding: 14px 20px 18px 0; min-width: 0; }
.summary-metric + .summary-metric { padding-left: 20px; border-left: 1px solid var(--lty-line); }
.summary-metric:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.summary-metric:nth-child(n+4) { border-top: 1px solid var(--lty-line); }
.summary-metric span, .summary-metric p { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lty-ink-3); }
.summary-metric .metric { display: block; font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin-top: 12px; line-height: 1; color: #000; text-transform: none; }

/* ============================================================
   TABLES
   ============================================================ */
.lty-table, .data-table, .lty-content table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lty-table thead th, .data-table thead th, .lty-content table thead th {
  text-align: left; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lty-ink-3);
  padding: 12px 20px; border-bottom: 1px solid var(--lty-line);
}
.lty-table td, .data-table td, .lty-content table td { padding: 13px 20px; border-bottom: 1px solid var(--lty-line); vertical-align: middle; }
.lty-table tbody tr:last-child td, .data-table tbody tr:last-child td, .lty-content table tbody tr:last-child td { border-bottom: none; }
.lty-table tbody tr:hover, .data-table tbody tr:hover { background: var(--lty-soft); }
.lty-table .r, .data-table .r { text-align: right; }
.data-table a { font-weight: 500; }
.data-table a:hover { text-decoration: underline; }
.row-title { font-weight: 500; line-height: 1.3; }
.empty-row td { color: var(--lty-ink-3); font-size: .78rem; }
.lty-table tfoot td, .data-table tfoot td {
  padding: 11px 20px; font-size: .8rem; color: var(--lty-ink-2);
  border-top: 1px solid var(--lty-line); background: var(--lty-soft);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.lty-stack, .stack { display: grid; gap: 16px; }
.stack { gap: 12px; }
.dashboard-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.lty-cols, .detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.detail-main, .detail-rail { display: grid; gap: 16px; align-content: start; min-width: 0; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid .full, .full { grid-column: 1 / -1; }

/* ============================================================
   META LISTS
   ============================================================ */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; }
.meta-item > span { display: block; font-size: .72rem; color: var(--lty-ink-3); margin-bottom: 3px; }
.meta-item > p { font-size: .82rem; font-weight: 500; }

.detail-list { list-style: none; }
.detail-list li { padding: 8px 0; border-bottom: 1px solid var(--lty-line); font-size: .8rem; }
.detail-list li:first-child { padding-top: 0; }
.detail-list li:last-child { border-bottom: none; padding-bottom: 0; }
.detail-list li strong { display: block; font-weight: 500; font-size: .8rem; }
.detail-list li span { display: block; font-size: .73rem; color: var(--lty-ink-2); margin-top: 2px; }
.detail-list li a { font-weight: 500; }
.detail-list li a:hover { text-decoration: underline; }
.detail-list li p { color: var(--lty-ink-3); font-size: .78rem; }

/* ============================================================
   NOTICES / FLASHES
   ============================================================ */
.lty-notice, .flash {
  display: flex; gap: 12px; align-items: center; background: var(--lty-surface);
  border: 1px solid var(--lty-line); border-radius: var(--lty-r-md); padding: 12px 16px;
  font-size: .88rem; color: var(--lty-ink-2);
}
.lty-notice b, .flash b { color: var(--lty-ink); font-weight: 500; }
.flashes { display: grid; gap: 8px; margin-bottom: 20px; }
.flash svg { width: 15px; height: 15px; flex: none; }
.flash-success { color: var(--lty-ink); }
.flash-success svg { color: var(--lty-ok); }
.flash-error { color: var(--lty-ink); }
.flash-error svg { color: var(--lty-danger); }

/* ============================================================
   TABS / FILTERS
   ============================================================ */
.lty-tabs, .lty-filters { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--lty-line); }
.lty-tab, .lty-filter {
  padding: 8px 0 10px; font-size: .88rem; font-weight: 500; color: var(--lty-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: baseline;
}
.lty-tab:hover, .lty-filter:hover { color: var(--lty-ink); }
.lty-tab.is-active, .lty-filter.is-on { color: #000; font-weight: 600; border-bottom-color: #000; }
.lty-tab .n, .lty-filter .n { font-family: var(--lty-mono); font-size: .68rem; color: var(--lty-ink-3); }

/* ============================================================
   FORMS
   ============================================================ */
.form-shell { max-width: 820px; display: grid; gap: 14px; }
.form-card { padding: 22px; }
.form-card label, .stack label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--lty-ink);
}
.form-card label input, .form-card label select, .form-card label textarea,
.stack label input, .stack label select, .stack label textarea {
  display: block; width: 100%; margin-top: 6px;
}
.form-card input, .form-card select, .form-card textarea,
.stack input, .stack select, .stack textarea {
  border: 1px solid var(--lty-line-2); border-radius: var(--lty-r-sm);
  padding: 9px 12px; font: inherit; font-size: .9rem; font-weight: 400; background: var(--lty-surface); color: var(--lty-ink);
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.stack input:focus, .stack select:focus, .stack textarea:focus {
  outline: none; border-color: #000; box-shadow: 0 0 0 1px #000;
}
.form-card input[type="checkbox"], .stack input[type="checkbox"] { width: auto; display: inline-block; margin: 0; }
.checkbox-field { display: flex !important; align-items: center; gap: 8px; }
.checkbox-field input { margin-top: 0 !important; }
.form-card input[type="file"], .stack input[type="file"] { border: 1.5px dashed #CFCEC9; background: var(--lty-soft); font-size: .8rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .lty-app { grid-template-columns: 60px 1fr; background: linear-gradient(to right, var(--lty-rail) 60px, transparent 60px); }
  .lty-brandrow { justify-content: center; padding: 14px 0; }
  .lty-nav-item { padding: 10px 0; }
  .lty-userfoot { justify-content: center; padding: 12px 0; flex-direction: column; }
  .lty-userfoot .lty-iconbtn { margin-left: 0; }
  .lty-topbar { padding: 0 12px; }
  .lty-search { min-width: 0; }
  .lty-brand-name, .lty-brand-sub, .lty-nav-item .t, .lty-nav-label,
  .lty-nav-item .n, .lty-host { display: none; }
  .lty-nav-item { justify-content: center; }
  .lty-cols, .detail-grid, .dashboard-lower { grid-template-columns: 1fr; }
  .summary-grid, .grid.three, .grid.two { grid-template-columns: 1fr; }
  .lty-content { padding: 20px 16px 48px; }
}

@media (max-width: 640px) {
  .lty-search kbd { display: none; }
  .lty-topbar { gap: 8px; height: 56px; }
  .lty-content { padding: 20px 12px 40px; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-metric + .summary-metric, .summary-metric:nth-child(n+4) { padding-left: 0; border-left: 0; border-top: 1px solid var(--lty-line); }
}