/* Shared UI refinements. Scoped by shell to preserve landing and portal behavior. */
.backoffice-shell {
  --doz-bg: #f4f7fb;
  --doz-card: #ffffff;
  --doz-ink: #16283e;
  --doz-text: #16283e;
  --doz-muted: #52657a;
  --doz-subtle: #66778a;
  --doz-line: #dce5ef;
  --bs-body-color: #16283e;
  --bs-body-bg: #f4f7fb;
  --bs-secondary-color: #52657a;
  --bs-border-color: #dce5ef;
  background-color: var(--doz-bg);
  color: var(--doz-text);
  color-scheme: light;
}
.backoffice-shell .admin-main,
.backoffice-shell .admin-content { min-width: 0; }
.backoffice-shell .admin-topbar { color: var(--doz-text); border-bottom-color: var(--doz-line); }
.backoffice-shell .admin-search { min-width: 0; }
.backoffice-shell .admin-search .form-control { min-width: 0; color: var(--doz-text); background-color: #fff; }
.backoffice-shell .admin-search .form-control::placeholder { color: var(--doz-muted); opacity: 1; }
.backoffice-shell .admin-sidebar { color-scheme: dark; }
.backoffice-shell .card,
.backoffice-shell .action-card,
.backoffice-shell .payment-mode-option { color: var(--doz-text); border-color: var(--doz-line); background-color: #fff; }
.backoffice-shell .metric-card::after { pointer-events: none; }
.backoffice-shell .text-secondary { color: var(--doz-muted) !important; }
.backoffice-shell .metric-label,
.backoffice-shell .table thead th { color: var(--doz-muted); }
.backoffice-shell .table {
  --bs-table-bg: transparent;
  --bs-table-color: #16283e;
  --bs-table-border-color: #e1e8f1;
  color: #16283e;
}
.backoffice-shell .table > :not(caption) > * > * { border-bottom-color: #e1e8f1; }
.backoffice-shell .table tbody tr:hover { background-color: #f2f7fc; }
.backoffice-shell .form-control,
.backoffice-shell .form-select,
.backoffice-shell .form-control:focus,
.backoffice-shell .form-select:focus {
  color: #16283e;
  background-color: #fff;
}
.backoffice-shell .form-control::placeholder { color: #64758a; opacity: 1; }
.backoffice-shell .form-check-input { border-color: #7b8ca1; background-color: #fff; }
.backoffice-shell .form-check-input:checked { border-color: #137fb0; background-color: #137fb0; }
.backoffice-shell a:not(.btn):not(.admin-nav-link):not(.navbar-brand) { color: #086b9f; }
.backoffice-shell a:not(.btn):not(.admin-nav-link):not(.navbar-brand):hover { color: #074e77; }
.backoffice-shell .btn-outline-primary { color: #086b9f; border-color: #277ca9; }
.backoffice-shell .btn-outline-primary:hover { color: #fff; background-color: #086b9f; border-color: #086b9f; }
.backoffice-shell .btn-outline-secondary { color: #42566e; border-color: #a8b7c7; }
.backoffice-shell .btn-outline-secondary:hover { color: #fff; background-color: #42566e; border-color: #42566e; }
.backoffice-shell :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid #076fa6;
  outline-offset: 2px;
}
.backoffice-shell .devices-table :is(td,th),
.backoffice-shell .table :is(td,th) { overflow-wrap: anywhere; }
.backoffice-shell .table-responsive {
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.backoffice-shell .devices-list,
.backoffice-shell .devices-filter,
.backoffice-shell .devices-insights { min-width: 0; }
.backoffice-shell .devices-list-tools,
.backoffice-shell .devices-bulk-toolbar { min-width: 0; }
.backoffice-shell .devices-live-indicator { max-width: 100%; white-space: normal; }
.backoffice-shell .analytics-range { flex-wrap: wrap; }
.backoffice-shell .portal-message { overflow-wrap: anywhere; }
.backoffice-shell .modal-content { color: #16283e; background-color: #fff; }

@media (max-width: 991.98px) {
  .backoffice-shell .admin-topbar { gap: .5rem; padding-inline: 1rem; }
  .backoffice-shell .admin-search { flex: 1 1 150px; }
  .backoffice-shell .admin-content { padding-inline: 1rem; }
  .backoffice-shell .admin-sidebar.offcanvas-lg { max-width: min(85vw, 300px); }
  .marketing-shell .premium-nav { gap: 12px; }
  .marketing-shell .premium-brand { min-width: 0; max-width: min(260px, calc(100% - 105px)); }
  .marketing-shell .premium-nav .navbar-collapse { min-width: 0; }
  .marketing-shell .premium-nav-account { gap: 12px 20px; }
}
@media (max-width: 575.98px) {
  .backoffice-shell .admin-topbar { flex-wrap: wrap; }
  .backoffice-shell .admin-search { order: 3; flex-basis: 100%; max-width: none; }
  .backoffice-shell .admin-content { padding: 1rem .75rem 2rem; }
  .backoffice-shell .admin-content .card.p-4 { padding: 1rem !important; }
  .backoffice-shell .devices-date-grid { grid-template-columns: minmax(0,1fr); }
  .backoffice-shell .devices-filter-actions { flex-wrap: wrap; }
  .backoffice-shell .devices-filter-actions .btn { flex: 1 1 120px; }
  .backoffice-shell .devices-list-heading { flex-wrap: wrap; }
  .backoffice-shell .portal-message { max-width: 100%; }
  .backoffice-shell .analytics-funnel-heading { min-width: 0; }
  .marketing-shell .premium-nav { min-height: 76px; padding-block: 16px; }
  .marketing-shell .premium-brand img { max-height: 48px; }
  .marketing-shell .premium-section-title { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.2; }
  .marketing-shell .premium-pair-code { font-size: clamp(1.25rem, 7vw, 2.4rem); overflow-wrap: anywhere; }
  .marketing-shell .premium-offer { min-width: 0; padding: 20px; }
  .marketing-shell .premium-product { min-width: 0; padding: 16px; }
  .marketing-shell .premium-product-top { flex-wrap: wrap; }
  .marketing-shell .platform-status-item { min-width: 0; }
}
@media (max-width: 360px) {
  .marketing-shell .premium-nav { gap: 6px; }
  .marketing-shell .premium-brand { max-width: calc(100% - 92px); }
  .marketing-shell .premium-menu-toggle { padding-left: 4px; }
  .marketing-shell .premium-actions .premium-button { padding-inline: 12px; }
  .backoffice-shell .admin-content { padding-inline: .5rem; }
}

/* Premium language disclosure: native <details> + POST buttons, no OS dropdown. */
.premium-language-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  max-width: 100%;
  margin: 0;
}
.language-picker {
  position: relative;
  display: block;
  max-width: 100%;
  color: #f5faff;
  font: 600 13px/1.4 Inter, "Segoe UI", sans-serif;
}
.language-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 162px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #34536a;
  border-radius: 14px;
  background: #12263c;
  color: #f5faff;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.language-trigger::-webkit-details-marker { display: none; }
.language-trigger::marker { content: ""; }
.language-trigger:hover,
.language-picker[open] > .language-trigger {
  border-color: #35d7ca;
  background: #172f47;
}
.language-trigger:focus-visible {
  outline: 3px solid #6cf9e6;
  outline-offset: 3px;
}
.language-current {
  flex: 1 1 auto;
  white-space: nowrap;
  font-weight: 650;
  letter-spacing: .01em;
}
.language-flag {
  display: block;
  width: 26px;
  height: 18px;
  flex: 0 0 26px;
  object-fit: cover;
  border: 1px solid #ffffff33;
  border-radius: 3px;
  box-shadow: 0 1px 4px #0004;
}
.language-chevron {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin: -4px 1px 0 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform .15s ease;
}
.language-picker[open] .language-chevron { transform: translateY(4px) rotate(225deg); }
.language-picker:not([open]) > .language-picker-panel { display: none; }
.language-picker-panel {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 9px);
  right: 0;
  width: 226px;
  max-width: calc(100vw - 32px);
  padding: 7px;
  border: 1px solid #36536a;
  border-radius: 16px;
  background: #102238;
  color: #f5faff;
  box-shadow: 0 18px 46px #0009, 0 3px 10px #0005;
}
.language-switcher .language-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ecf6ff;
  text-align: left;
  font: 600 14px/1.4 Inter, "Segoe UI", sans-serif;
  cursor: pointer;
}
.language-switcher .language-option:hover,
.language-switcher .language-option:focus-visible {
  background: #1c3a52;
  color: #fff;
}
.language-switcher .language-option:focus-visible {
  outline: 2px solid #6cf9e6;
  outline-offset: -2px;
}
.language-switcher .language-option.is-current {
  color: #6cf9e6;
  background: #16404a;
}
.language-option-label { flex: 1 1 auto; white-space: nowrap; }
.language-option-check { min-width: 16px; text-align: right; font-weight: 800; }
.marketing-shell .premium-header,
.portal-header { position: relative; z-index: 40; overflow: visible; }
/* Preserve the existing sticky admin toolbar positioning and z-index. */
.backoffice-shell .admin-topbar { overflow: visible; }
/* Admin topbar uses the same dark palette as the dashboard.
   Keep the public portal and marketing picker themes unchanged. */
.backoffice-shell .admin-topbar .language-trigger {
  background: #112e46;
  color: #e8f7ff;
  border-color: #3e6880;
}
.backoffice-shell .admin-topbar .language-trigger:hover,
.backoffice-shell .admin-topbar .language-picker[open] > .language-trigger {
  background: #19415a;
  border-color: #52d7d0;
}
.backoffice-shell .admin-topbar .language-trigger:focus-visible { outline-color: #6cf9e6; }
.backoffice-shell .admin-topbar .language-picker-panel {
  background: #102b44;
  color: #e8f7ff;
  border-color: #42667e;
  box-shadow: 0 18px 42px rgba(0, 10, 24, .55);
}
.backoffice-shell .admin-topbar .language-switcher .language-option { color: #e2f4ff; }
.backoffice-shell .admin-topbar .language-switcher .language-option:hover,
.backoffice-shell .admin-topbar .language-switcher .language-option:focus-visible {
  background: #1b4962;
  color: #fff;
}
.backoffice-shell .admin-topbar .language-switcher .language-option:focus-visible { outline-color: #6cf9e6; }
.backoffice-shell .admin-topbar .language-switcher .language-option.is-current {
  color: #9cf8ed;
  background: #16454f;
}
.marketing-shell .premium-nav-account { gap: clamp(12px, 1.5vw, 22px); }
@media (max-width: 1199.98px) {
  .marketing-shell .premium-nav-account .language-picker-panel {
    left: 0;
    right: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .language-trigger, .language-chevron { transition: none; }
}

/* Landing header actions — one visual system, scoped away from checkout and admin. */
.marketing-shell .premium-nav-account {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}
.marketing-shell .premium-nav-account > * { flex: 0 0 auto; }
.marketing-shell .premium-nav-account form { margin: 0; }
.marketing-shell .premium-nav-account .language-trigger,
.marketing-shell .premium-nav-account .premium-nav-action,
.marketing-shell .premium-nav-account .premium-nav-pair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 13px;
  font: 700 14px/1.25 Inter, "Segoe UI", sans-serif;
  white-space: nowrap;
  text-decoration: none;
}
.marketing-shell .premium-nav-account .language-trigger {
  min-width: 160px;
  justify-content: flex-start;
  padding: 10px 13px;
}
.marketing-shell .premium-nav-account .premium-nav-action {
  min-width: 92px;
  padding: 10px 16px;
  border: 1px solid #a8c9e036;
  background: #12263c;
  color: var(--doz-text);
  cursor: pointer;
}
.marketing-shell .premium-nav-account .premium-nav-action:hover {
  border-color: #6cf9e67a;
  background: #1b344a;
  color: #fff;
}
.marketing-shell .premium-nav-account .premium-nav-action:focus-visible,
.marketing-shell .premium-nav-account .premium-nav-pair:focus-visible {
  outline: 3px solid var(--doz-focus);
  outline-offset: 3px;
}
.marketing-shell .premium-nav-account .premium-nav-logout { width: 100%; }
.marketing-shell .premium-nav-account .premium-nav-pair {
  min-width: 166px;
  padding: 10px 19px;
  border: 1px solid #35d7ca;
  background: #35d7ca;
  color: #062a30;
  font-weight: 800;
}
.marketing-shell .premium-nav-account .premium-nav-pair:hover {
  border-color: #6cf9e6;
  background: #6cf9e6;
  color: #062a30;
}
.marketing-shell .premium-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid #a8c9e050;
  border-radius: 13px;
  background: #12263c;
  color: var(--doz-text);
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease;
}
.marketing-shell .premium-menu-toggle:hover,
.marketing-shell .premium-menu-toggle[aria-expanded="true"] {
  border-color: #35d7ca;
  background: #1b344a;
}
.marketing-shell .premium-menu-glyph { font-size: 20px; line-height: 1; }
@media (min-width: 1200px) {
  .marketing-shell .premium-menu-toggle { display: none; }
  .marketing-shell .premium-nav-links { gap: clamp(12px, 1.5vw, 24px); }
  .marketing-shell .premium-nav .navbar-collapse { gap: clamp(12px, 1.5vw, 24px); }
}
@media (max-width: 1199.98px) {
  .marketing-shell .premium-nav { justify-content: space-between; gap: 12px; }
  .marketing-shell .premium-menu-toggle { display: inline-flex; margin-left: auto; }
  .marketing-shell #landingNav.navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 12px 0 18px;
    border-top: 1px solid #a8c9e024;
  }
  .marketing-shell #landingNav .premium-nav-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
  .marketing-shell #landingNav .premium-nav-links li { margin: 0; list-style: none; }
  .marketing-shell #landingNav .premium-nav-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 9px 13px;
    border-radius: 11px;
    color: var(--doz-text);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
  }
  .marketing-shell #landingNav .premium-nav-links a:hover,
  .marketing-shell #landingNav .premium-nav-links a:focus-visible {
    background: #142c40;
    color: #6cf9e6;
  }
  .marketing-shell #landingNav .premium-nav-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 12px 0 0;
    padding-top: 16px;
    border-top: 1px solid #a8c9e024;
  }
  .marketing-shell #landingNav .premium-nav-account > *,
  .marketing-shell #landingNav .premium-nav-account form,
  .marketing-shell #landingNav .premium-nav-account .language-picker,
  .marketing-shell #landingNav .premium-nav-account .language-trigger,
  .marketing-shell #landingNav .premium-nav-account .premium-nav-action,
  .marketing-shell #landingNav .premium-nav-account .premium-nav-pair {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .marketing-shell #landingNav .premium-nav-account .language-trigger {
    justify-content: flex-start;
    min-height: 48px;
  }
  .marketing-shell #landingNav .premium-nav-account .premium-nav-action,
  .marketing-shell #landingNav .premium-nav-account .premium-nav-pair {
    min-height: 48px;
    padding: 11px 16px;
    font-size: 14px;
    text-align: center;
  }
  /* Keep the open menu in the mobile scroll flow: never clip the last options. */
  .marketing-shell #landingNav .premium-nav-account .language-picker-panel {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }
}
@media (max-width: 575.98px) {
  .marketing-shell .premium-nav { min-height: 72px; padding-block: 14px; }
  .marketing-shell .premium-menu-toggle { min-width: 98px; }
  .marketing-shell #landingNav.navbar-collapse { max-height: calc(100dvh - 85px); }
}
@media (max-width: 360px) {
  .marketing-shell .premium-menu-toggle { min-width: 88px; padding-inline: 10px; }
  .marketing-shell #landingNav .premium-nav-account { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-shell .premium-menu-toggle { transition: none; }
}