/* === SEARCH: oui_shell_phase1 START (2026-08-11) ==========================
 * Shared app-shell styles — UI Modernization Phase 1.
 *
 * One visual system for BOTH dashboard headers (admin base.html navbar and
 * the DOT dot-topbar), the shared identity strip + card switcher, and the
 * shared product switcher. Values come from tokens.css (--oui-*).
 *
 * LOAD ORDER CONTRACT: this file loads AFTER dot.css on DOT pages — the
 * breakpoint-unification section below deliberately overrides dot.css's
 * legacy 900px rules (that file is last-wins by convention).
 * ========================================================================== */

/* --- Identity strip (shared by /admin/dashboard and the DOT surfaces) ---- */
.oui-strip{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:var(--oui-space-2) var(--oui-space-3);
  padding:var(--oui-space-2) var(--oui-space-3);
  margin:0 0 var(--oui-space-3);
  background:var(--oui-surface-veil);
  border:1px solid var(--oui-border-soft);
  border-radius:var(--oui-radius-md);
  color:var(--oui-text-2);
  font-size:.85rem;
}
.oui-strip__main{ min-width:0; }
.oui-strip__actions{
  display:flex; flex-wrap:wrap; gap:var(--oui-space-2); align-items:center;
}
.oui-strip__line{ line-height:1.5; overflow-wrap:anywhere; }
.oui-strip .oui-muted{ color:var(--oui-muted); }
.oui-strip__impersonating{ color:var(--oui-danger); font-weight:600; }
/* (Phase 2: the strip's RB badge now uses the shared .oui-badge component.) */
body.theme-dark .oui-strip,
body.dot.theme-dark .oui-strip{
  background:var(--oui-surface-veil); color:var(--oui-text-2);
  border-color:var(--oui-border-soft);
}

/* --- Card switcher (email button + panel), shared both sides ------------ */
.oui-switch{
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px;
}
.oui-switch:hover{ text-decoration-style:solid; }
.oui-switch:focus-visible{
  outline:2px solid var(--oui-accent); outline-offset:2px;
  border-radius:var(--oui-radius-sm);
}
.oui-switch__chev{
  display:inline-block; vertical-align:-.18em;
  width:1.05em; height:1.05em; margin-inline-start:.2em;
  opacity:.95; transition:transform var(--oui-transition);
}
.oui-switch[aria-expanded="true"] .oui-switch__chev{ transform:rotate(180deg); }

.oui-switch__panel{
  position:absolute; z-index:var(--oui-z-panel);
  margin-top:.35rem; min-width:15rem; max-width:min(24rem, 92vw);
  max-height:60vh; overflow-y:auto;
  background:var(--oui-surface); color:var(--oui-text);
  border:1px solid var(--oui-border); border-radius:var(--oui-radius-md);
  box-shadow:var(--oui-shadow-lg); padding:var(--oui-space-2);
}
.oui-switch__panel[hidden]{ display:none !important; } /* [hidden] stays authoritative */
.oui-switch__title{
  margin:.1rem .4rem .4rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--oui-muted);
}
.oui-switch__panel ul{ list-style:none; margin:0; padding:0; }
.oui-switch__panel li + li{ border-top:1px solid var(--oui-border-soft); }
.oui-switch__panel a{
  display:block; padding:var(--oui-space-2) .45rem; font-size:.9rem;
  color:var(--oui-text); text-decoration:none; border-radius:var(--oui-radius-sm);
}
.oui-switch__panel a:hover,
.oui-switch__panel a:focus-visible{ background:var(--oui-accent-soft); }
.oui-switch__panel a[aria-current="true"]{ font-weight:700; background:var(--oui-accent-soft); }
.oui-switch__panel .oui-muted{ color:var(--oui-muted); font-size:.85em; }

/* --- Product switcher (Reviews ⇄ Grow your Network), shared both sides -- */
.oui-product-switch{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.3em .8em; min-height:32px;
  border:1px solid var(--oui-accent); border-radius:var(--oui-radius-pill);
  color:var(--oui-accent); background:transparent;
  font-weight:600; font-size:.9rem; text-decoration:none;
  transition:background var(--oui-transition);
}
.oui-product-switch:hover,
.oui-product-switch:focus-visible{
  background:var(--oui-accent-soft); color:var(--oui-accent);
  text-decoration:none;
}
.oui-product-switch__icon{ width:1em; height:1em; flex:0 0 auto; }
/* Alignment inside each host nav */
.navbar-nav .oui-product-switch{ margin-block:.25rem; margin-inline-start:.25rem; }
#dotMobileMenu .oui-product-switch{ align-self:flex-start; }

/* --- Burger visual alignment (both dashboards, same box) ---------------- */
.navbar-toggler,
.dot-burger{
  width:44px; height:40px;
  border-radius:var(--oui-radius-md);
  display:inline-flex; align-items:center; justify-content:center;
}

/* --- Admin mobile menu: card look to match the DOT dropdown ------------- */
@media (max-width: 991.98px){
  #navbarNav.navbar-collapse{
    background:var(--oui-surface);
    border:1px solid var(--oui-border);
    border-radius:var(--oui-radius-md);
    box-shadow:var(--oui-shadow-lg);
    padding:var(--oui-space-2) var(--oui-space-3);
    margin-top:var(--oui-space-2);
  }
}

/* === SEARCH: oui_shell_phase1_dot_breakpoint START =======================
 * Breakpoint unification: the DOT topbar historically collapsed at 900px
 * while the admin navbar (Bootstrap navbar-expand-lg) collapses at 992px.
 * These rules move DOT to the SAME 992px boundary. They load after dot.css
 * and out-!important its legacy 900/901 rules; the matching JS thresholds
 * live in dot/_partials/nav.html (window.innerWidth > 991). Keep the CSS
 * and JS numbers in sync or a dead burger band appears between them.
 * ======================================================================== */
@media (max-width: 991.98px){
  .dot-burger{ display:inline-flex !important; }
  nav.dot-topbar{ position:sticky !important; top:0; }
  #dotMobileMenu{
    display:none !important;
    position:absolute !important;
    right:8px; left:auto; top:calc(100% + 8px);
    flex-direction:column; align-items:stretch;
    min-width:220px;
    background:var(--oui-surface); color:var(--oui-text);
    border:1px solid var(--oui-border); border-radius:var(--oui-radius-md);
    box-shadow:var(--oui-shadow-lg);
    padding:var(--oui-space-2);
    z-index:var(--oui-z-overlay);
  }
  #dotMobileMenu.is-open{ display:flex !important; }
  #dotMobileMenu[hidden]{ display:none !important; }
  #dotMobileMenu a, #dotMobileMenu .link{ display:block; padding:6px 4px; }
  body.dot.theme-dark #dotMobileMenu{
    background:var(--oui-surface); color:var(--oui-text);
    border-color:var(--oui-border);
  }
}
@media (min-width: 992px){
  .dot-burger{ display:none !important; }
  #dotMobileMenu{
    display:flex !important;      /* defeats the initial [hidden] before JS runs */
    position:static !important;
    visibility:visible !important;
    flex-direction:row; align-items:center;
    background:transparent; border:0; box-shadow:none; padding:0;
  }
}
/* === SEARCH: oui_shell_phase1_dot_breakpoint END ========================= */
/* === SEARCH: oui_shell_phase1 END ======================================== */

/* === SEARCH: oui_components_phase2 START (2026-08-11) =====================
 * Styles for the shared component macros (templates/shared/_components.html).
 * Tokens only — a hard-coded value here forks the design system.
 * ========================================================================== */

/* --- oui_hint ------------------------------------------------------------ */
.oui-hint{
  font-size:.85rem; line-height:1.45;
  margin-top:var(--oui-space-1);
  color:var(--oui-muted);
}
.oui-hint--warning{ color:var(--oui-warning); }
.oui-hint--danger{ color:var(--oui-danger); }
/* === SEARCH: oui_hint_link_colour START (2026-09-07) ===
   A hint that names a remedy has to be clickable, and an unstyled <a> inherits
   the UA blue, which is unreadable on a dark surface. Scoped to links INSIDE a
   hint so no other anchor on any surface moves. === */
.oui-hint a{ color:var(--oui-link); }

/* --- oui_badge ----------------------------------------------------------- */
.oui-badge{
  display:inline-block; padding:1px 8px;
  margin-inline-start:var(--oui-space-1);
  border-radius:var(--oui-radius-pill);
  font-size:.72rem; font-weight:700; line-height:1.6;
  border:1px solid var(--oui-border-soft);
}
.oui-badge--accent{  background:var(--oui-accent-soft); color:var(--oui-accent); }
.oui-badge--success{ background:rgba(16, 185, 129, .10); color:var(--oui-success); }
.oui-badge--warning{ background:rgba(154, 52, 18, .08);  color:var(--oui-warning); }
.oui-badge--danger{  background:rgba(176, 0, 32, .08);   color:var(--oui-danger); }
.oui-badge--neutral{ background:var(--oui-border-soft);  color:var(--oui-muted); }
/* === SEARCH: oui_badge_action START (2026-09-08) ===
   A badge that IS the action (the profile "unverified — confirm" chip): the
   same pill as a <button>, so the UA button chrome has to go. === */
button.oui-badge{ cursor:pointer; font-family:inherit; appearance:none; -webkit-appearance:none; position:relative; }
/* the pill stays 20px tall; the hit area grows to the 44px tap target */
button.oui-badge::before{ content:""; position:absolute; inset:-12px -8px; }
button.oui-badge:hover{ border-color:var(--oui-accent); color:var(--oui-accent); }
button.oui-badge:focus-visible{ outline:2px solid var(--oui-accent); outline-offset:2px; }
/* === SEARCH: oui_badge_action END === */

/* --- oui_section_card ---------------------------------------------------- */
.oui-card{
  background:var(--oui-surface-veil);
  border:1px solid var(--oui-border-soft);
  border-radius:var(--oui-radius-lg);
  padding:var(--oui-space-4);
  margin:0 0 var(--oui-space-3);
}
.oui-card__title{
  margin:0 0 var(--oui-space-3);
  font-size:1.1rem; font-weight:700; color:var(--oui-text);
}

/* --- oui_save_bar -------------------------------------------------------- */
.oui-save-bar{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--oui-z-overlay);            /* above sticky bars, below Swal */
  display:flex; align-items:center; justify-content:center;
  gap:var(--oui-space-4);
  padding:var(--oui-space-2) var(--oui-space-4);
  padding-bottom:calc(var(--oui-space-2) + env(safe-area-inset-bottom, 0px));
  background:var(--oui-surface);
  border-top:1px solid var(--oui-border);
  box-shadow:0 -6px 16px rgba(0, 0, 0, .10);
  color:var(--oui-text);
  font-size:.9rem;
}
.oui-save-bar[hidden]{ display:none !important; } /* [hidden] stays authoritative */
.oui-save-bar__state{
  display:inline-flex; align-items:center; gap:.45em; font-weight:600;
}
.oui-save-bar__dot{
  width:.55em; height:.55em; border-radius:var(--oui-radius-pill);
  background:var(--oui-warning); flex:0 0 auto;
}
.oui-save-bar__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:.3em 1.4em;
  border:0; border-radius:var(--oui-radius-pill);
  background:var(--oui-accent); color:var(--oui-on-accent);
  font-weight:700; font-size:.9rem; cursor:pointer;
  transition:filter var(--oui-transition);
}
.oui-save-bar__btn:hover,
.oui-save-bar__btn:focus-visible{ filter:brightness(1.1); }
body.theme-dark .oui-save-bar,
body.dot.theme-dark .oui-save-bar{
  background:var(--oui-surface); color:var(--oui-text);
  border-top-color:var(--oui-border);
}
/* === SEARCH: oui_components_phase2 END =================================== */