/* ==========================================================================
   Trego Minds design system (customer + staff UI). Loaded last on every page.
   Colours: tokens only (/tokens.css). Spacing 4/8/12/16/24/32, radius 8px,
   1px borders, soft shadows; one sans-serif stack; one type scale.
   ========================================================================== */

/* ------------------------------------------------------------------ base */
html, body { background: var(--color-bg); color: var(--color-text); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased; }
a { color: var(--color-link); }
h1, h2, h3, h4 { color: var(--color-text); font-weight: var(--fw-semibold); line-height: 1.3; }
small, .note, .muted, .sh-muted { color: var(--color-text-2); font-size: var(--fs-small); }
/* Fallbacks: if the token file ever fails to load, the page is still light (system colours). */
html { background: var(--color-bg, Canvas); color: var(--color-text, CanvasText); }
code { font-family: var(--font-mono); font-size: var(--fs-small); background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 1px var(--sp-1); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ brand */
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--color-text); }
.brand__mark { width: 32px; height: 32px; padding: 4px; border-radius: var(--radius-md); background: var(--brand-mark-bg); border: 0; }
.brand__name { display: block; font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: 0; color: var(--color-text); text-transform: none; }
.brand__sub { display: block; font-size: var(--fs-small); color: var(--color-text-2); letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------------ app shell */
body.app-shell { background: var(--color-bg) !important; color: var(--color-text) !important; padding: 0 var(--sp-5) var(--sp-6); }
.app-shell .container { max-width: var(--content-max); width: 100%; margin: 0 auto; }
.app-shell .app-header { margin: 0 calc(-1 * var(--sp-5)) var(--sp-5); padding: var(--sp-3) var(--sp-5); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-1); }
/* Header: the brand once; "Organization: <tenant> · <role>" small and muted underneath. */
.app-shell .app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.app-shell .header-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-shell .tg-org { margin: 0; font-size: var(--fs-small); color: var(--color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell .tg-org .tenant-name { font-size: inherit; font-weight: var(--fw-medium); color: var(--color-text); margin: 0; line-height: inherit; }
.app-shell .header-controls { display: flex; gap: var(--sp-2); align-items: center; }
/* Account menu (Public site, Diagnostics, Switch tenant, Sign out). */
.tg-user-menu { position: relative; }
.tg-user-menu > summary { list-style: none; cursor: pointer; }
.tg-user-menu > summary::-webkit-details-marker { display: none; }
.tg-user-menu-items { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: 20; min-width: 190px; display: grid; padding: var(--sp-1);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.tg-menu-item, .app-shell button.tg-menu-item { display: block; width: 100%; min-height: 32px; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-regular); text-align: left; text-decoration: none; cursor: pointer; justify-content: flex-start; }
.tg-menu-item:hover, .tg-menu-item:focus-visible { background: var(--color-surface-hover); text-decoration: none; }
.tg-menu-item[hidden] { display: none; }

/* Main content: full width next to the left menu (max 1600px on very large screens). */
.tg-layout { grid-template-columns: var(--nav-width) minmax(0, 1fr); gap: var(--sp-5); margin-top: 0; }
.tg-main { min-width: 0; }
.tg-nav ul { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-2); box-shadow: var(--shadow-1); top: var(--sp-4); }
.tg-nav-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-3);
  border-radius: var(--radius-sm); color: var(--color-text-2); font-weight: var(--fw-medium); text-decoration: none; border-left: 3px solid transparent; }
.tg-nav-link:hover, .tg-nav-link:focus-visible { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.tg-nav-link[aria-current='page'] { background: var(--color-primary-tint); color: var(--color-primary); border-left-color: var(--color-primary); font-weight: var(--fw-semibold); }
.tg-nav-badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--color-danger); color: var(--color-on-danger); font-size: 12px; font-weight: var(--fw-semibold); line-height: 1; }
.tg-topbar { min-height: 0; margin-bottom: var(--sp-3); }
.tg-cloud-switch { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.tg-cloud-option { background: var(--color-surface); color: var(--color-text-2); padding: var(--sp-2) var(--sp-4); font-weight: var(--fw-medium); }
.tg-cloud-option + .tg-cloud-option { border-left: 1px solid var(--color-border); }
.tg-cloud-option.tg-selected { background: var(--color-primary-tint); color: var(--color-primary); }

/* ------------------------------------------------------------------ headings + sections */
.sh-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.sh-heading h1 { font-size: var(--fs-title); font-weight: var(--fw-semibold); margin: 0; }
.sh-eyebrow { margin: 0 0 var(--sp-1); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-3); }
#page-overview h2, #page-settings h2, .sh-rca h2, .tg-onboarding h2, .tg-attention h2, .sh-detail h2 { font-size: var(--fs-section); margin: 0 0 var(--sp-3); }
.sh-detail h3, .cz-step h3, #reports h3, #resource-insights h3 { font-size: 15px; margin: var(--sp-5) 0 var(--sp-2); }
/* Status / feedback lines ("Updated 10:05", "Loading…"): neutral, not a warning. */
.sh-notice { color: var(--color-text-2); font-size: var(--fs-small); margin: var(--sp-1) 0 var(--sp-3); }
.sh-notice:empty { display: none; }

/* ------------------------------------------------------------------ cards */
.app-shell .card, .tg-conn-card, .tg-onboarding, .tg-attention, .cz-step, .sh-rca, .sh-detail, .auth-card, .reg-card, .panel {
  background: var(--color-surface) !important; color: var(--color-text) !important; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-1) !important; }
.tg-onboarding, .tg-attention, .cz-step, .sh-rca, .sh-detail, .tg-conn-card { padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); }
.tg-attention-on { border-color: var(--st-blocked-fg); background: var(--st-blocked-bg) !important; }
.tg-conn-head { gap: var(--sp-3); }
.tg-conn-fields dt { color: var(--color-text-2); font-size: var(--fs-small); }
.tg-conn-fields dd { margin: 0; }

/* ------------------------------------------------------------------ buttons */
.sh-button, .toggle-btn, .btn-secondary, .chip, .topology-manage-btn, .app-shell button:not(.tg-cloud-option):not(.sh-tile):not(.sh-chip-remove) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; white-space: nowrap; }
.sh-button:hover, .toggle-btn:hover, .btn-secondary:hover { background: var(--color-surface-hover); text-decoration: none; }
.btn-primary, .sh-button.sh-primary, .empty-state-action, .app-shell .btn-primary {
  min-height: 36px; padding: 0 var(--sp-4); border-radius: var(--radius-sm); border: 1px solid var(--color-primary);
  background: var(--color-primary) !important; color: var(--color-on-primary) !important; font-weight: var(--fw-semibold); cursor: pointer; }
.btn-primary:hover, .sh-button.sh-primary:hover { background: var(--color-primary-hover) !important; border-color: var(--color-primary-hover); }
.sh-button.sh-danger, .app-shell button.sh-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-danger); }
.sh-button.sh-danger:hover { background: var(--color-danger-hover); }
button:disabled, .sh-button:disabled, .tg-readonly { opacity: 0.55; cursor: not-allowed; }
.sh-link { color: var(--color-link); font-weight: var(--fw-medium); }

/* ------------------------------------------------------------------ form inputs */
.app-shell input[type="text"], .app-shell input[type="search"], .app-shell input[type="email"], .app-shell input[type="date"], .app-shell select, .app-shell textarea,
.auth-shell input[type="text"], .auth-shell input[type="search"], .auth-shell input[type="email"], .auth-shell input[type="number"], .auth-shell select, .auth-shell textarea {
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  min-height: 34px; padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--fs-body); }
.app-shell input:focus, .app-shell select:focus, .app-shell textarea:focus, .auth-shell input:focus, .auth-shell select:focus, .auth-shell textarea:focus {
  outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-primary-tint); }
.sh-filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin: var(--sp-3) 0; }
.sh-filters label { display: grid; gap: var(--sp-1); font-size: var(--fs-small); color: var(--color-text-2); font-weight: var(--fw-medium); }

/* ------------------------------------------------------------------ tiles (Overview, Insights, Reports, staff stats) */
/* Tiles: number, label, optional note ("approximate"); every tile the same height, nothing spills. */
.sh-metrics, .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-5); }
.sh-metrics > div, .sh-metrics > .sh-tile, .sh-metrics > .sh-tile-static, .stat {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 72px; min-width: 0; overflow: hidden; padding: 10px var(--sp-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); text-align: left; color: var(--color-text); }
.sh-metrics strong, .stat strong, .sh-tile-value { display: block; font-size: var(--fs-metric); font-weight: var(--fw-semibold); line-height: 1.2; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-metrics span, .stat span, .sh-tile-label { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--color-text-2); }
/* Tiles from C.tile(): the number with its optional note on the first line, the label under it.
   The note sits beside the number and drops under it only when the tile is too narrow. */
.sh-metrics > .sh-tile, .sh-metrics > .sh-tile-static { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; align-content: center;
  column-gap: var(--sp-2); row-gap: 2px; }
.sh-metrics > .sh-tile > .sh-tile-value, .sh-metrics > .sh-tile-static > .sh-tile-value { order: 0; flex: 0 1 auto; }
.sh-metrics > .sh-tile > .sh-tile-note, .sh-metrics > .sh-tile-static > .sh-tile-note { order: 1; flex: 0 0 auto; }
.sh-metrics > .sh-tile > .sh-tile-label, .sh-metrics > .sh-tile-static > .sh-tile-label { order: 2; flex: 0 0 100%; }
.sh-tile-note { font-size: 12px; color: var(--color-text-3); white-space: nowrap; }
/* Older tile spacing rules (label min-height, number margin) would make tiles tall. */
.sh-metrics span, .sh-metrics .sh-tile-label { min-height: 0; }
.sh-metrics strong, .sh-metrics .sh-tile-value { margin-top: 0; }
.sh-metrics > .sh-tile:hover, .sh-metrics > .sh-tile:focus-visible { border-color: var(--color-primary); }

/* ------------------------------------------------------------------ status chips + cloud badges (labels, single line) */
.sh-badge, .ti-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--fw-medium); line-height: 18px; white-space: nowrap; border: 0; cursor: default; }
.sh-badge.sh-success { background: var(--st-recovered-bg); color: var(--st-recovered-fg); }
.sh-badge.sh-warning { background: var(--st-blocked-bg); color: var(--st-blocked-fg); }
.sh-badge.sh-danger { background: var(--st-failed-bg); color: var(--st-failed-fg); }
.sh-badge.sh-info { background: var(--st-progress-bg); color: var(--st-progress-fg); }
.sh-badge.sh-neutral { background: var(--st-unknown-bg); color: var(--st-unknown-fg); }
.ti-status-recovered { color: var(--st-recovered-fg); } .ti-status-blocked { color: var(--st-blocked-fg); } .ti-status-failed { color: var(--st-failed-fg); }
.ti-status-in_progress { color: var(--st-progress-fg); } .ti-status-unknown, .ti-status-informational { color: var(--st-unknown-fg); }
.ti-status-resolved, .sh-resolved, .sh-resolution strong { color: var(--st-resolved-fg); }
/* Cloud badges: a whole pill (tint + brand-coloured text and glyph). No borders or edge accents. */
.ti-badge-azure { background: var(--azure-bg); color: var(--azure-fg); }
.ti-badge-aws { background: var(--aws-bg); color: var(--aws-fg); }
.ti-badge-all { background: var(--color-surface-2); color: var(--color-text-2); }
.ti-badge-azure .ti:not(.ti-img) { background-color: var(--azure-mark); }
.ti-badge-aws .ti:not(.ti-img) { background-color: var(--aws-mark); }
.tg-cloud-option .ti-badge { background: transparent; color: inherit; padding: 0; }
.message.error { background: var(--st-failed-bg); color: var(--st-failed-fg); }
.message.success { background: var(--st-recovered-bg); color: var(--st-recovered-fg); }

/* ------------------------------------------------------------------ tables */
.sh-table-scroll, .table-scroll { overflow: auto; max-width: 100%; max-height: 72vh; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1); margin-top: var(--sp-3); }
.sh-table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); font-size: var(--fs-body); }
.sh-table caption { padding: var(--sp-3) var(--sp-4); color: var(--color-text-2); font-size: var(--fs-small); text-align: left; caption-side: top; }
.sh-table thead th, .data-table th { position: sticky; top: 0; z-index: 1; background: var(--color-surface-2); color: var(--color-text-2);
  font-size: 12px; font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--color-border); }
/* Calm table text: regular weight everywhere except the resource name. */
.sh-table td, .data-table td { font-weight: var(--fw-regular); }
.sh-table td strong, .sh-table td b { font-weight: var(--fw-regular); }
.sh-table td .sh-resource strong { font-weight: var(--fw-semibold); }
.sh-table th, .sh-table td, .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.sh-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td { background: var(--color-zebra); }
.sh-table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--color-surface-hover); }
.sh-table tr.sh-selected td { background: var(--color-primary-tint); }
.sh-table small { display: block; margin-top: 2px; color: var(--color-text-2); font-size: var(--fs-small); }

/* Incident list: fixed layout, default widths (components.js), no overlap: every cell clips
   to its own box (ellipsis + tooltip), long texts wrap to at most two lines. */
/* Fixed columns total 750px; Signal and Outcome share the rest (>= ~200px / ~190px at 1140px).
   The whole table, including "View ›", fits next to the menu on a 1440px-wide window;
   narrower windows scroll the table horizontally instead of squashing it. */
.sh-table.sh-incidents { table-layout: fixed; width: 100%; min-width: 1140px; }
.sh-table.sh-incidents.sh-selecting { min-width: 1176px; }
/* The action column is reserved for "View ›"; chips and badges are never clipped. */
.sh-table.sh-incidents td.sh-action-cell { padding-left: var(--sp-2); padding-right: var(--sp-3); text-align: right; overflow: visible; }
.sh-table.sh-incidents td .sh-badge, .sh-table.sh-incidents td .ti-badge { max-width: none; }
.sh-table.sh-incidents td, .sh-table.sh-incidents th { overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.sh-table.sh-incidents td.sh-nowrap { white-space: nowrap; }
.sh-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.sh-resource { min-width: 0; overflow: hidden; }
.sh-resource strong { font-weight: var(--fw-semibold); }
.sh-col-resize { width: 6px; }
.sh-col-resize:hover, .sh-col-resize:focus-visible { background: var(--color-border-strong); }

/* ------------------------------------------------------------------ incident card, dialogs */
.sh-detail .sh-card-header { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sh-detail .sh-card-header h2 { margin: 0; font-size: var(--fs-title); }
.sh-fields { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.sh-fields dt { color: var(--color-text-2); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.sh-fields dd { margin: 0; overflow-wrap: anywhere; }
.sh-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-border); }
.sh-timeline li { display: grid; grid-template-columns: 190px 1fr; gap: var(--sp-3); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); }
.sh-timeline time { color: var(--color-text-2); font-size: var(--fs-small); }
.tg-dialog { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: var(--sp-5); max-width: 480px; }
.tg-dialog::backdrop { background: var(--color-overlay); }
.tg-dialog h2 { font-size: var(--fs-section); margin: 0 0 var(--sp-2); }
.tg-dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ------------------------------------------------------------------ staff pages */
.auth-shell { background: var(--color-bg); color: var(--color-text); }
.auth-card { padding: var(--sp-5) var(--sp-6); }
.auth-card label { color: var(--color-text); font-weight: var(--fw-medium); font-size: var(--fs-small); }
.staff-nav { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--sp-4); }
.staff-nav a { color: var(--color-text-2); font-weight: var(--fw-medium); }
.staff-nav a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.chip[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-tint); }

/* ------------------------------------------------------------------ settings: appearance */
.tg-radio { display: grid; gap: var(--sp-2); }
.tg-radio label { display: flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 760px) {
  body.app-shell { padding: 0 var(--sp-3) var(--sp-5); }
  .app-shell .app-header { margin: 0 calc(-1 * var(--sp-3)) var(--sp-4); padding: var(--sp-3); }
  .tg-layout { grid-template-columns: 1fr; }
  .sh-timeline li { grid-template-columns: 1fr; }
}