/* ============================================================
   Platform shell — sidebar, topbar, scrolling main.
   Ported from /home/service/org/frontend_template/styles.css.

   Two rules govern every selector in this file and in design_system.css:

   1. Shell class names are prefixed `hx-`. The reference calls them .app,
      .sidebar, .nav, .nav-item, .topbar, .main — and .nav / .nav-item / .active
      belong to Bootstrap, which stays loaded through the transition.
   2. Nothing here sets a font-size on html or body. Bootstrap sizes everything
      in rem against html, and legacy pages still render inside .hx-main; making
      html 13px would shrink every one of them. The dense 13px scale is applied
      to the chrome and to migrated content only.
   ============================================================ */

:root {
  /* surfaces — cool near-black */
  --bg:        oklch(0.165 0.012 264);
  --surface:   oklch(0.205 0.013 264);
  --surface-2: oklch(0.235 0.014 264);
  --surface-3: oklch(0.275 0.016 264);
  --hover:     oklch(0.255 0.015 264);

  /* hairlines */
  --line:      oklch(0.315 0.016 264);
  --line-soft: oklch(0.265 0.014 264);

  /* text */
  --ink:       oklch(0.965 0.004 264);
  --ink-2:     oklch(0.80 0.012 264);
  --ink-3:     oklch(0.655 0.013 264);
  --ink-4:     oklch(0.52 0.013 264);

  /* accent — muted steel blue; it marks, it does not shout */
  --acc:       oklch(0.68 0.075 245);
  --link:      #58a6ff;
  --acc-dim:   oklch(0.56 0.060 245);
  --acc-ink:   oklch(0.20 0.030 245);
  --acc-soft:  oklch(0.68 0.075 245 / 0.14);

  /* semantics — same hues, a third of the chroma */
  --amber:  oklch(0.80 0.10 78);
  --red:    oklch(0.66 0.125 25);
  --blue:   oklch(0.70 0.085 244);
  --violet: oklch(0.70 0.10 300);
  --cyan:   oklch(0.78 0.08 200);

  --radius: 6px;
  --radius-sm: 4px;
  /* No drop shadow anywhere: a card is told apart by its hairline border. */
  --shadow: none;

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--acc-soft); color: var(--ink); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Grid ------------------------------------------------ */

.hx-app {
  display: grid;
  grid-template-columns: 230px 1fr;
  grid-template-rows: 53px 1fr;
  height: 100vh;
  overflow: hidden;
  font-family: var(--sans);
}

/* ---- Sidebar --------------------------------------------- */

.hx-sidebar {
  grid-row: 1 / 3;
  background: oklch(0.185 0.012 264);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-size: 13px;
  line-height: 1.45;
}

.hx-brand {
  height: 53px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.hx-brand-mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2); flex: 0 0 auto;
}
.hx-brand-name { font-weight: 600; letter-spacing: -0.01em; font-size: 14px; }
.hx-brand-name b { color: var(--ink); }
.hx-brand-env {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; letter-spacing: 0.03em;
}

.hx-nav { padding: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.hx-nav-label {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-4); padding: 14px 10px 6px;
}
.hx-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  position: relative; font-size: 13px;
}
.hx-nav-item:hover { background: var(--hover); }
.hx-nav-item.is-active { background: var(--surface-2); }
.hx-nav-item.is-active::before {
  content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 2px; background: var(--acc);
}
.hx-nav-item .hx-ico { opacity: 0.85; }

.hx-sidebar-foot {
  flex: 0 0 auto; border-top: 1px solid var(--line-soft); padding: 10px;
}
.hx-user-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.hx-user-row:hover { background: var(--hover); }
.hx-user-name { font-size: 12.5px; }
.hx-user-role {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4);
}
.hx-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-2); flex: 0 0 auto;
}

/* ---- Topbar ---------------------------------------------- */

.hx-topbar {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line-soft);
  background: oklch(0.185 0.012 264);
  font-size: 13px;
}
.hx-crumbs { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.hx-crumbs b { color: var(--ink); font-weight: 600; }
.hx-crumbs .hx-sep { color: var(--ink-4); }
.hx-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---- Main scroll ----------------------------------------- */

.hx-main {
  grid-column: 2; grid-row: 2;
  overflow-y: auto; overflow-x: hidden;
  padding: 22px 24px 60px;
}
.hx-canvas { max-width: 1480px; margin: 0 auto; }
/* A table-overview page: the widget fills the area right of the sidebar. */
.hx-main:has(.tov-mount) { padding: 0; }
.hx-main:has(.tov-mount) .hx-canvas { max-width: none; }
.hx-main:has(.tov-mount) .hx-page-head { margin: 0; padding: 10px 16px 0; }

/* Page header (the reference's .hello row). Lives outside .hx so an
   un-migrated page still gets a titled header. */
.hx-page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.hx-page-head h1 {
  font-family: var(--sans); font-size: 21px; font-weight: 600;
  letter-spacing: -0.02em; margin: 0; color: var(--ink);
}
.hx-page-head .hx-sub { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }

/* Sub-tabs: sibling pages of one subject, each with its own URL. The first
   component of its kind in the project — a page family whose parts answer
   different questions about the same thing, where a section heading on one long
   page would make each answer harder to reach rather than easier. */
.hx-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: -8px 0 16px; border-bottom: 1px solid var(--line);
}
.hx-tabs .hx-tab {
  padding: 7px 12px; font-size: 13px; color: var(--ink-3);
  border-bottom: 2px solid transparent; text-decoration: none !important;
}
.hx-tabs .hx-tab:hover { color: var(--ink) !important; background: var(--hover); }
.hx-tabs .hx-tab.is-active {
  color: var(--ink) !important; border-bottom-color: var(--acc); font-weight: 600;
}

/* ---- The one place !important is unavoidable --------------
   static/css/theme.css:306-318 declares
       a, a:visited, a:hover { color:#296cb9 !important; text-decoration: underline !important }
   globally. The shell renders on EVERY page, including un-migrated ones where
   theme.css is still loaded, so sidebar links would come out legacy-blue and
   underlined. These six declarations are confined to shell chrome and die
   together with theme.css — see the `legacy_css` block in base.html.
   ---------------------------------------------------------- */
.hx-app a,
.hx-app a:visited { color: inherit !important; text-decoration: none !important; }
.hx-nav-item { color: var(--ink-2); }
.hx-nav-item:hover,
.hx-nav-item.is-active { color: var(--ink) !important; }
.hx-brand a:hover, .hx-user-row a:hover { text-decoration: none !important; }

/* Links in the page and in the breadcrumbs: blue, underlined under the pointer. They need
   !important against `.hx-app a` above; controls drawn as links keep their own look. */
.hx-main a:not(.btn):not(.hx-tab):not(.chip):not(.pill):not(.paginate_button):not(.remove):not(.hx-nav-item):not(.img-tile):not(.class-chip):not(.pane-label),
.hx-crumbs a { color: var(--link) !important; }
.hx-main a:not(.btn):not(.hx-tab):not(.chip):not(.pill):not(.paginate_button):not(.remove):not(.hx-nav-item):not(.img-tile):not(.class-chip):not(.pane-label):hover,
.hx-crumbs a:hover { text-decoration: underline !important; }