/* ==================================================================
   AEDAR UI — component styles
   Reusable classes shared by the Customer App and Control Plane.
   Values transcribed verbatim from the Figma Button component set.
   Requires styles.css (tokens + type roles) to be loaded first.
================================================================== */

/* ---- Button ------------------------------------------------------
   Base: h36 · radius 8 · padding 0 16 · Inter 14/500 · gap 8 · shadow-sm
------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
  box-sizing: border-box;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--colors-light-custom-focus);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
.btn .btn-icon-glyph { width: 16px; height: 16px; flex-shrink: 0; }
.btn-icon > svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Sizes */
.btn-sm  { height: 32px; padding: 0 12px; }
.btn-lg  { height: 40px; padding: 0 24px; }
.btn-icon    { width: 36px; height: 36px; padding: 0; }
.btn-icon-sm { width: 32px; height: 32px; padding: 0; }
.btn-icon-lg { width: 40px; height: 40px; padding: 0; }

/* Type: Default (primary) */
.btn-default { background: var(--colors-light-primary); color: #fff; }
.btn-default:hover { background: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)), var(--colors-light-primary); }
.btn-default:active { background: linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)), var(--colors-light-primary); }

/* Type: Secondary */
.btn-secondary { background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }
.btn-secondary:hover { background: var(--colors-light-accent); }
.btn-secondary:active { background: linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)), var(--colors-light-accent); }

/* Type: Destructive */
.btn-destructive { background: var(--colors-light-destructive); color: #fff; }
.btn-destructive:hover { background: linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)), var(--colors-light-destructive); }
.btn-destructive:active { background: linear-gradient(rgba(0,0,0,.06),rgba(0,0,0,.06)), var(--colors-light-destructive); }

/* Type: Outline */
.btn-outline { background: var(--colors-light-background); color: var(--colors-light-foreground); border-color: var(--colors-light-input); }
.btn-outline:hover { background: var(--colors-light-secondary); border-color: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }
.btn-outline:active { background: var(--colors-light-accent); }

/* Type: Ghost (no shadow) */
.btn-ghost { background: transparent; color: var(--colors-light-foreground); box-shadow: none; }
.btn-ghost:hover { background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }
.btn-ghost:active { background: var(--colors-light-accent); }

/* Type: Link (no shadow) */
.btn-link { background: transparent; color: var(--colors-light-primary); box-shadow: none; padding-left: 4px; padding-right: 4px; }
.btn-link:hover { text-decoration: underline; }

/* Loading spinner */
.btn-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 9999px; animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Form fields -------------------------------------------------
   Input: h36 · radius 8 · border #F1F1F1 · pad 0 12 · Inter 14/400
   Focus: border #95BDFF + 3px ring rgba(223,235,255,.48)
   Error: border #C84747 + 3px ring rgba(220,38,38,.4)
------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); }
.field-label .req { color: var(--colors-light-destructive); margin-left: 2px; }
.field-help { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--colors-light-muted-foreground); }
.field-error { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--colors-light-destructive); }

.input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--colors-light-input);
  background: var(--colors-light-background);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--colors-light-foreground);
  transition: border-color .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}
.input::placeholder { color: var(--colors-light-muted-foreground); }
.input:focus, .input:focus-visible {
  outline: none;
  border-color: var(--colors-light-ring);
  box-shadow: 0 0 0 3px var(--colors-light-custom-focus);
}
.input.is-error { border-color: var(--colors-light-destructive); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--colors-light-custom-destructive-focus); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.input { height: auto; min-height: 76px; padding: 8px 12px; resize: vertical; }

/* Select — input shell + chevron */
.select-wrap { position: relative; display: inline-block; width: 100%; }
.select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  pointer-events: none;
  background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A5A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
select.input:invalid { color: var(--colors-light-muted-foreground); }

/* Checkbox — 16×16 · r4 · checked = primary */
.checkbox {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--colors-light-border); background: var(--colors-light-background);
  cursor: pointer; position: relative; transition: background-color .12s ease, border-color .12s ease;
}
.checkbox:checked { background: var(--colors-light-primary); border-color: var(--colors-light-primary); }
.checkbox:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.checkbox:disabled { opacity: .5; cursor: not-allowed; }

/* Radio — 16×16 circle · checked inner dot 8px primary */
.radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 9999px;
  border: 1px solid var(--colors-light-border); background: var(--colors-light-background);
  cursor: pointer; position: relative; transition: border-color .12s ease;
}
.radio:checked { border-color: var(--colors-light-primary); }
.radio:checked::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px;
  border-radius: 9999px; background: var(--colors-light-primary);
}
.radio:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.radio:disabled { opacity: .5; cursor: not-allowed; }

/* Switch — 36×20 track · 16px white thumb · on = primary */
.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 36px; height: 20px; border-radius: 9999px; background: rgb(229,229,229);
  cursor: pointer; position: relative; transition: background-color .15s ease;
}
.switch::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  border-radius: 9999px; background: #fff; box-shadow: 0 .5px .5px rgba(0,0,0,.1);
  transition: transform .15s ease;
}
.switch:checked { background: var(--colors-light-primary); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* Control + label row */
.control-row { display: flex; align-items: center; gap: 10px; }
.control-row label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); cursor: pointer; }

/* ---- Combobox ----------------------------------------------------
   Trigger: h36 · r8 · border #F1F1F1 · chevrons-up-down
   Popover: r8 · border #EBEBEB · search (h40) + list
   Item: h32 · r4 · hover #E0F2FE · check when selected
------------------------------------------------------------------- */
.combobox { position: relative; width: 100%; }
.combobox-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px;
  padding: 0 16px; border-radius: 8px; border: 1px solid var(--colors-light-input);
  background: var(--colors-light-background); cursor: pointer;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px;
  color: var(--colors-light-foreground); text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease; box-sizing: border-box;
}
.combobox-trigger:focus-visible { outline: none; border-color: var(--colors-light-ring); box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.combobox-trigger.is-open { border-color: var(--colors-light-ring); box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.combobox-value { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox:not(.has-value) .combobox-value { color: var(--colors-light-muted-foreground); font-weight: 400; }
.combobox-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--colors-light-muted-foreground); }

.combobox-popover {
  position: fixed; z-index: 120; min-width: 192px;
  background: var(--colors-light-popover); border: 1px solid var(--colors-light-border);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.1);
}
.combobox-popover[hidden] { display: none; }
.combobox-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--colors-light-border); }
.combobox-search svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--colors-light-muted-foreground); }
.combobox-search-input {
  flex-grow: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--colors-light-foreground);
}
.combobox-search-input::placeholder { color: var(--colors-light-muted-foreground); }
.combobox-list { max-height: 264px; overflow-y: auto; padding: 4px; }
.combobox-group-label { padding: 6px 8px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--colors-light-muted-foreground); }
.combobox-item {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 6px 8px;
  border-radius: 4px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground);
}
.combobox-item[hidden] { display: none; }
.combobox-item.is-active { background: var(--colors-light-accent); }
.combobox-item .combobox-item-label { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-item .combobox-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--colors-light-primary); opacity: 0; }
.combobox-item.is-selected .combobox-check { opacity: 1; }
.combobox-empty { padding: 14px 12px; text-align: center; font-family: var(--font-sans); font-size: 14px; color: var(--colors-light-muted-foreground); }
.combobox-empty[hidden] { display: none; }

/* Select variant of the dropdown — no search field; Figma Select Menu shadow */
.combobox-popover.is-select { box-shadow: inset 0 0 0 1px var(--colors-light-border), 0 4px 4px rgba(0,0,0,.25); padding: 4px; }
.combobox-popover.is-select .combobox-list { max-height: 300px; padding: 0; }

/* ---- Badge -------------------------------------------------------
   h20 · r8 · pad 2 8 · gap 4 · Inter 12/500 lh16
------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 20px; padding: 2px 8px; border-radius: 8px; border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; white-space: nowrap;
  box-sizing: border-box;
}
.badge-default     { background: var(--colors-light-primary); color: #fff; }
.badge-secondary   { background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }
.badge-outline     { background: transparent; border-color: var(--colors-light-border); color: var(--colors-light-foreground); }
.badge-destructive { background: var(--colors-light-destructive); color: #fff; }

/* Status badge — soft pill + leading dot, using AEDAR device status colors */
.badge-status { gap: 6px; }
.badge-status .badge-dot { width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0; }
.badge-operational { background: var(--status-operational-soft); color: rgb(21,128,61); }
.badge-operational .badge-dot { background: var(--status-operational); }
.badge-warning     { background: var(--status-warning-soft); color: rgb(146,116,0); }
.badge-warning .badge-dot { background: var(--status-warning); }
.badge-validate    { background: var(--status-validate-soft); color: var(--status-validate); }
.badge-validate .badge-dot { background: var(--status-validate); }
.badge-in-use      { background: var(--status-in-use-soft); color: var(--status-in-use); }
.badge-in-use .badge-dot { background: var(--status-in-use); }
.badge-offline     { background: var(--status-offline-soft); color: rgb(115,115,115); }
.badge-offline .badge-dot { background: var(--status-offline); }

/* Solid status badge (filled) — for high-emphasis contexts */
.badge-solid { color: #fff; }
.badge-solid.badge-operational { background: var(--status-operational); }
.badge-solid.badge-warning { background: var(--status-warning); color: rgb(66,52,0); }
.badge-solid.badge-validate { background: var(--status-validate); }
.badge-solid.badge-in-use { background: var(--status-in-use); }
.badge-solid.badge-offline { background: var(--status-offline); }

/* Count / number badge — 20×20 pill, r-full */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 2px 6px; border-radius: 9999px;
  background: var(--colors-light-primary); color: #fff;
  font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; box-sizing: border-box;
}
.badge-count.is-destructive { background: var(--colors-light-destructive); }
.badge-count.is-muted { background: var(--colors-light-muted-foreground); }
.badge-count.is-inverted { background: var(--colors-light-secondary-foreground); color: #fff; }
.badge-count.is-secondary { background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }

/* Bare status dot (tight contexts — table leading cell, map legend) */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.status-dot.operational { background: var(--status-operational); }
.status-dot.warning { background: var(--status-warning); }
.status-dot.validate { background: var(--status-validate); }
.status-dot.in-use { background: var(--status-in-use); }
.status-dot.offline { background: var(--status-offline); }

/* ---- Data table --------------------------------------------------
   Header h40 muted · rows h52 · cell pad 8/12 · separators #EBEBEB
------------------------------------------------------------------- */
.dt-wrap { border: 1px solid var(--colors-light-border); border-radius: 12px; overflow: hidden; background: var(--colors-light-card); }
.dt { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.dt thead th {
  height: 40px; padding: 0 12px; text-align: left; background: var(--colors-light-muted);
  border-bottom: 1px solid var(--colors-light-border);
  font-weight: 500; font-size: 13px; line-height: 20px; color: var(--colors-light-foreground); white-space: nowrap;
}
.dt th.sortable { cursor: pointer; user-select: none; }
.dt th .th-inner { display: inline-flex; align-items: center; gap: 6px; }
.dt th .th-sort { width: 14px; height: 14px; color: var(--colors-light-muted-foreground); flex-shrink: 0; }
.dt th.sorted .th-sort { color: var(--colors-light-primary); }
.dt th.col-check, .dt td.col-check { width: 44px; text-align: center; padding: 0; }
.dt th.col-check .checkbox, .dt td.col-check .checkbox { vertical-align: middle; }
.dt th.col-actions, .dt td.col-actions { width: 52px; text-align: right; }
.dt th.num, .dt td.num { text-align: right; }

.dt tbody td { height: 52px; padding: 8px 12px; border-top: 1px solid var(--colors-light-border); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); vertical-align: middle; }
.dt tbody tr { transition: background-color .1s ease; }
.dt tbody tr:hover { background: var(--colors-light-muted); }
.dt tbody tr.is-selected { background: var(--colors-light-secondary); }
.dt tbody tr[hidden] { display: none; }
.dt-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.dt-primary { font-weight: 500; color: var(--colors-light-foreground); }
.dt-sub { font-size: 12px; line-height: 16px; color: var(--colors-light-muted-foreground); }
.dt-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; color: var(--colors-light-muted-foreground); }
.dt-actions { display: inline-flex; justify-content: flex-end; }

/* Battery indicator */
.battery { display: inline-flex; align-items: center; gap: 8px; }
.battery-track { width: 44px; height: 6px; border-radius: 9999px; background: var(--colors-light-input); overflow: hidden; }
.battery-fill { height: 100%; border-radius: 9999px; }
.battery-pct { font-family: var(--font-mono); font-size: 12px; color: var(--colors-light-foreground); min-width: 34px; }
.batt { display: inline-flex; align-items: center; gap: 8px; }
.batt-ico { line-height: 0; flex-shrink: 0; }
.batt-ico svg { width: 24px; height: 16px; display: block; }

/* Table footer / pagination */
.dt-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--colors-light-border); background: var(--colors-light-card); }
.dt-footer .foot-selected { font-size: 14px; color: var(--colors-light-muted-foreground); }
.dt-foot-right { display: flex; align-items: center; gap: 28px; }
.dt-rows { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--colors-light-foreground); }
.dt-rows .combobox { width: 72px; }
.dt-pageinfo { font-size: 14px; color: var(--colors-light-foreground); }
.dt-pagebtns { display: flex; align-items: center; gap: 8px; }

/* Toolbar above a table (search + actions) */
.dt-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dt-toolbar .search { position: relative; flex-grow: 1; max-width: 320px; }
.dt-toolbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--colors-light-muted-foreground); pointer-events: none; }
.dt-toolbar .search .input { padding-left: 34px; }
.dt-toolbar .spacer { flex-grow: 1; }

/* ---- Dropdown menu ----------------------------------------------
   Container r6 · inset border + 0 2 4 rgba(15,23,42,.15) · pad 4
   Item h32 · r4 · pad 6 8 · gap 10 · icon 16 · hover accent
------------------------------------------------------------------- */
.menu-popover {
  position: fixed; z-index: 60; min-width: 200px; max-width: 320px;
  background: var(--colors-light-popover); border-radius: 6px; padding: 4px;
  box-shadow: inset 0 0 0 1px var(--colors-light-border), 0 2px 4px rgba(15,23,42,.15), 0 8px 24px rgba(15,23,42,.08);
}
.menu-popover[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 10px; height: 32px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground);
}
.menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--colors-light-muted-foreground); }
.menu-item .menu-item-label { flex-grow: 1; white-space: nowrap; }
.menu-item .menu-shortcut { margin-left: auto; font-size: 12px; color: var(--colors-light-muted-foreground); letter-spacing: .02em; }
.menu-item.is-active, .menu-item:hover { background: var(--colors-light-accent); }
.menu-item.is-destructive { color: var(--colors-light-destructive); }
.menu-item.is-destructive svg { color: var(--colors-light-destructive); }
.menu-item.is-destructive.is-active, .menu-item.is-destructive:hover { background: var(--status-in-use-soft); }
.menu-sep { height: 1px; background: var(--colors-light-border); margin: 4px 0; }
.menu-label { padding: 6px 8px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 16px; color: var(--colors-light-muted-foreground); }
/* TH/EN pill inside a menu row — signals the row is a switch */
.menu-lang-seg { display: inline-flex; margin-left: auto; padding: 2px; gap: 2px; border-radius: 6px; background: var(--colors-light-secondary); }
.menu-lang-seg span { padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 500; letter-spacing: .03em; color: var(--colors-light-muted-foreground); }
.menu-lang-seg span.on { background: var(--colors-light-card); color: var(--colors-light-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* ---- Dialog / modal ----------------------------------------------
   Overlay scrim · card w424 · r12 · shadow 0 10 15 -3 + 0 4 6 -4
   Header title 18/600 (-.025em) + desc 14 muted · footer 2 btns right
------------------------------------------------------------------- */
.dialog-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .15s ease;
}
.dialog-overlay.is-open { opacity: 1; }
.dialog-overlay[hidden] { display: none; }
.dialog {
  position: relative; width: 100%; max-width: 424px; background: var(--colors-light-background);
  border: 1px solid var(--colors-light-border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  transform: translateY(8px) scale(.98); transition: transform .15s ease;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.dialog-overlay.is-open .dialog { transform: none; }
.dialog-header { padding: 24px 48px 0 24px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.dialog-title { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.025em; color: var(--colors-light-foreground); }
.dialog-desc { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-muted-foreground); }
.dialog-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.dialog-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 24px 24px; flex-shrink: 0; }
.dialog-footer.spread { justify-content: space-between; }
.dialog-close {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px; color: var(--colors-light-foreground); opacity: .7; cursor: pointer; transition: opacity .12s, background-color .12s;
}
.dialog-close:hover { opacity: 1; background: var(--colors-light-muted); }
.dialog-close svg { width: 16px; height: 16px; }
body.dialog-open { overflow: hidden; }

/* ---- App bar / nav shell ----------------------------------------
   Shared top bar: logo + primary nav + right actions. Nav CONTENT
   differs per app (org-node scope vs customer switcher); the SHELL
   is shared. Bar h64, border-bottom, Healix wordmark left.
------------------------------------------------------------------- */
.appbar { display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 28px; background: var(--colors-light-background); border-bottom: 1px solid var(--colors-light-border); }
.appbar-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.appbar-logo { height: 19px; width: auto; display: block; }
.appbar-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; border: none; background: transparent; font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .1s ease, color .1s ease; }
.nav-item svg { width: 16px; height: 16px; color: var(--colors-light-muted-foreground); }
.nav-item:hover { background: var(--colors-light-secondary); }
.nav-item.active { background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); }
.nav-item.active svg { color: var(--colors-light-secondary-foreground); }
.appbar-spacer { flex-grow: 1; }
.appbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.scope-divider { width: 1px; height: 28px; background: var(--colors-light-border); flex-shrink: 0; }
.cp-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--colors-light-secondary-foreground); background: var(--colors-light-secondary); border-radius: 6px; padding: 3px 8px; margin-left: 2px; }

/* Bell with count */
.bell-wrap { position: relative; display: inline-flex; }
.bell-wrap .badge-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; border: 2px solid var(--colors-light-background); }

/* Avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: none; background: var(--colors-light-secondary); color: var(--colors-light-secondary-foreground); font-family: var(--font-sans); font-weight: 500; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.avatar.sq { border-radius: 8px; }

/* Scope selector / customer switcher (combobox sits in a sized wrap) */
.scope-slot { width: 260px; }
.scope-slot.wide { width: 280px; }
.scope-label { font-size: 12px; font-weight: 500; color: var(--colors-light-muted-foreground); margin-right: 2px; white-space: nowrap; }
/* tree indentation inside a combobox list */
.combobox-item.lvl-1 { padding-left: 24px; }
.combobox-item.lvl-2 { padding-left: 40px; }
.combobox-item.lvl-3 { padding-left: 56px; }
.combobox-item .tree-ico { width: 15px; height: 15px; color: var(--colors-light-muted-foreground); flex-shrink: 0; }

/* Nav item with hover submenu (Navigation Menu popover) */
.nav-menu { position: relative; }
.nav-menu > .nav-item .nav-caret { width: 12px; height: 12px; color: var(--colors-light-muted-foreground); transition: transform .15s ease; }
.nav-menu:hover > .nav-item .nav-caret { transform: rotate(180deg); }
.nav-popover { position: absolute; top: 100%; left: 0; z-index: 60; padding-top: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.nav-menu:hover .nav-popover, .nav-popover:focus-within { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-popover-inner { background: var(--colors-light-popover); border: 1px solid var(--colors-light-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.1); padding: 8px; }
.nav-popover-grid { display: grid; grid-template-columns: repeat(2, 244px); gap: 2px; }
.nav-menu-link { display: flex; gap: 10px; padding: 8px; border-radius: 6px; align-items: flex-start; text-decoration: none; }
.nav-menu-link:hover { background: var(--colors-light-accent); }
.nav-menu-link svg { width: 16px; height: 16px; color: var(--colors-light-primary); margin-top: 2px; flex-shrink: 0; }
.nav-menu-link .nml-label { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--colors-light-foreground); }
.nav-menu-link .nml-desc { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 18px; color: var(--colors-light-muted-foreground); margin-top: 3px; }

/* ---- Tabs (segmented control) -----------------------------------
   Track r8 secondary + pad 4 · item h28 r8 · active = white pill
------------------------------------------------------------------- */
.tabs { display: inline-flex; background: var(--colors-light-secondary); border-radius: 8px; padding: 4px; gap: 2px; }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 28px; min-width: 56px; padding: 4px 12px; border-radius: 8px; border: none; background: transparent;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground);
  cursor: pointer; white-space: nowrap; transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.tab:hover:not(.active) { color: var(--colors-light-secondary-foreground); }
.tab.active { background: var(--colors-light-background); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
/* Large size (icon + label + count) */
.tabs-lg { padding: 5px; }
.tabs-lg .tab { height: 40px; padding: 8px 16px; font-size: 15px; gap: 10px; }
.tabs-lg .tab svg { width: 18px; height: 18px; }
/* Underline variant */
.tabs-underline { display: inline-flex; gap: 4px; background: transparent; border-bottom: 1px solid var(--colors-light-border); padding: 0; border-radius: 0; }
.tabs-underline .tab { border-radius: 0; height: 40px; box-shadow: none; background: transparent; color: var(--colors-light-muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-underline .tab.active { background: transparent; box-shadow: none; color: var(--colors-light-foreground); border-bottom-color: var(--colors-light-primary); }
.tab-panel[hidden] { display: none; }

/* ---- Card --------------------------------------------------------
   r16 · --card fill · 1px border · soft shadow. Header title+desc,
   body, optional footer. Plus KPI/summary tiles for dashboards.
------------------------------------------------------------------- */
.ui-card { display: flex; flex-direction: column; background: var(--colors-light-card); border: 1px solid var(--colors-light-border); border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); }
.ui-card-header { display: flex; align-items: flex-start; gap: 12px; padding: 24px 24px 0; }
.ui-card-heading { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; }
.ui-card-title { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; color: var(--colors-light-foreground); }
.ui-card-desc { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-muted-foreground); }
.ui-card-body { padding: 20px 24px; }
.ui-card-footer { display: flex; gap: 8px; padding: 0 24px 24px; }
.ui-card-footer.spread { justify-content: space-between; }
.ui-card-divider { height: 1px; background: var(--colors-light-border); }

/* KPI / summary tile */
.stat-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--colors-light-card); border: 1px solid var(--colors-light-border); border-radius: 12px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--colors-light-muted-foreground); }
.stat-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.stat-ico svg { width: 17px; height: 17px; }
.stat-value { font-family: var(--font-sans); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--colors-light-foreground); }
.stat-meta { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--colors-light-muted-foreground); }
.stat-meta .delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.stat-meta .delta.up { color: var(--status-operational); }
.stat-meta .delta.down { color: var(--status-in-use); }

/* Selectable metric card (radio) — Asset Overview perspective switch */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card { display: flex; flex-direction: column; gap: 18px; padding: 20px; border: 1px solid var(--colors-light-border); border-radius: 16px; background: var(--colors-light-card); cursor: pointer; text-align: left; font-family: var(--font-sans); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.metric-card:hover { background: var(--colors-light-muted); }
.metric-card.selected { border-color: var(--colors-light-primary); background: var(--colors-light-secondary); box-shadow: inset 0 0 0 1px var(--colors-light-primary); }
.metric-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--colors-light-custom-focus); }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; }
.metric-ico { width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--colors-light-muted); color: var(--colors-light-muted-foreground); }
.metric-ico svg { width: 22px; height: 22px; }
.metric-card.selected .metric-ico { background: var(--colors-light-background); color: var(--colors-light-accent-foreground); }
.metric-check { display: none; }
.metric-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.metric-card.selected .metric-check { background: var(--colors-light-primary); border-color: var(--colors-light-primary); }
.metric-card.selected .metric-check svg { opacity: 1; }
.metric-label { font-size: 14px; font-weight: 500; line-height: 20px; color: rgb(71,84,103); }
.metric-card.selected .metric-label { color: var(--colors-light-secondary-foreground); }
.metric-value { font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: rgb(16,24,40); }
.metric-card.selected .metric-value { color: var(--colors-light-secondary-foreground); }

/* ---- Tooltip -----------------------------------------------------
   Primary fill · r8 · 14/400 white · rotated-square caret · 4 sides.
   Markup: <span class="tip tip-top"><trigger><span class="tip-bubble">
   text<i class="tip-caret"></i></span></span>. Shows on hover/focus.
------------------------------------------------------------------- */
.tip { position: relative; display: inline-flex; }
.tip-bubble {
  position: absolute; z-index: 70; display: inline-flex; align-items: center; white-space: nowrap;
  background: var(--colors-light-primary); color: #fff; font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px;
  padding: 6px 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none;
}
.tip:hover .tip-bubble, .tip:focus-within .tip-bubble { opacity: 1; visibility: visible; }
.tip-caret { position: absolute; width: 10px; height: 10px; background: var(--colors-light-primary); border-radius: 2px; transform: rotate(45deg); }
/* Top */
.tip-top .tip-bubble { bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(3px); }
.tip-top:hover .tip-bubble, .tip-top:focus-within .tip-bubble { transform: translateX(-50%); }
.tip-top .tip-caret { bottom: -4px; left: 50%; margin-left: -5px; }
/* Bottom */
.tip-bottom .tip-bubble { top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-3px); }
.tip-bottom:hover .tip-bubble, .tip-bottom:focus-within .tip-bubble { transform: translateX(-50%); }
.tip-bottom .tip-caret { top: -4px; left: 50%; margin-left: -5px; }
/* Left */
.tip-left .tip-bubble { right: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(3px); }
.tip-left:hover .tip-bubble, .tip-left:focus-within .tip-bubble { transform: translateY(-50%); }
.tip-left .tip-caret { right: -4px; top: 50%; margin-top: -5px; }
/* Right */
.tip-right .tip-bubble { left: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(-3px); }
.tip-right:hover .tip-bubble, .tip-right:focus-within .tip-bubble { transform: translateY(-50%); }
.tip-right .tip-caret { left: -4px; top: 50%; margin-top: -5px; }

/* ---- Toast (Sonner) ---------------------------------------------
   w388 · r8 · white shell + border + shadow · title 14/600 + desc.
   Error variant = destructive fill, white text. Stacks bottom-right.
------------------------------------------------------------------- */
.toast-viewport { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 12px; width: 388px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; box-sizing: border-box;
  border-radius: 8px; background: var(--colors-light-background); border: 1px solid var(--colors-light-border);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); padding: 16px 18px;
  transform: translateX(120%); opacity: 0; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .2s ease; pointer-events: auto;
}
.toast.show { transform: none; opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }
.toast-lead { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-content { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); }
.toast-desc { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-foreground); opacity: .72; }
.toast-action { flex-shrink: 0; align-self: center; }
.toast-close { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--colors-light-muted-foreground); border-radius: 6px; cursor: pointer; opacity: .7; }
.toast-close:hover { opacity: 1; background: var(--colors-light-muted); }
.toast-close svg { width: 14px; height: 14px; }
.toast.success .toast-lead { color: var(--status-operational); }
.toast.warning .toast-lead { color: var(--status-warning); }
.toast.info .toast-lead { color: var(--colors-light-primary); }
.toast.error { background: rgb(254,242,242); border-color: rgb(254,202,202); }
.toast.error .toast-lead { color: var(--colors-light-destructive); }
.toast.error .toast-title { color: rgb(153,27,27); }
.toast.error .toast-desc { color: var(--colors-light-destructive); opacity: .82; }
.toast.error .toast-close { color: var(--colors-light-destructive); }
.toast.error .toast-close:hover { background: var(--status-in-use-soft); }

/* ---- Alert (inline banner) --------------------------------------
   r8 · neutral card · icon + title 16/500 + desc 14/400. Variants
   tint the icon (error tints all text). Add .soft for a tinted fill.
------------------------------------------------------------------- */
.alert { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--colors-light-border); background: var(--colors-light-card); border-radius: 8px; padding: 16px; }
.alert-ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--colors-light-foreground); }
.alert-body { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alert-title { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; color: var(--colors-light-foreground); }
.alert-desc { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--colors-light-muted-foreground); }
.alert-actions { display: flex; gap: 8px; margin-top: 12px; }
.alert-close { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--colors-light-muted-foreground); border-radius: 6px; cursor: pointer; opacity: .7; }
.alert-close:hover { opacity: 1; background: var(--colors-light-muted); }
.alert-close svg { width: 15px; height: 15px; }
/* Variant accents */
.alert.warning .alert-ico { color: var(--status-warning); }
.alert.info .alert-ico { color: var(--colors-light-primary); }
.alert.success .alert-ico { color: var(--status-operational); }
.alert.error .alert-ico, .alert.error .alert-title, .alert.error .alert-desc { color: var(--colors-light-destructive); }
/* Soft tinted fill */
.alert.soft { border-color: transparent; }
.alert.soft.warning { background: var(--status-warning-soft); }
.alert.soft.info { background: var(--colors-light-secondary); }
.alert.soft.success { background: var(--status-operational-soft); }
.alert.soft.error { background: var(--status-in-use-soft); }
.alert[hidden] { display: none; }