/* ==========================================================================
   HCSM UI — design tokens + components
   Version 1.2 · 2026-10-18 · Direction "Kontor" (mobile menu, user menu)
   Companion to: hcsm-app-style-guide.md (rules, usage, i18n)
   Reference screen: hcsm-reference-screen.html
   Use the tokens and hc-* classes; do not introduce new colors, radii or
   font sizes without adding them here first.
   ========================================================================== */


:root {
  /* ---- Brand (HCSM CI) ------------------------------------------------- */
  --hc-blue: #0069b4;              /* CI Hauptfarbe · CMYK 100/50/0/0 · HKS 44 · Pantone 2945 C */
  --hc-blue-hover: #005a9c;        /* primary button hover */
  --hc-blue-active: #004f89;       /* primary button pressed */
  --hc-blue-text: #00599a;         /* blue text on blue tint (badges) */
  --hc-link-hover: #00508a;
  --hc-blue-mid: #328ccc;          /* CI Mittelblau · focus ring, info dot */
  --hc-blue-light: #7bb9e7;        /* CI Hellblau · decorative only (active tree branch) — never for text */
  --hc-blue-tint: #e8f1fa;         /* active nav item background */
  --hc-blue-tint-hover: #dce9f6;   /* active nav item hover */
  --hc-blue-selected: #f3f8fd;     /* selected radio row */

  /* ---- Top bar (navy, derived from CI blue) ---------------------------- */
  --hc-navy-900: #0c2740;          /* top bar background */
  --hc-navy-800: #133351;          /* controls on top bar */
  --hc-navy-700: #1a4064;          /* control hover on top bar */
  --hc-navy-border: #2f4a63;
  --hc-navy-border-hover: #46637d;
  --hc-navy-text-muted: #c3d2df;

  /* ---- Neutrals -------------------------------------------------------- */
  --hc-text-strong: #2e2e2d;       /* headings, titles, emphasised values */
  --hc-text: #333332;              /* control text (buttons, inputs) */
  --hc-text-nav: #3d3d3c;          /* sidebar items */
  --hc-text-body: #575756;         /* CI Farbe Korrespondenz · body copy */
  --hc-text-muted: #6a6a68;        /* captions, labels, table headers (≥4.5:1 on white) */
  --hc-border: #e3e3e2;            /* CI Hellgrau (CMYK 0/0/0/15) · card + layout borders */
  --hc-border-subtle: #efefee;     /* table row dividers */
  --hc-border-control: #d4d4d2;    /* secondary buttons, inputs */
  --hc-border-control-hover: #b9b9b7;
  --hc-control-off: #a8a8a6;       /* unchecked radio ring, switch off */
  --hc-tree-line: #b4b4b2;         /* sub-navigation tree lines and rings */
  --hc-tree-dot-hover: #7d7d7b;
  --hc-surface: #ffffff;           /* cards, sidebar, inputs (CI Weiß) */
  --hc-surface-subtle: #fafaf9;    /* card footers, table header row */
  --hc-page: #f4f4f3;              /* page background behind cards */
  --hc-hover: #f2f2f1;             /* nav item hover */
  --hc-row-hover: #f8f8f7;         /* table row + radio row hover */
  --hc-btn-secondary-hover: #f6f6f5;
  --hc-pressed: #efefee;           /* secondary pressed, neutral badge */

  /* ---- Status (not part of the CI; muted to sit beside the brand blue) - */
  --hc-success: #2e8b57;  --hc-success-bg: #e6f2eb;  --hc-success-text: #1d6a43;
  --hc-info: #328ccc;     --hc-info-bg: #e8f1fa;     --hc-info-text: #00599a;
  --hc-warning: #d97a00;  --hc-warning-bg: #fcefdf;  --hc-warning-text: #8f4c00;
  --hc-danger: #c4321f;   --hc-danger-bg: #fdecea;   --hc-danger-text: #a12a1a;
  --hc-danger-btn: #b42318;
  --hc-danger-btn-hover: #9a1d13;

  /* ---- Typography ------------------------------------------------------ */
  /* Titillium Web = web version of the CI font TitilliumText25L */
  --hc-font: 'Titillium Web', 'Segoe UI', system-ui, sans-serif;
  --hc-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --hc-fs-overline: 11px;          /* sidebar section labels (uppercase) */
  --hc-fs-th: 12px;                /* table headers (uppercase) */
  --hc-fs-small: 13px;             /* captions, notes, badges, breadcrumb */
  --hc-fs-body: 14px;              /* base */
  --hc-fs-title: 16px;             /* card / section titles */
  --hc-fs-page: 26px;              /* page title (h1) */
  --hc-lh-body: 1.5;
  --hc-lh-heading: 1.25;
  --hc-fw-regular: 400;
  --hc-fw-semibold: 600;
  --hc-fw-bold: 700;

  /* ---- Spacing (4px grid) --------------------------------------------- */
  --hc-space-1: 4px;   --hc-space-2: 8px;   --hc-space-3: 12px;
  --hc-space-4: 16px;  --hc-space-5: 20px;  --hc-space-6: 24px;
  --hc-space-8: 32px;  --hc-space-10: 40px;

  /* ---- Radius ---------------------------------------------------------- */
  --hc-radius-sm: 4px;             /* badges, code chips */
  --hc-radius-md: 6px;             /* buttons, inputs, nav items, radio lists */
  --hc-radius-lg: 8px;             /* cards */
  --hc-radius-round: 999px;        /* avatars, dots, switches only — never buttons */

  /* ---- Sizes ----------------------------------------------------------- */
  --hc-topbar-h: 56px;
  --hc-sidebar-w: 232px;
  --hc-content-max: 1080px;
  --hc-control-h: 36px;            /* default buttons, inputs, nav items */
  --hc-control-h-lg: 40px;         /* page-level primary action */
  --hc-subnav-h: 32px;

  /* ---- Motion + focus ------------------------------------------------- */
  --hc-transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  --hc-focus-ring: 2px solid var(--hc-blue-mid);
  --hc-focus-shadow: 0 0 0 3px rgba(50, 140, 204, .22);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--hc-font);
  font-size: var(--hc-fs-body);
  line-height: var(--hc-lh-body);
  color: var(--hc-text-body);
  background: var(--hc-page);
}
h1, h2, h3 { margin: 0; color: var(--hc-text-strong); font-weight: var(--hc-fw-semibold); line-height: var(--hc-lh-heading); }
p { margin: 0; }
button, input, select, textarea { font: inherit; }
a { color: var(--hc-blue); }
a:hover { color: var(--hc-link-hover); }
:focus-visible { outline: var(--hc-focus-ring); outline-offset: 2px; }
svg { flex: 0 0 auto; }
.hc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   App shell: top bar · sidebar · main
   ========================================================================== */
.hc-app { min-height: 100vh; display: flex; flex-direction: column; }
.hc-body { flex: 1; display: flex; flex-wrap: wrap; }
.hc-main {
  flex: 999 1 560px; min-width: 0;
  padding: var(--hc-space-6) var(--hc-space-8) var(--hc-space-10);
  display: flex; flex-direction: column; gap: var(--hc-space-5);
}
.hc-main > * { width: 100%; max-width: var(--hc-content-max); }

/* ---- Top bar ------------------------------------------------------------ */
.hc-topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--hc-space-3); min-height: var(--hc-topbar-h); padding: 0 var(--hc-space-5);
  background: var(--hc-navy-900); color: #fff;
}
.hc-topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-space-3); padding: var(--hc-space-2) 0; }
.hc-topbar__logo { display: block; height: 18px; width: auto; filter: brightness(0) invert(1); } /* white CI variant */
.hc-topbar__divider { width: 1px; height: 24px; background: var(--hc-navy-border); }

.hc-topbar-btn {
  display: inline-flex; align-items: center; gap: var(--hc-space-2);
  height: var(--hc-control-h); padding: 0 10px; border-radius: var(--hc-radius-md);
  border: 1px solid var(--hc-navy-border); background: var(--hc-navy-800);
  color: #fff; font-weight: var(--hc-fw-semibold); cursor: pointer; transition: var(--hc-transition);
}
.hc-topbar-btn:hover { background: var(--hc-navy-700); border-color: var(--hc-navy-border-hover); }

.hc-topbar-search {
  display: flex; align-items: center; gap: var(--hc-space-2);
  width: 280px; max-width: 100%; height: var(--hc-control-h); padding: 0 10px;
  border-radius: var(--hc-radius-md); border: 1px solid var(--hc-navy-border);
  background: var(--hc-navy-800); color: var(--hc-navy-text-muted); transition: var(--hc-transition);
}
.hc-topbar-search:hover { border-color: var(--hc-navy-border-hover); }
.hc-topbar-search:focus-within { border-color: var(--hc-blue-mid); }
.hc-topbar-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; }
.hc-topbar-search input::placeholder { color: var(--hc-navy-text-muted); }

/* Language switch (DE | EN) — <button aria-pressed> pair */
.hc-lang { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 7px; border: 1px solid var(--hc-navy-border); }
.hc-lang__icon { margin: 0 4px 0 6px; color: var(--hc-navy-text-muted); }
.hc-lang button {
  height: 28px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--hc-navy-text-muted);
  font-size: var(--hc-fs-small); font-weight: var(--hc-fw-semibold); cursor: pointer; transition: var(--hc-transition);
}
.hc-lang button[aria-pressed="true"] { background: #fff; color: var(--hc-navy-900); font-weight: var(--hc-fw-bold); }
.hc-lang button[aria-pressed="false"]:hover { background: var(--hc-navy-700); color: #fff; }

.hc-avatar {
  width: 32px; height: 32px; border-radius: var(--hc-radius-round);
  display: flex; align-items: center; justify-content: center;
  background: var(--hc-blue-mid); color: var(--hc-navy-900);
  font-size: 12px; font-weight: var(--hc-fw-bold);
}

/* User menu (top bar, desktop): avatar button → dropdown (disclosure pattern) */
.hc-user { position: relative; }
.hc-user-btn {
  display: flex; align-items: center; gap: 6px; height: var(--hc-control-h); padding: 0 6px 0 3px;
  border: 1px solid transparent; border-radius: var(--hc-radius-md); background: transparent;
  color: var(--hc-navy-text-muted); cursor: pointer; transition: var(--hc-transition);
}
.hc-user-btn:hover, .hc-user-btn[aria-expanded="true"] { background: var(--hc-navy-800); border-color: var(--hc-navy-border); color: #fff; }
.hc-user-btn .hc-avatar { width: 28px; height: 28px; font-size: 11px; }
.hc-user-btn__chevron { width: 14px; height: 14px; transition: transform .15s ease; }
.hc-user-btn[aria-expanded="true"] .hc-user-btn__chevron { transform: rotate(180deg); }

.hc-dropdown {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 260px; padding: 6px;
  background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg);
  box-shadow: 0 12px 32px rgba(12, 39, 64, .18); color: var(--hc-text-body);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.hc-user.is-open .hc-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease, visibility 0s; }
.hc-dropdown__header { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--hc-border-subtle); }
.hc-dropdown__item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: var(--hc-control-h); padding: 0 10px;
  border: 0; border-radius: var(--hc-radius-md); background: transparent; color: var(--hc-text-nav);
  font-size: var(--hc-fs-body); text-align: left; text-decoration: none; cursor: pointer; transition: var(--hc-transition);
}
.hc-dropdown__item:hover { background: var(--hc-hover); color: var(--hc-text-strong); }
.hc-dropdown__item svg { width: 17px; height: 17px; }
.hc-dropdown__sep { height: 1px; margin: 6px 0; background: var(--hc-border-subtle); }
.hc-dropdown form { margin: 0; }

/* ---- Sidebar ------------------------------------------------------------ */
.hc-sidebar {
  flex: 1 1 var(--hc-sidebar-w);
  padding: var(--hc-space-4) 10px; background: var(--hc-surface);
  border-right: 1px solid var(--hc-border);
  display: flex; flex-direction: column; gap: var(--hc-space-5);
}
.hc-nav-section { display: flex; flex-direction: column; gap: 1px; }
.hc-nav-label {
  padding: 0 10px 6px; color: var(--hc-text-muted);
  font-size: var(--hc-fs-overline); font-weight: var(--hc-fw-bold);
  letter-spacing: .06em; text-transform: uppercase;
}
.hc-nav-footer { margin-top: auto; }

/* Works on <a> (leaf) and <button aria-expanded> (parent with children) */
.hc-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: var(--hc-control-h); padding: 0 10px; border: 0; border-radius: var(--hc-radius-md);
  background: transparent; color: var(--hc-text-nav); text-align: left; text-decoration: none;
  cursor: pointer; transition: var(--hc-transition);
}
.hc-nav-item:hover { background: var(--hc-hover); color: var(--hc-text-strong); }
.hc-nav-item__icon { width: 17px; height: 17px; }
.hc-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-nav-item__chevron { width: 14px; height: 14px; transition: transform .12s ease; }
.hc-nav-item[aria-expanded="false"] .hc-nav-item__chevron { transform: rotate(-90deg); }
/* Active: aria-current on a leaf, .is-active on a parent whose child is the current page */
.hc-nav-item[aria-current="page"],
.hc-nav-item.is-active { background: var(--hc-blue-tint); color: var(--hc-navy-900); font-weight: var(--hc-fw-semibold); }
.hc-nav-item[aria-current="page"] .hc-nav-item__icon,
.hc-nav-item.is-active .hc-nav-item__icon { color: var(--hc-blue); }
.hc-nav-item[aria-current="page"]:hover,
.hc-nav-item.is-active:hover { background: var(--hc-blue-tint-hover); color: var(--hc-navy-900); }

/* Sub-navigation tree: dotted line from under the parent icon, branches with
   hollow rings, rounded elbow on the last item. Markup is just links. */
.hc-subnav { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 37px; }
.hc-subnav[hidden] { display: none; }
.hc-subnav::before {               /* trunk: starts below the parent highlight, ends at the last item's top */
  content: ""; position: absolute; left: 18px; top: 4px; bottom: calc(var(--hc-subnav-h) + 4px);
  border-left: 1px dotted var(--hc-tree-line);
}
.hc-subnav-item {
  position: relative; display: flex; align-items: center;
  height: var(--hc-subnav-h); padding: 0 10px 0 22px; border-radius: var(--hc-radius-md);
  color: var(--hc-text-body); text-decoration: none; white-space: nowrap;
  overflow: visible; transition: var(--hc-transition);
}
.hc-subnav-item::before {          /* branch */
  content: ""; position: absolute; left: -19px; top: calc(var(--hc-subnav-h) / 2); width: 25px; height: 0;
  border-top: 1px dotted var(--hc-tree-line);
}
.hc-subnav-item:last-child::before { /* rounded elbow */
  top: -1px; height: calc(var(--hc-subnav-h) / 2 + 2px); border-top: 0;
  border-left: 1px dotted var(--hc-tree-line); border-bottom: 1px dotted var(--hc-tree-line);
  border-bottom-left-radius: 8px;
}
.hc-subnav-item::after {           /* hollow ring */
  content: ""; position: absolute; left: 6px; top: calc(var(--hc-subnav-h) / 2 - 4px); width: 8px; height: 8px;
  border-radius: var(--hc-radius-round); border: 1.5px solid var(--hc-tree-line);
  transition: border-color .12s ease;
}
.hc-subnav-item:hover { background: var(--hc-hover); color: var(--hc-text-strong); }
.hc-subnav-item:hover::after { border-color: var(--hc-tree-dot-hover); }
.hc-subnav-item[aria-current="page"] { color: var(--hc-blue); font-weight: var(--hc-fw-semibold); }
.hc-subnav-item[aria-current="page"]::after { border-color: var(--hc-blue); }
.hc-subnav-item[aria-current="page"]::before { border-color: var(--hc-blue-light); }
.hc-subnav-item[aria-current="page"]:hover { color: var(--hc-link-hover); }

/* ==========================================================================
   Page header
   ========================================================================== */
.hc-page-header { display: flex; flex-direction: column; gap: 6px; }
.hc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--hc-fs-small); color: var(--hc-text-muted); }
.hc-page-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hc-space-3); }
.hc-page-title { font-size: var(--hc-fs-page); }

/* ==========================================================================
   Links + buttons
   ========================================================================== */
.hc-link { color: var(--hc-blue); font-weight: var(--hc-fw-semibold); text-decoration: none; }
.hc-link:hover { color: var(--hc-link-hover); text-decoration: underline; }

.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hc-space-2);
  height: var(--hc-control-h); padding: 0 14px; border: 1px solid transparent; border-radius: var(--hc-radius-md);
  font-size: var(--hc-fs-body); font-weight: var(--hc-fw-semibold); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; transition: var(--hc-transition);
}
.hc-btn svg { width: 16px; height: 16px; }
.hc-btn--lg { height: var(--hc-control-h-lg); padding: 0 16px; }

.hc-btn--primary { background: var(--hc-blue); color: #fff; }
.hc-btn--primary:not(:disabled):hover { background: var(--hc-blue-hover); color: #fff; }
.hc-btn--primary:not(:disabled):active { background: var(--hc-blue-active); }

.hc-btn--secondary { background: var(--hc-surface); color: var(--hc-text); border-color: var(--hc-border-control); }
.hc-btn--secondary:not(:disabled):hover { background: var(--hc-btn-secondary-hover); border-color: var(--hc-border-control-hover); color: var(--hc-text); }
.hc-btn--secondary:not(:disabled):active { background: var(--hc-pressed); }

.hc-btn--danger { background: var(--hc-danger-btn); color: #fff; }
.hc-btn--danger:not(:disabled):hover { background: var(--hc-danger-btn-hover); color: #fff; }

.hc-btn:disabled, .hc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Cards + settings rows
   ========================================================================== */
.hc-card { background: var(--hc-surface); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-lg); }
.hc-card__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--hc-space-3); padding: var(--hc-space-4) var(--hc-space-6);
}
.hc-card__title { font-size: var(--hc-fs-title); }
.hc-card__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--hc-space-3); padding: var(--hc-space-3) var(--hc-space-6);
  border-top: 1px solid var(--hc-border); background: var(--hc-surface-subtle);
  border-radius: 0 0 var(--hc-radius-lg) var(--hc-radius-lg);
}
.hc-card__note { font-size: var(--hc-fs-small); color: var(--hc-text-muted); }
.hc-actions { display: flex; flex-wrap: wrap; gap: var(--hc-space-2); }

/* Settings row: explanation left, control right; stacks on narrow screens */
.hc-setting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-space-4) var(--hc-space-6); padding: var(--hc-space-5) var(--hc-space-6); }
.hc-setting + .hc-setting { border-top: 1px solid var(--hc-border); }
.hc-setting--top { align-items: flex-start; padding: var(--hc-space-6); }
.hc-setting__info { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--hc-space-1); }
.hc-setting__control { flex: 1 1 360px; display: flex; align-items: center; justify-content: space-between; gap: var(--hc-space-3); }

/* ==========================================================================
   Form controls
   ========================================================================== */
/* Radio list: native radios inside labels */
.hc-radio-list { flex: 1 1 360px; display: flex; flex-direction: column; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md); overflow: hidden; }
.hc-radio-row {
  display: flex; align-items: flex-start; gap: var(--hc-space-3); padding: var(--hc-space-3) 14px;
  background: var(--hc-surface); cursor: pointer; transition: var(--hc-transition);
}
.hc-radio-row + .hc-radio-row { border-top: 1px solid var(--hc-border); }
.hc-radio-row input {
  appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  border-radius: var(--hc-radius-round); border: 1.5px solid var(--hc-control-off); background: #fff; cursor: pointer;
}
.hc-radio-row input:checked { border: 5px solid var(--hc-blue); }
.hc-radio-row:has(input:checked) { background: var(--hc-blue-selected); }
.hc-radio-row:not(:has(input:checked)):hover { background: var(--hc-row-hover); }
.hc-radio-row__text { display: flex; flex-direction: column; }
.hc-radio-row__title { font-weight: var(--hc-fw-semibold); color: var(--hc-text-strong); }
.hc-radio-row__desc { font-size: var(--hc-fs-small); color: var(--hc-text-body); }

/* Switch: <input type="checkbox" role="switch" class="hc-switch"> */
.hc-switch {
  appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 24px; margin: 0;
  border-radius: 12px; background: var(--hc-control-off); cursor: pointer; transition: background-color .12s ease, filter .12s ease;
}
.hc-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: var(--hc-radius-round); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .12s ease;
}
.hc-switch:checked { background: var(--hc-blue); }
.hc-switch:checked::after { left: 23px; }
.hc-switch:hover { filter: brightness(.92); }

/* Text inputs (derived from the search field; not yet mocked) */
.hc-field { display: flex; flex-direction: column; gap: 6px; }
.hc-label { font-weight: var(--hc-fw-semibold); color: var(--hc-text-strong); }
.hc-input, .hc-select, .hc-textarea {
  width: 100%; height: var(--hc-control-h); padding: 0 10px;
  border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-md);
  background: var(--hc-surface); color: var(--hc-text); transition: var(--hc-transition);
}
.hc-textarea { height: auto; min-height: 96px; padding: var(--hc-space-2) 10px; }
.hc-input:hover, .hc-select:hover, .hc-textarea:hover { border-color: var(--hc-border-control-hover); }
.hc-input:focus-visible, .hc-select:focus-visible, .hc-textarea:focus-visible { outline: none; border-color: var(--hc-blue-mid); box-shadow: var(--hc-focus-shadow); }
.hc-help { font-size: var(--hc-fs-small); color: var(--hc-text-muted); }
.hc-error { font-size: var(--hc-fs-small); color: var(--hc-danger-text); font-weight: var(--hc-fw-semibold); }
.hc-field--error .hc-input, .hc-field--error .hc-select, .hc-field--error .hc-textarea { border-color: var(--hc-danger); }

/* ==========================================================================
   Status: badges + dot labels
   ========================================================================== */
.hc-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--hc-space-2);
  border-radius: var(--hc-radius-sm); font-size: var(--hc-fs-small); font-weight: var(--hc-fw-semibold);
  white-space: nowrap; background: var(--hc-pressed); color: var(--hc-text-body);
}
.hc-badge--success { background: var(--hc-success-bg); color: var(--hc-success-text); }
.hc-badge--info    { background: var(--hc-info-bg);    color: var(--hc-info-text); }
.hc-badge--warning { background: var(--hc-warning-bg); color: var(--hc-warning-text); }
.hc-badge--danger  { background: var(--hc-danger-bg);  color: var(--hc-danger-text); }

.hc-status { display: inline-flex; align-items: center; gap: var(--hc-space-2); color: var(--hc-text); white-space: nowrap; }
.hc-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--hc-radius-round); background: var(--hc-control-off); }
.hc-status--success::before { background: var(--hc-success); }
.hc-status--info::before    { background: var(--hc-info); }
.hc-status--warning::before { background: var(--hc-warning); }
.hc-status--danger::before  { background: var(--hc-danger); }

/* ==========================================================================
   Tables
   ========================================================================== */
.hc-table-wrap { overflow-x: auto; }
.hc-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--hc-fs-body); }
.hc-table th {
  padding: 10px var(--hc-space-3); text-align: left; white-space: nowrap;
  background: var(--hc-surface-subtle); color: var(--hc-text-muted);
  font-size: var(--hc-fs-th); font-weight: var(--hc-fw-bold); text-transform: uppercase; letter-spacing: .05em;
  border-top: 1px solid var(--hc-border); border-bottom: 1px solid var(--hc-border);
}
.hc-table td { padding: 10px var(--hc-space-3); border-bottom: 1px solid var(--hc-border-subtle); transition: background-color .12s ease; }
.hc-table th:first-child, .hc-table td:first-child { padding-left: var(--hc-space-6); }
.hc-table th:last-child,  .hc-table td:last-child  { padding-right: var(--hc-space-6); }
.hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-table tbody tr:hover td { background: var(--hc-row-hover); }
.hc-table td.hc-num, .hc-table th.hc-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Misc
   ========================================================================== */
.hc-code {
  font-family: var(--hc-font-mono); font-size: var(--hc-fs-small); color: var(--hc-text-strong);
  background: var(--hc-page); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-sm); padding: 6px 10px;
}

/* ==========================================================================
   Mobile menu (≤ 800px)
   The top bar keeps only the logo and a menu button. Everything else (search,
   navigation, language, workspace/account) lives in the sidebar, which turns
   into a panel that slides down from under the top bar. An overlay blurs and
   darkens the page behind it; the top bar stays sharp and on top.
   ========================================================================== */
.hc-menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: var(--hc-radius-md);
  border: 1px solid var(--hc-navy-border); background: var(--hc-navy-800); color: #fff;
  cursor: pointer; transition: var(--hc-transition);
}
.hc-menu-toggle:hover { background: var(--hc-navy-700); border-color: var(--hc-navy-border-hover); }
.hc-menu-toggle svg { width: 20px; height: 20px; transition: opacity .15s ease, transform .2s ease; }
.hc-menu-toggle__close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.hc-menu-toggle[aria-expanded="true"] .hc-menu-toggle__open { opacity: 0; transform: rotate(45deg); }
.hc-menu-toggle[aria-expanded="true"] .hc-menu-toggle__close { opacity: 1; transform: none; }

.hc-overlay { display: none; }

/* Light controls used inside the mobile panel */
.hc-search {
  display: flex; align-items: center; gap: var(--hc-space-2); height: 44px; padding: 0 12px;
  border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-md);
  background: var(--hc-surface); color: var(--hc-text-muted); transition: var(--hc-transition);
}
.hc-search:hover { border-color: var(--hc-border-control-hover); }
.hc-search:focus-within { border-color: var(--hc-blue-mid); box-shadow: var(--hc-focus-shadow); }
.hc-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--hc-text); font-size: 16px; } /* 16px stops iOS zoom */

.hc-lang--light { padding: 3px; border-color: var(--hc-border); background: var(--hc-page); border-radius: 8px; }
.hc-lang--light button { flex: 1; height: 38px; color: var(--hc-text-body); font-size: var(--hc-fs-body); border-radius: var(--hc-radius-md); }
.hc-lang--light button[aria-pressed="true"] { background: var(--hc-surface); color: var(--hc-blue); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.hc-lang--light button[aria-pressed="false"]:hover { background: var(--hc-hover); color: var(--hc-text-strong); }

.hc-account {
  display: flex; align-items: center; gap: var(--hc-space-3); width: 100%; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md); background: var(--hc-surface);
  color: var(--hc-text); text-align: left; cursor: pointer; transition: var(--hc-transition);
}
.hc-account:hover { background: var(--hc-btn-secondary-hover); border-color: var(--hc-border-control-hover); }
.hc-account__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hc-account__name { font-weight: var(--hc-fw-semibold); color: var(--hc-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-account__hint { font-size: var(--hc-fs-small); color: var(--hc-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-account__icon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--hc-radius-md);
  display: flex; align-items: center; justify-content: center; background: var(--hc-blue-tint); color: var(--hc-blue);
}

/* User card (mobile menu): who is signed in + profile / log out */
.hc-user-card { display: flex; flex-direction: column; gap: var(--hc-space-3); padding: 12px; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-md); }
.hc-user-card__id { display: flex; align-items: center; gap: var(--hc-space-3); min-width: 0; }
.hc-user-card__actions { display: flex; gap: var(--hc-space-2); }
.hc-user-card__actions > * { flex: 1; }
.hc-user-card__actions form { display: flex; margin: 0; }
.hc-user-card__actions .hc-btn { width: 100%; height: var(--hc-control-h-lg); }
.hc-sidebar__block { display: flex; flex-direction: column; gap: var(--hc-space-2); }

@media (max-width: 800px) {
  .hc-desktop-only { display: none !important; }

  /* Top bar: logo + menu button, pinned */
  .hc-topbar {
    position: sticky; top: 0; z-index: 50; flex-wrap: nowrap;
    height: var(--hc-topbar-h); padding: 0 12px 0 16px;
  }
  .hc-menu-toggle { display: inline-flex; position: relative; }

  /* Sidebar becomes the slide-down panel */
  .hc-sidebar {
    position: fixed; z-index: 45; top: var(--hc-topbar-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--hc-topbar-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--hc-space-4); gap: var(--hc-space-5);
    border-right: 0; border-bottom: 1px solid var(--hc-border);
    border-radius: 0 0 var(--hc-radius-lg) var(--hc-radius-lg);
    box-shadow: 0 16px 32px rgba(12, 39, 64, .18);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .18s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .hc-sidebar:focus { outline: none; }
  .hc-app.is-menu-open .hc-sidebar {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }

  /* Overlay: blur + darken everything below the top bar */
  .hc-overlay {
    display: block; position: fixed; z-index: 40; inset: var(--hc-topbar-h) 0 0 0;
    background: rgba(12, 39, 64, .32);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .hc-app.is-menu-open .hc-overlay { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  html.hc-scroll-lock, html.hc-scroll-lock body { overflow: hidden; }

  /* Touch-friendly nav sizes (the tree adapts via --hc-subnav-h) */
  .hc-sidebar { --hc-subnav-h: 40px; }
  .hc-nav-item { height: 44px; font-size: 15px; }
  .hc-subnav-item { font-size: 15px; }
  .hc-nav-footer { margin-top: 0; display: flex; flex-direction: column; gap: var(--hc-space-4); padding-top: var(--hc-space-4); border-top: 1px solid var(--hc-border); }

  /* Content */
  .hc-main { padding: var(--hc-space-5) var(--hc-space-4) var(--hc-space-8); gap: var(--hc-space-4); }
  .hc-page-title { font-size: 22px; }
  .hc-page-header__row .hc-btn { width: 100%; }
  .hc-setting, .hc-setting--top, .hc-card__header, .hc-card__footer { padding-left: var(--hc-space-4); padding-right: var(--hc-space-4); }
  .hc-setting__control { flex-wrap: wrap; }
  .hc-code { overflow-wrap: anywhere; }
  .hc-table th:first-child, .hc-table td:first-child { padding-left: var(--hc-space-4); }
  .hc-table th:last-child, .hc-table td:last-child { padding-right: var(--hc-space-4); }
  .hc-card__footer .hc-actions { width: 100%; }
  .hc-card__footer .hc-actions .hc-btn { flex: 1; }
}

@media (min-width: 801px) {
  .hc-mobile-only { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-sidebar, .hc-app.is-menu-open .hc-sidebar { transform: none !important; }
  .hc-menu-toggle svg { transition: none; }
}