/* ==========================================================================
   FILE      public/assets/css/legacy.css
   MODULE    Core / shell (agent A4)
   PURPOSE   Legacy compatibility layer for the tenant app's Phase 0b screens.
             The ~32 existing screens use class names that predate the approved
             design (01-CONTRACT.md §"Legacy compatibility layer"). Phase 1 does
             NOT edit those screens, so this file styles their class names in
             terms of the semantic tokens, loaded AFTER app.css, so an untouched
             screen comes out looking deliberate instead of unstyled.

   ORDER     app.css  ->  legacy.css  ->  <style id="tenant-theme">  (in <head>)
             It therefore wins ties against app.css (same specificity, later
             source order) and is itself overridden by the tenant token block,
             which only re-declares :root variables.

   RULES     - references var(--c-*) tokens only; no hardcoded hex except #fff
               (pure white ink, allowed by the contract).
             - no !important anywhere; ordering and specificity do the work.
             - never re-declare a class app.css already styles the same way
               (.card .btn .badge .notice .muted .inline .check …).
   LAST UPDATED: 2026-09-13
   ========================================================================== */

/* ---------------------------------------------------------------- page canvas
   app.css gives the content area its own padding (.content). The screens'
   <main> keeps only layout duties so padding is never applied twice.
   install.php / the error pages use width=narrow, which caps the whole canvas. */
.main{display:block;flex:1;min-width:0;width:100%}
.main.narrow{max-width:28rem;margin-inline:auto}
.footer{padding:1.25rem 1.5rem;text-align:center;color:var(--c-text-muted);font-size:.78rem}

/* Left-over structural wrappers (1 use each). Kept light: they are containers,
   not components — the first declarations simply stop them collapsing. */
.wrap{max-width:1400px;margin-inline:auto;min-width:0}
.sheet{display:block;margin-block-end:1rem;min-width:0}

/* ---------------------------------------------------------------- shell nav
   .sidenav/.menu/.menu-link are the Phase 0b nav idiom (fees/_helpers.php builds
   <nav class="sidenav fees-nav"><ul class="menu"><li><a class="menu-link">).
   View::nav() also emits <nav class="sidenav">, so the container rule serves both. */
.sidenav{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.menu li{display:block}
.menu .menu-link{display:inline-block;padding:.35rem .7rem;border:1px solid var(--c-border);border-radius:var(--radius-pill);background:var(--c-surface-2);color:var(--c-text-2);font-size:.8rem;font-weight:500;transition:border-color 160ms var(--ease),color 160ms var(--ease),background 160ms var(--ease)}
.menu .menu-link:hover{border-color:var(--c-border-strong);color:var(--c-text)}
.menu .menu-link.active{background:var(--c-brand-50);border-color:var(--c-brand-100);color:var(--c-brand-700);font-weight:600}
.fees-nav{padding-block-end:.5rem;border-block-end:1px solid var(--c-border)}

/* The shell's own nav item: app.css owns the .nav-item box + icon sizing, this
   is the inner link. Both classes are emitted on purpose — .menu-link/.active
   is the class name tests/Core/ViewTest.php asserts on. */
.nav-item .menu-link{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0;color:inherit}
.nav-item .menu-link span{min-width:0;overflow-wrap:anywhere}
.nav-label{display:block}

/* Locale switcher. app.css styles .lang (the login-page idiom); the shell wraps
   its links in the older .locales nav, so the two contexts share one look. */
.locales{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center}

/* ---------------------------------------------------------------- notices
   app.css ships the new names (.notice-ok, .notice-warn, .notice-danger). The
   Phase 0b screens (and public/index.php, login.php) use the old names, so map
   them onto the identical look. */
.notices{display:flex;flex-direction:column;gap:.5rem;margin-block-end:1rem}
.notice-success{background:var(--c-success-50);color:var(--c-success);border-color:var(--c-success-100)}
.notice-error{background:var(--c-danger-50);color:var(--c-danger);border-color:var(--c-danger-100)}
.notice-warning{background:var(--c-warning-50);color:var(--c-warning);border-color:var(--c-warning-100)}

/* ---------------------------------------------------------------- grid + stat
   .grid is used 33 times in the existing screens — the single most load-bearing
   rule in this file. It must keep its auto-fill behaviour so tables, cards and
   forms laid out with it stay intact. */
.grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}

/* .stat adopts the .kpi visual language but has to work inside .grid above
   (3–4 auto-fill columns), not inside .kpi-row. It is used on <div>, <p> and <a>. */
.stat{display:block;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1rem 1.15rem}
.stat .muted{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.stat b{display:block;margin-block-start:.35rem;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--c-text)}
a.stat{transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
a.stat:hover{border-color:var(--c-border-strong);box-shadow:var(--shadow-2)}

/* ---------------------------------------------------------------- forms
   app.css styles only .field-scoped controls (new components). The Phase 0b
   screens use bare <label>/<input>/<select>/<textarea> plus the .inp class, so
   both are dressed here. Element selectors (0,0,1) always lose to app.css's
   .field input (0,1,1), so the new components are untouched. */
label{display:block;font-size:.8rem;font-weight:600;color:var(--c-text-2);margin-block-end:.3rem}
input,select,textarea{width:100%;padding:.6rem .75rem;border:1px solid var(--c-border);border-radius:10px;font:inherit;font-size:.9rem;background:var(--c-surface-2);color:var(--c-text);transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-brand);box-shadow:0 0 0 3.5px var(--c-brand-50)}
input[type="checkbox"],input[type="radio"]{width:15px;height:15px;padding:0;accent-color:var(--c-brand)}
input[type="hidden"]{display:none}
.inp{display:inline-block;width:auto;min-width:6rem}

.filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-block-end:1rem}
.filters label{margin-block-end:.3rem}
.filters input,.filters select{width:auto;min-width:9rem}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-block-end:1rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:baseline}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .65rem;border:1px solid var(--c-border);border-radius:var(--radius-pill);background:var(--c-surface-2);color:var(--c-text-2);font-size:.78rem;font-weight:500;cursor:pointer;margin-block-end:0}
.chip:hover{border-color:var(--c-border-strong)}
.chip:has(input:checked){background:var(--c-brand-50);border-color:var(--c-brand-100);color:var(--c-brand-700)}
.chip input{width:14px;height:14px;margin:0}

/* ---------------------------------------------------------------- tables
   THE highest-value rule in this file. .sheet-table is a WRAPPER DIV, not the
   table (31 uses, all of the shape <div class="sheet-table"><table>…), so it
   takes the .table-wrap duty and the inner table takes the .table-dense look.
   Historically tables inherited the bare th/td rules in app.css; this makes the
   match explicit and exact. */
.sheet-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sheet-table table{width:100%;border-collapse:collapse;font-size:.82rem}
.sheet-table th{text-align:start;background:var(--c-surface);font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-text-faint);padding:.45rem .7rem;border-block-end:1px solid var(--c-border);white-space:nowrap}
.sheet-table td{padding:.48rem .7rem;border-block-end:1px solid var(--c-surface-3);color:var(--c-text-2);vertical-align:middle}
.sheet-table tbody tr{transition:background 140ms var(--ease)}
.sheet-table tbody tr:hover{background:var(--c-surface-hover)}
.sheet-table tbody tr:last-child td{border-block-end:0}
.sheet-table td .sname{font-weight:600;color:var(--c-text)}

/* ---------------------------------------------------------------- small parts */
.k{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-faint);min-width:7rem}
.v{color:var(--c-text-2);font-size:.85rem}
.v.ok{color:var(--c-success);font-weight:600}
.v.bad{color:var(--c-danger);font-weight:600}
.sname{font-weight:600;color:var(--c-text)}
.note{margin:0 0 .5rem;font-size:.8rem;color:var(--c-text-muted)}
.pill{display:inline-block;padding:.16rem .55rem;border-radius:var(--radius-pill);background:var(--c-surface-3);color:var(--c-text-muted);font-size:.72rem;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--c-success-50);color:var(--c-success)}
.pill.bad{background:var(--c-danger-50);color:var(--c-danger)}

/* ---------------------------------------------------------------- responsive
   Mirrors the agreed 1080 / 700 / 480 breakpoints from app.css, applied to the
   legacy layout primitives only. */
@media(max-width:1080px){
  .footer{padding:1rem}
  .fees-nav{border-block-end:0}
}
@media(max-width:700px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem}
  .row{gap:.5rem}
  .k{min-width:0;width:100%}
  .filters input,.filters select{width:100%}
  .filters>*{flex:1 1 9rem}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr}
  .main.narrow{max-width:100%}
}

@media(prefers-reduced-motion:reduce){
  .menu .menu-link,a.stat,.sheet-table tbody tr,.chip{transition:none}
}
