/*
 * dns-stack UI theme — rabbit-it brand (ultramarine-indigo + violet), PrimeNG-
 * flavoured components, light + dark via Bootstrap 5.3 data-bs-theme.
 * Loaded AFTER Bootstrap's bundled CSS (appended in Main.main) so plain selectors
 * override without !important.
 *
 * Sizing rule: our rules use relative units only (rem / em / %, clamp(), vw/vh) —
 * never raw px — so the whole UI scales cleanly on hi-DPI and very high-res
 * displays. Breakpoints are in `em` (honours the user's font-size / zoom).
 */

/* ---- self-hosted IBM Plex Sans (no external CDN — works air-gapped) -------- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/ibm-plex-sans-700.woff2") format("woff2");
}

/* ---- brand tokens ---------------------------------------------------------- */
:root {
  --rabbit-primary: #4338ca;          /* ultramarine-indigo */
  --rabbit-primary-strong: #3730a3;
  --rabbit-navbar: linear-gradient(90deg, #2a2670 0%, #3a31b5 55%, #4f1ca0 100%);
  --rabbit-ring: rgba(99, 102, 241, 0.45);

  /* Layout caps (hybrid): forms/text stay readable; data tables may breathe.
     Relative to the root font, so they grow with the user's zoom / hi-DPI. */
  --dnsui-cap: 80rem;                 /* default content width (forms, cards) */
  --dnsui-cap-wide: 108rem;           /* table-heavy views + the navbar */
  --dnsui-gutter: clamp(0.75rem, 3vw, 2rem);

  --bs-primary: #4338ca;
  --bs-primary-rgb: 67, 56, 202;
  --bs-link-color: #4338ca;
  --bs-link-color-rgb: 67, 56, 202;
  --bs-link-hover-color: #3730a3;
  --bs-body-bg: #f4f4fb;              /* light indigo-tinted page */
  --bs-body-color: #211f31;
  --bs-border-color: #e6e4f1;
  --bs-secondary-bg: #ffffff;
  font-feature-settings: "cv02", "ss01";
}

[data-bs-theme="dark"] {
  color-scheme: dark;   /* let the browser paint form controls (incl. Tabulator filters) dark */
  --rabbit-primary: #818cf8;
  --rabbit-primary-strong: #a5b4fc;
  --rabbit-ring: rgba(129, 140, 248, 0.5);

  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-body-bg: #141221;             /* deep violet-black */
  --bs-body-color: #e7e5f3;
  --bs-border-color: #2c2843;
  --bs-secondary-bg: #1c1930;
  --bs-tertiary-bg: #211d36;
}

body {
  background-color: var(--bs-body-bg);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Inline-SVG icons (see components/Icon.kt) — sized to the current font, like an
   inline glyph. fill=currentColor is set on the SVG so they take the text colour. */
.dnsui-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
}

/* ---- responsive page shell: hybrid caps ------------------------------------
   Shared gutter system for the navbar and the page body. Below the cap the layout
   is fluid (mobile-friendly); above it content is centred. Two caps: table views
   use the wide cap, form/utility pages the tighter one (so wide tables can breathe
   while forms stay readable). The navbar inner tracks the ACTIVE page's cap (via
   `.is-narrow`, driven by LayoutState.wide), so the topbar and the page content are
   always the same width and their edges line up on every route. */
.dnsui-shell,
.dnsui-page-wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--dnsui-gutter);
}
.dnsui-shell { max-width: var(--dnsui-cap-wide); }     /* navbar inner (wide routes) */
.dnsui-shell.is-narrow { max-width: var(--dnsui-cap); } /* …matches form/utility pages */
.dnsui-page-wrap { max-width: var(--dnsui-cap); }      /* default content */
.dnsui-page-wrap.is-wide { max-width: var(--dnsui-cap-wide); }

/* ---- branded navbar (same in both themes) ---------------------------------- */
.dnsui-navbar {
  background: var(--rabbit-navbar);
  box-shadow: 0 0.125rem 0.75rem rgba(49, 46, 129, 0.28);
  padding-block: 0.5rem;
}
.dnsui-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.dnsui-navbar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.35rem 0.7rem;
  transition: color 0.15s, background-color 0.15s;
}
.dnsui-navbar .nav-link:hover,
.dnsui-navbar .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
}
.dnsui-navbar .navbar-text { color: rgba(255, 255, 255, 0.9); }
.dnsui-navbar .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.4);
}
.dnsui-navbar .btn-outline-secondary:hover,
.dnsui-navbar .btn-secondary {
  color: #312e81;
  background-color: #fff;
  border-color: #fff;
}

/* ---- navbar layout + responsive collapse (no Bootstrap collapse JS) --------
   We render the nav ourselves, so the expand/collapse is driven by compose state
   (`navOpen`) toggling `.show`, not by Bootstrap's data-API. Desktop is the base;
   the media query below stacks it behind a hamburger on narrow viewports. */
.dnsui-navbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.dnsui-navbar-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dnsui-navbar-collapse {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.dnsui-navbar-collapse .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
.dnsui-navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dnsui-nav-toggle {
  display: none;                       /* hamburger: mobile only */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
  border-radius: 0.5rem;
  color: #fff;
  padding: 0.35rem 0.6rem;
  font-size: 1.1rem;
  line-height: 1;
}
.dnsui-logo {
  height: 1.625rem;
  width: auto;
  margin-right: 0.55rem;
}

@media (max-width: 61.99em) {
  .dnsui-navbar-head {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .dnsui-nav-toggle { display: inline-flex; }
  .dnsui-navbar-collapse {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.5rem;
    display: none;                     /* collapsed until the hamburger opens it */
  }
  .dnsui-navbar-collapse.show { display: flex; }
  .dnsui-navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.15rem;
  }
  .dnsui-navbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Settings dropdown holds the language + theme controls. The navbar forces light
   text on its buttons; restore normal styling inside the menu (themed surface).
   We render the menu ourselves (no Bootstrap Popper JS), so the `data-bs-popper`
   attribute that Bootstrap's `.dropdown-menu-end` alignment hangs off is never set
   — pin the menu to the toggle's right edge by hand so it can't overflow the
   viewport. max-width keeps it inside the screen on narrow widths too. */
.dnsui-settings-menu,
.dnsui-menu-end {
  right: 0;
  left: auto;
  max-width: calc(100vw - 1rem);
}
.dnsui-settings-menu { min-width: 13rem; }
/* On narrow viewports the toggles for these hand-positioned menus end up toward the
   left of their (wrapped) row, so a right-edge pin would push the menu off the left
   of the screen. Open them rightward instead. Compound selector (`.dropdown-menu.…`)
   so it outranks the right-pin above regardless of source order. */
@media (max-width: 61.99em) {
  .dropdown-menu.dnsui-settings-menu,
  .dropdown-menu.dnsui-menu-end {
    right: auto;
    left: 0;
  }
}
.dnsui-navbar .dropdown-menu .btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
.dnsui-navbar .dropdown-menu .btn-outline-secondary:hover {
  color: #fff;
  background-color: var(--rabbit-primary);
  border-color: var(--rabbit-primary);
}

/* ---- dismiss layer: click-outside / Escape closes any open popover ---------
   A transparent full-viewport catch layer (see components/Overlay.kt). Open
   menus paint above it; everything else is below it, so a click anywhere else
   lands on the layer and closes the menu. */
.dnsui-dismiss-layer {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: transparent;
}
.dropdown-menu.show { z-index: 1045; }   /* our menus sit above the dismiss layer */
/* Keep the toggle that owns the open menu clickable ABOVE the layer, so clicking it
   again closes the menu directly (rather than the click being swallowed by the
   layer). `.dnsui-open` is added to the dropdown only while its menu is open. */
.dropdown.dnsui-open > button { position: relative; z-index: 1046; }

/* ---- confirm dialog (our own modal — Bootstrap .modal CSS, no Bootstrap JS) --
   Bootstrap's `.modal` is display:none until its JS adds inline styles; we drive
   it ourselves, so make it visible + positioned. `.modal-dialog(-centered)` and
   `.modal-content` keep their Bootstrap styling. */
.dnsui-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1065;
  background: rgba(0, 0, 0, 0.5);
}
.dnsui-modal {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1070;
  overflow-y: auto;
}

/* ---- right-hand editor drawer (record-set editor) -------------------------- */
.dnsui-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.4);
}
.dnsui-drawer {
  width: min(92vw, 35rem);             /* near-full width on phones, fixed on desktop */
  z-index: 1055;
}

/* ---- login badge (small rabbit hero) --------------------------------------- */
.dnsui-login-badge {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: var(--rabbit-navbar);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.375rem 1.125rem rgba(49, 46, 129, 0.3);
}
.dnsui-login-rabbit { height: 2.125rem; width: auto; }

/* ---- PrimeNG-flavoured buttons --------------------------------------------- */
.btn {
  --bs-btn-border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(0.0625rem); }
.btn:focus-visible { box-shadow: 0 0 0 0.2rem var(--rabbit-ring); }
.btn-primary {
  --bs-btn-bg: var(--rabbit-primary);
  --bs-btn-border-color: var(--rabbit-primary);
  --bs-btn-hover-bg: var(--rabbit-primary-strong);
  --bs-btn-hover-border-color: var(--rabbit-primary-strong);
  --bs-btn-active-bg: var(--rabbit-primary-strong);
  box-shadow: 0 0.0625rem 0.125rem rgba(67, 56, 202, 0.35);
}
.btn-outline-primary {
  --bs-btn-color: var(--rabbit-primary);
  --bs-btn-border-color: var(--rabbit-primary);
  --bs-btn-hover-bg: var(--rabbit-primary);
  --bs-btn-hover-border-color: var(--rabbit-primary);
}
/* Dark mode: the primary is a LIGHT indigo (#818cf8), so white label text is only
   ~2.8:1 (fails WCAG AA). Use near-black text on it for legible CTAs + active pager. */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #141221;
  --bs-btn-hover-color: #141221;
  --bs-btn-active-color: #141221;
}

/* Skip-to-content link: visually-hidden until focused, then pinned top-left. */
.dnsui-skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
}

/* ---- cards: borderless, rounded, soft shadow ------------------------------- */
.card {
  border: 0;
  border-radius: 0.875rem;
  background-color: var(--bs-secondary-bg);
  box-shadow: 0 0.0625rem 0.1875rem rgba(20, 18, 31, 0.07), 0 0.0625rem 0.125rem rgba(20, 18, 31, 0.05);
}
[data-bs-theme="dark"] .card {
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.5), 0 0 0 0.0625rem rgba(255, 255, 255, 0.04);
}
/* Cards/panels use <h2 class=card-title> so the outline is h1 (page) -> h2 (card)
   with no skipped levels; the size is pinned so it still LOOKS like a small title. */
.card-title { font-weight: 700; letter-spacing: -0.01em; font-size: 1.25rem; }

/* ---- inputs ---------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: 0.5rem;
  border-color: var(--bs-border-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--rabbit-primary);
  box-shadow: 0 0 0 0.2rem var(--rabbit-ring);
}

/* ---- headings / page titles ------------------------------------------------ */
h1, h2, h3, .h2 { font-weight: 700; letter-spacing: -0.015em; }
/* Each authenticated page has a single <h1> (its title); pinned to ~the old h2 size
   so making it the document's h1 (for screen-reader heading nav) doesn't enlarge it.
   The login hero <h1> keeps the default large size (no class). */
.dnsui-page-title { font-size: 1.9rem; }

/* ---- tags / badges --------------------------------------------------------- */
.badge { border-radius: 0.4375rem; font-weight: 600; letter-spacing: 0.01em; }

/* ---- DataTable: our typed, all-Compose table (was Tabulator) ---------------
   Plain HTML table; sort/filter/page live in Compose state. No !important
   anywhere — the header-filter inputs are Bootstrap .form-control, themed
   natively in dark mode. Tabulator and its bundled tabulator5 theme (which
   forced the old dark-input !important) are gone. */
.dnsui-table-wrap {
  overflow-x: auto;                       /* wide content scrolls HERE, never the page */
  border: 0.0625rem solid var(--bs-border-color);
  border-radius: 0.5rem;
}
.dnsui-table { margin-bottom: 0; }
.dnsui-table thead th {
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom: 0.0625rem solid var(--bs-border-color);
}
.dnsui-table th.dnsui-sortable { cursor: pointer; user-select: none; }
.dnsui-table th.dnsui-sortable:hover { color: var(--rabbit-primary); }
.dnsui-table th.dnsui-sortable:focus-visible {
  outline: 0.125rem solid var(--rabbit-primary);
  outline-offset: -0.125rem;
}
.dnsui-sort-ind { font-size: 0.75em; }
/* default: keep cells on one line and let the wrapper scroll; columns opt into wrap */
.dnsui-table td { white-space: nowrap; }
.dnsui-table td.dnsui-wrap, .dnsui-table th.dnsui-wrap { white-space: normal; word-break: break-word; }
.dnsui-table .dnsui-filter-row th { padding-top: 0.25rem; padding-bottom: 0.5rem; }
.dnsui-pager { justify-content: flex-end; }

/* Phones/tablets: each row becomes a stacked, labelled card (header hidden). The
   wrapper's overflow-x already prevents page overflow at every width above this. */
@media (max-width: 47.99em) {
  .dnsui-table-wrap { overflow-x: visible; border: 0; }
  .dnsui-table, .dnsui-table tbody { display: block; }
  .dnsui-table thead { display: none; }
  .dnsui-table tr {
    display: block;
    border: 0.0625rem solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
  }
  .dnsui-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    white-space: normal;
    border: 0;
    padding-inline: 0;
  }
  .dnsui-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-right: 0.75rem;
  }
}