/*
 * asuc.odmc.board — supplementary styles (navigation, breadcrumb, welcome).
 * Builds on assets/css/style.css (ASUC design tokens) and uses its CSS
 * variables (--asuc-navy/-teal, radius, shadows).
 */

/* ===== Page container =====
   Uses the full screen width instead of the 1320px cap of .container-xxl —
   the admin area works with wide tables. Capped only on very large displays
   so rows stay readable. Horizontal padding grows with the viewport. */
.aob-container {
  width: 100%;
  max-width: 2400px;
  margin-inline: auto;
  padding-inline: var(--aob-gutter);
}

/* ==========================================================================
   APP FRAME: side navigation (left) + topbar (page title, profile)
   The navigation moved from the header into a fixed sidebar — with nine portal
   and eleven configuration entries a horizontal bar was full. The sidebar
   scrolls on its own, collapses to icons and is replaced by the offcanvas
   below the md breakpoint (768px).
   ========================================================================== */
:root {
  --aob-nav-w:           252px;
  --aob-nav-w-collapsed: 66px;
  --aob-topbar-h:        58px;
  /* Side padding of BOTH the content and the topbar. A variable ever since
     the notice band of the customer view has to cancel it out to sit
     edge-to-edge — two hand-typed clamp() expressions would be a match that
     breaks the first time somebody adjusts one of them. */
  --aob-gutter:          clamp(0.9rem, 2vw, 2.25rem);
}

/* ---- Sidebar frame ---- */
.aob-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--aob-nav-w);
  flex-direction: column;
  background: var(--asuc-navy);
  border-right: 1px solid rgba(255,255,255,.10);
  z-index: 1030;                 /* under offcanvas (1045) and modal (1055) */
  transition: width .25s ease;
}
/* Collapsed the tooltips have to be able to leave the sidebar; the nav column
   below keeps its own overflow. */
.aob-sidebar.is-collapsed { width: var(--aob-nav-w-collapsed); overflow: visible; }

.aob-sidebar-brand {
  flex: none; display: flex; align-items: center; gap: .6rem;
  min-height: var(--aob-topbar-h); padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow: hidden; text-decoration: none;
}
.aob-sidebar-brand:hover { text-decoration: none; background: rgba(255,255,255,.05); }
.aob-sidebar-logo { height: 28px; width: auto; flex: none; display: block; }
.aob-sidebar-claim {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .95rem;
  color: var(--asuc-teal-soft); white-space: nowrap;
}
.aob-sidebar.is-collapsed .aob-sidebar-brand { justify-content: center; padding-inline: .4rem; }
.aob-sidebar.is-collapsed .aob-sidebar-claim { display: none; }
/* Collapsed only the "a." mark of the wordmark fits (the logo is 3:1). Cropped
   instead of scaled down — a 66px-wide logo would be unreadable. */
.aob-sidebar.is-collapsed .aob-sidebar-logo {
  width: 26px; object-fit: cover; object-position: left center;
}

/* The nav column scrolls INTERNALLY, brand and footer stay put. min-height:0
   lets the flex child shrink — without it nothing scrolls and the footer is
   pushed out of view instead. */
.aob-sidebar-nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: .4rem 0 .8rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.aob-sidebar-nav::-webkit-scrollbar { width: 6px; }
.aob-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.aob-sidebar-nav::-webkit-scrollbar-track { background: transparent; }

/* ---- Nav groups and entries (shared by sidebar and offcanvas) ---- */
.aob-nav-group + .aob-nav-group {
  margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(255,255,255,.10);
}
.aob-nav-heading {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45);
  margin: 0; padding: .5rem 1.1rem .3rem; white-space: nowrap; overflow: hidden;
}
/* Collapsed the heading only disappears visually — it still names its list for
   screen readers, and the group border keeps the separation visible. */
.aob-sidebar.is-collapsed .aob-nav-heading { height: 0; padding: 0; opacity: 0; }

/* Foldable group ("Administration"): the heading becomes a button, so it needs
   the full width, a pointer and a caret that turns. Everything else is
   inherited from .aob-nav-heading — the group must not look like a different
   kind of thing just because it can fold. */
.aob-nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
}
.aob-nav-toggle:hover  { color: rgba(255,255,255,.8); }
.aob-nav-toggle:focus-visible { outline: 2px solid var(--asuc-teal); outline-offset: -2px; }
.aob-nav-caret { font-size: .7rem; transition: transform .15s ease; }
.aob-nav-toggle[aria-expanded="false"] .aob-nav-caret { transform: rotate(-90deg); }
/* Collapsed to icons there is no room for a caption — and no way to read the
   caret either, so the group simply shows its entries. */
.aob-sidebar.is-collapsed .aob-nav-toggle { height: 0; padding: 0; opacity: 0; pointer-events: none; }
.aob-sidebar.is-collapsed .aob-nav-list.d-none { display: block !important; }

.aob-nav-list { list-style: none; margin: 0; padding: 0; }
.aob-nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1.1rem;
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .88rem;
  color: rgba(255,255,255,.75);
  border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden;
  transition: color .15s, background .15s, border-color .15s;
}
.aob-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.aob-nav-link.active { color: #fff; background: rgba(62,185,192,.22); border-left-color: var(--asuc-teal); }
.aob-nav-link:focus-visible { outline: 2px solid var(--asuc-teal-soft); outline-offset: -3px; }
.aob-nav-link > i { font-size: 1rem; color: var(--asuc-teal-soft); flex: none; }
.aob-nav-label { overflow: hidden; text-overflow: ellipsis; }
/* Other ASUC applications: quieter, with an arrow for the new tab */
.aob-nav-external { color: rgba(255,255,255,.6); }
.aob-nav-external-arrow { margin-left: auto; font-size: .7rem; color: rgba(255,255,255,.45); }
.aob-nav-external:hover .aob-nav-external-arrow { color: #fff; }

/* Collapsed: icons only, centred */
.aob-sidebar.is-collapsed .aob-nav-link { justify-content: center; gap: 0; padding-inline: 0; }
.aob-sidebar.is-collapsed .aob-nav-label,
.aob-sidebar.is-collapsed .aob-nav-external-arrow { display: none; }
.aob-sidebar.is-collapsed .aob-nav-link > i { font-size: 1.15rem; }

/* ---- Sidebar footer (collapse button) ---- */
.aob-sidebar-footer { flex: none; border-top: 1px solid rgba(255,255,255,.10); padding: .55rem; }
.aob-sidebar-toggle {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--asuc-radius-sm); color: rgba(255,255,255,.7);
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; padding: .5rem .4rem;
  transition: background .15s, color .15s, border-color .15s;
}
.aob-sidebar-toggle:hover { background: rgba(255,255,255,.1); color: #fff; border-color: var(--asuc-teal); }
.aob-sidebar-toggle i { font-size: .9rem; transition: transform .25s ease; }
.aob-sidebar.is-collapsed .aob-sidebar-toggle-label { display: none; }
.aob-sidebar.is-collapsed .aob-sidebar-toggle i { transform: rotate(180deg); }

/* ---- Content column next to the sidebar ---- */
.aob-main { min-width: 0; }
@media (min-width: 768px) {
  .aob-main { margin-left: var(--aob-nav-w); transition: margin-left .25s ease; }
  body.aob-nav-collapsed .aob-main { margin-left: var(--aob-nav-w-collapsed); }
}

/* ---- Topbar: page title + profile ---- */
.aob-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--aob-topbar-h);
  padding-inline: var(--aob-gutter);
}
.aob-page-title {
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: 1.05rem;
  color: #fff; margin: 0; letter-spacing: -.01em; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aob-header-right { flex: none; display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.aob-burger { flex: none; }

/* ---- The ⓘ of the page help: fixed to the right of the page title ----
   Deliberately NOT in .aob-header-right: that group is pushed to the far edge
   and its width changes with the name of the person. Next to the title the
   button sits at the same x on every page and on every screen, which is the
   only reason one stops looking for it. */
.aob-help-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin-left: -.15rem;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.05rem; line-height: 1;
  transition: background .15s, border-color .15s;
}
.aob-help-btn:hover, .aob-help-btn[aria-expanded="true"] {
  background: var(--asuc-teal); border-color: var(--asuc-teal); color: #fff;
}
.aob-help-btn:focus-visible { outline: 2px solid var(--asuc-teal-soft); outline-offset: 2px; }

.aob-profile-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .2rem .55rem .2rem .8rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--asuc-radius-pill); color: #fff;
  transition: background .15s;
}
.aob-profile-btn:hover, .aob-profile-btn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.aob-profile-btn:focus-visible { outline: 2px solid var(--asuc-teal-soft); outline-offset: 2px; }
.aob-profile-id { flex-direction: column; align-items: flex-end; line-height: 1.25; min-width: 0; }
.aob-profile-name {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .8rem; color: #fff;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aob-profile-role {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--asuc-teal-soft); white-space: nowrap;
}
.aob-profile-icon { font-size: 1.4rem; color: var(--asuc-teal-soft); }
.aob-profile-caret { font-size: .65rem; color: rgba(255,255,255,.6); }
.aob-profile-menu { min-width: 12rem; }

/* Language flag button — its own control next to the profile menu (owner
   request 2026-08-14). Same pill look as the profile button, more compact. */
.aob-lang-btn {
  display: flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--asuc-radius-pill); transition: background .15s;
}
.aob-lang-btn:hover, .aob-lang-btn[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.aob-lang-btn:focus-visible { outline: 2px solid var(--asuc-teal-soft); outline-offset: 2px; }
.aob-lang-flag { font-size: 1.05rem; line-height: 1; }
.aob-lang-code {
  font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .72rem; letter-spacing: .05em;
}
.aob-lang-menu { min-width: 9.5rem; }

/* Skip link — keyboard users reach the content without tabbing the whole nav */
.aob-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1090;
  background: var(--asuc-teal); color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 var(--asuc-radius-sm) 0; font-weight: 700;
}
.aob-skip-link:focus { left: 0; color: #fff; }

/* ---- Offcanvas: the same navigation for narrow windows ---- */
.aob-offcanvas { background: var(--asuc-navy); color: #fff; max-width: 18rem; }
.aob-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.14); }
.aob-offcanvas .offcanvas-title {
  display: flex; align-items: center;
  font-family: var(--asuc-font-heading); font-weight: 700; color: var(--asuc-teal-soft); font-size: 1rem;
}
.aob-offcanvas .offcanvas-body { padding-inline: 0; }
.aob-offcanvas-user {
  display: flex; align-items: center; gap: .25rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--asuc-radius-sm); padding: .7rem .8rem;
  margin: 0 .9rem 1rem; font-size: .88rem;
}
.aob-offcanvas-user .small { color: var(--asuc-teal-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

/* ==========================================================================
   CUSTOMER VIEW — the notice band
   An administrator is looking at the portal through a customer's eyes. While
   that runs, every page has to say without scrolling whose view this is and
   that nothing is being saved.

   Why the band sits INSIDE the <header> and not above it: the header is
   already sticky. A second sticky element in front of it would have to know
   the header's height or the two would cover each other — and that height
   changes as soon as the text wraps on a narrow window. As the first row IN
   the header the band inherits the stickiness without a guessed number
   anywhere.

   Colour: a light warning amber under the navy topbar. Deliberately not red
   (this is not an error) and deliberately not navy (it has to stand out from
   the frame instead of disappearing into it). Dark text on a light ground, so
   the line stays readable at a small size.
   ========================================================================== */

/* Only in the customer view may the topbar wrap: the band takes a row of its
   own, everything else stays the single row it has always been. */
body.aob-impersonating .aob-topbar { flex-wrap: wrap; row-gap: 0; }

.aob-imp-band {
  /* Edge to edge: the header is padded inside, the band cancels that padding
     and brings its own. The padding is therefore ALSO part of the flex basis —
     otherwise the band would stay as wide as the content box and merely sit
     shifted, leaving a strip of gap at the right edge. */
  flex: 0 0 calc(100% + 2 * var(--aob-gutter));
  order: -1;                     /* above burger, title and profile */
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem;
  margin-inline: calc(-1 * var(--aob-gutter));
  padding: .45rem var(--aob-gutter);
  background: var(--asuc-warning-bg);
  border-bottom: 2px solid var(--asuc-warning);
  color: var(--asuc-navy);
}
.aob-imp-icon { flex: none; font-size: 1.05rem; color: var(--asuc-warning); }

/* Read-only role ("Nur Lesend"): hide controls that trigger a write. The block
   itself is enforced server-side (db_readonly_guard); this only keeps the UI
   honest so the role never sees a button that would just fail. Matched by the
   write-intent ICON (create/edit/delete/save/…), so it also covers DataGrid
   rows re-rendered after load without marking every button — plus an explicit
   [data-write] hook. Read/view/navigation controls (eye, geo, download/export,
   filters, toggles, pagination, preview) deliberately stay. The own account
   page (body.aob-account) is exempt: a read-only account may still manage
   itself (profile, language, password). */
body.aob-readonly:not(.aob-account) [data-write],
body.aob-readonly:not(.aob-account) :is(button, a, .dropdown-item):is(
  :has(> .bi-trash), :has(> .bi-trash3), :has(> .bi-trash-fill),
  :has(> .bi-pencil), :has(> .bi-pencil-square), :has(> .bi-pencil-fill),
  :has(> .bi-plus), :has(> .bi-plus-lg), :has(> .bi-plus-circle), :has(> .bi-plus-square),
  :has(> .bi-save), :has(> .bi-save-fill),
  :has(> .bi-upload), :has(> .bi-cloud-upload), :has(> .bi-cloud-arrow-up), :has(> .bi-filetype-csv),
  :has(> .bi-key), :has(> .bi-unlock),
  :has(> .bi-copy), :has(> .bi-files),
  :has(> .bi-archive), :has(> .bi-archive-fill),
  :has(> .bi-pause-circle), :has(> .bi-pause),
  :has(> .bi-send), :has(> .bi-send-check), :has(> .bi-send-fill),
  :has(> .bi-person-plus), :has(> .bi-person-plus-fill)
) { display: none !important; }
.aob-imp-text {
  margin: 0; min-width: 0; flex: 1 1 16rem;
  font-size: .82rem; line-height: 1.35;
}
.aob-imp-role {
  display: inline-block; padding: .05rem .45rem; border-radius: var(--asuc-radius-pill);
  background: var(--asuc-warning); color: #fff;
  font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: .08em;
}
.aob-imp-exit {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center;
  padding: .3rem .8rem; border: 1px solid var(--asuc-navy); border-radius: var(--asuc-radius-pill);
  background: var(--asuc-navy); color: #fff;
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .76rem;
  white-space: nowrap; transition: background .15s;
}
.aob-imp-exit:hover { background: var(--asuc-navy-600); color: #fff; }
.aob-imp-exit:focus-visible { outline: 2px solid var(--asuc-navy); outline-offset: 2px; }
.aob-imp-exit[disabled] { opacity: .6; }

/* Phone width (390px): text and button no longer share a row — the button
   moves into one of its own and stays easy to hit at full width. The text
   keeps the icon NEXT to it (a small flex-basis instead of 100%), otherwise
   the eye would stand alone on its own line and the band would be taller for
   nothing. The band is in the flow, so it covers nothing — it pushes the page
   down. */
@media (max-width: 575.98px) {
  .aob-imp-band { padding-block: .4rem; }
  .aob-imp-text { flex: 1 1 8rem; font-size: .76rem; line-height: 1.3; }
  .aob-imp-exit { margin-left: 0; width: 100%; justify-content: center; padding-block: .4rem; }
}

/* ===== Breadcrumb — lives IN the content (pages place it) ===== */
.aob-breadcrumb { margin: 0 0 1rem; }
.aob-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: "\203A";   /* › */
  font-size: .78rem;
}
.aob-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--asuc-muted-2); }
.aob-breadcrumb .breadcrumb-item a {
  color: var(--asuc-teal-700); display: inline-flex; align-items: center;
}
.aob-breadcrumb .breadcrumb-item a:hover { color: var(--asuc-navy); }
.aob-breadcrumb .breadcrumb-item.active { color: var(--asuc-muted); font-weight: 600; }

/* ===== Welcome banner (default entry point, greets the customer) ===== */
.aob-welcome {
  background: linear-gradient(135deg, var(--asuc-navy) 0%, var(--asuc-navy-600) 100%);
  color: #fff;
  border-radius: var(--asuc-radius-lg, 14px);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--asuc-shadow);
  position: relative;
  overflow: hidden;
}
.aob-welcome::after {
  content: "";
  position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(62, 185, 192, .16);
}
.aob-welcome .aob-welcome-eyebrow {
  font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--asuc-teal-soft);
}
.aob-welcome h1 { color: #fff; font-size: 1.6rem; margin: .15rem 0 .25rem; }
.aob-welcome .aob-welcome-sub { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0; }
.aob-welcome .aob-welcome-customer-no {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem; padding: .28rem .7rem; border-radius: var(--asuc-radius-pill);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .72rem;
  letter-spacing: .04em; color: #fff;
}

/* ==========================================================================
   DATAGRID (assets/js/datagrid.js) — central table component,
   restyled with the ASUC tokens.
   ========================================================================== */
.datagrid-toolbar { gap: .5rem; }
.datagrid-toolbar .input-group-text {
  background: var(--asuc-surface-2); border-color: var(--asuc-border-2); color: var(--asuc-muted);
}
.datagrid-toolbar .form-control:focus,
.datagrid-toolbar .form-select:focus {
  border-color: var(--asuc-teal); box-shadow: 0 0 0 .2rem rgba(62,185,192,.18);
}
.datagrid-pagination .btn { font-size: .625rem; padding: .3rem .6rem; }
.datagrid-pagination .page-link {
  color: var(--asuc-teal-700); border-color: var(--asuc-border);
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .78rem;
}
.datagrid-pagination .page-item.active .page-link {
  background: var(--asuc-navy); border-color: var(--asuc-navy); color: #fff;
}

/* Table in the ASUC look (the component renders Bootstrap tables) */
.datagrid .table > thead th {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--asuc-navy); border-bottom: 0; white-space: nowrap; vertical-align: middle;
}
.datagrid .table > tbody > tr > td { vertical-align: middle; }
.datagrid .table > tbody > tr:hover > td { background: var(--asuc-teal-bg); }
.datagrid .dg-sortable { cursor: pointer; user-select: none; }
.datagrid .dg-sortable:hover { background: var(--asuc-navy-700); }
.datagrid .card { border-color: var(--asuc-border); border-radius: var(--asuc-radius); box-shadow: var(--asuc-shadow-sm); }
.datagrid .card-footer { background: var(--asuc-surface-2); border-top: 1px solid var(--asuc-border); }

/* Sizes S/M/L */
.dg-sm > :not(caption) > * > * { padding: .35rem .5rem; }
.dg-sm th, .dg-sm td { font-size: .75rem; }
.row.dg-size-sm { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.row.dg-size-md { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
.dg-lg > :not(caption) > * > * { padding: .85rem 1rem; }
.dg-lg th, .dg-lg td { font-size: .9375rem; }
.row.dg-size-lg { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* --------------------------------------------------------------------------
   Narrow wrap: when the table content does not fit its container, the row
   wraps into a flex-wrap layout instead of scrolling horizontally. The class
   .aob-wrap-active is set by datagrid.js via ResizeObserver — and only below
   992px (desktop keeps the table, wide content scrolls horizontally there;
   owner report 2026-08-11: the pill layout appeared even at Full HD). The
   media guard below is the belt to that JS brace.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
.table-responsive.aob-wrap-active { overflow-x: visible; }
.table-responsive.aob-wrap-active > table { display: block !important; width: 100%; }
.table-responsive.aob-wrap-active > table > thead { display: none !important; }
.table-responsive.aob-wrap-active > table > tbody { display: block !important; }
.table-responsive.aob-wrap-active > table > tbody > tr {
  display: flex !important; flex-wrap: wrap; align-items: baseline;
  column-gap: .75rem; row-gap: .15rem; padding: .55rem .75rem;
  border-top: 1px solid var(--asuc-border);
}
.table-responsive.aob-wrap-active > table > tbody > tr:first-child { border-top: 0; }
.table-responsive.aob-wrap-active > table > tbody > tr > td {
  /* !important needed because Bootstrap's d-*-table-cell also uses !important */
  display: block !important; border: 0 !important; padding: 0 !important;
  width: auto !important; min-width: 0; max-width: 100%;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
}
.table-responsive.aob-wrap-active > table > tbody > tr > td.dg-wrap-full {
  flex: 0 0 100%; order: 99; color: var(--asuc-muted); font-size: .8125rem;
}
/* In the wrap layout the group header must not fall apart into columns. */
.table-responsive.aob-wrap-active > table > tbody > tr.dg-group-row { display: block !important; }
.table-responsive.aob-wrap-active > table > tbody > tr.dg-group-row > td { display: block !important; }
}   /* end of the <992px wrap guard */

/* --------------------------------------------------------------------------
   Group headers in the list (datagrid.js: groupBy) — e.g. month separators
   with subtotal. The teal line separates more clearly than a pale row.
   -------------------------------------------------------------------------- */
.dg-group-row > td {
  background: var(--asuc-surface-2);
  border-top: 2px solid var(--asuc-teal) !important;
  padding: .45rem .75rem !important; cursor: default;
}
.dg-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; }
.dg-group-title {
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--asuc-navy);
}
.dg-group-meta {
  font-family: var(--asuc-font-heading); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--asuc-muted-2);
}

/* ===== Filter bar above a grid ===== */
.aob-filterbar {
  background: var(--asuc-surface); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius); box-shadow: var(--asuc-shadow-sm);
  padding: .75rem .9rem; margin-bottom: .9rem;
}
.aob-filterbar .form-select, .aob-filterbar .form-control { font-size: .875rem; }
.aob-filterbar .form-select:focus, .aob-filterbar .form-control:focus {
  border-color: var(--asuc-teal); box-shadow: 0 0 0 .2rem rgba(62,185,192,.18);
}
.aob-filter-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--asuc-teal-bg); color: var(--asuc-navy);
  border: 1px solid var(--asuc-border); border-radius: var(--asuc-radius-pill);
  padding: .18rem .6rem; font-size: .75rem; font-weight: 600;
}
.aob-filter-chip button {
  border: 0; background: none; padding: 0; line-height: 1; color: var(--asuc-teal-700);
}
.aob-filter-chip button:hover { color: var(--asuc-danger); }

/* ==========================================================================
   LOGIN PAGE — two columns: sign-in + portal introduction
   On narrow devices the sign-in comes first (order) so nobody has to scroll
   past the marketing to log in.
   ========================================================================== */
.aob-split-body { background: var(--asuc-bg); }
.aob-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 992px) {
  .aob-split { grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr); }
}

/* ---- left column: sign-in ---- */
.aob-split-login {
  display: flex; align-items: center; justify-content: center;
  background: var(--asuc-surface);
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
  order: 1;
}
.aob-login-inner { width: 100%; max-width: 24rem; }
.aob-login-logo { height: 38px; display: block; margin-bottom: 1.4rem; }
.aob-login-inner h1 { font-size: 1.6rem; }
.aob-login-legal {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--asuc-border);
  text-align: center; font-size: .78rem; color: var(--asuc-muted-2);
}
.aob-login-legal a { color: var(--asuc-muted); }
.aob-login-legal a:hover { color: var(--asuc-navy); }
.aob-login-legal .aob-divider { margin: 0 .5rem; }

/* ---- right column: introduction ---- */
.aob-split-info {
  background: linear-gradient(150deg, var(--asuc-navy) 0%, var(--asuc-navy-700) 55%, var(--asuc-navy-600) 100%);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  order: 2;
  position: relative;
  overflow: hidden;
}
/* subtle teal glow, matching the welcome banner of the overview */
.aob-split-info::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(62,185,192,.13); pointer-events: none;
}
.aob-info-inner { position: relative; max-width: 100%; margin: 0 auto; }

/* Login language switch (flags) + multilingual highlight (login redesign 2026-08-15) */
.aob-login-langs { display: flex; gap: .3rem; justify-content: flex-end; margin-bottom: 1.1rem; }
.aob-login-flag { font-size: 1.15rem; line-height: 1; text-decoration: none; opacity: .5;
                  padding: .1rem .28rem; border-radius: 6px;
                  transition: opacity .15s ease, box-shadow .15s ease; }
.aob-login-flag:hover, .aob-login-flag:focus-visible { opacity: .9; }
.aob-login-flag.is-active { opacity: 1; box-shadow: inset 0 -2px 0 var(--asuc-accent); }
.aob-info-highlight { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
                      padding: .7rem .95rem; border-radius: 10px;
                      background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
                      font-size: .92rem; }
.aob-info-highlight i { font-size: 1.15rem; flex: none; }
.aob-info-benefits { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.aob-info-benefit { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
                    color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07);
                    border: 1px solid rgba(255, 255, 255, .14); padding: .35rem .65rem; border-radius: 999px; }
.aob-info-benefit i { font-size: .95rem; color: var(--asuc-teal-soft); }
.aob-info-eyebrow {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--asuc-teal-soft);
}
.aob-info-title {
  font-family: var(--asuc-font-heading); font-weight: 800; color: #fff;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12;
  margin: .5rem 0 .8rem; letter-spacing: -.01em;
}
.aob-info-lead { color: rgba(255,255,255,.84); font-size: 1rem; max-width: 40rem; margin: 0 0 1.8rem; }

.aob-info-features {
  display: grid; gap: 1rem; margin-bottom: 2rem;
}
/* single column: the info block now sits in the narrower right column (login redesign) */
.aob-info-feature { display: flex; gap: .8rem; align-items: flex-start; }
.aob-info-ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(62,185,192,.18); color: var(--asuc-teal-soft); font-size: 1.15rem;
}
.aob-info-feature-title {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .95rem; color: #fff;
}
.aob-info-feature-text { font-size: .84rem; color: rgba(255,255,255,.72); line-height: 1.5; }

/* ---- templates ---- */
.aob-info-templates {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 1.1rem 1.2rem;
}
.aob-info-templates-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .9rem; flex-wrap: wrap;
}
.aob-info-badge {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .7rem;
  letter-spacing: .04em; color: var(--asuc-navy); background: var(--asuc-teal-soft);
  padding: .2rem .6rem; border-radius: var(--asuc-radius-pill);
}
.aob-info-groups { display: grid; gap: .85rem; }
@media (min-width: 768px) { .aob-info-groups { grid-template-columns: 1fr 1fr; } }
.aob-info-group-title {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .78rem;
  color: var(--asuc-teal-soft); margin-bottom: .35rem;
}
.aob-info-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.aob-info-chip {
  font-size: .74rem; line-height: 1.3; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--asuc-radius-pill); padding: .18rem .55rem;
}
.aob-info-footer { margin: 1.6rem 0 0; font-size: .82rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   TOAST — top right at about a quarter of the viewport height. Deliberately
   not at the bottom: there it covers action bars and is easily missed on
   long pages.
   ========================================================================== */
.avb-toast {
  position: fixed;
  top: 25vh;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: auto; left: auto;
  z-index: 1080;
  max-width: min(420px, 92vw);
  background: var(--asuc-navy); color: #fff;
  padding: .8rem 1.1rem; border-radius: var(--asuc-radius);
  box-shadow: var(--asuc-shadow-lg);
  font-size: .875rem; line-height: 1.45;
  opacity: 0; transform: translateX(14px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.avb-toast.show { opacity: 1; transform: translateX(0); }
.avb-toast.ok  { background: var(--asuc-success); }
.avb-toast.bad { background: var(--asuc-danger); }
@media (max-width: 575.98px) {
  .avb-toast { top: auto; bottom: 1rem; left: .75rem; right: .75rem; max-width: none; transform: translateY(10px); }
  .avb-toast.show { transform: translateY(0); }
}

/* ==========================================================================
   DROPDOWN / COMBOBOX (assets/js/ui.js — AOB.select)
   Replaces <select> wherever searching is needed (e.g. 800+ industries).
   ========================================================================== */
.aob-select { position: relative; }
.aob-select-button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: var(--asuc-white); border: 1px solid var(--asuc-border-2);
  border-radius: var(--asuc-radius-sm); padding: .375rem .75rem;
  font-size: .875rem; color: var(--asuc-muted); text-align: left;
  min-height: calc(1.5em + .75rem + 2px);
  transition: border-color .15s, box-shadow .15s;
}
.aob-select.has-value .aob-select-button { color: var(--asuc-text); font-weight: 600; }
.aob-select-button:hover { border-color: var(--asuc-teal-soft); }
.aob-select.is-open .aob-select-button,
.aob-select-button:focus-visible {
  border-color: var(--asuc-teal); box-shadow: 0 0 0 .2rem rgba(62,185,192,.18); outline: none;
}
.aob-select-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aob-select-arrow { flex: none; color: var(--asuc-muted-2); font-size: .8rem; transition: transform .15s; }
.aob-select.is-open .aob-select-arrow { transform: rotate(180deg); }

.aob-select-menu {
  display: none; position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--asuc-surface); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius); box-shadow: var(--asuc-shadow-lg);
  overflow: hidden;
}
.aob-select.is-open .aob-select-menu { display: block; }
.aob-select-search {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--asuc-border);
  background: var(--asuc-surface-2);
}
.aob-select-search i { color: var(--asuc-muted-2); font-size: .85rem; }
.aob-select-search input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: .85rem; color: var(--asuc-text); min-width: 0;
}
.aob-select-list { max-height: 17rem; overflow-y: auto; padding: .25rem; }
.aob-select-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: var(--asuc-radius-sm);
  padding: .4rem .6rem; font-size: .85rem; color: var(--asuc-text); line-height: 1.35;
}
.aob-select-item > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aob-select-item:hover, .aob-select-item.is-marked { background: var(--asuc-teal-bg); }
.aob-select-item.is-active { background: var(--asuc-navy); color: #fff; font-weight: 600; }
.aob-select-item.is-active .aob-select-count { color: rgba(255,255,255,.75); }
.aob-select-count {
  flex: none; font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .7rem; color: var(--asuc-muted-2);
}
.aob-select-empty { padding: .7rem .6rem; font-size: .8rem; color: var(--asuc-muted-2); text-align: center; }

/* ==========================================================================
   CONFIRMATION DIALOG (assets/js/ui.js — AOB.confirm)
   ========================================================================== */
#aobConfirmModal .modal-content {
  border: 1px solid var(--asuc-border); border-radius: 14px; box-shadow: var(--asuc-shadow-lg);
}
#aobConfirmModal .modal-header { border-bottom: 1px solid var(--asuc-border); padding: .9rem 1.2rem; }
#aobConfirmModal .modal-title { font-size: 1.05rem; }
#aobConfirmModal .modal-body { padding: 1.1rem 1.2rem; }
#aobConfirmModal .modal-footer { border-top: 1px solid var(--asuc-border); padding: .75rem 1.2rem; }
.aob-confirm-detail {
  background: var(--asuc-surface-2); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); padding: .6rem .8rem;
  font-size: .82rem; color: var(--asuc-muted); white-space: pre-line;
}
/* Extra decision inside the dialog (e.g. "send credentials by e-mail") */
.aob-confirm-option {
  margin-top: .9rem; padding: .7rem .8rem;
  background: var(--asuc-teal-bg); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm);
}
.aob-confirm-option .form-check-label { font-size: .87rem; color: var(--asuc-navy); }
.aob-confirm-option-hint { font-size: .78rem; color: var(--asuc-muted); margin-top: .3rem; padding-left: 1.5rem; }

/* Mail option in the user modal */
.aob-mailoption {
  padding: .7rem .8rem;
  background: var(--asuc-teal-bg); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm);
}
.aob-mailoption .form-check-label { font-size: .87rem; color: var(--asuc-navy); }
.aob-mailoption-hint { font-size: .78rem; color: var(--asuc-muted); margin-top: .3rem; padding-left: 1.5rem; }

/* Session warning: the countdown should feel calm, not alarming */
#aobIdleModal .modal-content { border: 1px solid var(--asuc-border); border-radius: 14px; box-shadow: var(--asuc-shadow-lg); }
#aobIdleModal .modal-header { border-bottom: 1px solid var(--asuc-border); }
#aobIdleModal .modal-footer { border-top: 1px solid var(--asuc-border); }
#aobIdleCountdown { font-family: var(--asuc-font-heading); color: var(--asuc-navy); }

/* ===== Location pill (address number / condensed list with tooltip) ===== */
.aob-location-pill {
  display: inline-block;
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .76rem;
  color: var(--asuc-navy); background: var(--asuc-teal-bg);
  border: 1px solid var(--asuc-border);
  padding: .15rem .5rem; border-radius: var(--asuc-radius-sm);
  cursor: default; white-space: nowrap;
}
.aob-location-pill.is-missing {
  background: var(--asuc-warning-bg); color: var(--asuc-warning); border-color: transparent;
}

/* ===== Location assignment (two columns: available | assigned) ===== */
.aob-assign { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 575.98px) { .aob-assign { grid-template-columns: 1fr; } }
.aob-assign-head { margin-bottom: .4rem; min-height: 1.9rem; display: flex; align-items: center; }
.aob-assign-list {
  height: 15rem; overflow-y: auto;
  border: 1px solid var(--asuc-border); border-radius: var(--asuc-radius-sm);
  background: var(--asuc-surface-2); padding: .3rem;
}
.aob-assign-item {
  display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left;
  background: var(--asuc-surface); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); padding: .3rem .5rem; margin-bottom: .25rem;
  font-size: .8rem; color: var(--asuc-text); line-height: 1.3;
}
.aob-assign-item:hover { border-color: var(--asuc-teal); background: var(--asuc-teal-bg); }
.aob-assign-item i { color: var(--asuc-teal-700); flex: none; }
.aob-assign-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aob-assign-item.is-on i { color: var(--asuc-danger); }
.aob-assign-item.is-missing { border-color: var(--asuc-warning); color: var(--asuc-warning); }
.aob-assign-empty { color: var(--asuc-muted-2); font-size: .8rem; padding: .8rem .5rem; text-align: center; }

/* ==========================================================================
   NEWS
   ========================================================================== */
.aob-news-list { display: grid; gap: .6rem; }
.aob-news-entry {
  display: block; padding: .85rem 1rem;
  background: var(--asuc-surface); border: 1px solid var(--asuc-border);
  border-left: 3px solid var(--asuc-border-2);
  border-radius: var(--asuc-radius-sm); color: var(--asuc-text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.aob-news-entry:hover {
  color: var(--asuc-text); border-color: var(--asuc-teal);
  border-left-color: var(--asuc-teal); box-shadow: var(--asuc-shadow-sm); transform: translateY(-1px);
}
.aob-news-entry.is-new { border-left-color: var(--asuc-teal); background: var(--asuc-teal-bg); }
.aob-news-header { display: flex; align-items: baseline; gap: .6rem; }
.aob-news-title {
  flex: 1; font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .98rem; color: var(--asuc-navy);
}
.aob-news-title .bi-pin-angle-fill { color: var(--asuc-teal-700); }
.aob-news-new {
  flex: none; font-family: var(--asuc-font-heading); font-weight: 700;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--asuc-teal); padding: .12rem .45rem;
  border-radius: var(--asuc-radius-pill);
}
.aob-news-meta { font-size: .74rem; color: var(--asuc-muted-2); margin-top: .15rem; }
.aob-news-excerpt { font-size: .85rem; color: var(--asuc-muted); margin-top: .35rem; line-height: 1.5; }

/* ---- article view ---- */
.aob-news-article-title {
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 .3rem;
}
/* Content comes from the editor (filtered). Typography lives here so posts
   look uniform regardless of editor markup — colors, sizes and emphasis from
   the editor arrive as inline styles, take precedence, and are NOT
   overridden here. */
.aob-news-content {
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.7; color: var(--asuc-text);
  overflow-wrap: break-word;
}
.aob-news-content > *:first-child { margin-top: 0; }
.aob-news-content h1 { font-size: 1.45rem; margin: 1.6rem 0 .6rem; }
.aob-news-content h2 { font-size: 1.22rem; margin: 1.5rem 0 .5rem; }
.aob-news-content h3 { font-size: 1.08rem; margin: 1.3rem 0 .45rem; }
.aob-news-content p { margin: 0 0 .9rem; }
.aob-news-content ul, .aob-news-content ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.aob-news-content li { margin-bottom: .25rem; }
.aob-news-content a { color: var(--asuc-teal-700); text-decoration: underline; text-underline-offset: 2px; }
.aob-news-content img { max-width: 100%; height: auto; border-radius: var(--asuc-radius-sm); }
/* Wide content must not break the page: tables scroll inside themselves. */
.aob-news-content blockquote {
  margin: 0 0 .9rem; padding: .4rem 0 .4rem 1rem;
  border-left: 3px solid var(--asuc-teal); color: var(--asuc-muted);
}
.aob-news-content table { width: 100%; border-collapse: collapse; margin: 0 0 .9rem; font-size: .88rem; }
.aob-news-content table td, .aob-news-content table th {
  border: 1px solid var(--asuc-border); padding: .4rem .6rem; vertical-align: top;
}
.aob-news-content table th { background: var(--asuc-surface-2); font-weight: 700; text-align: left; }
.aob-news-content pre {
  background: var(--asuc-navy); color: #e6eef2; padding: .8rem 1rem;
  border-radius: var(--asuc-radius-sm); overflow-x: auto; font-size: .82rem;
}
.aob-news-content hr { border: 0; border-top: 1px solid var(--asuc-border); margin: 1.4rem 0; }

/* ==========================================================================
   LOCATION DETAIL PAGE
   ========================================================================== */
.aob-location-data {
  display: grid; gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.aob-location-data > div > div { font-size: .92rem; line-height: 1.45; }

/* ---- service contracts of a location (compact cards) ---- */
.aob-contract-list { display: grid; gap: .5rem; }
.aob-contract {
  padding: .6rem .75rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface-2);
}
.aob-contract.is-cancelled { opacity: .75; border-style: dashed; }
.aob-contract-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}
.aob-contract-title { font-weight: 600; font-size: .9rem; color: var(--asuc-navy); }
.aob-contract-meta {
  display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .3rem;
  font-size: .76rem; color: var(--asuc-muted);
}

/* ---- users of a location ---- */
.aob-user-list { display: grid; gap: .5rem; }
.aob-user {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface-2);
}
.aob-user-circle {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--asuc-teal-bg); color: var(--asuc-teal-700);
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: .95rem;
}
.aob-user-text { flex: 1; min-width: 0; }
.aob-user-name { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aob-user-mail { font-size: .76rem; color: var(--asuc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bell: who receives a mail when new documents arrive */
.aob-user-bell { flex: none; color: var(--asuc-border-2); font-size: .95rem; cursor: help; }
.aob-user-bell.is-on { color: var(--asuc-teal-700); }

/* ==========================================================================
   DOCUMENT UPLOAD
   ========================================================================== */
.aob-dropzone {
  border: 2px dashed var(--asuc-border-2); border-radius: var(--asuc-radius);
  background: var(--asuc-surface-2); padding: 1.8rem 1rem; text-align: center;
  color: var(--asuc-muted); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aob-dropzone:hover, .aob-dropzone.is-active {
  border-color: var(--asuc-teal); background: var(--asuc-teal-bg); color: var(--asuc-navy);
}
.aob-dropzone i { font-size: 2rem; color: var(--asuc-teal-700); display: block; margin-bottom: .4rem; }
/* Quick upload in the backend: flatter, because it sits on the page permanently */
.aob-dropzone-quick { padding: 1.2rem 1rem; }
.aob-dropzone-quick i { font-size: 1.6rem; margin-bottom: .3rem; }
.aob-dropzone-example { font-size: .76rem; margin-top: .35rem; }
.aob-dropzone-example code { color: inherit; word-break: break-all; }

/* Target location in the upload dialog */
.aob-upload-target {
  border: 1px solid var(--asuc-teal); border-radius: var(--asuc-radius-sm);
  background: var(--asuc-teal-bg); padding: .6rem .75rem; margin-bottom: .85rem;
}
.aob-upload-target:empty { display: none; }
.aob-upload-target-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.aob-upload-target-name { font-weight: 600; font-size: .95rem; }
.aob-upload-target-city { font-size: .8rem; color: var(--asuc-muted); }
.aob-upload-target-link { font-size: .78rem; display: inline-block; margin-top: .3rem; }

/* ---- files in the upload dialog: detection visible and correctable ---- */
.aob-upload-list { display: grid; gap: .5rem; margin-top: .7rem; }
.aob-upload-row {
  border: 1px solid var(--asuc-border); border-radius: var(--asuc-radius-sm);
  background: var(--asuc-surface); padding: .5rem .6rem;
}
.aob-upload-row.is-error { border-color: var(--asuc-danger); background: var(--asuc-danger-bg); }
.aob-upload-row.is-done { border-color: var(--asuc-teal); background: var(--asuc-teal-bg); }

.aob-upload-head { display: flex; align-items: center; gap: .55rem; font-size: .86rem; }
.aob-upload-head > i { color: var(--asuc-teal-700); flex: none; }
.aob-upload-row.is-error .aob-upload-head > i { color: var(--asuc-danger); }
.aob-upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.aob-upload-size { flex: none; color: var(--asuc-muted-2); font-size: .78rem; }
.aob-upload-status { flex: none; display: inline-flex; }
.aob-upload-status.ok  { color: var(--asuc-success); }
.aob-upload-status.bad { color: var(--asuc-danger); }

.aob-upload-fields {
  display: grid; gap: .5rem .8rem; margin-top: .5rem;
  grid-template-columns: minmax(0, 2fr) minmax(9rem, 1fr);
}
@media (max-width: 575.98px) { .aob-upload-fields { grid-template-columns: 1fr; } }
.aob-upload-field .avb-filter-label { display: flex; align-items: center; gap: .4rem; }

.aob-upload-warning {
  margin-top: .45rem; font-size: .78rem; color: var(--asuc-navy);
  background: var(--asuc-warning-bg); border: 1px solid var(--asuc-warning);
  border-radius: var(--asuc-radius-sm); padding: .35rem .5rem;
}
.aob-upload-row.is-error .aob-upload-warning {
  background: transparent; border: 0; padding: .2rem 0 0; color: var(--asuc-danger); font-weight: 600;
}
.aob-upload-detected { margin-top: .3rem; font-size: .78rem; color: var(--asuc-muted); }

/* ---- note about mail dispatch in the upload dialog ---- */
.aob-mail-hint {
  border: 1px solid var(--asuc-border); border-radius: var(--asuc-radius-sm);
  background: var(--asuc-surface-2); padding: .6rem .75rem;
}
.aob-mail-hint-text { font-size: .78rem; color: var(--asuc-muted); margin-top: .35rem; }

/* ===== Empty state ===== */
.aob-empty {
  text-align: center; color: var(--asuc-muted); padding: 2.5rem 1rem;
}
.aob-empty i { font-size: 2.2rem; color: var(--asuc-border-2); display: block; margin-bottom: .6rem; }

/* Temp password in the user modal: must stand out and be easy to copy. */
.aob-temppw { border-left: 4px solid var(--asuc-success); }
.aob-temppw-value {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); padding: .5rem .7rem;
}
.aob-temppw-value code {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  color: var(--asuc-navy); word-break: break-all;
}

/* ==========================================================================
   INVOICES
   ========================================================================== */
/* Amounts: credit notes set apart so a minus is not overlooked. */
.aob-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--asuc-navy); }
.aob-amount.is-credit { color: var(--asuc-danger); }

/* Project marker inside the description */
.aob-project {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: .72rem; font-weight: 600; padding: .05rem .4rem;
  border-radius: var(--asuc-radius-pill);
  background: var(--asuc-teal-bg); color: var(--asuc-teal-700);
}

/* ---- fact grid in the detail dialog ---- */
.aob-facts {
  display: grid; gap: .6rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.aob-fact { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.aob-fact-k {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--asuc-muted);
}
.aob-fact-v { font-size: .92rem; color: var(--asuc-navy); overflow-wrap: anywhere; }

/* ---- quick preview of line items (Bootstrap tooltip) ----
   Wider and left-aligned instead of the narrow default tooltip: this holds a
   small table, not a sentence. */
.tooltip.aob-itemtip { --bs-tooltip-max-width: 40rem; --bs-tooltip-opacity: 1; }
.tooltip.aob-itemtip .tooltip-inner {
  max-width: 40rem; text-align: left; padding: 0; overflow: hidden;
  background: var(--asuc-navy); border-radius: var(--asuc-radius-sm);
  box-shadow: var(--asuc-shadow-lg);
}
.tooltip.aob-itemtip .tooltip-arrow::before { border-top-color: var(--asuc-navy); }

.aob-itemtip-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  padding: .45rem .7rem; background: rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.aob-itemtip-kind {
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: .78rem;
  color: var(--asuc-teal-soft);
}
.aob-itemtip-no { font-size: .72rem; color: rgba(255,255,255,.7); }
.aob-itemtip-empty { padding: .6rem .7rem; font-size: .78rem; color: rgba(255,255,255,.7); }

.aob-itemtip-items { padding: .3rem 0 .35rem; }
.aob-itemtip-row {
  display: grid; align-items: baseline; gap: .5rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) 5.5rem 6rem;
  padding: .12rem .7rem; font-size: .74rem; color: #fff;
}
.aob-itemtip-header {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55);
  padding-bottom: .2rem;
}
.aob-itemtip-foot {
  margin-top: .25rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.16);
  font-weight: 700;
}
.aob-itemtip-qty, .aob-itemtip-unit, .aob-itemtip-total { text-align: right; font-variant-numeric: tabular-nums; }
.aob-itemtip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aob-itemtip-sum-label {
  grid-column: 1 / 4; text-align: right;
  font-family: var(--asuc-font-heading); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65);
}
/* No hover on narrow devices — the tooltip would be useless there. */
@media (max-width: 767.98px) { .tooltip.aob-itemtip { display: none !important; } }

/* ==========================================================================
   SERVICE CONTRACTS
   ========================================================================== */
/* Status tabs (active / cancelled / all) — segmented control in the filter bar */
.aob-status-tabs {
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: var(--asuc-surface-2); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-pill);
}
.aob-status-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: .3rem .8rem; border-radius: var(--asuc-radius-pill);
  font-size: .84rem; font-weight: 600; color: var(--asuc-muted);
  transition: background .15s, color .15s;
}
.aob-status-tab:hover { color: var(--asuc-navy); }
.aob-status-tab.is-active { background: var(--asuc-navy); color: #fff; }
.aob-status-tab span {
  display: inline-block; min-width: 1.4em; margin-left: .3rem;
  font-size: .72rem; font-weight: 700; text-align: center;
  background: rgba(0,0,0,.08); border-radius: var(--asuc-radius-pill); padding: 0 .35rem;
}
.aob-status-tab.is-active span { background: rgba(255,255,255,.22); }

/* ==========================================================================
   TEMPLATES (customer view and backend)
   ========================================================================== */
/* ---- jump links above the categories ---- */
.aob-category-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.aob-category-jump a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-pill); background: var(--asuc-surface-2);
  font-size: .82rem; color: var(--asuc-navy); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.aob-category-jump a:hover { border-color: var(--asuc-teal); background: var(--asuc-teal-bg); }
.aob-category-jump a i { color: var(--asuc-teal-700); }
.aob-category-jump-count {
  font-size: .72rem; font-weight: 700; color: var(--asuc-muted);
  background: #fff; border-radius: var(--asuc-radius-pill); padding: 0 .35rem;
}

/* ---- category icon ---- */
.aob-category-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--asuc-teal-bg); color: var(--asuc-teal-700); font-size: 1.15rem;
}

/* ---- template cards ---- */
.aob-templates {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.aob-template {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .75rem .85rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius); background: var(--asuc-surface);
  transition: border-color .15s, box-shadow .15s;
}
.aob-template:hover { border-color: var(--asuc-teal); box-shadow: var(--asuc-shadow-sm); }
.aob-template.is-hidden { opacity: .62; border-style: dashed; }

.aob-template-icon {
  flex: none; width: 40px; height: 40px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--asuc-surface-2); color: var(--asuc-teal-700); font-size: 1.3rem;
}
/* Color by file type — helps when skimming */
.aob-template-icon.is-pdf   { background: #fdecec; color: #c0392b; }
.aob-template-icon.is-word  { background: #eaf1fb; color: #1f5fa9; }
.aob-template-icon.is-excel { background: #e8f5ec; color: #1e7145; }
.aob-template-icon.is-ppt   { background: #fdefe7; color: #c0552b; }

.aob-template-text { flex: 1; min-width: 0; }
.aob-template-title { font-weight: 600; font-size: .93rem; color: var(--asuc-navy); line-height: 1.3; }
.aob-template-desc { font-size: .8rem; color: var(--asuc-muted); margin-top: .15rem; }
.aob-template-meta {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem;
  font-size: .74rem; color: var(--asuc-muted-2);
}
.aob-template-kind {
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--asuc-teal-700);
}
.aob-template-actions { flex: none; display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
@media (max-width: 575.98px) {
  .aob-template { flex-wrap: wrap; }
  .aob-template-actions { width: 100%; justify-content: flex-start; }
}

/* ---- category list in the backend ---- */
.aob-category-list { display: grid; gap: .4rem; }
.aob-category-row {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  padding: .55rem .7rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface);
  transition: border-color .15s, background .15s;
}
.aob-category-row:hover { border-color: var(--asuc-teal); }
.aob-category-row.is-active { border-color: var(--asuc-teal); background: var(--asuc-teal-bg); }
.aob-category-row.is-hidden { opacity: .68; border-style: dashed; }
.aob-category-text { flex: 1; min-width: 0; }
.aob-category-name { font-weight: 600; font-size: .9rem; color: var(--asuc-navy); }
.aob-category-sub { font-size: .76rem; color: var(--asuc-muted); }
.aob-category-buttons { flex: none; display: flex; gap: .2rem; }

/* ===== Account page: fact grid ===== */
.aob-account-facts {
  display: grid; gap: .8rem 1.2rem; margin-top: .3rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.aob-account-facts > div > div { font-size: .92rem; }

/* Notification switches: the whole row is clickable */
.aob-switch-list { display: grid; gap: .5rem; }
.aob-switch-row {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  padding: .7rem .85rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface-2);
  transition: border-color .15s;
}
.aob-switch-row:hover { border-color: var(--asuc-teal); }
.aob-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.aob-switch-title { font-weight: 600; font-size: .92rem; color: var(--asuc-navy); }
.aob-switch-title i { color: var(--asuc-teal-700); }
.aob-switch-sub { font-size: .78rem; color: var(--asuc-muted); }
.aob-switch-row .form-check-input { cursor: pointer; }

/* ==========================================================================
   DOCUMENT TYPES & SETTINGS (backend)
   ========================================================================== */
/* Search patterns are shown in the list — long, technical, may wrap. */
.aob-regex {
  font-family: var(--asuc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .76rem; color: var(--asuc-navy);
  background: var(--asuc-surface-2); border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); padding: .1rem .35rem;
  word-break: break-all; display: inline-block; max-width: 100%;
}
.aob-example { line-height: 1.3; }
.aob-example code { color: inherit; font-size: .74rem; word-break: break-all; }

/* Allowed file types: tiles instead of a checkbox column */
.aob-extensions { display: flex; flex-wrap: wrap; gap: .5rem; }
.aob-extension {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .45rem .7rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface-2);
  font-size: .84rem; cursor: pointer; user-select: none;
}
.aob-extension:hover { border-color: var(--asuc-teal); }
.aob-extension:has(input:checked) {
  border-color: var(--asuc-teal); background: var(--asuc-teal-bg); color: var(--asuc-navy);
}
.aob-extension i { color: var(--asuc-teal-700); }
.aob-extension .form-check-input { margin-top: 0; flex: none; }

/* ==========================================================================
   GUIDED INTRODUCTION (assets/js/guide.js)
   Own overlay, not a Bootstrap modal: the tour has to sit above everything
   else the page may open (modal = 1055, offcanvas = 1045) and keeps its own
   focus handling. Layout is a column with a fixed head/foot and a scrolling
   middle, so a long explanation stays readable on a 380px phone in landscape.

   Three appearances of ONE card:
     .is-welcome  — the start modal of the first sign-in (centred, wide)
     .is-anchored — the tour bubble next to the highlighted menu entry
     .is-sheet    — the same bubble on a narrow window, at the bottom edge
   ========================================================================== */
.aob-guide {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.6rem, 3vw, 2rem);
}
.aob-guide[hidden] { display: none; }
/* Only the centred screens lock the page. During the tour the person has to
   be able to scroll to what the spotlight points at — the overlay follows. */
body.aob-guide-lock { overflow: hidden; }

/* Plain dimming for the centred screens (welcome, closing, fallback). */
.aob-guide-veil { position: fixed; inset: 0; background: rgba(1, 38, 65, .62); }
.aob-guide-veil[hidden] { display: none; }

/* ---- Spotlight: the cut-out over the dimmed page ----
   One element instead of four bars: the huge, spread-out shadow IS the
   darkening, so the hole can never drift apart from it. Not clickable, so a
   click always lands on the overlay and never on the page behind it. */
.aob-guide-spot {
  position: fixed; pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(1, 38, 65, .62), 0 0 0 2px var(--asuc-teal) inset;
  outline: 2px solid var(--asuc-teal); outline-offset: 0;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.aob-guide-spot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .aob-guide-spot { transition: none; }
}

.aob-guide-card {
  width: min(34rem, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--asuc-surface);
  border-radius: var(--asuc-radius);
  box-shadow: var(--asuc-shadow-lg);
  overflow: hidden;
  position: relative;
}
/* Bubble beside the target: narrower than the centred card, and fixed because
   assets/js/guide.js positions it in viewport coordinates. */
.aob-guide-card.is-anchored {
  position: fixed;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 2rem));
}
/* Narrow window: nothing fits beside anything, so the card sits at the bottom
   edge and the spotlight above it keeps doing the pointing. */
.aob-guide-card.is-sheet {
  position: fixed; left: .5rem; right: .5rem; bottom: .5rem;
  width: auto; max-height: 68vh;
}
.aob-guide-card.is-welcome { width: min(40rem, 100%); }

/* ---- Arrow from the bubble to its target ---- */
.aob-guide-arrow {
  position: absolute; width: 12px; height: 12px;
  background: var(--asuc-teal); transform: rotate(45deg);
  border-radius: 2px;
}
.aob-guide-arrow[hidden] { display: none; }
.aob-guide-arrow.is-right  { left: -6px;   margin-top: -6px; }
.aob-guide-arrow.is-left   { right: -6px;  margin-top: -6px; }
.aob-guide-arrow.is-bottom { top: -6px;    margin-left: -6px; }
.aob-guide-arrow.is-top    { bottom: -6px; margin-left: -6px; }

/* ==========================================================================
   WELCOME SCREEN — the first impression of the new portal
   Navy surface, teal accent, a mark built from Bootstrap icons and CSS only
   (no image file has to survive a deployment for the greeting to work).
   ========================================================================== */
.aob-guide-hero {
  flex: none; padding: 1.6rem 1.4rem 1.4rem; text-align: center;
  color: #fff; background: var(--asuc-navy);
  background-image:
    radial-gradient(120% 90% at 50% -30%, rgba(62, 185, 192, .38), transparent 60%),
    radial-gradient(80% 60% at 110% 120%, rgba(62, 185, 192, .18), transparent 70%);
}
.aob-guide-hero[hidden] { display: none; }

.aob-guide-mark { position: relative; display: block; width: 104px; height: 104px; margin: 0 auto 1rem; }
.aob-guide-mark-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(143, 212, 216, .45);
  box-shadow: 0 0 0 9px rgba(143, 212, 216, .07), 0 0 0 18px rgba(143, 212, 216, .04);
}
.aob-guide-mark-core {
  position: absolute; inset: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--asuc-teal), var(--asuc-teal-700));
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}
.aob-guide-mark-orbit { position: absolute; inset: 0; }
.aob-guide-orbit-item {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1, 38, 65, .85); border: 1px solid rgba(143, 212, 216, .45);
  color: var(--asuc-teal-soft); font-size: .8rem;
}
.aob-guide-orbit-item.is-1 { top: -6px; left: 50%; transform: translateX(-50%); }
.aob-guide-orbit-item.is-2 { bottom: 2px; left: -8px; }
.aob-guide-orbit-item.is-3 { bottom: 2px; right: -8px; }

.aob-guide-hero-eyebrow {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--asuc-teal-soft);
  margin: 0 0 .3rem;
}
.aob-guide-hero-title {
  font-family: var(--asuc-font-heading); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
  color: #fff; margin: 0 0 .6rem; overflow-wrap: anywhere;
}
.aob-guide-hero-text { max-width: 34rem; margin-inline: auto; }
.aob-guide-hero-text p {
  font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .88); margin: 0 0 .5rem;
}
.aob-guide-hero-text p:last-child { margin-bottom: 0; }

/* ---- What THIS account holds: one tile per booked area ---- */
.aob-guide-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem; list-style: none; margin: 0 0 .9rem; padding: 0;
}
.aob-guide-facts[hidden] { display: none; }
.aob-guide-fact {
  border: 1px solid var(--asuc-border); border-radius: var(--asuc-radius-sm);
  background: var(--asuc-surface-2); padding: .6rem .7rem;
}
.aob-guide-fact > i { color: var(--asuc-teal-700); font-size: .95rem; }
.aob-guide-fact-value {
  display: block; font-family: var(--asuc-font-heading); font-weight: 800;
  font-size: 1.3rem; line-height: 1.15; color: var(--asuc-navy);
}
.aob-guide-fact-value .bi { color: var(--asuc-success); font-size: 1.1rem; }
.aob-guide-fact-label { display: block; font-weight: 700; font-size: .82rem; color: var(--asuc-navy); }
.aob-guide-fact-sub { display: block; font-size: .72rem; color: var(--asuc-muted); }

/* ---- Head: icon, step counter, title, close ---- */
.aob-guide-head {
  flex: none; display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem 1.1rem .8rem;
  background: var(--asuc-navy); color: #fff;
}
.aob-guide-head[hidden] { display: none; }
.aob-guide-x[hidden] { display: none; }
.aob-guide-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: var(--asuc-teal-soft); font-size: 1.15rem;
}
.aob-guide-live { flex: 1; min-width: 0; }
.aob-guide-eyebrow {
  font-family: var(--asuc-font-heading); font-weight: 700; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--asuc-teal-soft);
  margin: 0 0 .15rem;
}
.aob-guide-eyebrow:empty { display: none; }
.aob-guide-title {
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: 1.15rem;
  color: #fff; margin: 0; overflow-wrap: anywhere;
}
.aob-guide-x {
  flex: none; border: 0; background: transparent; color: rgba(255, 255, 255, .75);
  border-radius: var(--asuc-radius-sm); padding: .3rem .45rem; line-height: 1; cursor: pointer;
}
.aob-guide-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aob-guide-x:focus-visible { outline: 2px solid var(--asuc-teal-soft); outline-offset: 2px; }

/* ---- Progress ---- */
.aob-guide-progress { flex: none; height: 4px; background: var(--asuc-border); }
.aob-guide-progress[hidden] { display: none; }
.aob-guide-bar {
  display: block; height: 100%; width: 0;
  background: var(--asuc-teal); transition: width .25s ease;
}

/* ---- Body: the actual explanation ---- */
.aob-guide-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1.1rem 1.1rem .4rem;
}
.aob-guide-text { font-size: .96rem; line-height: 1.55; color: var(--asuc-text); margin-bottom: .8rem; }
.aob-guide-where {
  font-size: .84rem; color: var(--asuc-teal-700);
  background: var(--asuc-teal-bg); border-radius: var(--asuc-radius-sm);
  padding: .45rem .6rem; margin-bottom: .8rem;
}
.aob-guide-where[hidden] { display: none; }
.aob-guide-hint { font-size: .84rem; color: var(--asuc-muted); margin-bottom: .8rem; }
.aob-guide-hint[hidden] { display: none; }
.aob-guide-error {
  font-size: .88rem; color: var(--asuc-danger);
  background: var(--asuc-danger-bg); border-radius: var(--asuc-radius-sm);
  padding: .5rem .65rem; margin-bottom: .8rem;
}
.aob-guide-error[hidden] { display: none; }

/* ---- Foot: exits on the left, way forward on the right ---- */
.aob-guide-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem 1rem;
  border-top: 1px solid var(--asuc-border);
}
.aob-guide-foot-left { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.aob-guide-foot-left[hidden] { display: none; }
.aob-guide-foot-right { display: flex; gap: .4rem; margin-left: auto; }
.aob-guide-link {
  border: 0; background: none; padding: .15rem 0; cursor: pointer;
  font-size: .82rem; color: var(--asuc-muted); text-decoration: underline;
}
.aob-guide-link:hover { color: var(--asuc-navy); }
.aob-guide-link:focus-visible { outline: 2px solid var(--asuc-teal); outline-offset: 2px; }
.aob-guide-link[hidden] { display: none; }
.aob-guide-foot-right .btn[hidden] { display: none; }

/* The welcome screen has exactly ONE way out, so it is given the weight of a
   single decision: full-width button, no competing links next to it. */
.aob-guide-card.is-welcome .aob-guide-foot { justify-content: center; }
.aob-guide-card.is-welcome .aob-guide-foot-right { margin-left: 0; width: 100%; }
.aob-guide-card.is-welcome .aob-guide-foot-right .btn {
  flex: 1 1 auto; padding: .55rem 1.4rem; font-size: .95rem;
}
.aob-guide-card.is-welcome .aob-guide-body { padding-top: 1.1rem; }

/* The bubble is read at a glance next to the highlighted entry — a size below
   the centred card, and no ceremony. */
.aob-guide-card.is-anchored .aob-guide-head,
.aob-guide-card.is-sheet .aob-guide-head { padding: .8rem .9rem .65rem; }
.aob-guide-card.is-anchored .aob-guide-title,
.aob-guide-card.is-sheet .aob-guide-title { font-size: 1.02rem; }
.aob-guide-card.is-anchored .aob-guide-icon,
.aob-guide-card.is-sheet .aob-guide-icon { width: 34px; height: 34px; font-size: 1rem; }
.aob-guide-card.is-anchored .aob-guide-body,
.aob-guide-card.is-sheet .aob-guide-body { padding: .9rem .9rem .3rem; }
.aob-guide-card.is-anchored .aob-guide-text,
.aob-guide-card.is-sheet .aob-guide-text { font-size: .9rem; }
.aob-guide-card.is-anchored .aob-guide-foot,
.aob-guide-card.is-sheet .aob-guide-foot { padding: .65rem .9rem .8rem; }

/* Narrow phones: the way forward gets the full width and stays the last
   element in the reading order — no button pair squeezed to two words. */
@media (max-width: 420px) {
  .aob-guide-foot { flex-direction: column-reverse; align-items: stretch; }
  .aob-guide-foot-right { margin-left: 0; }
  .aob-guide-foot-right .btn { flex: 1 1 auto; }
  .aob-guide-foot-left { justify-content: center; }
  .aob-guide-title { font-size: 1.05rem; }
  .aob-guide-hero { padding: 1.2rem 1rem 1.1rem; }
  .aob-guide-mark { width: 86px; height: 86px; }
  .aob-guide-mark-core { inset: 18px; font-size: 1.3rem; }
}

/* ==========================================================================
   TEAM LIST — the action column (pages/team.php, ?p=team | ?p=admin-team)
   Every row carries up to five icon buttons. In the wrap layout (see "Narrow
   wrap" above) the row is a flex container, so a long e-mail plus a location
   pill pushed those buttons onto a SECOND line — but only in some rows, which
   made the row heights jump between 48 and 85 pixels and the list restless.

   The fix keeps the idea of a COLUMN alive in a layout that has no columns:
   the row reserves a lane of fixed width on its right, the action cell sits
   in that lane, and the informational cells wrap inside what is left. Every
   row is therefore exactly as tall as its text needs, never taller because of
   its buttons.
   ========================================================================== */
#teamGrid { --aob-actions-w: 200px; }

/* Table layout (wide windows): a real column of fixed width, nothing wraps. */
#teamGrid table > thead > tr > th:last-child,
#teamGrid table > tbody > tr > td:last-child {
  width: var(--aob-actions-w); white-space: nowrap;
}
#teamGrid table > tbody > tr > td:last-child > .d-flex {
  flex-wrap: nowrap; justify-content: flex-end;
}
#teamGrid table > tbody > tr > td:last-child .btn { flex: none; }

/* Wrap layout: the reserved lane. The cell is taken out of the flex flow so
   it cannot be wrapped away, and centred vertically over the whole row. */
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr {
  position: relative;
  min-height: 2.4rem;
  padding-right: calc(var(--aob-actions-w) + 1rem);
}
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr > td:last-child {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  width: var(--aob-actions-w) !important;
  display: flex !important; justify-content: flex-end; align-items: center;
}

/* Bootstrap paints stripe and hover on the CELLS. The action cell is out of
   the flow now, so it would paint its whole lane in the stripe colour and
   leave a grey block next to the buttons — in the wrap layout the ROW carries
   both instead. */
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr > td { box-shadow: none !important; }
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr:nth-of-type(odd) {
  background: var(--asuc-surface-2);
}
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr:hover { background: var(--asuc-teal-bg); }
#teamGrid .table-responsive.aob-wrap-active > table > tbody > tr:hover > td { background: transparent; }

/* Not enough room for five separate buttons: they close ranks into one
   segmented control — same actions, same order, roughly a third narrower.
   Below that the datagrid's own wrap layout takes over the rest. */
@media (max-width: 991.98px) {
  #teamGrid { --aob-actions-w: 152px; }
  #teamGrid td:last-child > .d-flex { gap: 0 !important; }
  #teamGrid td:last-child > .d-flex > .btn {
    border-radius: 0; margin-left: -1px; padding-inline: .45rem;
  }
  #teamGrid td:last-child > .d-flex > .btn:first-child {
    border-start-start-radius: var(--asuc-radius-sm); border-end-start-radius: var(--asuc-radius-sm);
    margin-left: 0;
  }
  #teamGrid td:last-child > .d-flex > .btn:last-child {
    border-start-end-radius: var(--asuc-radius-sm); border-end-end-radius: var(--asuc-radius-sm);
  }
  /* The focused button has to stay readable inside the strip. */
  #teamGrid td:last-child > .d-flex > .btn:focus-visible,
  #teamGrid td:last-child > .d-flex > .btn:hover { position: relative; z-index: 1; }
}

/* Very narrow: a 152px lane would leave nothing for the text, so the strip
   moves to its own line at the end of the row — uniformly in EVERY row. */
@media (max-width: 575.98px) {
  #teamGrid .table-responsive.aob-wrap-active > table > tbody > tr { padding-right: .75rem; }
  #teamGrid .table-responsive.aob-wrap-active > table > tbody > tr > td:last-child {
    position: static; transform: none;
    width: 100% !important; order: 100; margin-top: .25rem;
  }
}

/* ---- Account page: the state of the tour ---- */
.aob-guide-list { display: grid; gap: .35rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.aob-guide-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .7rem; border: 1px solid var(--asuc-border);
  border-radius: var(--asuc-radius-sm); background: var(--asuc-surface-2);
  font-size: .88rem;
}
.aob-guide-item i { flex: none; color: var(--asuc-border-2); }
.aob-guide-item.is-done { border-color: rgba(46, 158, 91, .35); }
.aob-guide-item.is-done i { color: var(--asuc-success); }
.aob-guide-item-name { flex: 1; min-width: 0; color: var(--asuc-navy); font-weight: 600; }
.aob-guide-item-date { flex: none; font-size: .78rem; color: var(--asuc-muted); }

/* ==========================================================================
   PAGE HELP (the ⓘ in the topbar — includes/layout.php, layout_help_panel())

   The tour explains an area once; THIS is the reference work one comes back
   to. So it is built to be read NEXT TO the page it describes, not on top of
   it: a panel from the side edge on wide screens, a sheet from the bottom
   edge below 640px — the only shape that stays readable and thumb-reachable
   on a 390px phone.

   One Bootstrap offcanvas serves both. Bootstrap has no responsive placement,
   so the media query below re-points .offcanvas-end at the bottom edge; the
   explicit `transform: none` for .showing/.show is required because
   Bootstrap's own rule has the same specificity and loses to this file.
   ========================================================================== */
.aob-help {
  --bs-offcanvas-width: min(34rem, 100vw);
  --bs-offcanvas-padding-x: 1.15rem;
  --bs-offcanvas-padding-y: 1rem;
}

/* ---- Head: same navy as the topbar the button sits in ---- */
.aob-help-head {
  align-items: flex-start; gap: .75rem;
  background: var(--asuc-navy); color: #fff;
  border-bottom: 3px solid var(--asuc-teal);
}
.aob-help-head-text { min-width: 0; }
.aob-help-eyebrow {
  display: block; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--asuc-teal-soft);
}
.aob-help-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--asuc-font-heading); font-weight: 800; font-size: 1.08rem;
  color: #fff; margin: .15rem 0 0; min-width: 0;
}
.aob-help-title .bi { flex: none; color: var(--asuc-teal-soft); font-size: 1rem; }

/* ---- Body ---- */
.aob-help-body { padding-top: 1rem; }

/* The two or three sentences of the tour, kept as the opening of the long
   version — whoever saw the tour recognises them and knows where he is. */
.aob-help-intro {
  font-size: .93rem; line-height: 1.55; color: var(--asuc-text);
  background: var(--asuc-teal-bg); border-radius: var(--asuc-radius-sm);
  padding: .7rem .8rem; margin: 0 0 1.15rem;
}

.aob-help-section + .aob-help-section { margin-top: 1.15rem; }
.aob-help-section-title {
  font-family: var(--asuc-font-heading); font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--asuc-teal-700);
  margin: 0 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--asuc-border);
}

.aob-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.aob-help-item {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .89rem; line-height: 1.5; color: var(--asuc-text);
}
.aob-help-item > .bi {
  flex: none; width: 1.2rem; margin-top: .1rem;
  text-align: center; color: var(--asuc-teal-700); font-size: .95rem;
}

.aob-help-foot {
  margin: 1.4rem 0 0; padding-top: .85rem;
  border-top: 1px solid var(--asuc-border);
  font-size: .83rem; line-height: 1.5; color: var(--asuc-muted);
}
.aob-help-foot .bi { color: var(--asuc-teal-700); }

/* ---- Narrow: the same panel as a sheet from the bottom edge ---- */
@media (max-width: 640px) {
  .aob-help.offcanvas-end {
    top: auto; right: 0; bottom: 0; left: 0;
    width: auto; height: auto; max-height: 88vh;
    border-left: 0; border-top: 1px solid var(--asuc-border);
    border-radius: 1rem 1rem 0 0;
    transform: translateY(100%);
  }
  /* Same specificity as Bootstrap's rule, but later in the cascade — without
     this the sheet would never slide in. */
  .aob-help.offcanvas-end.showing,
  .aob-help.offcanvas-end.show:not(.hiding) { transform: none; }

  /* A grab bar above the heading: on a phone the sheet has to look like one. */
  .aob-help-head { border-radius: 1rem 1rem 0 0; position: relative; padding-top: 1.35rem; }
  .aob-help-head::before {
    content: ""; position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
    width: 2.5rem; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3);
  }
}

/* Language flags shown after a course name in the training lists (admin/learner/team). */
.aob-course-langs { white-space: nowrap; margin-left: .3rem; font-size: .95em; letter-spacing: .08em; vertical-align: baseline; }