/* thin-chrome.css - (c) Jonatha Baldini. PM Suite is proprietary software (see LICENSE, NOTICE.md, ADR-0070).
   Common contract of the «thin chrome» (ADR-0072 amendment 2026-10-18): ONE 48 px command row + ONE <= 32 px time row, everything else in a
   «Vista e filtri» sheet / panel.
   Version 1.2.1 (PATCH): on the phone the subtitle trigger .tc-t2 takes the tap over the whole 48 px .tc-title block (::after), no visual change.
   Version 1.2.0 (S3, MINOR): helpers for the Blazor rows of the PMSuiteGantt pages (project Gantt, «Risorse e commesse», occupation calendar), all under
   :is(.tc-on,.tc-dk) or form-specific NEW selectors; no 1.0/1.1 rule changed. tc-sp (spacer), tc-lbl (text of a desktop button, dropped first when the row is
   narrow: container query on a row marked tc-cq, never a wrap), tc-sec-btn (full-width button of the sheet that opens a sub-sheet, e.g. «Periodo e zoom ›»).
   Version 1.1.0 (S2, MINOR): the DESKTOP form `tc-dk` (light row under the app bar, «Vista e filtri» as a drop-down panel anchored top right).
   Version 1.0.0 (S1: phone, client planner engine and the office plan «Schede» view).

   How a consumer uses it: it puts ONE of two classes on its root and marks its elements with the `tc-*` classes below.
     tc-on   the PHONE form, WHILE the viewport is a phone (the consumer decides the threshold; the planner engine uses max-width 599.98 px).
             Accent row that replaces the app bar, bottom sheet with a dim scrim, FAB. Unchanged since 1.0.0.
     tc-dk   the DESKTOP form (S2): the app's own violet app bar stays above, the row is LIGHT (white, bottom border), the sheet becomes a
             drop-down panel (position fixed, top var(--tc-top,112px), right var(--tc-right,16px), 400 px wide) whose scrim is transparent and
             only serves to close it on a click outside. No grab handle, no FAB. Targets are the desktop standard (36 px), 48 px on a coarse pointer.
   Never both at once. Without either class nothing here applies. Generic on purpose: no dependency on the planner (PMSuiteGantt reuses it in S3).

   Classes
     common (under .tc-on and .tc-dk):
       tc-btn        a button of the row (icon = inline svg, fill currentColor). Phone: 48x48 icon only. Desktop: icon + visible label, 36 px high
       tc-badge      counter on a tc-btn (.red = needs attention); text = the number. Phone: round, top right of the icon. Desktop: inline after the label
       tc-title      title block of the row: .tc-t1 (title) + .tc-t2 (phone: the tappable «Zoom · period ▾»)
       tc-timerow    the single time row: height <= 32 px, labels + ticks, milestone diamonds in a <= 12 px strip inside it
       tc-sheet-hd   header of the sheet / panel (.f title + a tc-btn close); tc-sheet-bd its body
       tc-sec        a section of the sheet; .tc-lb its label; .tc-seg a segmented choice (aria-pressed); .tc-sel a select
     form-specific:
       tc-bar        the 48 px command row (phone: accent background, white text; desktop: white, ink text, bottom border)
       tc-scrim      layer behind the sheet (phone: dims; desktop: transparent, closes on click)
       tc-sheet      phone: bottom sheet (+ .tc-grab); desktop: drop-down panel anchored under the row
       tc-fab        phone only: 56 px primary action, bottom right
   Every interactive element is >= 48 px on a phone or a coarse pointer (CLAUDE.md §5). */
.tc-on{--tc-accent:var(--accent,#4f46e5);--tc-ink:#1e293b;--tc-muted:#64748b;--tc-line:#e2e8f0}
.tc-dk{--tc-accent:var(--accent,#4f46e5);--tc-ink:#1e293b;--tc-muted:#64748b;--tc-line:#e2e8f0}

/* ---------- common ---------- */
.tc-on .tc-bar{display:flex;align-items:center;gap:0;box-sizing:border-box;width:100%;height:48px;min-height:48px;flex:none;padding:0;margin:0;
  background:var(--tc-accent);color:#fff;border:0}
:is(.tc-on,.tc-dk) .tc-btn{position:relative;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:48px;height:48px;
  padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
:is(.tc-on,.tc-dk) .tc-btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.tc-on .tc-btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
:is(.tc-on,.tc-dk) .tc-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;box-sizing:border-box;padding:0 3px;border-radius:8px;background:#fbbf24;color:#0f172a;
  font:700 10px/16px system-ui,sans-serif;text-align:center;pointer-events:none}
:is(.tc-on,.tc-dk) .tc-badge.red{background:#ef4444;color:#fff}
:is(.tc-on,.tc-dk) .tc-title{flex:1 1 0;min-width:0;height:48px;display:flex;flex-direction:column;justify-content:center;padding:0 4px;line-height:1.15;overflow:hidden;text-align:left}
:is(.tc-on,.tc-dk) .tc-t1{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(.tc-on,.tc-dk) .tc-t2{display:block;max-width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:11px;opacity:.92;text-align:left;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;cursor:pointer}
/* WHY stretched hit area: the 12 px subtitle is the period trigger; the whole 48 px title block takes the tap (§5 ≥48 px) and the layout does not move. */
.tc-on .tc-title{position:relative}
.tc-on .tc-title>.tc-t2{position:static}  /* MudBlazor sets button{position:relative}, which would trap the ::after inside the 12 px line */
.tc-on .tc-title>.tc-t2::after{content:"";position:absolute;inset:0}

:is(.tc-on,.tc-dk) .tc-timerow{position:relative;box-sizing:border-box;height:32px;max-height:32px;overflow:hidden}

.tc-on .tc-scrim{position:fixed;inset:0;z-index:1290;background:rgba(15,23,42,.35)}
.tc-on .tc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1300;box-sizing:border-box;max-height:88dvh;overflow:auto;background:#fff;color:var(--tc-ink);
  border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0px)}
.tc-on .tc-grab{width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:#cbd5e1}
:is(.tc-on,.tc-dk) .tc-sheet-hd{display:flex;align-items:center;height:48px;padding:0 0 0 16px;font-size:16px;font-weight:600}
:is(.tc-on,.tc-dk) .tc-sheet-hd .f{flex:1;min-width:0}
:is(.tc-on,.tc-dk) .tc-sheet-hd .tc-btn{color:var(--tc-ink)}
:is(.tc-on,.tc-dk) .tc-sheet-bd{padding:0 0 12px}
:is(.tc-on,.tc-dk) .tc-sec{padding:0 16px 12px}
:is(.tc-on,.tc-dk) .tc-sec[hidden]{display:none}
:is(.tc-on,.tc-dk) .tc-lb{font-size:12px;color:var(--tc-muted);margin:0 0 4px}
:is(.tc-on,.tc-dk) .tc-seg{display:flex;flex-wrap:wrap;gap:6px}
:is(.tc-on,.tc-dk) .tc-seg>button{flex:1 1 0;min-width:72px;min-height:48px;padding:0 10px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#334155;font:inherit;font-size:13px;cursor:pointer}
:is(.tc-on,.tc-dk) .tc-seg>button[aria-pressed="true"]{background:var(--tc-accent);border-color:var(--tc-accent);color:#fff}
:is(.tc-on,.tc-dk) .tc-sel{box-sizing:border-box;width:100%;min-height:48px;padding:0 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--tc-ink);font:inherit;font-size:16px}

.tc-on .tc-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:35;box-sizing:border-box;width:56px;height:56px;padding:0;border:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--tc-accent);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
.tc-on .tc-fab svg{width:26px;height:26px;fill:currentColor}

/* ---------- desktop form (1.1.0) ---------- */
.tc-dk .tc-bar{display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;min-height:48px;max-height:48px;flex:none;flex-wrap:nowrap;padding:0 12px;margin:0;
  background:#fff;color:var(--tc-ink);border:0;border-bottom:1px solid var(--tc-line);white-space:nowrap;min-width:0}
.tc-dk .tc-btn{width:auto;min-width:36px;height:36px;gap:6px;padding:0 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:var(--tc-ink);font-size:13px;font-weight:600}
.tc-dk .tc-btn svg{width:18px;height:18px}
.tc-dk .tc-btn:hover{background:#f8fafc}
.tc-dk .tc-btn:focus-visible{outline:2px solid var(--tc-accent);outline-offset:1px}
.tc-dk .tc-btn[aria-expanded="true"]{border-color:var(--tc-accent);background:#eef2ff}
.tc-dk .tc-badge{position:static;display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--tc-accent);color:#fff;font:700 11px/18px system-ui,sans-serif}
.tc-dk .tc-badge.red{background:#ef4444}
.tc-dk .tc-badge[hidden]{display:none}
.tc-dk .tc-title{flex:0 1 auto;height:auto;padding:0 4px 0 0}
.tc-dk .tc-t1{font-size:15px;font-weight:600}
.tc-dk .tc-scrim{position:fixed;inset:0;z-index:1290;background:transparent}
.tc-dk .tc-sheet{position:fixed;top:var(--tc-top,112px);right:var(--tc-right,16px);left:auto;bottom:auto;z-index:1300;box-sizing:border-box;width:400px;max-width:calc(100vw - 32px);
  max-height:calc(100dvh - var(--tc-top,112px) - 16px);overflow:auto;background:#fff;color:var(--tc-ink);border:1px solid var(--tc-line);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.18)}
.tc-dk .tc-grab,.tc-dk .tc-fab{display:none}
.tc-dk .tc-sheet-hd{height:44px;font-size:15px;padding:0 4px 0 16px}
.tc-dk .tc-sheet-hd .tc-btn{width:36px;min-width:36px;padding:0;border:0;background:transparent}
.tc-dk .tc-seg>button{min-height:36px;border-radius:8px}
.tc-dk .tc-sel{min-height:36px;border-radius:8px;font-size:14px}
@media (pointer:coarse){
  .tc-dk .tc-btn,.tc-dk .tc-sheet-hd .tc-btn{min-width:48px;height:48px}
  .tc-dk .tc-seg>button,.tc-dk .tc-sel{min-height:48px}
}

/* ---------- 1.2.0 (S3): shared helpers, new selectors only ---------- */
:is(.tc-on,.tc-dk) .tc-sp{flex:1 1 0;min-width:0}
.tc-on .tc-lbl{display:none}
/* WHY a container query and not a media query: the row's width depends on the navigation drawer too; the texts go before anything wraps. */
.tc-dk .tc-cq{container-type:inline-size}
@container (max-width:1099.98px){.tc-dk .tc-lbl{display:none}}
:is(.tc-on,.tc-dk) .tc-sec-btn{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;padding:0 12px;
  border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--tc-ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
:is(.tc-on,.tc-dk) .tc-sec-btn:focus-visible{outline:2px solid var(--tc-accent);outline-offset:1px}
.tc-dk .tc-sec-btn{min-height:36px;border-radius:8px}
@media (pointer:coarse){.tc-dk .tc-sec-btn{min-height:48px}}