/* Layout chrome: title bar, subbar, navbar and footer */
/* === Title bar and subbar === */
.title-bar {
  --titlebar-brand-source: var(--company-brand, var(--titlebar-gradient-start, #6f35ff));
  --titlebar-brand-base: color-mix(in srgb, var(--titlebar-brand-source) 82%, #2a0f55 18%);
  --titlebar-brand-glow: color-mix(in srgb, var(--titlebar-brand-base) 32%, #ffffff 68%);
  --titlebar-brand-deep: color-mix(in srgb, var(--titlebar-brand-base) 70%, #050114 30%);
  --titlebar-surface: linear-gradient(118deg, color-mix(in srgb, var(--titlebar-brand-glow) 80%, transparent), color-mix(in srgb, var(--titlebar-brand-deep) 90%, transparent));
  background-image: var(--titlebar-surface);
  background-color: var(--titlebar-brand-base);
  color:#111111;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.2rem !important;
  padding:.25rem .35rem !important;
  border-radius:.85rem;
  min-height:60px;
  overflow:visible;
  border:1px solid color-mix(in srgb, var(--titlebar-brand-glow) 45%, rgba(255,255,255,.05));
  box-shadow:0 16px 34px color-mix(in srgb, var(--titlebar-brand-deep) 40%, rgba(6,8,20,.2));
  position:relative;
  isolation:isolate;
}
.title-bar::before,
.title-bar::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.title-bar::before{
  inset:0;
  background:
    radial-gradient(circle at 85% 35%, color-mix(in srgb, var(--titlebar-brand-glow) 75%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 60% -5%, color-mix(in srgb, var(--titlebar-brand-base) 65%, transparent) 0%, transparent 60%),
    linear-gradient(120deg, color-mix(in srgb, var(--titlebar-brand-glow) 25%, transparent) 0%, transparent 60%);
  opacity:.85;
  mix-blend-mode:screen;
}
.title-bar::after{
  width:55%;
  height:160%;
  top:-30%;
  left:auto;
  right:-8%;
  bottom:auto;
  position:absolute;
  background:linear-gradient(100deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  opacity:.35;
  transform:skewX(8deg);
  filter:blur(0.5px);
}
.title-bar > *{ position:relative; z-index:1; }
/* Prevent CLS and speed up title paint */
:root{ --tb-title-size: 1.28rem; --navbar-offset:56px; }
@media (min-width: 992px){ :root{ --navbar-offset:64px; } }
.title-bar .title-row{ display:flex; align-items:center; gap:.5rem; --tb-title-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); }
.title-bar .title-row .view-title{ font-size: var(--tb-title-size) !important; }
.title-bar .title-row i{ font-size: var(--tb-title-size) !important; line-height:1; height:1em; }
.title-bar .view-title{ color:#111111 !important; line-height:1.2; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif !important; font-weight: 600; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.title-bar i, .title-bar label.form-label{ color:#111111 !important; }
.title-bar .left{ flex:1 1 auto; min-width:0; }
.title-bar .right{ display:flex; align-items:center; justify-content:flex-end; gap:.5rem; flex:0 0 88px; width:88px; }
.title-bar .company-logo{
  height:72px !important;
  max-height:72px !important;
  width:auto;
  flex:0 0 auto;
  background:#fff;
  border-radius:.25rem;
  padding:2px;
  -o-object-fit:contain;
  object-fit:contain;
  display:block;
  box-sizing:border-box;
  aspect-ratio: 3 / 1;
  position:relative;
  isolation:isolate;
}
.title-bar .selector-wrap .company-select{ min-width:220px; }
.title-bar.title-bar--stack-mobile{ flex-wrap:wrap; }
.title-bar.title-bar--stack-mobile .right{ margin-left:auto; }
.title-bar .selector-wrap .form-select option{ color:#111111 !important; background:var(--surface-card, #fff) !important; }
.title-bar .selector-wrap .form-select option:checked{ color:#111111 !important; background:var(--accent-primary-soft, #e7ecff) !important; }
@media (max-width: 576px){ .title-bar{ border-radius:.6rem; } .title-bar .selector-wrap .company-select{ min-width:160px; } }
@media (max-width: 991.98px){
  .title-bar.title-bar--stack-mobile{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; grid-template-areas:'left right' 'left right'; align-items:center; }
  .title-bar.title-bar--stack-mobile .left{ grid-area:left; }
  .title-bar.title-bar--stack-mobile .right{ grid-area:right; margin-left:0 !important; display:flex; align-items:center !important; justify-content:flex-end; flex:0 0 88px; width:88px; }
  /* Fix logo height on mobile to avoid JS-driven reflow */
  .title-bar.title-bar--stack-mobile .company-logo{ height:72px !important; max-height:72px !important; width:auto; -o-object-fit:contain; object-fit:contain; box-sizing:border-box; aspect-ratio: 3 / 1; }
  .title-bar .selector-wrap .company-select{ min-width:150px; width:100%; }
}
.title-bar .selector-wrap{
  background: color-mix(in srgb, #ffffff 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--bars-light-text, #fff) 18%, transparent);
  border-radius:.65rem;
  padding:.35rem .65rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.title-bar .selector-wrap .form-select{ background:transparent !important; color:#111111 !important; border:none !important; box-shadow:none !important; height:34px !important; padding:.3rem .55rem !important; font-size:.95rem !important; line-height:1.2 !important; border-radius:.55rem; }
.title-bar .selector-wrap label{ color:color-mix(in srgb, #111111 85%, #ffffff 15%) !important; font-size:.74rem; font-weight:600; letter-spacing:.25px; padding:.25rem .3rem .25rem 0; text-transform:uppercase; }
:is(body.bg-dark, body[data-theme='dark']) .title-bar .selector-wrap .form-select option,
:is(body.bg-dark, body[data-theme='dark']) .title-bar .selector-wrap .form-select optgroup{
  background:#f8fafc !important;
  color:#0f172a !important;
}
:is(body.bg-dark, body[data-theme='dark']) .title-bar .selector-wrap .form-select option:checked{
  background:#e2e8f0 !important;
  color:#0f172a !important;
}
/* Compact variant if dense */
.title-bar.dense .selector-wrap{ padding:.25rem .55rem; }
.title-bar__footer{
  width:100%;
  margin-top:.5rem;
}
.title-bar__footer:empty{ display:none; }

.title-subbar{
  --userbar-brand-source: var(--company-brand, var(--titlebar-gradient-end, #4f46e5));
  --userbar-brand-base: color-mix(in srgb, var(--userbar-brand-source) 78%, #231247 22%);
  --userbar-brand-glow: color-mix(in srgb, var(--userbar-brand-base) 30%, #f6f4ff 70%);
  --userbar-brand-deep: color-mix(in srgb, var(--userbar-brand-base) 72%, #05021a 28%);
  --userbar-panel-surface: color-mix(in srgb, var(--userbar-surface, rgba(111,53,255,.08)) 55%, rgba(255,255,255,.04));
  --userbar-panel-border: color-mix(in srgb, var(--userbar-border, rgba(111,53,255,.35)) 65%, var(--userbar-brand-base) 35%);
  color:#111111;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:.65rem;
  border-radius:.75rem;
  min-height:44px;
  overflow:hidden;
  padding:.2rem .2rem;
  background-image: linear-gradient(132deg, color-mix(in srgb, var(--userbar-brand-glow) 70%, transparent), color-mix(in srgb, var(--userbar-brand-deep) 90%, transparent));
  background-color: color-mix(in srgb, var(--userbar-brand-base) 22%, rgba(6,8,20,.85));
  border:1px solid color-mix(in srgb, var(--userbar-panel-border) 85%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:0 12px 32px color-mix(in srgb, var(--userbar-brand-deep) 40%, rgba(6,8,20,.22));
  position:relative;
  isolation:isolate;
}
.title-subbar::before,
.title-subbar::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.title-subbar::before{
  inset:0;
  background:
    radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--userbar-brand-glow) 70%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 60% 5%, color-mix(in srgb, var(--userbar-brand-base) 55%, transparent) 0%, transparent 65%),
    linear-gradient(120deg, color-mix(in srgb, var(--userbar-brand-deep) 20%, transparent) 0%, transparent 70%);
  opacity:.75;
  mix-blend-mode:screen;
}
.title-subbar::after{
  width:65%;
  height:180%;
  top:-40%;
  right:-10%;
  left:auto;
  bottom:auto;
  background:linear-gradient(120deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  opacity:.25;
  transform:skewX(4deg);
  filter:blur(.5px);
}
.title-subbar > *{ position:relative; z-index:1; }
.title-bar + .title-subbar{
  --userbar-panel-surface: color-mix(in srgb, var(--userbar-surface, rgba(111,53,255,.08)) 45%, rgba(255,255,255,.06));
}
.title-subbar i{ color:#111111; }
.title-subbar > div{
  background: color-mix(in srgb, var(--userbar-panel-surface) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--userbar-panel-border) 45%, transparent);
  border-radius:.6rem;
  padding:.35rem .85rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:38px;
  box-shadow:0 6px 20px color-mix(in srgb, var(--userbar-brand-deep) 16%, rgba(6,8,20,.16));
}
.title-subbar > div:first-child{ flex:1 1 auto; min-width:0; }
.title-subbar > div:last-child{ flex:0 0 auto; margin-left:auto; white-space:nowrap; }
.title-subbar > div span.fw-semibold,
.title-subbar > div .js-live-clock{ font-size:.95rem; line-height:1.2; }
.title-subbar > div span.fw-semibold{ max-width:50vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title-subbar > div .js-live-clock{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
@media (max-width: 576px){
  .title-subbar{ flex-wrap:nowrap !important; border-radius:.5rem; padding:.25rem .35rem; }
  .title-subbar > div{ flex:1 1 auto; min-width:0; padding:.25rem .55rem; gap:.4rem; }
  .title-subbar > div span.fw-semibold{ font-size:.88rem; }
  .title-subbar > div .js-live-clock{ font-size:.82rem; }
}
/* Make first group stretch and share space with second on same line when narrow */
.title-subbar.single-line{ flex-wrap:nowrap; }
.title-subbar.single-line > div:first-child{ flex:1 1 auto; min-width:0; }
.title-subbar.single-line > div:last-child{ flex:0 0 auto; }
.title-subbar.single-line > div:only-child{ flex:1 1 auto; min-width:0; margin-left:0; white-space:normal; }
.title-subbar.single-line .user-info-group{ white-space:nowrap; min-width:0; }
.title-subbar.single-line .time-group{ flex-wrap:wrap; justify-content:flex-end; white-space:normal; row-gap:.35rem; }
/* Reserve a minimum width for the live clock to avoid reflow when digits change */
.title-subbar .time-group .js-live-clock{ display:inline-block; min-width: 7.5ch; text-align:left; }
.title-subbar .userbar-state{
  --userbar-state-accent:#6c757d;
  padding:.28rem .7rem;
  font-size:.78rem;
  font-weight:600;
  border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--userbar-state-accent) 55%, rgba(0,0,0,.2));
  background: color-mix(in srgb, var(--userbar-state-accent) 85%, rgba(255,255,255,.08));
  color:#ffffff;
  box-shadow:0 8px 18px color-mix(in srgb, var(--userbar-state-accent) 30%, rgba(6,8,20,.25));
  text-transform:uppercase;
  letter-spacing:.015em;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  position:relative;
  z-index:1;
}
.title-subbar .user-info-group .userbar-state{ margin-left:.35rem; }
.title-subbar .userbar-state .fa-solid{ font-size:.85em; color:inherit !important; }
.title-subbar .userbar-state[data-state="IN"]{ --userbar-state-accent:#198754; }
.title-subbar .userbar-state[data-state="OUT"]{ --userbar-state-accent:#dc3545; }
.title-subbar .userbar-state[data-state="BREAK"]{ --userbar-state-accent:#0d6efd; }
.title-subbar .userbar-state[data-variant="success"]{ --userbar-state-accent:#16a34a; }
.title-subbar .userbar-state[data-variant="danger"]{ --userbar-state-accent:#dc2626; }
.title-subbar .userbar-state[data-variant="warning"]{ --userbar-state-accent:#f59e0b; }
.title-subbar .userbar-state[data-variant="info"]{ --userbar-state-accent:#0ea5e9; }
.title-subbar .userbar-state[data-variant="primary"]{ --userbar-state-accent:#2563eb; }
.title-subbar .userbar-state[data-variant="secondary"],
.title-subbar .userbar-state:not([data-variant]){ --userbar-state-accent:#6c757d; }
.title-subbar .userbar-state[data-state="UNKNOWN"],
.title-subbar .userbar-state[data-state="SECONDARY"],
.title-subbar .userbar-state:not([data-state]){ --userbar-state-accent:#6c757d; }
@media (prefers-contrast: more){
  .title-subbar .userbar-state{ box-shadow:none; border-width:2px; background: color-mix(in srgb, var(--userbar-state-accent) 40%, transparent); }
}
.title-subbar .user-info-group{
  display:flex;
  align-items:center;
  gap:.45rem;
  min-width:0;
  width:100%;
  position:relative;
  overflow:hidden;
}
.title-subbar .user-info-group .fw-semibold{
  flex:1 1 auto;
  min-width:0;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  position:relative;
  z-index:0;
}
.title-subbar .user-info-group .userbar-state{
  flex:0 0 auto;
  white-space:nowrap;
  margin-left:.4rem;
  position:relative;
  z-index:1;
}
@media (max-width: 576px){ .title-subbar > div{ flex:1 1 auto; min-width:0; } .title-subbar > div .fw-semibold, .title-subbar > div .js-live-clock{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .title-subbar > div:last-child .fw-semibold, .title-subbar > div:last-child .js-live-clock{ overflow:visible !important; text-overflow:clip !important; }
  .title-subbar .user-info-group .fw-semibold{ display:inline-flex; }
  .title-subbar .user-info-group{ gap:.35rem; } .title-subbar{ flex-wrap:nowrap !important; border-radius:.5rem; } .title-subbar > *{ min-width:0; } }
.title-subbar > div span.fw-semibold{ max-width:50vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title-subbar .user-info-group span.fw-semibold{ max-width:100%; }
@media (max-width: 576px){
  .title-subbar .time-group{ display:none !important; }
  .title-subbar.single-line > div:first-child{ margin-right:0; }
}

/* Standardize vertical spacing after the subtitle bar across views */
.title-subbar + .shadowed-box,
.title-subbar + .title-subbar-adjacent{ margin-top:.35rem !important; }

/* Fixed vertical gap between titlebar and userbar across the app */
/* When a title bar is followed by a subbar, remove bottom margin of the title bar and set a consistent gap */
.title-bar--with-subbar{ margin-bottom: 0 !important; }
.title-bar + .title-subbar{ margin-top: .25rem !important; }

@media (prefers-color-scheme: dark){
  .title-bar{ box-shadow:0 14px 32px color-mix(in srgb, var(--titlebar-brand-deep, #0b031a) 55%, rgba(0,0,0,.45)); }
  .title-subbar{ box-shadow:0 10px 26px color-mix(in srgb, var(--userbar-brand-deep, rgba(36,14,64,.85)) 50%, rgba(0,0,0,.45)); }
}

/* Theme text overrides */
/* Light theme text revert */
:is(body.bg-light, body[data-theme='light']) .title-bar,
:is(body.bg-light, body[data-theme='light']) .title-bar *,
:is(body.bg-light, body[data-theme='light']) .title-subbar,
:is(body.bg-light, body[data-theme='light']) .title-subbar *{ color:#111111 !important; }
:is(body.bg-light, body[data-theme='light']) .title-subbar .userbar-state{ color: color-mix(in srgb, var(--userbar-state-accent) 72%, #111111) !important; }
:is(body.bg-light, body[data-theme='light']) .title-subbar .userbar-state *{ color: currentColor !important; }

/* Brand-colored section headers: keep text dark on both themes for readability over brand backgrounds */
:is(body.bg-light, body[data-theme='light']) .brand-card-header,
:is(body.bg-light, body[data-theme='light']) .brand-card-header *{ color:#111111 !important; }


/* Dark theme: keep bar text dark as well */
:is(body.bg-dark, body[data-theme='dark']) .title-bar,
:is(body.bg-dark, body[data-theme='dark']) .title-bar *,
:is(body.bg-dark, body[data-theme='dark']) .title-subbar,
:is(body.bg-dark, body[data-theme='dark']) .title-subbar *{ color:#111111 !important; }
:is(body.bg-dark, body[data-theme='dark']) .title-bar .company-logo{
  box-shadow:0 0 0 1.2px rgba(255,255,255,.35), 0 12px 26px rgba(8,12,24,.55);
}
:is(body.bg-dark, body[data-theme='dark']) .title-bar .company-logo::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(248,250,252,.65), rgba(17,24,39,.65));
  opacity:.95;
  filter:blur(9px);
  z-index:-1;
  pointer-events:none;
  transition:opacity .25s ease;
}
:is(body.bg-dark, body[data-theme='dark']) .title-subbar .userbar-state{ color: color-mix(in srgb, var(--userbar-state-accent) 72%, #111111) !important; }
:is(body.bg-dark, body[data-theme='dark']) .title-subbar .userbar-state *{ color: currentColor !important; }

/* On dark theme, also keep brand-card headers dark (brand backgrounds make dark text readable) */
:is(body.bg-dark, body[data-theme='dark']) .brand-card-header,
:is(body.bg-dark, body[data-theme='dark']) .brand-card-header *{ color:#111111 !important; }

/* === Footer (new) === */
.footer{ font-size:.95rem; min-height:44px; }
.footer.bg-light{ background:#f8f9fa !important; }
.footer.border-top{ border-top:1px solid var(--bs-border-color, rgba(0,0,0,.125)) !important; }
.footer a{ color: inherit; text-decoration: none; }
.footer a:hover, .footer a:focus{ text-decoration: underline; }
@media (max-width: 576px){ .footer{ padding-top:.5rem !important; padding-bottom:.5rem !important; } }

/* Dark theme footer */
:is(body.bg-dark, body[data-theme='dark']) .footer{ background-color:#121212 !important; border-top-color: var(--c-border, #2a2a2a) !important; color: var(--c-text) !important; }
:is(body.bg-dark, body[data-theme='dark']) .footer .text-muted{ color: var(--c-muted) !important; opacity:.8; }

/* === Navbar shell + palette bindings === */
.navbar{
  z-index:1050;
  min-height:56px;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:var(--navbar-surface, rgba(255,255,255,.88)) !important;
  color:var(--navbar-link, #0f172a) !important;
  border-bottom:1px solid var(--navbar-border, rgba(15,23,42,.08));
  box-shadow:var(--navbar-shadow, 0 18px 45px rgba(15,23,42,.16));
  -webkit-backdrop-filter:blur(var(--navbar-blur, 16px));
  backdrop-filter:blur(var(--navbar-blur, 16px));
  transition:none;
}
@media (min-width: 992px){ .navbar{ min-height:64px; } }
.navbar.fixed-top{ position:fixed !important; top:0; right:0; left:0; z-index:1050; }
.navbar.sticky-top{ position:sticky !important; top:0; z-index:1050; }
.navbar .navbar-collapse{ visibility:visible !important; }
.navbar .navbar-brand,
.navbar .navbar-nav .nav-link{
  color:var(--navbar-link, #0f172a) !important;
  transition:none;
}
.navbar .navbar-nav .nav-link{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem .9rem;
  border-radius:.65rem;
  min-height:42px;
  background:transparent;
}
@media (max-width: 991.98px){
  .navbar .navbar-nav .nav-link{ width:100%; }
}
@media (min-width: 992px){
  .navbar .navbar-nav .nav-link{ width:auto; }
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus{
  color:var(--navbar-link-active, var(--accent-primary, #3245d4)) !important;
  background:var(--navbar-pill-bg, rgba(15,23,42,.04));
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link{
  color:var(--navbar-link-active, var(--accent-primary, #3245d4)) !important;
  background:var(--accent-primary-soft, rgba(50,69,212,.12));
}
.navbar .navbar-nav .nav-link:focus-visible{
  outline:2px solid var(--accent-primary, #3245d4);
  outline-offset:2px;
}
.navbar .navbar-nav .nav-link .text-muted,
.navbar .navbar-nav .nav-link small{
  color:var(--navbar-link-muted, rgba(15,23,42,.65)) !important;
}
.navbar,
.navbar-dark,
.navbar[data-bs-theme='dark']{
  /* Override Bootstrap's data URI burger (blocked by CSP) */
  --bs-navbar-toggler-icon-bg:none !important;
}
.navbar .navbar-toggler{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.25) !important;
  border-color:color-mix(in srgb, var(--navbar-link, #0f172a) 25%, transparent) !important;
  color:var(--navbar-link, #0f172a) !important;
  transition:none;
}
.navbar-dark .navbar-toggler{ color:var(--navbar-link, #f4f5ff) !important; }
.navbar .navbar-toggler .navbar-toggler-icon{ width:24px; height:24px; background-size:100% 100%; display:inline-block; }
.navbar-toggler-icon{
  background:none !important;
  background-image:none !important;
  position:relative;
}
.navbar-toggler-icon::before{
  content:"";
  position:absolute;
  top:50%;
  left:16%;
  right:16%;
  height:0.14em;
  background:currentColor;
  border-radius:999px;
  transform:translateY(-50%);
  box-shadow:0 calc(-0.38em) 0 currentColor,0 calc(0.38em) 0 currentColor;
}
.navbar .dropdown-menu{
  display:none;
  background:var(--surface-card, #ffffff) !important;
  color:var(--text-primary, #0f172a) !important;
  border:1px solid var(--surface-border, rgba(15,23,42,.08)) !important;
  border-radius:.65rem;
  box-shadow:var(--navbar-shadow, 0 18px 45px rgba(15,23,42,.16));
}
.navbar .dropdown-menu.show{ display:block; }
.navbar .dropdown-item{ color:var(--text-primary, #0f172a) !important; transition:none; }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  background:var(--navbar-pill-bg, rgba(15,23,42,.04)) !important;
  color:var(--navbar-link-active, var(--accent-primary, #3245d4)) !important;
}

/* Keep dropdowns usable: allow overlays once we leave the narrow mobile stack */
@media (min-width: 576px){
  nav.navbar,
  nav.navbar .container,
  nav.navbar .container-fluid{
    overflow:visible !important;
  }
}
@media (min-width: 576px) and (max-width: 991.98px){
  .navbar .navbar-collapse.collapse.show,
  #navbarNav{
    overflow:visible !important;
  }
}
@media (min-width: 992px){
  .navbar .navbar-collapse,
  #navbarNav{
    overflow:visible !important;
  }
}

/* Navbar: in mobile, expanded menu uses solid background and a bit of padding */
@media (max-width: 991.98px){
  .navbar .navbar-collapse.collapse.show{
    background:var(--navbar-surface, rgba(255,255,255,.95));
    padding-bottom:.5rem;
    max-height: calc(100dvh - var(--navbar-offset, 56px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Navbar brand logo width cap to avoid overflow on very long wordmarks */
.navbar .navbar-brand img.brand-logo{ max-width:160px !important; }

/* Collapse fallback to avoid CLS before Bootstrap finishes loading */
.collapse:not(.show){ display:none; }
.navbar-collapse.collapse.show{ display:block; }
@media (min-width: 992px){ .navbar-collapse.collapse{ display:flex !important; } }

/* Ensure the collapse container doesn't cause horizontal overflow and content starts right below navbar */
#navbarNav{ overflow-x:hidden; }
#mainContent{ padding-top: var(--navbar-offset); }
body.has-bot-widget #mainContent{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bot-widget-safe-area, 6.5rem)); }
.title-bar{ margin-top:0 !important; }

/* Mobile/tablet: allow wrapping so the expanded collapse flows below the brand row and increases navbar height */
@media (max-width: 991.98px){
  .navbar .container,
  .navbar .container-fluid{
    align-items: flex-start;
  }
  .navbar .navbar-collapse{
    flex-basis: 100%;
    width: 100%;
  }
  .navbar-nav{
    width: 100%;
    align-items: stretch !important;
    gap: .35rem;
  }
  .navbar-nav .nav-link{
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
  .navbar-nav .btn-theme-toggle{
    width: 100%;
    justify-content: center;
  }
}

/* Theme toggle button (single icon + label) */
:root{
  --theme-toggle-track-light: var(--surface-card, #edf0f7);
  --theme-toggle-track-dark: var(--navbar-pill-bg, rgba(255,255,255,.05));
  --theme-toggle-thumb-light: rgba(255,255,255,.9);
  --theme-toggle-thumb-dark: rgba(255,255,255,.2);
  --theme-toggle-border-light: var(--surface-border, rgba(15,23,42,.15));
  --theme-toggle-border-dark: rgba(255,255,255,.25);
}
.btn-theme-toggle{
  border: 1px solid var(--theme-toggle-border-light);
  background: var(--theme-toggle-track-light);
  border-radius: 999px;
  padding: .22rem .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--navbar-link, #0f172a);
  transition:none;
  min-width: auto;
}
.btn-theme-toggle:focus-visible{
  outline: 2px solid var(--accent-primary, #3245d4);
  outline-offset: 3px;
}
.btn-theme-toggle .theme-toggle-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border-radius: 999px;
}
.btn-theme-toggle .theme-toggle-thumb{
  position: absolute;
  inset: -.05rem;
  border-radius: inherit;
  background: var(--theme-toggle-thumb-light);
  opacity: .75;
  box-shadow: 0 6px 18px rgba(15,23,42,.2);
  transition: transform .25s ease, opacity .25s ease;
  transform: scale(1);
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-thumb{
  background: rgba(15,23,42,.55);
  opacity: .5;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.btn-theme-toggle .theme-toggle-icon,
.btn-theme-toggle .theme-toggle-text{
  position: relative;
  z-index: 1;
}
.btn-theme-toggle .theme-toggle-icon i{
  font-size: 1rem;
  transition: transform .25s ease;
}
.btn-theme-toggle .theme-toggle-icon{
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fdf6d3;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08), 0 2px 5px rgba(15,23,42,.12);
  overflow: hidden;
}
.btn-theme-toggle .theme-toggle-icon::before,
.btn-theme-toggle .theme-toggle-icon::after{
  content:"";
  position:absolute;
  border-radius: 50%;
  transition: transform .25s ease, opacity .25s ease;
}
.btn-theme-toggle .theme-toggle-icon::before{
  width: .9rem;
  height: .9rem;
  background: #f4b400;
  box-shadow: 0 0 0 .08rem rgba(244,180,0,.45);
}
.btn-theme-toggle .theme-toggle-icon::after{
  width: 1.35rem;
  height: 1.35rem;
  border: .18rem solid rgba(244,180,0,.45);
  opacity: .7;
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-icon{
  background: #0b1426;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.25), 0 2px 6px rgba(0,0,0,.25);
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-icon::before{
  background: #e0e7ff;
  width: 1.1rem;
  height: 1.1rem;
  box-shadow: none;
  transform: translateX(.25rem);
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-icon::after{
  width: 1.1rem;
  height: 1.1rem;
  background: #0b1426;
  border: none;
  transform: translateX(-.1rem);
  opacity: 1;
}
.btn-theme-toggle .theme-toggle-text{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: capitalize;
  color: var(--navbar-link-muted, rgba(15,23,42,.65));
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
){
  border-color: var(--theme-toggle-border-dark);
  background: var(--navbar-pill-bg, rgba(255,255,255,.05));
  color: var(--bars-dark-text, var(--c-text));
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-icon{
  background: rgba(248,249,255,.92);
  color: #0c1b38;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.05), 0 2px 6px rgba(0,0,0,.28);
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-text{
  color: var(--bars-dark-text, var(--c-text));
}
:is(
  .btn-theme-toggle.is-dark,
  html[data-theme='dark'] .btn-theme-toggle,
  body.bg-dark .btn-theme-toggle,
  body[data-theme='dark'] .btn-theme-toggle
) .theme-toggle-icon i{
  color: inherit;
  transform: rotate(12deg);
}
:is(html[data-theme='dark'], body.bg-dark, body[data-theme='dark']) .btn-theme-toggle{
  border-color: var(--theme-toggle-border-dark);
  background: var(--theme-toggle-track-dark);
}
:is(html[data-theme='dark'], body.bg-dark, body[data-theme='dark']) .btn-theme-toggle .theme-toggle-thumb{
  background: var(--theme-toggle-thumb-dark);
  opacity: .55;
}
.navbar-nav .btn-theme-toggle{
  min-width: auto;
}
@media (max-width: 576px){
  .btn-theme-toggle{
    padding: .2rem .35rem;
    gap: .2rem;
  }
  .btn-theme-toggle .theme-toggle-text{
    display: none;
  }
  .btn-theme-toggle .theme-toggle-icon i{
    font-size: .95rem;
  }
}