/* Stitch shell component - shared by every dashboard workspace. */
.top {
  position: sticky;
  top: 0;
  z-index: 34;
  min-height: 64px;
  height: 64px;
  padding: 10px 24px;
  gap: 16px;
  background: color-mix(in srgb, var(--surface-canvas) 94%, transparent);
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.top .global-search {
  position: relative;
  display: flex;
  flex: 1 1 360px;
  max-width: 520px;
  min-width: 220px;
  order: 1;
}

.top .global-search .input {
  width: 100%;
  height: 40px;
  padding-inline: 40px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: none;
}

.top .global-search > .icon-svg {
  position: absolute;
  inset-inline-start: 13px;
  top: 12px;
  z-index: 1;
  color: var(--text-muted);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  order: 2;
  margin-inline-start: auto;
}

.top-actions .btn,
.compact-control,
.operator-profile {
  min-height: 40px;
  border-radius: 8px;
  box-shadow: none;
}

.header-date-control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px;
  min-width: 132px;
  background: var(--surface-raised);
}

.header-date-control > span {
  display: grid;
  text-align: start;
  line-height: 1.15;
}

.header-date-control small {
  color: var(--text-muted);
  font-size: 0.5625rem;
  font-weight: 500;
}

.header-date-control b {
  font-size: 0.75rem;
  font-weight: 600;
}

.header-sync {
  min-width: 100px;
  justify-content: center;
}

.header-divider {
  width: 1px;
  height: 28px;
  margin: 0 2px;
  background: var(--border-default);
}

.top-actions .compact-action,
.top-actions .compact-control {
  width: 40px;
  min-width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.top-actions .compact-action:hover,
.top-actions .compact-control:hover,
.operator-profile:hover,
.operator-menu-item:hover {
  background: var(--interaction-hover-bg);
  color: var(--interaction-hover-text);
  border-color: var(--border-default);
}

.global-currency.compact-control {
  position: relative;
  width: 58px;
  min-width: 58px;
  border: 1px solid transparent;
}

.global-currency.compact-control .icon-svg {
  width: 14px;
  height: 14px;
}

.global-currency.compact-control select {
  width: 42px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
}

.operator-menu-wrap {
  position: relative;
}

.operator-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.operator-avatar,
.mobile-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  border-radius: 50%;
  background: var(--interaction-selected-bg);
  color: var(--interaction-selected-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.operator-copy {
  min-width: 0;
  display: grid;
  text-align: start;
  line-height: 1.2;
}

.operator-copy b,
.operator-copy small {
  max-width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-copy b {
  font-size: 0.6875rem;
  font-weight: 600;
}

.operator-copy small {
  color: var(--text-muted);
  font-size: 0.5625rem;
}

.operator-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.operator-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 7px);
  z-index: 90;
  width: 210px;
  padding: 6px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.operator-menu-item {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: start;
}

.page-heading {
  padding: 22px 28px 15px;
  border-bottom: 1px solid var(--border-default);
}

.page-heading h1 {
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 700;
}

.mobile-stitch-head {
  display: none;
}

.side {
  background: var(--nav);
  border-inline-end: 1px solid var(--navline);
}

/* Canonical desktop shell.
   dashboard.css accumulated three competing shell layouts; the last one wins and
   pins .side with `position: fixed` while offsetting .main by a hard-coded 240px,
   which is why the collapse control had no visible effect. These rules are the
   single authority for desktop shell geometry. Width comes from one token, and
   the edge is physical rather than logical so an operator can pin the sidebar
   against the reading direction. */
@media (min-width: 761px) {
  .app {
    --sidebar-width: 240px;
  }
  .app[data-sidebar-state="rail"] {
    --sidebar-width: 88px;
  }
  .app[data-sidebar-state="hidden"] {
    --sidebar-width: 0px;
  }

  .app > .side {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: width 0.18s ease;
  }
  .app > .main {
    transition: margin 0.18s ease;
  }

  .app[data-sidebar-edge="left"] > .side {
    inset-inline: auto;
    left: 0;
    right: auto;
    border-inline: 0;
    border-right: 1px solid var(--navline);
  }
  .app[data-sidebar-edge="right"] > .side {
    inset-inline: auto;
    right: 0;
    left: auto;
    border-inline: 0;
    border-left: 1px solid var(--navline);
  }
  .app[data-sidebar-edge="left"] > .main {
    margin-left: var(--sidebar-width);
    margin-right: 0;
  }
  .app[data-sidebar-edge="right"] > .main {
    margin-right: var(--sidebar-width);
    margin-left: 0;
  }

  .app[data-sidebar-state="hidden"] > .side {
    border-inline: 0;
    padding-inline: 0;
  }
  .app[data-sidebar-state="rail"] > .side {
    padding-inline: 10px;
  }
  .app[data-sidebar-state="rail"] .brand {
    padding-inline: 0;
    justify-content: center;
  }
  .app[data-sidebar-state="rail"] .brand-logo-full,
  .app[data-sidebar-state="rail"] .sidefoot {
    display: none;
  }
  .app[data-sidebar-state="rail"] .brand-logo-symbol {
    display: block;
  }
  .app[data-sidebar-state="rail"] .nav button {
    justify-content: center;
    padding-inline: 0;
  }
  /* The label is hidden visually rather than removed, so the navigation button
     keeps its accessible name in the rail. */
  .app[data-sidebar-state="rail"] .nav button > span:not(.icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app[data-sidebar-state="rail"] .nav .icon {
    margin: 0;
  }
  .app[data-sidebar-state="rail"] .sidebar-controls {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app > .side,
  .app > .main {
    transition: none;
  }
}

.sidebar-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.sidebar-control {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--navline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--navmuted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

/* Dark navy surface: lift the background and the text together. A dark hover
   behind dark text is the defect this replaces. */
.sidebar-control:hover {
  background: var(--nav2);
  color: var(--navink);
}

.sidebar-control:focus-visible {
  outline: none;
  box-shadow: var(--focus-nav);
  color: var(--navink);
}

.sidebar-control:active {
  transform: scale(0.98);
}

.sidebar-control .icon-svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Directional chevrons mirror with the reading direction; the pin and hide
   glyphs are static and must not flip. */
[dir="rtl"] #sidebar-collapse .icon-svg {
  transform: scaleX(-1);
}

.app[data-sidebar-flow="end"] #sidebar-collapse .icon-svg {
  transform: scaleX(-1);
}

[dir="rtl"] .app[data-sidebar-flow="end"] #sidebar-collapse .icon-svg {
  transform: none;
}

.sidebar-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-restore[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-control {
    transition: none;
  }
}

.nav button:hover {
  background: rgba(246, 247, 242, 0.08);
  color: var(--navink);
}

/* Lime Signal marks where the operator is. Navy text keeps it AA on the highlight
   in both themes, because the highlight is the same lime in both. */
.nav button.active {
  background: #c8f169;
  color: #0e1a2b;
}

@media (max-width: 900px) {
  .top {
    position: sticky;
    top: 56px;
    height: auto;
    min-height: 0;
    padding: 10px 14px;
  }

  .top .global-search {
    display: none;
    max-width: none;
    flex-basis: 100%;
  }

  .top-actions {
    width: 100%;
  }

  .header-date-control,
  .header-divider,
  #header-help,
  #language-toggle,
  #global-currency-control,
  .operator-menu-wrap,
  .top-actions > .notification-button {
    display: none;
  }

  .header-sync {
    width: 100%;
  }

  .mobile-stitch-head {
    position: sticky;
    top: 0;
    z-index: 38;
    height: 56px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-default);
  }

  .mobile-stitch-head button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
  }

  .mobile-stitch-head button:hover {
    background: var(--interaction-hover-bg);
    color: var(--interaction-hover-text);
  }

  /* The mobile header appears at 900px but the desktop top bar only disappears at
     760px, so between those widths both are on screen. The phone Sync control exists
     to replace the header one, so it is shown only where the header one is gone. */
  .mobile-stitch-head [data-mobile-sync] {
    display: none;
  }

  .mobile-stitch-head button[aria-busy="true"] {
    opacity: 0.55;
  }

  .mobile-stitch-head button[aria-busy="true"] .icon-svg {
    animation: mobile-sync-spin 0.9s linear infinite;
  }

  .mobile-stitch-head [data-mobile-notifications] {
    position: relative;
  }

  .mobile-stitch-head [data-mobile-notifications][data-unread="true"]::after {
    content: "";
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red, #dc2626);
    border: 2px solid var(--surface-raised);
  }

  .mobile-page-context {
    display: grid;
    min-width: 0;
    margin-inline-end: auto;
    line-height: 1.15;
  }

  .mobile-page-context b {
    font-size: 0.75rem;
  }

  .mobile-page-context small {
    color: var(--text-muted);
    font-size: 0.625rem;
  }

  .page-heading {
    padding: 17px 16px 12px;
  }

  .page-heading h1 {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top,
  .operator-menu,
  .nav button {
    scroll-behavior: auto;
    transition: none !important;
  }
}

@keyframes mobile-sync-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 760px) {
  .mobile-stitch-head [data-mobile-sync] {
    display: grid;
  }
}

/* The blocking alert. Stock running out while a campaign is still spending is the
   one condition that must not wait for the operator to notice a bell badge, so it
   takes the whole screen on desktop and phone alike. Deliberately the only modal in
   the shell: if a second thing ever earns this treatment, it stops working. */
body.modal-open {
  overflow: hidden;
}

.urgent-alert-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.72);
  animation: urgent-alert-fade 140ms ease-out;
}

.urgent-alert-backdrop.hidden {
  display: none;
}

.urgent-alert {
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 28px 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--red);
  border-top: 5px solid var(--red);
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.urgent-alert-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--redbg);
  color: var(--red);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.urgent-alert-count {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--redbg);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 600;
}

.urgent-alert-count.hidden {
  display: none;
}

.urgent-alert-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--red);
}

.urgent-alert-body {
  margin: 0 0 8px;
  color: var(--text-primary);
  line-height: 1.6;
}

.urgent-alert-meta {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.urgent-alert-meta:empty {
  display: none;
}

.urgent-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.urgent-alert-actions .btn {
  flex: 1 1 auto;
  min-width: 150px;
  justify-content: center;
}

/* "Remind me after" sits below the two decisions rather than beside them: picking a
   window is the third-choice path, and putting five chips on the same row as Open
   made the button that fixes the problem look like one option among seven. */
.urgent-alert-snooze {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
}

.urgent-alert-snooze-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.urgent-alert-snooze-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.snooze-chip {
  flex: 0 1 auto;
  min-width: 62px;
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.snooze-chip:hover {
  background: var(--interaction-hover-bg);
  border-color: var(--border-strong);
}

.snooze-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

/* On a phone the alert becomes a sheet rising from the bottom: the same
   interruption, but reachable with the thumb that has to dismiss it. */
@media (max-width: 760px) {
  .urgent-alert-backdrop {
    place-items: end center;
    padding: 0;
  }

  .urgent-alert {
    width: 100%;
    max-height: 88dvh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    animation: urgent-alert-rise 180ms ease-out;
  }

  .urgent-alert-actions .btn {
    flex: 1 1 100%;
  }
}

@keyframes urgent-alert-fade {
  from {
    opacity: 0;
  }
}

@keyframes urgent-alert-rise {
  from {
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .urgent-alert-backdrop,
  .urgent-alert {
    animation: none;
  }
}

/* ==========================================================================
   Ecomly visual system.
   dashboard.css grew several generations of overrides, so the brand is settled
   here, last, on top of the tokens: page structure, type, buttons, cards, tables,
   chips, focus and the sign-in screen. Shape: cards 16px, buttons and inputs 12px,
   chips fully round, borders before shadows, one soft shadow for floating panels.
   ========================================================================== */

::selection {
  background: #c8f169;
  color: #0e1a2b;
}

/* Logos come as a light and a reverse file; the theme decides which one shows. */
.brand-on-dark {
  display: none !important;
}
html[data-theme="dark"] .brand-on-light {
  display: none !important;
}
html[data-theme="dark"] .brand-on-dark {
  display: block !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .brand-on-light {
    display: none !important;
  }
  html:not([data-theme]) .brand-on-dark {
    display: block !important;
  }
}

/* Focus is always visible: an olive ring on light surfaces, lime on navy. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.side a:focus-visible,
.side button:focus-visible,
.side summary:focus-visible {
  box-shadow: var(--focus-nav);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-weight: 500;
}

/* Headings and page titles in Lexend (Readex Pro on Arabic screens, via the token). */
h1,
h2,
h3,
h4,
.page-heading h1,
.cardhead h2,
.section h2,
.gatecard h1,
.urgent-alert-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .gatecard h1 {
  letter-spacing: 0;
}

/* Page header: a Lexend title and one slate line under it. */
.section h2,
#view-orders > .section h2,
#view-products > .section h2 {
  font-size: 1.625rem;
  line-height: 1.3;
  color: var(--ink);
}
#view-orders > .section,
#view-products > .section {
  margin: 24px 0 24px;
}
.section p,
.cardhead p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Shell */
.app {
  background: var(--bg);
}
.side {
  background: var(--nav);
  color: var(--navink);
  border-inline-end: 1px solid var(--navline);
}
.brand {
  gap: 0;
  min-height: 56px;
  padding: 4px 8px 24px;
}
.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
}
.brand-logo-full {
  width: 148px;
}
.brand-logo-symbol {
  display: none;
  width: 36px;
}
.mobile-brand-logo {
  display: block;
  width: 84px;
  height: auto;
}
.mobile-page-context {
  gap: 4px;
}
.mobile-page-context small {
  font-weight: 600;
}

.nav {
  gap: 4px;
}
.nav button {
  min-height: 44px;
  padding: 10px 14px;
  border: 0 !important;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--navmuted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
}
.nav button[data-tab="settings"] {
  border-top: 0 !important;
  border-radius: var(--r-md);
  padding-top: 10px;
}
.nav button:focus-visible {
  box-shadow: var(--focus-nav);
}
.sidefoot {
  border-top: 1px solid var(--navline);
  color: var(--navmuted);
}

/* Cards: a mist border does the work a shadow used to. */
.card,
.ops-tile,
.search-product,
.decision-item,
.empty-state {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: none;
}
.card:hover {
  box-shadow: none;
}
.tablecard {
  border-radius: var(--r-lg);
}

/* KPI cards: the figure leads, in Lexend, with tabular numerals. */
.kpi:before {
  display: none;
}
.kpi span,
.orders-kpi small {
  color: var(--muted);
  font-weight: 600;
}
.kpi strong,
.orders-kpi strong,
.canonical-kpi strong,
.integration-health-kpi strong,
.metric strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
html[lang="ar"] .kpi strong,
html[lang="ar"] .orders-kpi strong,
html[lang="ar"] .canonical-kpi strong,
html[lang="ar"] .metric strong {
  letter-spacing: 0;
}

/* Buttons: white secondary, olive primary, lime for the single next step, red
   only when an action destroys something. */
.btn {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
}
.btn:hover {
  background: var(--card2);
  color: var(--ink);
  border-color: var(--green);
  box-shadow: none;
}
.btn.primary {
  background: var(--green);
  border-color: transparent;
  color: var(--action-primary-text);
  box-shadow: none;
}
.btn.primary:hover {
  background: var(--green2);
  color: var(--action-primary-text);
  filter: none;
}
.btn.next {
  background: #c8f169;
  border-color: transparent;
  color: #0e1a2b;
  box-shadow: none;
}
.btn.next:hover {
  background: #bce75a;
  color: #0e1a2b;
}
.btn.danger {
  border-color: var(--red);
  color: var(--red);
}
.btn.danger:hover {
  background: var(--redbg);
  color: var(--red);
  border-color: var(--red);
}
.btn.small {
  border-radius: var(--r-sm);
}

/* Inputs share the button radius and a white (card) ground. */
.input,
.field input,
.field textarea,
.field select {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
}
.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}
.input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--green);
  box-shadow: var(--focus);
}
.field label {
  color: var(--muted);
  font-weight: 700;
}

/* Tables: tabular figures, mist dividers, a quiet sticky header. */
table {
  font-variant-numeric: tabular-nums lining-nums;
}
th {
  height: 40px;
  background: var(--card2);
  color: var(--muted);
  font-family: var(--font-dashboard);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
  border-bottom: 1px solid var(--line);
}
td {
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.cellmain,
td b {
  color: var(--ink);
  font-weight: 700;
}
.cellsub {
  color: var(--muted);
}
.empty,
.empty-state {
  color: var(--muted);
  font-weight: 500;
}

/* Status chips. Each state reads from the status tokens: 12% tint behind, the
   full hue as text. Order outcomes keep their own tone trios (dashboard.css). */
.status {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--status-neu-bg);
  color: var(--status-neu-text);
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.status.ready,
.status.open,
.status.order_confirmed,
.status.active,
.status.sent {
  background: var(--status-done-bg);
  color: var(--status-done-text);
  border-color: color-mix(in srgb, var(--status-done) 40%, transparent);
}
.status.new,
.status.waiting_customer,
.status.submitting,
.status.cancelling,
.status.paused,
.status.campaign_paused,
.status.adset_paused {
  background: var(--status-attn-bg);
  color: var(--status-attn-text);
  border-color: color-mix(in srgb, var(--status-attn) 40%, transparent);
}
.status.archived,
.status.inactive {
  background: var(--status-neu-bg);
  color: var(--status-neu-text);
  border-color: color-mix(in srgb, var(--status-neu) 40%, transparent);
}
.status.needs_human,
.status.submission_unknown,
.status.cancel_unknown,
.status.failed,
.status.unavailable,
.status.with_issues,
.status.deleted,
.status.disapproved {
  background: var(--status-prob-bg);
  color: var(--status-prob-text);
  border-color: color-mix(in srgb, var(--status-prob) 40%, transparent);
}

/* Theme picker cards follow the same card shape. */
.theme-choice {
  border-radius: var(--r-md);
  background: var(--card);
}
.theme-choice.active {
  background: var(--mint);
  color: var(--ink);
}

.toast {
  border-radius: var(--r-md);
  background: var(--nav);
  color: var(--navink);
}
.toast.bad {
  background: #9b2c24;
  color: #ffffff;
}

/* Sign-in: a calm paper screen, the horizontal logo and the tagline, one card. */
.gate {
  background: var(--bg);
}
.gatecard {
  width: min(432px, 100%);
  padding: 40px 32px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.login-logo {
  display: block;
  width: 200px;
  max-width: 72%;
  height: auto;
  margin: 0 auto 12px;
}
.login-tagline {
  margin: 0 0 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
.gatecard h1 {
  margin: 0 0 8px;
  text-align: center;
  color: var(--ink);
  font-size: 1.5rem;
}
.gatecard .login-copy {
  text-align: center;
  color: var(--muted);
}
.gatecard .field label {
  color: var(--muted);
}
.gatecard .field input {
  min-height: 44px;
  border-color: var(--line-strong);
  background: var(--card);
  color: var(--ink);
}
.gatecard .btn.primary {
  min-height: 46px;
  background: var(--green);
  border-color: transparent;
  color: var(--action-primary-text);
}
.gatecard .btn.primary:hover {
  background: var(--green2);
  color: var(--action-primary-text);
}
.login-security-copy {
  color: var(--muted);
}
@media (max-width: 480px) {
  .gatecard {
    padding: 32px 20px 24px;
  }
}

/* Solid red badges: paper-coloured text holds AA on both the light red and the
   lighter dark-theme red, where white would not. */
.notification-count,
.ai-budget-alert .alert-icon {
  background: var(--red);
  color: var(--bg);
}