:root {
  /* ── Leaption locked palette (single theme, white background) ── */
  --bg:             #ffffff;
  --panel:          #ffffff;
  --panel-strong:   #ffffff;
  --line:           rgba(28, 42, 43, 0.10);
  --text:           #1c2a2b;
  --ink:            #1c2a2b;
  --muted:          #5f6d69;
  --accent:         #0e6055;
  --accent-deep:    #0a4a42;
  --accent-light:   #1f7a6e;
  --hover:          rgba(14, 96, 85, 0.08);
  --row-active:     rgba(14, 96, 85, 0.14);
  --highlight:      #cf9f52;
  --warn:           #ab3b2d;
  --gold:           #cf9f52;
  --teal:           #0e6055;
  --teal-dark:      #0a4a42;
  --cream:          #ffffff;
  --shadow:         0 1px 2px rgba(28, 42, 43, 0.04), 0 6px 24px rgba(28, 42, 43, 0.06);
  --font-body:      "Poppins", sans-serif;
  --font-display:   "Poppins", sans-serif;
  --radius-card:    16px;
  --radius-control: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.hidden {
  display: none !important;
}

button,
select,
textarea {
  font: inherit;
}

input {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 290px 1fr;
  height: 100vh;
}

.app-shell > .main {
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 92px 1fr;
}

/* ── Leaption auth shell — matches marketing site exactly ───────────────── */

.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  grid-template-columns: 1fr 1fr;
  width: 100vw;
  height: 100vh;
  background: var(--cream);
  overflow-y: auto;
}

.auth-shell.hidden {
  display: none !important;
}

.auth-shell:not(.hidden) {
  display: grid !important;
}

/* ── Auth left panel — logo + stats grid ─────────────────────────────────────── */
.auth-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 3.5rem;
  background: linear-gradient(150deg, #0a4a42 0%, #0e6055 100%);
  position: relative;
  overflow: hidden;
}

.auth-brand-panel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(207,159,82,0.1), transparent),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,255,255,0.03), transparent);
  pointer-events: none;
}

.auth-brand-panel::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.auth-logo-lockup {
  position: relative; z-index: 1;
}
.auth-logo-lockup svg { display: block; }

.auth-brand-tag {
  position: relative; z-index: 1;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 32ch;
  margin: 0;
}

.auth-stats {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}

.auth-stat {
  background: rgba(255,255,255,0.04);
  padding: 1.25rem 1.5rem;
  transition: background 150ms;
}
.auth-stat:hover { background: rgba(255,255,255,0.07); }

.auth-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: white;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.auth-stat-num span { color: #cf9f52; }

.auth-stat-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* Right panel — cream form */
.auth-form-panel {
  display: grid;
  place-items: center;
  padding: 40px 32px;
  background: var(--cream);
}

/* Eyebrow above heading */
.auth-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 6px;
}

/* Auth heading */
.auth-heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 24px;
  letter-spacing: -0.025em;
}

.auth-form-wrap {
  width: min(100%, 560px);
}

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
}

.auth-form-wrap h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.auth-subtitle {
  margin: 14px 0 26px;
  font-size: 1.35rem;
  color: var(--muted);
}

.demo-card {
  margin-bottom: 28px;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid rgba(22, 28, 34, 0.08);
  background: rgba(255, 255, 255, 0.55);
  color: #4b443d;
}

.demo-card strong {
  display: block;
  margin-bottom: 10px;
}

.sign-in-form {
  display: grid;
  gap: 12px;
}

.sign-up-form {
  display: grid;
  gap: 12px;
}

.pricing-form {
  display: grid;
  gap: 18px;
}

.auth-footer-link {
  margin: 18px 0 0;
  color: var(--muted);
  text-align: center;
}

.inline-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

.sign-in-form label {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.sign-up-form label {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.sign-in-form input {
  border: 1px solid rgba(22, 28, 34, 0.08);
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
}

.sign-up-form input {
  border: 1px solid rgba(22, 28, 34, 0.08);
  border-radius: 18px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.82);
  font: inherit;
}

.sign-in-form input:focus {
  outline: none; /* outline handled globally above */
  border-color: rgba(22, 28, 34, 0.18);
}

.sign-up-form input:focus {
  outline: none; /* outline handled globally above */
  border-color: rgba(22, 28, 34, 0.18);
}

.auth-submit {
  margin-top: 8px;
  padding: 18px 24px;
  font-size: 1.2rem;
}

.auth-error {
  min-height: 1.5em;
  margin: 0;
  color: var(--warn);
}

.password-helper {
  margin-top: -2px;
  margin-bottom: 4px;
}

.password-strength {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.password-rules {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.password-rules li {
  margin-bottom: 6px;
}

.password-rules li.valid {
  color: var(--highlight);
}

.password-rules li.invalid {
  color: var(--warn);
}

.password-strength.valid {
  color: var(--highlight);
}

.password-strength.invalid {
  color: var(--warn);
}

.plan-section {
  margin-top: 8px;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.plan-header span {
  color: var(--muted);
  font-size: 0.88rem;
}

.plan-grid,
.plan-stack {
  display: grid;
  gap: 14px;
}

.pricing-intro {
  margin-top: 8px;
}

.pricing-intro strong {
  color: var(--text);
}

.pricing-shell {
  min-height: 100vh;
  padding: 40px;
  background: #f4efe7;
}

.pricing-window {
  max-width: 1120px;
  margin: 0 auto;
}

.pricing-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.plan-card {
  display: block;
  cursor: pointer;
}

.plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-card > div {
  height: 100%;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(22, 28, 34, 0.08);
  background: rgba(255, 255, 255, 0.52);
  opacity: 0.82;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.plan-card-long > div {
  padding: 22px 24px;
}

.plan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.plan-card-head b {
  color: var(--text);
  font-size: 1rem;
}

.plan-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.plan-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-deep);
  font-size: 0.92rem;
}

.plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.plan-feature-list {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--text);
}

.plan-feature-list li {
  margin-bottom: 8px;
}

.plan-card input:checked + div {
  border-color: rgba(14, 96, 85, 0.34);
  background: rgba(255, 250, 244, 0.96);
  box-shadow: 0 0 0 2px rgba(14, 96, 85, 0.16);
  opacity: 1;
  transform: translateY(-1px);
}

.plan-card input:not(:checked) + div:hover {
  opacity: 0.92;
  background: rgba(255, 255, 255, 0.68);
}

.plan-card input:checked + div .plan-card-head b,
.plan-card input:checked + div strong {
  color: var(--accent-deep);
}

.plan-card input:checked + div::after {
  content: "Selected";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(14, 96, 85, 0.12);
  color: var(--accent-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pricing-actions {
  display: flex;
  gap: 12px;
}

.secondary-submit {
  background: rgba(255, 255, 255, 0.82);
}

.sidebar {
  padding: 12px 22px 28px;
  border-right: 1px solid var(--line);
  background: rgba(14, 96, 85, 0.05);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.sidebar-brand {
  margin-bottom: 0;
  justify-content: space-between;
}

.sidebar-collapse-button {
  border: 1px solid rgba(70, 50, 31, 0.08);
  background: rgba(255, 255, 255, 0.28);
  color: var(--muted);
  cursor: pointer;
  padding: 7px 9px;
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sidebar-collapse-button:hover {
  background: rgba(255, 255, 255, 0.42);
  transform: none;
}

.sidebar-top {
  display: grid;
  gap: 18px;
}

.sidebar-body {
  display: grid;
  align-content: start;
  gap: 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  min-height: 0;
}
.sidebar-body::-webkit-scrollbar { display: none; }

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  visibility: visible;
  flex-shrink: 0;
}

.sidebar-user-collapsed-wrap {
  position: relative;
  display: flex;
}

.sidebar-user-avatar-button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.sidebar-user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #0e6055;
  color: white;
  font-weight: 800;
}

.sidebar-user-avatar.large {
  width: 44px;
  height: 44px;
}

.sidebar-user-menu {
  display: none;
  position: fixed;
  min-width: 280px;
  max-width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  z-index: 999;
  padding: 8px;
  border-radius: 20px;
}

.sidebar-user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.sidebar-user-menu-meta {
  display: grid;
  gap: 3px;
}

.sidebar-user-menu-meta span {
  color: var(--muted);
  font-size: 0.9rem;
}

.sidebar-user-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  border-radius: 14px;
}

.sidebar-user-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-user-menu-item.with-trailing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-menu-current-theme {
  color: var(--muted);
  font-size: 0.88rem;
}
.sidebar-user-meta {
  display: grid;
  gap: 4px;
}

.sidebar-user-meta strong {
  font-size: 0.98rem;
}

.sidebar-user-meta span {
  color: var(--muted);
  font-size: 0.92rem;
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), #e1a55f);
  color: white;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow);
  border: 0;
  position: relative;
}

.sidebar-brand-toggle {
  cursor: default;
  padding: 0;
}

.brand-mark-default,
.brand-mark-hover {
  grid-area: 1 / 1;
  transition: opacity 140ms ease;
}

.brand-mark-hover {
  opacity: 0;
}

.brand h1,
.topbar h2,
.hero h3,
.section-heading h3,
.panel h3,
.metric-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.73rem;
  color: var(--muted);
}

.accent {
  color: var(--accent-deep);
}

.nav {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.nav-link {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nav-link.active,
.nav-link:hover {
background: rgba(14, 96, 85, 0.10);
color: #0e6055;
}

.nav-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(70, 50, 31, 0.08);
  color: inherit;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.nav-icon svg {
  display: block;
  flex-shrink: 0;
}

.nav-label {
  white-space: nowrap;
}

.wallet-card,
.pilot-note,
.panel,
.metric-card,
.hero,
.table-card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.wallet-card,
.pilot-note {
  padding: 18px;
  border-radius: 24px;
  margin-bottom: 0;
}

.wallet-balance {
  font-size: 2.5rem;
  font-weight: 800;
}

.muted {
  color: var(--muted);
}

.pilot-note span,
.trend,
.forecast span,
.cost-preview span,
.store-card span {
  color: var(--muted);
  font-size: 0.92rem;
}

.main {
  padding: 26px;
}

.main-store-bar {
  display: flex;
  align-items: center;
  min-height: 66px;
  margin: -26px -26px 22px;
  padding: 18px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 96, 85, 0.05);
}

.main-store-context {
  display: grid;
  gap: 4px;
  position: relative;
}

.main-store-label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.main-store-context strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.05;
}

.topbar-actions,
.ai-actions,
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.topbar-context {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
}

.sidebar-store-context {
  display: none;
}

.store-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(70, 50, 31, 0.08);
  background: rgba(255, 255, 255, 0.38);
  color: var(--text);
  padding: 12px 14px;
  cursor: pointer;
  border-radius: 12px;
}

.store-selector.read-only {
  cursor: default;
}

.store-selector.read-only:hover {
  transform: none;
}

.store-selector-avatar,
.credits-pill-icon {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(70, 50, 31, 0.08);
  color: var(--accent-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.store-selector-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 800;
}

.store-menu,
.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  border: 1px solid var(--line);
  background: #fffaf4;
  box-shadow: 0 18px 40px rgba(73, 49, 29, 0.12);
  z-index: 10;
  min-width: 220px;
}

.store-menu {
  left: 0;
  right: 0;
  padding: 8px;
}

.app-shell.sidebar-collapsed .sidebar {
  padding: 20px 14px;
}

.app-shell.sidebar-collapsed .store-selector-name,
.app-shell.sidebar-collapsed .wallet-card,
.app-shell.sidebar-collapsed .sidebar-user-meta,
.app-shell.sidebar-collapsed .sidebar-logout {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-user-collapsed-wrap {
  display: flex;
  justify-content: center;
}

.app-shell.sidebar-collapsed .nav-link {
  padding-left: 10px;
  padding-right: 10px;
  justify-content: center;
  min-height: 44px;
}

.app-shell.sidebar-collapsed .nav-label {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-brand {
  justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-collapse-button {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar-brand-toggle {
  cursor: pointer;
}

.app-shell.sidebar-collapsed .sidebar-brand-toggle:hover .brand-mark-default {
  opacity: 0;
}

.app-shell.sidebar-collapsed .sidebar-brand-toggle:hover .brand-mark-hover {
  opacity: 1;
}

.app-shell.sidebar-collapsed .sidebar-store-context {
  justify-content: center;
}

/* Scope to sidebar only so the main topbar store button is unaffected */
.app-shell.sidebar-collapsed .sidebar-store-context .store-selector {
  justify-content: center;
  padding: 12px;
  border-radius: 999px;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
}

.app-shell.sidebar-collapsed .sidebar-store-context .store-selector-avatar {
  display: inline-grid;
}


.store-menu-item,
.user-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
}

.store-menu-item.active {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent-deep);
  font-weight: 700;
}


.orders-filters {
  margin-bottom: 14px;
}

.user-chip {
  min-width: 160px;
  padding: 12px 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.64);
  display: grid;
  gap: 4px;
  box-shadow: 0 10px 28px rgba(73, 49, 29, 0.08);
}

.user-chip strong {
  font-size: 0.98rem;
}

.user-chip span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
}

.primary-button,
.secondary-button,
.ghost-button,
.text-button,
.filter-pill {
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.primary-button,
.secondary-button,
.ghost-button {
  padding: 12px 16px;
}

.primary-button {
  border: 0;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}

.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.secondary-button,
.ghost-button,
.filter-pill {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.65);
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  padding: 0;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.filter-pill:hover,
.nav-link:hover {
  transform: translateY(-1px);
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fade-in 280ms ease;
}

#quick-capture-view.active {
  display: flex !important;
  flex-direction: column;
}

.hero-strip div,
.forecast div,
.cost-preview div,
.store-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.hero-strip strong,
.forecast strong,
.cost-preview strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.trend.up {
  color: var(--highlight);
}

.trend.down {
  color: var(--warn);
}

.trend.neutral {
  color: var(--muted);
}

.panel-grid,
.campaign-layout,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.campaign-side-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-glance-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-glance-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  display: grid;
  gap: 4px;
}

.dashboard-glance-item span {
  color: var(--muted);
  font-size: 0.82rem;
}

.dashboard-glance-item strong {
  font-size: 1rem;
}

.dashboard-management-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.dashboard-priority-panel {
  display: flex;
  flex-direction: column;
}

.dashboard-manage-panel {
  display: grid;
  gap: 14px;
}

.dashboard-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-manage-panel .panel-header {
  margin-bottom: 0;
}

#dashboard-credits-card {
  order: 1;
}

#dashboard-campaigns-card {
  order: 2;
}

#dashboard-customers-card {
  order: 3;
}

.dashboard-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dashboard-priority-controls {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-filter-row,
.dashboard-search-row,
.dashboard-action-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.dashboard-search-row input {
  flex: 1 1 260px;
}

.dashboard-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-stat-row:has(#dashboard-open-rate) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-stat-row-clients {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-stat {
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.64);
  border-radius: 12px;
  display: grid;
  gap: 6px;
}

.dashboard-stat span {
  color: var(--muted);
  font-size: 0.9rem;
}

.dashboard-stat strong {
  font-size: 1.5rem;
  font-family: var(--font-display);
}

.dashboard-stat small {
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-stat-button {
  text-align: left;
  cursor: pointer;
}

.dashboard-campaign-summary {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  border-radius: 12px;
}

.dashboard-campaign-summary span {
  color: var(--muted);
}

.dashboard-credit-summary,
.dashboard-forecast-block,
.dashboard-next-topup-row {
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  border-radius: 12px;
}

.dashboard-credit-summary,
.dashboard-forecast-top,
.dashboard-next-topup-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.dashboard-credit-summary span,
.dashboard-forecast-top span,
.dashboard-forecast-breakdown span,
.dashboard-next-topup-row span {
  color: var(--muted);
}

.dashboard-credit-summary strong {
  font-size: 1rem;
}

.dashboard-forecast-top strong,
.dashboard-next-topup-row strong,
.dashboard-credit-status-row strong {
  font-size: 1rem;
}

.dashboard-forecast-block {
  display: grid;
  gap: 10px;
}

.dashboard-forecast-breakdown {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.dashboard-credit-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-credit-header-copy {
  display: grid;
  gap: 6px;
}

.dashboard-credit-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-suggestion {
  color: var(--muted);
  font-size: 0.92rem;
}

.campaign-audience-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.audience-group-tabs {
    margin-top: 8px;
    margin-bottom: 0;
}

.audience-group-panel.active {
    display: grid;
    gap: 14px;
    align-content: start;
}

.audience-group-header-actions {
    margin-top: 0;
    justify-content: flex-end;
}

.drawer-form-inner {
  display: grid;
  gap: 18px;
}

.audience-group-selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.audience-customer-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}

.audience-customer-row {
  justify-content: flex-start;
}

.audience-customer-copy {
  display: grid;
  gap: 2px;
}

.audience-customer-copy span {
  color: var(--muted);
  font-size: 0.88rem;
}

.priority-card {
  display: grid;
  gap: 0;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
}

.priority-card-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.priority-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.priority-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.priority-card-subline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.priority-card-title strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.15;
  margin-bottom: 1px;
}

.priority-card-inline-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.priority-combo-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.priority-card-title span,
.priority-card-meta,
.priority-card-next-text,
.priority-card-due {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
}

.priority-card-title span,
.priority-card-next-text,
.priority-card-due {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priority-card-meta {
  min-width: 0;
  overflow: hidden;
}

.priority-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.priority-card-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 118px;
}

.priority-card-side-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.priority-sla-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(171, 59, 45, 0.12);
  color: var(--warn);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.priority-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(70, 50, 31, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.priority-chip.sms {
  color: var(--accent-deep);
}

.priority-chip.email {
  color: #0e6055;
}

.priority-chip.none {
  color: var(--muted);
}

.priority-card .status-pill {
  padding: 5px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.priority-card .secondary-button {
  padding: 8px 11px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.priority-card-side .secondary-button {
  flex: 0 0 auto;
}

.priority-overflow {
  position: relative;
}

.priority-overflow-trigger {
  min-width: 34px;
  padding: 8px 10px;
  line-height: 1;
}

.priority-overflow-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 154px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  background: #fffaf4;
  box-shadow: 0 18px 40px rgba(73, 49, 29, 0.12);
  z-index: 8;
}

.priority-overflow-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  color: var(--text);
  cursor: pointer;
}

.priority-overflow-menu button:hover {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent-deep);
}

.priority-card:hover {
  background: rgba(255, 255, 255, 0.72);
}

.priority-card::after {
  display: none;
}

.priority-card.status-pending {
  background: rgba(225, 165, 95, 0.08);
  border-color: rgba(225, 165, 95, 0.16);
}

.priority-card.status-arrived {
  background: rgba(14, 96, 85, 0.06);
  border-color: rgba(14, 96, 85, 0.14);
}

.settings-shell {
  display: grid;
  gap: 18px;
}

.credits-shell {
  display: grid;
  gap: 18px;
}

.product-groups-panel {
  padding: 0;
  overflow: hidden;
}

.product-groups-table td:last-child,
.product-groups-table th:last-child {
  text-align: left;
}

.product-group-name {
  display: grid;
  gap: 4px;
}

.product-group-name strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.product-group-name span {
  color: var(--muted);
  font-size: 0.92rem;
}

.status-scheduled {
  background: rgba(225, 165, 95, 0.18);
  color: #b26a12;
}

.product-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.table-action {
  border: 0;
  background: transparent;
  color: var(--accent-deep);
  cursor: pointer;
  font-weight: 700;
  padding: 0;
}

.table-action.delete {
  color: var(--warn);
}

.credits-balance-panel {
  display: flex;
  align-items: center;
  gap: 18px;
}

.credits-balance-icon {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.credits-topup-panel {
  display: grid;
  gap: 18px;
}

.credit-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.credit-pack {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  padding: 22px 18px;
  display: grid;
  gap: 8px;
  text-align: center;
  color: var(--text);
  cursor: pointer;
}

.credit-pack.selected {
  border-color: rgba(14, 96, 85, 0.28);
  box-shadow: 0 0 0 2px rgba(14, 96, 85, 0.12);
  background: rgba(255, 250, 244, 0.92);
}

.credit-pack-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
}

.credit-pack small {
  color: var(--muted);
}

.credit-pack.featured {
  border-color: var(--line);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.58);
}

.credit-pack-badge {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
  font-size: 0.78rem;
  font-weight: 700;
}

.credits-footnote {
  color: var(--muted);
}

.credits-purchase-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.credits-footnote p {
  margin: 0 0 6px;
}

.settings-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}

.settings-nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.settings-nav-link {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
}

.settings-nav-link.active {
  background: rgba(14, 96, 85, 0.1);
  color: var(--accent-deep);
  font-weight: 700;
}

.settings-content {
  min-width: 0;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
}

.settings-form {
  display: grid;
  gap: 14px;
  max-width: 540px;
}

.logo-upload {
  width: 108px;
  height: 108px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.5);
}
.settings-actions {
  margin-top: 6px;
}

.team-stack,
.chase-stack,
.sync-stack {
  display: grid;
  gap: 18px;
}

.team-card,
.sync-card,
.chase-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  border-radius: 16px;
  padding: 16px;
}

.team-header,
.sync-card,
.chase-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.team-identity {
  display: flex;
  gap: 14px;
  align-items: center;
}

.team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
  font-weight: 800;
}

.team-identity span,
.sync-card span,
.chase-copy span {
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* Panel subsections — used inside a single .panel to group related areas
   (e.g. Shop / Team / Permissions inside the Shop & Team settings panel). */
.panel-subsection {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.panel-subsection:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.panel-subsection-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.panel-subsection-blurb {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.panel-subsection-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.panel-subsection-head .panel-subsection-blurb {
  margin: 4px 0 0;
}
.panel-subsection-head > div {
  min-width: 0;
  flex: 1;
}

.team-permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.permission-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(70, 50, 31, 0.08);
}

.muted-role {
  background: rgba(111, 98, 87, 0.12);
  color: var(--muted);
}

.chase-card {
  align-items: center;
}

.chase-copy {
  display: flex;
  gap: 14px;
  align-items: center;
}

.step-badge {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.step-badge.one {
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
}

.step-badge.two {
  background: rgba(225, 165, 95, 0.18);
  color: #b26a12;
}

.step-badge.three {
  background: rgba(171, 59, 45, 0.12);
  color: var(--warn);
}

.customer-empty-state {
  min-height: 320px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.customer-empty-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 520px;
  padding: 26px;
  border-radius: 28px;
  background: rgba(255, 251, 245, 0.86);
  border: 1px solid rgba(70, 50, 31, 0.08);
  box-shadow: 0 20px 40px rgba(73, 49, 29, 0.08);
}

.simple-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.empty-icon {
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.empty-icon.small {
  min-width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 10px;
  font-size: 0.48rem;
}

.customer-empty-copy p:last-of-type {
  margin-bottom: 22px;
}

.clients-panel {
  padding: 0;
  overflow: hidden;
}

.clients-search-row {
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.orders-panel {
  padding: 0;
  overflow-x: auto;
  overflow-y: visible;
}

.orders-panel table {
  min-width: 100%;
}

.orders-search-row {
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.clients-search-row input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 18px 20px;
  border-radius: 0;
}

.orders-search-row input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 18px 20px;
  border-radius: 0;
}

.customers-grid {
  display: grid;
  gap: 0;
}

.directory-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.directory-table .col-customer { width: 18%; }
.directory-table .col-email { width: 22%; }
.directory-table .col-phone { width: 16%; }
.directory-table .col-pending { width: 13%; }
.directory-table .col-consent { width: 15%; }
.directory-table .col-actions { width: 16%; }

.directory-table th,
.directory-table td {
  vertical-align: middle;
}

.directory-table td:last-child,
.directory-table th:last-child {
  text-align: left;
}

.customer-row {
  background: transparent;
  transition: background 0.12s, box-shadow 0.12s;
  cursor: pointer;
}

.customer-row:hover {
  background: rgba(14, 96, 85, 0.05) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.customer-row.row-active {
  background: rgba(14, 96, 85, 0.08);
}

.customer-row.row-active:hover {
  background: rgba(14, 96, 85, 0.13);
}

.row-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  /* Customers table — Fix #1: long names that wrap inside the <button> were
     centring because <button> defaults to text-align:center. Force left so
     every line of a wrapped customer name aligns with the cell start. */
  text-align: left;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Customers table — Fix #2: email column truncation + native tooltip.
   Scoped to .directory-table .col-email cells so this only affects the
   customers table's email column. The JS layer also slices the value to
   a character limit and writes the full address into title="…", giving a
   defensive belt-and-braces approach (CSS handles pixel overflow, JS
   handles raw character length). */
.directory-table td .customer-email-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

.drawer-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

#history-drawer .drawer-header h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#history-drawer .drawer-header .muted {
  font-size: 0.78rem;
  margin-top: 2px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 600;
}

.customer-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  justify-content: flex-start;
}

.selected-chip-list {
  min-height: 28px;
}

.removable-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
}

.removable-chip span {
  font-size: 0.85rem;
}

.drawer-helper-copy {
  margin: 0 0 10px;
}

.inline-actions {
  justify-content: flex-start;
  padding-top: 4px;
}

.criteria-list {
  gap: 12px;
}

.criterion-row {
  align-items: stretch;
}

.criterion-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
  gap: 10px;
}

.checkbox-option {
  display: block;
}

.checkbox-option strong {
  display: block;
  color: var(--text);
}

.checkbox-option .checkbox-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.checkbox-option .checkbox-row span span {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.td-pending-orders {
  text-align: right;
}

.col-pending-th {
  text-align: right;
}

.pending-orders-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
  font-size: 0.82rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(14, 96, 85, 0.45);
  transition: background 0.12s, text-decoration-color 0.12s;
}

.pending-orders-pill:hover {
  background: rgba(14, 96, 85, 0.2);
  text-decoration-color: #0e6055;
}

.count-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent-deep);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.customer-actions .secondary-button {
  white-space: nowrap;
  padding: 10px 14px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(14, 96, 85, 0.1);
  color: var(--accent-deep);
  font-size: 0.82rem;
  font-weight: 700;
}

.panel,
.table-card {
  border-radius: 28px;
  padding: 20px;
}

.panel-header,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.stack-list,
.audit-list,
.permissions-list {
  display: grid;
  gap: 12px;
}

.list-card,
.audit-item,
.permission-row {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.64);
  border-radius: 20px;
  padding: 16px;
}

.audience-group-list-card {
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.audience-group-list-card:hover {
  border-color: rgba(14, 96, 85, 0.25);
  box-shadow: 0 10px 22px rgba(30, 20, 10, 0.06);
  transform: translateY(-1px);
}

.audience-group-preview {
    display: none;
}

.audience-group-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
}

.audience-group-card-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.audience-group-card-main strong {
    margin: 0;
}

.audience-group-card-main p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.audience-group-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.9rem;
}

#audience-groups-drawer .drawer-form {
    gap: 14px;
}

#audience-groups-drawer .history-tabs {
    margin-top: 8px;
}

#audience-groups-drawer .drawer-actions {
    margin-top: 0;
}

.list-card-top,
.permission-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.status-pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-arrived,
.badge {
  background: rgba(14, 96, 85, 0.14);
  color: #0e6055;
}

.status-pending {
  background: rgba(111, 98, 87, 0.14);
  color: #5d534a;
}

.status-collected {
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
}

.status-reminded {
  background: rgba(14, 96, 85, 0.15);
  color: var(--accent-deep);
}

.consent-ok {
  color: var(--highlight);
  font-weight: 700;
}

.consent-blocked {
  color: var(--warn);
  font-weight: 700;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
}

select,
textarea {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.82);
}

input,
.drawer-form textarea {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.82);
}

/* ── Focus rings — accessible keyboard navigation ─────────────
   :focus-visible targets keyboard nav only (not mouse clicks).
   All interactive elements get a clear 2px accent ring.
   ─────────────────────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.18);
}
/* Remove default outline for mouse users but keep for keyboard */
.primary-button:focus:not(:focus-visible),
.secondary-button:focus:not(:focus-visible),
.text-button:focus:not(:focus-visible),
.filter-pill:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 21, 26, 0.32);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(720px, 100%);
  height: 100vh;
  /* Surface — every drawer (customer, order, history, etc.) is now plain
     white. The shadow on the left edge still gives visual separation from
     the page underneath. Drawer header / footer inherit this colour so the
     whole panel reads as one continuous surface. */
  background: #ffffff;
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(16, 21, 26, 0.14);
  padding: 32px 28px;
  z-index: 21;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  overflow: hidden;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.drawer-close-button {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}

.drawer-close-button:hover {
  transform: translateY(-1px);
}

.drawer-form {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 18px;
  padding-right: 8px;
  min-height: 0;
}

.drawer-form label {
  margin-bottom: 6px;
}

.drawer-form input,
.drawer-form select,
.drawer-form textarea {
  width: 100%;
}

.drawer-section {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  display: grid;
  gap: 14px;
}

.drawer-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    color: var(--text);
}

.drawer-section-head .empty-icon.small {
    display: none;
}

.drawer-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.drawer-two-col > div {
  min-width: 0;
}

.consent-group {
  display: grid;
  gap: 10px;
}

.field-label {
  color: var(--muted);
  font-size: 0.98rem;
}

.drawer-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.drawer-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  justify-content: flex-end;
}

.mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
}

.mode-toggle-button {
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.mode-toggle-button.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: 0 10px 18px rgba(73, 49, 29, 0.06);
}

.customer-mode-panel {
  display: none;
}

.customer-mode-panel.active {
  display: grid;
  gap: 12px;
}

.lookup-field {
  position: relative;
}

.inline-item-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.selected-items-list {
  display: grid;
  gap: 10px;
}

.selected-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
}

.selected-item-order {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
  font-size: 0.82rem;
  font-weight: 700;
}

.selected-item-copy {
  display: grid;
  gap: 4px;
}

.selected-item-copy strong {
  font-size: 0.96rem;
}

.selected-item-copy span {
  color: var(--muted);
  font-size: 0.88rem;
}

.selected-item-actions {
  display: flex;
  gap: 8px;
}

.selected-item-actions.tight {
  margin-left: auto;
}

.item-action-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  cursor: pointer;
  padding: 8px 10px;
}

.item-action-button.remove {
  color: var(--warn);
}

.inline-checkbox {
  margin-bottom: 0;
  grid-template-columns: auto 1fr;
}

.inline-checkbox span {
  color: var(--text);
}

.lookup-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 400;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffaf4;
  box-shadow: 0 18px 40px rgba(73, 49, 29, 0.12);
}

.lookup-option {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
}

.lookup-option:hover {
  background: rgba(14, 96, 85, 0.08);
}

.lookup-option span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2px;
}

#product-item-search-results {
  position: static;
  margin-top: -2px;
}

.notification-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.notification-chip.sms {
  background: rgba(14, 96, 85, 0.12);
  color: var(--accent-deep);
}

.notification-chip.email {
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
}

.notification-chip.none {
  background: rgba(111, 98, 87, 0.12);
  color: var(--muted);
}

.history-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-bottom: 1px solid var(--line);
    margin-top: 20px;
    padding: 0 0 12px;
    flex: 0 0 auto;
}

.history-tab {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.history-tab:hover {
  background: rgba(14, 96, 85, 0.05);
  color: var(--text);
  border-color: var(--accent);
}

.history-tab.active {
  background: rgba(14, 96, 85, 0.1);
  color: var(--accent-deep);
  border-color: var(--accent);
}

.history-list {
    display: grid;
    align-content: start;
    gap: 0;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 12px;
}

.history-empty-state {
    max-width: none;
    width: 100%;
    margin-top: 8px;
    padding: 22px;
    text-align: left;
}

.history-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.history-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.history-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.history-pill.message {
  background: rgba(14, 96, 85, 0.12);
  color: var(--accent-deep);
}

.history-pill.order {
  background: rgba(14, 96, 85, 0.12);
  color: #0e6055;
}

.history-item p {
    margin: 0;
    color: var(--text);
    line-height: 1.5;
}

#history-drawer {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cost-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.campaign-metric-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.campaign-metric-card:hover {
  border-color: rgba(14, 96, 85, 0.22);
  box-shadow: 0 10px 18px rgba(30, 20, 10, 0.05);
}

.campaign-metric-card span {
  color: var(--muted);
}

.campaign-metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.campaign-schedule-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  border-radius: 12px;
}

.campaign-schedule-panel strong {
  display: block;
  margin-bottom: 4px;
}

.campaign-schedule-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.campaign-list-card {
  display: grid;
  gap: 8px;
}

.campaign-list-card > p,
.campaign-list-card > span {
  display: none;
}

.campaign-card-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.campaign-card-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.campaign-card-main p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.campaign-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
}

.campaign-card-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.campaign-overflow {
  position: relative;
}

.campaign-overflow-trigger {
  min-width: 42px;
  padding: 10px 14px;
  line-height: 1;
  font-size: 1rem;
}

.topbar-store-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  z-index: 1000;
  padding: 6px;
  overflow: hidden;
}

.topbar-store-menu-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s;
}

.topbar-store-menu-item:hover   { background: rgba(0,0,0,0.04); }
.topbar-store-menu-item.active  {
  background: rgba(14,96,85,0.08);
  color: var(--accent);
  font-weight: 700;
}

.topbar-store-menu-empty {
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

.ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.ai-actions .primary-button {
  padding: 14px 22px;
}

.campaign-builder select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
}

.campaign-builder input[type="date"] {
  padding-right: 48px;
}

.audit-item strong,
.list-card strong {
  display: block;
  margin-bottom: 5px;
}

.permission-row {
  align-items: center;
}

.toggle {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: rgba(111, 98, 87, 0.2);
  position: relative;
}

.toggle::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 3px;
  left: 3px;
}

.toggle.on {
  background: rgba(14, 96, 85, 0.35);
}

.toggle.on::after {
  left: 21px;
}

.muted-card {
  opacity: 0.7;
  border-style: dashed;
}

.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: grid;
  gap: 10px;
}

.toast {
  min-width: 240px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(255, 250, 244, 0.96);
  box-shadow: var(--shadow);
}

.order-group-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent-deep);
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .auth-shell,
  .panel-grid,
  .campaign-layout,
  .settings-grid,
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-glance-strip,
  .dashboard-stat-row {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .auth-brand-panel,
  .auth-form-panel {
    padding: 28px 22px;
  }

  .section-heading {
    flex-direction: column;
  }

  .settings-layout,
  .team-permissions-grid,
  .credit-pack-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 16px;
  }

  .main-store-bar {
    margin: -16px -16px 18px;
    padding: 16px;
  }

  .sidebar {
    padding: 18px;
  }

  th:nth-child(4),
  th:nth-child(6),
  td:nth-child(4),
  td:nth-child(6) {
    display: none;
  }

  .pricing-actions {
    flex-direction: column;
  }

  .pricing-shell {
    padding: 20px;
  }

  .topbar {
    gap: 10px;
  }

  .topbar-brand-block {
    min-width: 168px;
    padding: 0 14px;
  }

  .topbar-context {
    padding: 0 10px;
  }

  .topbar-actions {
    padding-right: 10px;
    gap: 8px;
  }

  .credits-pill {
    padding: 10px 12px;
  }

  .pricing-topbar {
    flex-direction: column;
  }

  .customers-grid,
  .drawer-two-col {
    grid-template-columns: 1fr;
  }

  .customer-actions {
    justify-content: flex-start;
  }

  .drawer-checkboxes {
    grid-template-columns: 1fr;
  }

  .drawer-actions {
    flex-direction: column;
  }
}

/* Slightly reduce overall roundness across shared UI surfaces */
.brand-mark,
.feature-icon,
.empty-icon {
  border-radius: 12px;
}

.nav-link,
.mode-toggle-button,
.lookup-option {
  border-radius: 8px;
}

.wallet-card,
.pilot-note,
.metric-card,
.panel,
.table-card,
.hero,
.customer-empty-copy,
.drawer-section,
.user-chip,
.demo-card {
  border-radius: 16px;
}

.hero-strip div,
.forecast div,
.cost-preview div,
.store-card,
.list-card,
.audit-item,
.permission-row,
.checkbox-row,
.drawer-close-button,
.lookup-results,
.mode-toggle {
  border-radius: 12px;
}

.primary-button,
.secondary-button,
.ghost-button,
.filter-pill,
.meta-pill,
.pending-orders-pill,
.notification-chip,
.history-pill,
.status-pill,
.badge {
  border-radius: 10px;
}

input,
select,
textarea,
.sign-in-form input,
.sign-up-form input,
.drawer-form textarea {
  border-radius: 12px;
}

/* ============================================================
   MOBILE RESPONSIVENESS
   Below 768px: sidebar becomes a bottom tab bar.
   Below 480px: compact single-column layout.
   ============================================================ */

/* ── Hamburger / mobile nav toggle ─────────────────────────── */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--panel-strong);
  border-top: 1px solid var(--line);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  display: none;
  justify-content: space-around;
  align-items: center;
}

.mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: color 150ms ease, background 150ms ease;
}

.mobile-tab.active,
.mobile-tab:hover {
  color: var(--accent);
}

.mobile-tab svg {
  display: block;
}

@media (max-width: 768px) {
  /* Show mobile bottom bar, hide desktop sidebar */
  .mobile-nav-toggle {
    display: flex;
  }

  .app-shell {
    grid-template-columns: 1fr;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .sidebar {
    display: none;
  }

  /* Stack auth panels vertically */
  .auth-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .auth-brand-panel {
    padding: 32px 28px;
    min-height: unset;
  }

  .auth-tagline {
    margin: 16px 0 24px;
    font-size: 1.1rem;
  }

  .auth-feature-list {
    display: none; /* hide feature list on small auth screens */
  }

  /* Flatten dashboard layout */
  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-management-stack {
    grid-column: 1;
  }

  /* Orders table on mobile — reflow into the viewport. The icon-based row
     actions are narrow enough that all 6 columns fit on phone landscape;
     phone portrait drops the Notifications column via responsive.css. */
  .orders-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .orders-panel table {
    min-width: 0;
  }

  /* Campaigns: stack columns */
  .campaign-layout {
    grid-template-columns: 1fr;
  }

  .campaign-side-stack {
    grid-column: 1;
  }

  /* Credits: single column pack grid */
  .credit-pack-grid {
    grid-template-columns: 1fr;
  }

  /* Pricing: single column */
  .plan-stack {
    grid-template-columns: 1fr;
  }

  /* Drawers: full width */
  .side-drawer {
    width: 100% !important;
    max-width: 100vw;
  }

  /* Settings: stack nav above content */
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    white-space: nowrap;
  }

  .settings-nav-link {
    flex-shrink: 0;
  }

  /* Pricing window: no fixed height */
  .pricing-window {
    max-height: unset;
    overflow-y: unset;
  }
}

@media (max-width: 480px) {
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dashboard-glance-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .drawer-two-col {
    grid-template-columns: 1fr;
  }

  .main-store-bar {
    display: none; /* save space — store name visible in mobile tab */
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dashboard-card-actions,
  .dashboard-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .dashboard-card-actions .primary-button,
  .dashboard-header-actions .primary-button {
    flex: 1;
  }
}


/* ============================================================
   FORM VALIDATION FEEDBACK
   Inline icons alongside colour for accessible error/success.
   ============================================================ */

/* Base message reset */
.auth-error,
.form-message,
[id$="-message"],
[id$="-error"],
[id$="-warning"] {
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 200ms ease;
}

/* Error state — shown when content is not empty */
.auth-error:not(:empty),
[id$="-message"]:not(:empty),
[id$="-error"]:not(:empty) {
  color: var(--warn);
}

.auth-error:not(:empty)::before,
[id$="-message"]:not(:empty)::before,
[id$="-error"]:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--warn);
  border-radius: 50%;
  /* X icon via mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Success state — add class "form-success" to show green check */
.form-success:not(:empty) {
  color: var(--highlight);
}

.form-success:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--highlight);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Warning — orange variant for non-fatal notices */
.form-warning:not(:empty) {
  color: #9a6000;
}

.form-warning:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: #9a6000;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Input error state — red border when sibling error is shown */
input.input-error,
select.input-error,
textarea.input-error {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px rgba(171, 59, 45, 0.14);
}

input.input-success,
select.input-success,
textarea.input-success {
  border-color: var(--highlight) !important;
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.12);
}

/* Password rule list — each rule gets a ✓ when met */
.password-rules {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 4px;
}

.password-rules li {
  font-size: 0.8rem;
  color: var(--muted);
  padding-left: 20px;
  position: relative;
  transition: color 200ms ease;
}

.password-rules li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--muted);
  transition: color 200ms ease, content 200ms ease;
}

.password-rules li.rule-met {
  color: var(--highlight);
}

.password-rules li.rule-met::before {
  content: "✓";
  color: var(--highlight);
}


/* ============================================================
   TRANSITION CONSISTENCY
   Every interactive surface gets smooth hover/focus feedback.
   ============================================================ */

/* Nav links */
.nav-link {
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

/* Sidebar user menu items */
.sidebar-user-menu-item {
  transition: background 150ms ease, color 150ms ease;
}

/* Settings nav links */
.settings-nav-link {
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* History / audience tabs */
.history-tab,
.audience-group-tabs .history-tab {
  transition: color 150ms ease, border-color 150ms ease;
}

/* Mode toggle buttons */
.mode-toggle-button {
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Plan cards */
.plan-card > div {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}
/* Credit pack buttons */
.credit-pack {
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

/* Inputs, selects, textareas — smooth focus */
input,
select,
textarea {
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

/* Checkboxes */
input[type="checkbox"] {
  transition: background 150ms ease, border-color 150ms ease;
}

/* Drawer close button */
.drawer-close-button {
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.drawer-close-button:hover {
  transform: rotate(90deg);
}

/* Store selector */
.store-selector {
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

/* Sidebar brand toggle */
.sidebar-brand-toggle {
  transition: background 150ms ease, color 150ms ease;
}

/* Campaign metric cards */
.campaign-metric-card {
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

/* Dashboard stat buttons */
.dashboard-stat-button {
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* Priority order cards */
.priority-card {
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.priority-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Table row hover */
tbody tr {
  transition: background 120ms ease;
}

/* Toast entry animation */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.toast {
  animation: toast-in 220ms ease forwards;
}

/* Smooth view transitions */
.view.active {
  animation: fade-in 250ms ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar collapse/expand */
.sidebar {
  transition: width 220ms ease;
}

/* Side drawer open animation */
.side-drawer:not(.hidden) {
  animation: drawer-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes drawer-in {
  from { transform: translateX(100%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}


/* ── Messaging settings panel ────────────────────────────────────────────── */

.msg-panel {
  margin-bottom: 18px;
}

.msg-master-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.msg-master-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-master-info strong {
  font-size: 0.9rem;
}

.msg-notif-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.msg-notif-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.msg-notif-label > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-notif-label strong {
  font-size: 0.9rem;
}

.msg-always-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--highlight);
  background: rgba(14, 96, 85, 0.1);
  border: 1px solid rgba(14, 96, 85, 0.2);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}

.msg-days-input {
  display: inline-block;
  width: 52px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  margin: 0 4px;
}

.msg-days-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.15);
}

.msg-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 680px) {
  .msg-channel-grid {
    grid-template-columns: 1fr;
  }
}

.msg-channel-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.msg-channel-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.msg-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}

.msg-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
}

.msg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.15);
}

.msg-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}

.msg-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.15);
}

.msg-vars-hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.msg-vars-hint code {
  background: rgba(111, 98, 87, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.72rem;
  color: var(--ink);
}

.msg-optout-note {
  font-size: 0.75rem;
  color: var(--highlight);
  font-style: italic;
}

.msg-sms-counter {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  min-height: 18px;
}

.msg-sms-counter.over {
  color: #c0392b;
}

/* Disabled state when chaser toggle is off */
.msg-panel.msg-disabled .msg-channel-grid {
  opacity: 0.4;
  pointer-events: none;
}

.msg-panel.msg-disabled .msg-days-input {
  pointer-events: none;
}

/* SMS warning box */
.msg-sms-warning {
  background: rgba(192, 57, 43, 0.06);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 4px;
}

.msg-sms-warning.hidden {
  display: none;
}

.msg-sms-warning strong {
  font-size: 0.9rem;
  color: #c0392b;
}

.msg-sms-warning p {
  font-size: 0.85rem;
  color: var(--ink);
  margin: 8px 0 14px;
  line-height: 1.5;
}

.msg-sms-warning-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── To-Do feature ─────────────────────────────────────────────────────────── */

/* Toolbar */
.todo-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.todo-search-input {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
}

.todo-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.todo-show-completed-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

/* Bulk action bar */
.todo-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(14, 96, 85, 0.06);
  border: 1px solid rgba(14, 96, 85, 0.2);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
}

.todo-bulk-bar.hidden { display: none; }

.todo-bulk-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}

.todo-bulk-delete-btn {
  color: #c0392b !important;
  border-color: rgba(192,57,43,0.25) !important;
}

/* Table */
.todo-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.todo-check-col { width: 40px; }
.todo-done-col  { width: 40px; }

/* Col widths: checkbox | tick | task | linked | owner | due | status */
.todo-table th:nth-child(1) { width: 40px; }
.todo-table th:nth-child(2) { width: 40px; }
.todo-table th:nth-child(3) { width: 30%; }
.todo-table th:nth-child(4) { width: 22%; }
.todo-table th:nth-child(5) { width: 12%; }
.todo-table th:nth-child(6) { width: 12%; }
.todo-table th:nth-child(7) { width: 10%; }

.todo-table td {
  vertical-align: middle;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
}

.todo-table th {
  padding: 10px 10px 8px;
  border-bottom: 2px solid var(--line);
}

.todo-check-cell,
.todo-done-cell {
  text-align: center;
  vertical-align: middle;
  padding: 12px 4px !important;
}

.todo-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.todo-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.todo-complete-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.todo-complete-btn:hover {
  border-color: var(--highlight);
  color: var(--highlight);
}

.todo-complete-btn.is-complete {
  background: var(--highlight);
  border-color: var(--highlight);
  color: white;
}

.todo-name-cell {
  max-width: 260px;
}

.todo-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
}

.todo-name-done {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
}

.todo-detail-preview {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.todo-owner-cell { font-size: 0.85rem; }

.todo-due-cell {
  font-size: 0.82rem;
  white-space: nowrap;
  vertical-align: middle !important;
  color: var(--ink);
}

.todo-due-overdue {
  color: #c0392b;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.todo-linked-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--teal);
  background: rgba(14,96,85,0.07);
  border: 1px solid rgba(14,96,85,0.2);
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}

.todo-linked-btn:hover {
  background: rgba(14,96,85,0.14);
}

/* Row states */
.todo-row { cursor: default; }

.todo-name-cell { cursor: pointer; }
.todo-name-cell:hover { text-decoration: underline; color: var(--accent); }

.todo-row:hover td { background: rgba(14,96,85,0.03); }

.todo-overdue td {
  background: rgba(192, 57, 43, 0.04) !important;
}

.todo-overdue:hover td {
  background: rgba(192, 57, 43, 0.08) !important;
}

.todo-overdue {
  box-shadow: inset 3px 0 0 #e74c3c;
}

.todo-completed-row td {
  opacity: 0.65;
}

.todo-selected td {
  background: rgba(14,96,85,0.07) !important;
}

.todo-empty-row {
  text-align: center;
  color: var(--muted);
  padding: 32px !important;
  font-size: 0.875rem;
}

/* Inline section inside entity drawers */
.todo-inline-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 8px;
}

.todo-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.todo-inline-header strong {
  font-size: 0.85rem;
}

.todo-inline-add-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  background: rgba(14,96,85,0.07);
  border: 1px solid rgba(14,96,85,0.2);
  border-radius: 8px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.12s;
}

.todo-inline-add-btn:hover { background: rgba(188,95,50,0.15); }

.todo-inline-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.todo-inline-form.hidden { display: none; }

.todo-inline-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.85rem;
  font-family: inherit;
}

.todo-inline-input:focus {
  outline: none;
  border-color: var(--accent);
}

.todo-inline-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.todo-inline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.todo-inline-item:last-child { border-bottom: none; }

.todo-inline-done {
  opacity: 0.6;
}

.todo-inline-overdue .todo-inline-name {
  color: #c0392b;
}

.todo-inline-name {
  flex: 1;
  font-weight: 500;
}

.todo-inline-due {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.todo-inline-open {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.todo-inline-open:hover { color: var(--accent); }

.todo-inline-empty {
  font-size: 0.8rem;
  padding: 8px 0;
}

/* Drawer form */
.todo-delete-btn {
  color: #c0392b !important;
}

.todo-created-by {
  font-size: 0.78rem;
}

.todo-drawer-meta { padding-top: 0; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.form-actions-left { margin-right: auto; }

.readonly-input {
  background: var(--bg) !important;
  color: var(--muted) !important;
  cursor: default;
}

.required-star { color: #c0392b; }

/* Bulk modal backdrop */
.todo-bulk-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.todo-bulk-modal.hidden { display: none; }

.todo-bulk-modal-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

.todo-bulk-modal-title {
  font-weight: 700;
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.todo-bulk-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ── Today's Actions widget ─────────────────────────────────────────────────── */

.todays-actions-panel {
  margin-bottom: 0;
}

.todays-actions-title {
  font-size: 1rem;
  font-weight: 700;
}

/* All done state */
.todays-actions-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
  gap: 8px;
}

.todays-actions-done.hidden { display: none; }

.todays-actions-done-icon {
  color: var(--highlight);
  margin-bottom: 4px;
}

.todays-actions-done strong {
  font-size: 1rem;
}

/* Section within the widget */
.ta-section {
  margin-bottom: 16px;
}

.ta-section:last-child { margin-bottom: 0; }

.ta-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.ta-count {
  margin-left: auto;
  background: rgba(188,95,50,0.1);
  color: var(--accent);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.ta-empty {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 6px 0;
}

.ta-overflow {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 6px;
}

/* Action row */
.ta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background 0.12s;
  margin-bottom: 4px;
}

.ta-row:hover {
  background: rgba(188,95,50,0.05);
}

.ta-todo-row {
  cursor: pointer;
}

.ta-row-info {
  flex: 1;
  min-width: 0;
}

.ta-row-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ta-row-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Send now button */
.ta-send-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--highlight);
  background: rgba(14, 96, 85, 0.1);
  border: 1px solid rgba(14, 96, 85, 0.2);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}

.ta-send-btn:hover {
  background: rgba(14, 96, 85, 0.2);
}

.ta-send-btn.ta-sent {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  pointer-events: none;
}

/* Full list drawer sections */
#todays-actions-drawer-content .ta-section {
  margin-bottom: 20px;
}

/* ── Help button & drawer ───────────────────────────────────────────────────── */

/* Help trigger button in top banner */
.help-trigger-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.help-trigger-btn:hover {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent);
  border-color: rgba(14, 96, 85, 0.3);
}

.help-trigger-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Help drawer — wider than typical drawers */
.help-drawer {
  width: 400px !important;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
}

.help-drawer-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-drawer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(14, 96, 85, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Scrollable body */
.help-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 8px;
}

/* Sections */
.help-section {
  margin-bottom: 24px;
}

.help-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.help-what {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink);
}

/* Steps */
.help-steps {
  list-style: none;
  counter-reset: help-step;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}

.help-step {
  counter-increment: help-step;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.help-step::before {
  content: counter(help-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(14, 96, 85, 0.12);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  margin-top: 2px;
}

.help-step strong {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 3px;
}

.help-step p {
  font-size: 0.825rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Tips */
.help-tips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-tips li {
  font-size: 0.825rem;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
}

.help-tips li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.75rem;
  top: 1px;
}

/* Video placeholder */
.help-video-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Footer feedback */
.help-drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.help-feedback-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-right: 4px;
  white-space: nowrap;
}

.help-feedback-buttons {
  display: flex;
  gap: 8px;
}

.help-feedback-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.help-feedback-btn:hover {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent);
  border-color: rgba(14, 96, 85, 0.3);
}

.help-feedback-btn.active-yes {
  background: rgba(14, 96, 85, 0.12);
  color: var(--highlight);
  border-color: rgba(14, 96, 85, 0.3);
}

.help-feedback-btn.active-no {
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.25);
}

.help-feedback-thanks {
  font-size: 0.78rem;
  color: var(--highlight);
  margin-left: auto;
}

.help-feedback-thanks.hidden { display: none; }

/* ── Scan Delivery trigger button ───────────────────────────────────────────── */
.scan-trigger-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scan-trigger-btn:hover {
  background: rgba(14,96,85,0.08);
  color: var(--highlight);
  border-color: rgba(14,96,85,0.3);
}
.scan-trigger-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Scanner overlay ────────────────────────────────────────────────────────── */
.scanner-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: white;
  display: flex; flex-direction: column;
  animation: scannerFadeIn 0.2s ease;
}
.scanner-overlay.hidden { display: none; }
@keyframes scannerFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.scanner-shell {
  display: flex; flex-direction: column;
  height: 100%; max-width: 800px;
  margin: 0 auto; width: 100%;
  padding: 0 20px;
}

/* Header */
.scanner-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.scanner-header-left { display: flex; align-items: center; gap: 14px; }
.scanner-logo-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(14,96,85,0.1); color: var(--highlight);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scanner-title  { font-size: 1.1rem; font-weight: 700; margin: 0; }
.scanner-subtitle { font-size: 0.8rem; margin: 0; }
.scanner-close-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.12s;
}
.scanner-close-btn:hover { background: var(--line); }

/* Progress bar — restyled to match the Full Capture stepper's progress
   dots (.fc-progress) so the two takeover surfaces feel like the same
   family. Numbered circles, vertically stacked label below, connecting
   line drawn between dots, teal solid when active or complete. */
.scanner-progress {
  display: flex; align-items: center;
  padding: 20px 0 16px; flex-shrink: 0;
  gap: 0;
}
.scanner-progress-step {
  flex: 1;
  display: flex; align-items: center; flex-direction: column;
  gap: 6px;
  position: relative;
  font-size: 0.78rem;
  color: var(--muted, #5f6d69);
}
.scanner-progress-step.active   { color: var(--text, #1c2a2b); }
.scanner-progress-step.complete { color: var(--muted, #5f6d69); }
.scanner-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(28, 42, 43, 0.08);
  color: var(--muted, #5f6d69);
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
  position: relative; z-index: 1;
  transition: background 0.15s, color 0.15s;
}
.scanner-progress-step.active   .scanner-step-num { background: #0e6055; color: #fff; }
.scanner-progress-step.complete .scanner-step-num { background: #0e6055; color: #fff; }
.scanner-step-label { font-weight: 600; }
.scanner-progress-step.active .scanner-step-label { font-weight: 600; }

/* The bespoke <div class="scanner-progress-line"> between dots is hidden
   in favour of pseudo-element connectors on each step (matches FC). */
.scanner-progress-line { display: none; }
.scanner-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: rgba(28, 42, 43, 0.12);
  z-index: 0;
}
.scanner-progress-step.complete:not(:last-child)::after {
  background: #0e6055;
}

@media (max-width: 480px) { .scanner-step-label { display: none; } }

/* Content area */
.scanner-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Step body/footer pattern */
.scan-step-body  { flex: 1; overflow-y: auto; padding: 16px 0; }
.scan-step-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); flex-shrink: 0;
}

/* Step 2 allocation summary + per-order coverage pills.
   The summary header shows total scanned vs total demand and flags how
   many orders aren't fully covered. The per-row pill is a colour-coded
   badge — green for fully covered (default-checked), amber for partial
   coverage, grey for nothing allocated. The block on Mark Arrived uses
   data-coverage on each checkbox to refuse over-allocation. */
.scan-alloc-summary {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(28, 42, 43, 0.04);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted, #5f6d69);
}
.scan-alloc-summary strong { color: var(--text, #1c2a2b); }
.scan-alloc-warn { color: #ab3b2d; }

.alloc-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.alloc-full    { background: rgba(14, 96, 85, 0.12);  color: #0e6055; }
.alloc-partial { background: rgba(193, 132, 17, 0.14); color: #946410; }
.alloc-none    { background: rgba(28, 42, 43, 0.08);  color: var(--muted, #5f6d69); }

/* Step 1 — two-line scanned item display.
   Name on top, scanned barcode/code below in a muted style. When the
   same scanned barcode resolves to multiple item names across orders
   (data divergence), an inline "+N names" pill is shown next to the
   primary name. The pill carries the alternate names in `title=` so
   hovering reveals them without needing a custom popover. */
.scan-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-item-name {
  font-weight: 600; font-size: 0.92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 8px;
}
.scan-item-id {
  font-size: 0.78rem;
  color: var(--muted, #5f6d69);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scan-name-divergence {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  background: rgba(193, 132, 17, 0.14);
  color: #946410;
  cursor: help;
}

/* Step 2 — expandable matched-order detail.
   Click the row's chevron to reveal contact info + per-item allocation
   for that order (including items in the order that weren't scanned).
   Mobile just stacks naturally inside the centred shell. */
.scan-item-row { position: relative; }
.scan-row-expand {
  background: transparent; border: none;
  color: var(--muted, #5f6d69);
  cursor: pointer;
  padding: 4px 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.scan-row-expand:hover { background: rgba(28, 42, 43, 0.06); color: var(--text, #1c2a2b); }
.scan-row-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.scan-row-expand svg { transition: transform 0.15s ease; }

.scan-row-detail {
  padding: 12px 14px;
  margin: 0 0 10px;
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.08);
  border-radius: 10px;
  font-size: 0.85rem;
}
.scan-row-detail.hidden { display: none; }
.scan-detail-section + .scan-detail-section { margin-top: 10px; }
.scan-detail-label {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  color: var(--muted, #5f6d69);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.scan-detail-contact {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.scan-detail-contact span { color: var(--text, #1c2a2b); }
.scan-detail-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.scan-detail-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(28, 42, 43, 0.06);
  border-radius: 8px;
}
.scan-detail-item-name {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.scan-detail-item-id {
  font-size: 0.74rem; color: var(--muted, #5f6d69);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scan-detail-qty {
  font-size: 0.78rem; color: var(--muted, #5f6d69);
}
.scan-detail-mark {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.scan-detail-mark--scanned { background: rgba(14, 96, 85, 0.12); color: #0e6055; }
.scan-detail-mark--unscanned { background: rgba(28, 42, 43, 0.08); color: var(--muted, #5f6d69); }

/* Step 3 — Fulfilled / Partially fulfilled pill.
   "Fulfilled" = every productItem on the order has received = true.
   Partial coverage from this scan still shows as Partially fulfilled
   since the order's other items haven't physically arrived yet. */
.fulfil-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fulfil-full    { background: rgba(14, 96, 85, 0.12);  color: #0e6055; }
.fulfil-partial { background: rgba(193, 132, 17, 0.14); color: #946410; }

/* Mobile — keep the expandable detail panel comfortable inside the
   scanner shell. Stacks the per-item rows naturally. */
@media (max-width: 480px) {
  .scan-detail-item { grid-template-columns: 1fr auto; }
  .scan-detail-mark { grid-column: 1 / -1; justify-self: end; }
}

/* Saved sessions */
.scan-sessions-header {
  text-align: center; padding: 32px 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scan-sessions-icon { color: var(--highlight); margin-bottom: 4px; }
.scan-sessions-header h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.scan-sessions-table-wrap { overflow-x: auto; }
.scan-sessions-table { width: 100%; border-collapse: collapse; }
.scan-sessions-table th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.scan-sessions-table td { padding: 12px 12px; border-bottom: 1px solid var(--line); font-size: 0.875rem; vertical-align: middle; }
.scan-session-actions { display: flex; gap: 8px; }
.scan-btn-sm { padding: 5px 12px !important; font-size: 0.78rem !important; }
.scan-delete-btn { color: #c0392b !important; border-color: rgba(192,57,43,0.3) !important; }
.scan-sessions-footer { padding: 20px 0; display: flex; justify-content: center; }
.scan-step-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.scan-step-1 { background: rgba(188,95,50,0.1); color: var(--accent); }
.scan-step-2 { background: rgba(14,96,85,0.1); color: var(--highlight); }
.scan-step-3 { background: rgba(168,85,247,0.1); color: #a855f7; }

/* Step 1 — scan input */
.scan-input-area { background: rgba(14,96,85,0.04); border: 1px solid rgba(14,96,85,0.15); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.scan-input-wrap { display: flex; gap: 10px; align-items: center; }
.scan-input-icon { color: var(--highlight); flex-shrink: 0; }

/* Full-width single-scan row */
.scan-input-row {
  display: flex; gap: 10px; align-items: center; width: 100%;
}
.scan-input-row .scan-barcode-input { flex: 1; min-width: 0; }
.scan-input-row .primary-button { flex-shrink: 0; }

/* Bulk paste textarea */
.scan-bulk-textarea {
  width: 100%; min-height: 120px; padding: 12px 14px;
  border: 2px solid rgba(14,96,85,0.3); border-radius: 10px;
  background: var(--bg, #fff); color: var(--ink);
  font-size: 0.9rem; font-family: monospace; resize: vertical;
  transition: border-color 0.15s;
}
.scan-bulk-textarea:focus { outline: none; border-color: var(--highlight); box-shadow: 0 0 0 3px rgba(14,96,85,0.12); }

/* Row below input: feedback left, bulk toggle right */
.scan-input-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 8px;
}
/* Row below bulk textarea: toggle left, Add All button right */
.scan-input-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; gap: 8px;
}

.scan-barcode-input {
  flex: 1; padding: 11px 14px; border: 2px solid rgba(14,96,85,0.3);
  border-radius: 10px; background: var(--bg); color: var(--ink);
  font-size: 1rem; font-family: var(--font, inherit);
  transition: border-color 0.15s, box-shadow 0.15s; font-weight: 600; letter-spacing: 0.05em;
}
.scan-barcode-input:focus { outline: none; border-color: var(--highlight); box-shadow: 0 0 0 3px rgba(14,96,85,0.12); }
/* Invalid scan state */
.scan-input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important; }
@keyframes scanShake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-6px); }
  30%      { transform: translateX(5px); }
  45%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(1px); }
}
.scan-input-shake { animation: scanShake 0.45s ease; }

.scan-btn-submit { flex-shrink: 0; }
.scan-input-hint { font-size: 0.78rem; color: var(--muted); margin-top: 8px; }
.scan-camera-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 0.78rem; color: var(--muted); background: transparent; border: none; cursor: not-allowed; opacity: 0.5; font-family: inherit;
}

/* Feedback */
.scan-feedback-area { min-height: 36px; margin-bottom: 12px; }
.scan-feedback-success {
  display: flex; align-items: center; gap: 8px;
  background: rgba(14,96,85,0.1); border: 1px solid rgba(14,96,85,0.25);
  border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; color: var(--highlight);
  animation: scanFeedback 0.3s ease;
}
.scan-feedback-warn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; color: #b45309;
}
@keyframes scanFeedback { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Scanned items list */
.scan-items-area { }
.scan-items-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.875rem; }
.scan-items-count { font-size: 0.78rem; color: var(--muted); }
.scan-empty-state { text-align: center; padding: 40px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scan-item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px; background: rgba(255,255,255,0.5);
  transition: border-color 0.2s;
}
.scan-item-fresh { border-color: var(--highlight); background: rgba(14,96,85,0.05); }
.scan-item-info  { flex: 1; min-width: 0; }
.scan-item-name  { display: block; font-size: 0.875rem; font-weight: 600; }
.scan-item-barcode { display: block; font-size: 0.72rem; color: var(--muted); font-family: monospace; margin-top: 2px; }
.scan-item-qty-controls { display: flex; align-items: center; gap: 8px; }
.scan-qty-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.12s;
}
.scan-qty-btn:hover { background: var(--line); }
.scan-qty-val { font-size: 1rem; font-weight: 700; min-width: 24px; text-align: center; }
.scan-remove-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 4px; }
.scan-remove-btn:hover { color: #c0392b; }

/* Footer actions row — right-aligned for all steps */
.scan-step-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 16px 0 4px; border-top: 1px solid var(--line);
  margin-top: 12px; flex-shrink: 0;
}

/* Step 2 — match orders */
.scan-unmatched-banner {
  display: flex; gap: 12px; background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; color: #92400e; font-size: 0.85rem;
}
.scan-unmatched-list { margin: 6px 0 0 0; padding: 0 0 0 16px; }
.scan-unmatched-list li { margin-bottom: 4px; }
.scan-unmatched-list code { font-family: monospace; font-size: 0.8rem; background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }
.scan-match-intro { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.875rem; flex-wrap: wrap; }
.scan-select-all-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; margin-left: auto; }
.scan-match-list { display: flex; flex-direction: column; gap: 8px; }
.scan-match-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 2px solid var(--line);
  border-radius: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: rgba(255,255,255,0.5);
}
.scan-match-row:hover   { border-color: rgba(188,95,50,0.3); }
.scan-match-selected    { border-color: var(--highlight) !important; background: rgba(14,96,85,0.04) !important; }
.scan-match-info        { flex: 1; min-width: 0; }
.scan-match-info strong { display: block; font-size: 0.9rem; }
.scan-match-product     { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-match-meta        { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 0.75rem; color: var(--muted); }
.scan-alloc-qty         { color: var(--highlight); }
.scan-arrival-badge     { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.scan-full    { background: rgba(14,96,85,0.12); color: var(--highlight); }
.scan-partial { background: rgba(245,158,11,0.12); color: #92400e; }

/* Step 3 */
.scan-step3-summary { display: flex; gap: 16px; margin-bottom: 16px; }
.scan-step3-stat {
  flex: 1; background: rgba(255,255,255,0.5); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; text-align: center;
}
.scan-step3-stat span { font-size: 1.8rem; font-weight: 700; display: block; line-height: 1; }
.scan-step3-stat small { font-size: 0.75rem; color: var(--muted); margin-top: 4px; display: block; }
.scan-credit-box {
  background: rgba(255,255,255,0.5); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.scan-credit-box.scan-credit-warning { border-color: rgba(192,57,43,0.35); background: rgba(192,57,43,0.04); }
.scan-credit-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.scan-credit-row strong { display: block; font-size: 0.875rem; }
.scan-credit-row .muted { font-size: 0.78rem; }
.scan-credit-balance { text-align: right; }
.scan-credit-label { font-size: 0.72rem; color: var(--muted); display: block; }
.scan-credit-balance strong { font-size: 1.1rem; font-family: monospace; }
.scan-credit-low { color: #c0392b !important; }
.scan-credit-alert {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(192,57,43,0.15);
  font-size: 0.82rem; color: #c0392b;
}
.scan-auto-notice {
  display: flex; align-items: center; gap: 8px;
  background: rgba(14,96,85,0.07); border: 1px solid rgba(14,96,85,0.2);
  border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; color: var(--highlight);
  margin-bottom: 14px;
}
.scan-notif-list-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.875rem; margin-bottom: 10px; font-weight: 600;
}
.scan-notif-list { display: flex; flex-direction: column; gap: 6px; }
.scan-notif-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.5);
}
.scan-notif-info  { flex: 1; min-width: 0; }
.scan-notif-info strong { display: block; font-size: 0.875rem; }
.scan-notif-info .muted { font-size: 0.78rem; }
.scan-notif-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.scan-notif-cost  { font-size: 0.75rem; color: var(--muted); font-family: monospace; }
.scan-notif-check { color: var(--highlight); flex-shrink: 0; }
.scan-btn-warn    { background: rgba(245,158,11,0.15) !important; color: #92400e !important; border: 1px solid rgba(245,158,11,0.4) !important; }

/* Completion */
.scan-complete-screen {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 12px; padding: 40px 20px;
}
.scan-complete-icon { color: var(--highlight); margin-bottom: 8px; }
.scan-complete-screen h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.scan-start-another { margin-top: 8px; }
.disabled-btn { opacity: 0.45; cursor: not-allowed; }

/* Top-up panel inside scanner */
.scanner-topup-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  background: var(--bg); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 10;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  animation: slideInRight 0.25s ease;
}
.scanner-topup-panel.hidden { display: none; }
@keyframes slideInRight { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.scanner-overlay { position: fixed; } /* ensure positioned parent */
.scanner-topup-inner { padding: 24px; flex: 1; overflow-y: auto; }
.scanner-topup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.scanner-topup-header strong { font-size: 1rem; }
.credits-pack-grid { display: grid; gap: 12px; }
/* ── Credit purchase history table ─────────────────────────────────────────── */

.credits-history-panel {
  padding: 0;
  overflow: hidden;
}

.credits-history-panel .panel-header {
  padding: 18px 20px 14px;
}

.credits-history-table-wrap {
  overflow-x: auto;
}

.credits-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.credits-history-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0 20px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.credits-history-table thead th:nth-child(3),
.credits-history-table thead th:nth-child(4),
.credits-history-table thead th:nth-child(5),
.credits-history-table thead th:nth-child(6) {
  text-align: right;
}

.credits-history-table tbody tr {
  transition: background 0.1s;
}

.credits-history-table tbody tr:hover td {
  background: var(--hover);
}

.credits-history-table tbody td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.credits-history-table tbody tr:last-child td {
  border-bottom: none;
}

.credits-history-table td:nth-child(3),
.credits-history-table td:nth-child(4),
.credits-history-table td:nth-child(5),
.credits-history-table td:nth-child(6) {
  text-align: right;
  font-family: var(--font-mono, monospace);
}

.credits-history-date {
  color: var(--muted);
  font-size: 0.82rem;
}

.credits-history-pack {
  font-weight: 600;
}

.credits-history-price {
  font-weight: 600;
  color: var(--ink);
}

.credits-history-qty {
  color: var(--highlight);
  font-weight: 700;
}

.credits-history-before {
  color: var(--muted);
}

.credits-history-after {
  font-weight: 600;
  color: var(--ink);
}

.credits-history-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* New purchase row highlight (fades out) */
@keyframes creditRowFlash {
  0%   { background: rgba(14, 96, 85, 0.12); }
  100% { background: transparent; }
}

.credits-history-table tbody tr.credit-row-new td {
  animation: creditRowFlash 2s ease forwards;
}

/* ── Dashboard layout fixes ─────────────────────────────────────────────────── */

.dashboard-left-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  align-self: start;
}

/* ── Banner action buttons ──────────────────────────────────────────────────── */

.main-store-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Integrations page ──────────────────────────────────────────────────────── */

.integrations-page { display: flex; flex-direction: column; gap: 20px; }

.integrations-page-header { margin-bottom: 4px; }

.integration-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.integration-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.56);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s;
}

.integration-card-connected { border-color: rgba(14,96,85,0.3); }
.integration-card-soon { opacity: 0.65; }

.integration-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.integration-card-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.shopify-logo    { background: rgba(149,191,71,0.15);  color: #5a8a00; }
.shopify-logo-lg { background: rgba(149,191,71,0.15);  color: #5a8a00; }
.square-logo     { background: rgba(0,0,0,0.06);        color: var(--ink); }
.woo-logo        { background: rgba(150,88,166,0.12);   color: #7b4d8a; }

.integration-card-meta { flex: 1; }
.integration-card-meta strong { display: block; font-size: 0.95rem; }
.integration-card-meta span   { font-size: 0.78rem; color: var(--muted); }

.integration-status-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px;
  border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
}
.integration-status-badge.connected    { background: rgba(14,96,85,0.1); color: var(--highlight); }
.integration-status-badge.not-connected { background: rgba(111,98,87,0.1); color: var(--muted); }
.integration-status-badge.coming-soon  { background: rgba(245,158,11,0.1); color: #92400e; }

.integration-card-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.55; }

.integration-details { display: flex; flex-direction: column; gap: 8px; }
.integration-detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; gap: 12px;
}
.integration-detail-row .muted { flex-shrink: 0; }
.integration-detail-row strong, .integration-detail-row span:last-child { text-align: right; }

.text-green { color: var(--highlight); font-weight: 600; }
.text-amber { color: #92400e; font-weight: 600; }

.integration-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.shopify-disconnect-btn { color: #c0392b !important; }

.integration-help-box {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(188,95,50,0.04); border: 1px solid rgba(188,95,50,0.15);
  border-radius: 14px; padding: 16px 18px;
}
.integration-help-icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.integration-help-box strong { font-size: 0.875rem; display: block; margin-bottom: 6px; }
.integration-help-box p { font-size: 0.82rem; line-height: 1.6; margin: 0; }

/* ── Shopify Wizard Overlay ─────────────────────────────────────────────────── */

.shopify-wizard-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: var(--bg); display: flex; flex-direction: column;
  animation: scannerFadeIn 0.2s ease;
}
.shopify-wizard-overlay.hidden { display: none; }

.shopify-wizard-shell {
  display: flex; flex-direction: column;
  height: 100%; max-width: 680px; margin: 0 auto; width: 100%; padding: 0 24px;
}

.shopify-wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.shopify-wizard-header-left { display: flex; align-items: center; gap: 14px; }
.shopify-wizard-logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(149,191,71,0.15); color: #5a8a00;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.shopify-wizard-title    { font-size: 1.1rem; font-weight: 700; margin: 0; }
.shopify-wizard-subtitle { font-size: 0.8rem; margin: 0; }

/* Step indicators */
.shopify-wizard-steps {
  display: flex; align-items: center; padding: 18px 0 14px; flex-shrink: 0;
}
.sw-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--muted); font-weight: 600; flex-shrink: 0;
}
.sw-step.active   { color: #5a8a00; }
.sw-step.complete { color: var(--muted); }
.sw-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
}
.sw-step.active   .sw-step-num { border-color: #5a8a00; color: #5a8a00; background: rgba(149,191,71,0.1); }
.sw-step.complete .sw-step-num { border-color: #5a8a00; background: #5a8a00; color: white; }
.sw-step-line { flex: 1; height: 1px; background: var(--line); margin: 0 10px; }
@media (max-width: 480px) { .sw-step-label { display: none; } }

/* Content and footer */
.shopify-wizard-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.sw-body   { flex: 1; overflow-y: auto; padding: 20px 0; }
.sw-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); flex-shrink: 0;
}

/* Step 1 — connect */
.sw-step-intro { text-align: center; padding: 8px 0 24px; }
.sw-intro-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.sw-step-intro h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.sw-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.sw-field { display: flex; flex-direction: column; gap: 6px; }
.sw-field label { font-size: 0.82rem; font-weight: 600; }
.sw-field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.9rem;
  transition: border-color 0.15s;
}
.sw-field input:focus { outline: none; border-color: #5a8a00; box-shadow: 0 0 0 3px rgba(149,191,71,0.12); }
.sw-input-with-suffix { display: flex; align-items: stretch; }
.sw-input-with-suffix input { border-radius: 10px 0 0 10px; border-right: none; }
.sw-input-suffix {
  display: flex; align-items: center; padding: 0 12px;
  background: rgba(111,98,87,0.08); border: 1px solid var(--line); border-radius: 0 10px 10px 0;
  font-size: 0.82rem; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.sw-field-hint { font-size: 0.78rem; color: var(--muted); }
.sw-field-hint code { font-family: monospace; background: rgba(111,98,87,0.1); padding: 1px 5px; border-radius: 4px; }
.sw-field-error {
  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25);
  color: #c0392b; border-radius: 8px; padding: 9px 12px; font-size: 0.83rem;
}
.sw-how-to {
  background: rgba(255,255,255,0.5); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; font-size: 0.82rem;
}
.sw-how-to strong { display: block; margin-bottom: 10px; }
.sw-how-to ol { padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.sw-how-to code { font-family: monospace; background: rgba(111,98,87,0.1); padding: 1px 5px; border-radius: 4px; }

/* Testing animation */
.sw-testing-body { display: flex; align-items: center; justify-content: center; }
.sw-testing-animation { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sw-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(149,191,71,0.2); border-top-color: #5a8a00;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sw-mini-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: currentColor;
  animation: spin 0.7s linear infinite; display: inline-block;
}

/* Step 1 result */
.sw-success-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(14,96,85,0.1); border: 1px solid rgba(14,96,85,0.25);
  color: var(--highlight); border-radius: 10px; padding: 12px 16px;
  font-size: 0.9rem; font-weight: 600; margin-bottom: 20px;
}
.sw-shop-info { display: flex; flex-direction: column; gap: 12px; }
.sw-shop-info-row {
  display: flex; justify-content: space-between;
  font-size: 0.875rem; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.sw-shop-info-row:last-child { border-bottom: none; }

/* Step 2 */
.sw-section-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 10px; }
.sw-section-desc  { font-size: 0.82rem; color: var(--muted); margin-bottom: 14px; }
.sw-mapping-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 8px; }
.sw-mapping-table th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6px 0 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sw-mapping-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sw-mapping-table tr:last-child td { border-bottom: none; }
.sw-shopify-badge { background: rgba(149,191,71,0.12); color: #5a8a00; font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.sw-option-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.sw-option-row > div { flex: 1; }
.sw-option-row strong { font-size: 0.875rem; display: block; margin-bottom: 4px; }

/* Step 3 */
.sw-activate-list { display: flex; flex-direction: column; gap: 14px; }
.sw-activate-item { display: flex; align-items: flex-start; gap: 14px; }
.sw-activate-check {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.sw-activate-check.pending { background: rgba(111,98,87,0.1); color: var(--muted); border: 2px solid var(--line); }
.sw-activate-check.loading { background: rgba(149,191,71,0.1); color: #5a8a00; border: 2px solid #5a8a00; }
.sw-activate-check.done    { background: #5a8a00; color: white; border: 2px solid #5a8a00; }
.sw-activate-check.error   { background: rgba(192,57,43,0.1); color: #c0392b; border: 2px solid #c0392b; }
.sw-activate-item strong   { display: block; font-size: 0.9rem; margin-bottom: 4px; }

/* Completion */
.sw-complete-body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px;
}
.sw-complete-icon { color: #5a8a00; margin-bottom: 4px; }
.sw-complete-body h2 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.sw-complete-stats { display: flex; gap: 20px; margin-top: 8px; }
.sw-stat { text-align: center; }
.sw-stat span { font-size: 1.8rem; font-weight: 700; display: block; }
.sw-stat small { font-size: 0.75rem; color: var(--muted); }
.sw-next-btn { display: inline-flex; align-items: center; gap: 6px; }
/* ── Quick Capture view ─────────────────────────────────────────────────────── */

#quick-capture-view {
  padding: 0;
  min-height: calc(100vh - 66px); /* full height minus top banner */
  display: none; /* hidden by default — shown only when .active */
  flex-direction: column;
}

.qc-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
}

/* Header */
.qc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.qc-header-brand strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.qc-header-brand span {
  font-size: 0.78rem;
}

.qc-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}

.qc-switch-btn:hover {
  background: rgba(14, 96, 85, 0.06);
  color: var(--accent);
  border-color: rgba(14, 96, 85, 0.3);
}

/* Form wrap — centred vertically */
.qc-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 24px 0 40px;
  overflow-y: auto;
}

/* Step blocks */
.qc-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qc-step.hidden { display: none; }

.qc-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qc-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(14, 96, 85, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* Search */
.qc-search-row {
  display: flex;
  gap: 10px;
}

.qc-search-input {
  flex: 1;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s;
}

.qc-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.1);
}

.qc-search-btn { padding: 14px 22px; font-size: 0.95rem; border-radius: 12px; }

.qc-search-feedback {
  min-height: 22px;
  font-size: 0.83rem;
}

.qc-feedback-hint { color: var(--muted); }

/* Found customer card */
.qc-found-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(14, 96, 85, 0.05);
  border: 1.5px solid rgba(14, 96, 85, 0.25);
  border-radius: 14px;
}

.qc-found-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 96, 85, 0.15);
  color: var(--highlight);
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qc-found-info { flex: 1; min-width: 0; }
.qc-found-info strong { display: block; font-size: 0.95rem; }
.qc-found-info span   { font-size: 0.8rem; }

.qc-change-btn { font-size: 0.78rem; flex-shrink: 0; }

/* Open orders list */
.qc-open-orders {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qc-open-orders-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.qc-open-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
}

.qc-open-order-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qc-no-orders { font-size: 0.82rem; padding: 4px 0; }

/* New customer fields */
.qc-new-customer-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Order fields */
.qc-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s;
}

.qc-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 96, 85, 0.1);
}

.qc-order-fields { display: flex; flex-direction: column; gap: 12px; }

/* Qty row */
.qc-qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qc-qty-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  width: 28px;
  flex-shrink: 0;
}

.qc-qty-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.qc-qty-btn:hover {
  background: rgba(14, 96, 85, 0.08);
  border-color: var(--accent);
}

.qc-qty-val {
  font-size: 1.4rem;
  font-weight: 700;
  min-width: 32px;
  text-align: center;
}

.qc-field-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  color: #c0392b;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.83rem;
}

/* Save row */
.qc-save-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qc-save-row.hidden { display: none; }

.qc-save-btn {
  flex: 1;
  padding: 14px;
  font-size: 1rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qc-reset-btn {
  padding: 14px 18px;
  font-size: 0.875rem;
  border-radius: 12px;
}

/* Confirmation */
.qc-confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  animation: qcConfirmIn 0.3s ease;
}

.qc-confirmation.hidden { display: none; }

@keyframes qcConfirmIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.qc-confirmation-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(14, 96, 85, 0.08);
  border: 1.5px solid rgba(14, 96, 85, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  width: 100%;
}

.qc-confirmation-icon { color: var(--highlight); flex-shrink: 0; }

.qc-confirmation-inner strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--highlight);
  margin-bottom: 4px;
}

.qc-confirmation-inner p { font-size: 0.85rem; margin: 0; }

/* Team home screen toggle */
.team-home-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  flex-wrap: wrap;
}

.team-home-info strong { font-size: 0.875rem; display: block; margin-bottom: 3px; }
.team-home-info span   { font-size: 0.78rem; }

.team-home-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.home-opt {
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}

.home-opt:hover { background: rgba(14, 96, 85, 0.06); color: var(--accent); }

.home-opt.active {
  background: var(--accent);
  color: white;
}
/* ── New 3-stage order drawer ────────────────────────────────────────────────── */

/* Stage progress */
.order-drawer-stages {
  display: flex; align-items: center;
  padding: 14px 26px 10px; border-bottom: 1px solid var(--line);
  flex-shrink: 0; gap: 0;
}
.od-stage {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted); flex-shrink: 0;
}
.od-stage.active   { color: var(--accent); }
.od-stage.complete { color: var(--muted); }
.od-stage-num {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
}
.od-stage.active   .od-stage-num { border-color: var(--accent); color: var(--accent); background: rgba(188,95,50,0.08); }
.od-stage.complete .od-stage-num { border-color: var(--accent); background: var(--accent); color: white; }
.od-stage-line { flex: 1; height: 1px; background: var(--line); margin: 0 8px; }

/* Stage panels */
.od-stage-panel { padding: 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.od-stage-panel.hidden { display: none; }
.od-stage-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto;
}
.od-stage-error {
  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25);
  color: #c0392b; border-radius: 8px; padding: 8px 12px; font-size: 0.82rem;
}
.od-field { display: flex; flex-direction: column; gap: 5px; }
.od-field label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.od-field input, .od-field textarea, .od-field select {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.875rem;
  transition: border-color 0.15s;
}
.od-field input:focus, .od-field textarea:focus, .od-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(188,95,50,0.08);
}
.od-field-error {
  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25);
  color: #c0392b; border-radius: 8px; padding: 7px 11px; font-size: 0.8rem;
}

/* Stage 1 — customer search */
.od-search-row { display: flex; gap: 8px; }
.od-search-row input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.875rem;
}
.od-search-row input:focus { outline: none; border-color: var(--accent); }
.od-customer-results {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: -6px;
}
.od-customer-results.hidden { display: none; }
.od-selected-customer.hidden { display: none; }
.od-customer-selected-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: rgba(14,96,85,0.05);
  border: 1.5px solid rgba(14,96,85,0.25); border-radius: 12px;
}
.od-cust-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(14,96,85,0.15); color: var(--highlight);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 800; flex-shrink: 0;
}
.od-cust-info { flex: 1; min-width: 0; }
.od-cust-info strong { display: block; font-size: 0.9rem; }
.od-cust-info span   { font-size: 0.78rem; }
.od-new-customer { display: flex; flex-direction: column; gap: 12px; }
.od-new-customer.hidden { display: none; }
.od-new-customer-header { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.od-save-new-customer-btn { align-self: flex-start; }
.lookup-option-new { background: rgba(188,95,50,0.04); font-style: italic; }

/* Stage 2 — items */
.od-items-list { display: flex; flex-direction: column; gap: 8px; }
.od-items-empty p { font-size: 0.83rem; color: var(--muted); text-align: center; padding: 12px 0; }
.od-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.5);
}
.od-item-row-info { flex: 1; min-width: 0; }
.od-item-row-info strong { display: block; font-size: 0.875rem; }
.od-item-row-info span   { font-size: 0.75rem; }
.od-item-row-actions { display: flex; align-items: center; gap: 8px; }
.od-item-remove-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(192,57,43,0.3);
  background: transparent; color: #c0392b; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.od-add-item-form {
  background: rgba(255,255,255,0.4); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.od-add-item-header strong { font-size: 0.875rem; }
.od-qty-row { display: flex; align-items: center; gap: 10px; }
.od-qty-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.od-qty-btn:hover { background: var(--line); }
.od-qty-val { font-size: 1rem; font-weight: 700; min-width: 24px; text-align: center; }

/* Group picker */
.od-group-picker { border-top: 1px solid var(--line); padding-top: 12px; }
.od-group-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: var(--muted);
  font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.od-group-toggle:hover { color: var(--accent); }
.od-group-panel { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.od-group-panel.hidden { display: none; }
.od-group-select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.875rem;
}
.od-group-checklist { display: flex; flex-direction: column; gap: 8px; }
.od-group-checklist.hidden { display: none; }
.od-group-item-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; cursor: pointer; }
.od-group-add-btn.hidden { display: none; }

/* Stage 3 — review */
.od-review-section { display: flex; flex-direction: column; gap: 6px; }
.od-review-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.od-review-label-row { display: flex; justify-content: space-between; align-items: center; }
.od-review-customer { }
.od-review-customer-row strong { display: block; font-size: 0.9rem; }
.od-review-customer-row span   { font-size: 0.8rem; }
.od-review-items { display: flex; flex-direction: column; gap: 6px; }
.od-review-item-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.875rem; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.od-review-item-row:last-child { border-bottom: none; }
.od-description-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.875rem; resize: vertical;
}
.od-description-input:focus { outline: none; border-color: var(--accent); }
.od-review-id {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; padding: 10px 0; border-top: 1px solid var(--line);
}
.od-review-id-val { font-family: monospace; font-weight: 700; color: var(--accent); }

/* Edit mode */
.od-edit-section { display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.od-edit-section:last-of-type { border-bottom: none; }
.od-edit-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.od-edit-label-row { display: flex; justify-content: space-between; align-items: center; }
.od-edit-select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.82rem;
}
.od-edit-status-row { display: flex; align-items: center; gap: 12px; }
.od-edit-item-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
}
.od-edit-item-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.od-edit-item-fields input {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.82rem;
}
.od-edit-item-qty-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.od-edit-qty-val { min-width: 20px; text-align: center; font-weight: 700; }
.od-edit-arrived-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; cursor: pointer; }
.od-edit-remove { align-self: flex-start; margin-top: 4px; }
/* ── API Access Settings Panel ──────────────────────────────────────────────── */

.api-key-form {
  background: rgba(255,255,255,0.5); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px; margin: 16px 0;
}
.api-key-form.hidden { display: none; }
.api-key-form-inner { display: flex; flex-direction: column; gap: 14px; }
.api-key-form-inner label { font-size: 0.8rem; font-weight: 600; color: var(--muted); display: block; margin-bottom: 5px; }
.api-key-form-inner input,
.api-key-form-inner select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: 0.875rem;
}
.api-key-form-actions { display: flex; gap: 10px; }

.api-key-reveal { margin: 16px 0; }
.api-key-reveal.hidden { display: none; }
.api-key-reveal-banner {
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
  color: #92400e; border-radius: 10px; padding: 10px 14px;
  font-size: 0.83rem; font-weight: 600; margin-bottom: 10px;
}
.api-key-display-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
}
.api-key-value {
  flex: 1; font-family: monospace; font-size: 0.82rem;
  word-break: break-all; color: var(--ink);
}

.api-keys-table-wrap { overflow-x: auto; margin-top: 16px; }
.api-keys-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.api-keys-table th {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 8px 12px;
  border-bottom: 1px solid var(--line); text-align: left;
}
.api-keys-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.api-keys-table tr:last-child td { border-bottom: none; }
.api-keys-empty { text-align: center; padding: 24px; color: var(--muted); }

.scope-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 99px;
  display: inline-block;
}
.scope-read       { background: rgba(14,96,85,0.1);  color: var(--highlight); }
.scope-read_write { background: rgba(59,130,246,0.1);  color: #1d4ed8; }
.scope-full       { background: rgba(188,95,50,0.1);   color: var(--accent); }

.api-limits-panel { margin-top: 0; }
.api-limits-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.api-limits-table th {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 8px 0 6px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.api-limits-table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.api-limits-table tr:last-child td { border-bottom: none; }

/* ── API Docs page ───────────────────────────────────────────────────────────── */

.api-docs-content { display: flex; flex-direction: column; gap: 0; }

.api-doc-shell { max-width: 800px; }

.api-doc-header { margin-bottom: 20px; }
.api-doc-header h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 4px; }
.api-doc-header p  { color: var(--muted); }

.section-card {
  background: var(--surface, rgba(255,255,255,0.6));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; margin-bottom: 18px;
}

.section-card h2 {
  font-size: 1.1rem; font-weight: 700; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.section-card h3 { font-size: 0.875rem; font-weight: 700; margin: 16px 0 8px; }
.section-card p  { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin-bottom: 10px; }

.section-card pre {
  background: #1e1e2e; color: #cdd6f4; padding: 16px 18px;
  border-radius: 12px; overflow-x: auto; font-size: 0.8rem; line-height: 1.65;
  margin: 8px 0; tab-size: 2;
}
.section-card pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.section-card table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 8px 0; }
.section-card th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left;
}
.section-card td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.section-card tr:last-child td { border-bottom: none; }

.method {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 800; margin-right: 6px; flex-shrink: 0;
}
.get    { background: rgba(14,96,85,0.12); color: #0e6055; }
.post   { background: rgba(188,95,50,0.12);  color: var(--accent); }
.put    { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.patch  { background: rgba(168,85,247,0.12); color: #7c3aed; }
.delete { background: rgba(239,68,68,0.12);  color: #b91c1c; }

.endpoint-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.endpoint-row:last-of-type { border-bottom: none; }
.endpoint-path { font-family: monospace; font-size: 0.875rem; font-weight: 600; }
.endpoint-desc { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.scope-pill {
  display: inline-block; padding: 1px 7px; border-radius: 99px;
  font-size: 0.7rem; font-weight: 700; background: rgba(188,95,50,0.08); color: var(--accent);
  margin-left: 6px;
}
/* ── Leaption sidebar logo ──────────────────────────────────────────────────── */

.sidebar-logo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  color: var(--accent);
}

.sidebar-logo-btn svg {
  flex-shrink: 0;
  color: var(--accent);
}

.sidebar-brand-wordmark {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Hide wordmark when sidebar collapsed */
.sidebar-collapsed .sidebar-brand-wordmark { display: none; }

/* ── Auth form field styling — matches marketing site modal ─────────────────── */

.sign-in-form input,
.sign-up-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1.5px solid rgba(28,42,43,0.14);
  background: white;
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sign-in-form input:focus,
.sign-up-form input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,96,85,0.1);
}

.sign-in-form label,
.sign-up-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0;
}

/* Auth responsive */
@media (max-width: 768px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { padding: 32px 20px; }
}

/* ── Leaption primary button — teal instead of terracotta ───────────────────── */

.primary-button {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)) !important;
  color: white !important;
  border: none !important;
}

.primary-button:hover {
  background: var(--accent-light) !important;
  transform: translateY(-1px);
}

.auth-submit {
  margin-top: 8px;
  padding: 0.85rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 8px;
  width: 100%;
}
/* ── Demo card — updated for Leaption palette ───────────────────────────────── */

.demo-card {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(14,96,85,0.15);
  background: rgba(14,96,85,0.06);
  color: var(--ink);
  font-size: 0.85rem;
}

.demo-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
}

.demo-card code {
  font-family: monospace;
  font-size: 0.82rem;
  background: rgba(14,96,85,0.1);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--teal-dark);
}
/* ── Priority queue — fixed height scrollable list ──────────────────────────── */

#priority-list {
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#priority-list::-webkit-scrollbar { width: 4px; }
#priority-list::-webkit-scrollbar-track { background: transparent; }
#priority-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* ── Dashboard card action buttons — compact single row ─────────────────────── */

.dashboard-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.small-button {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  white-space: nowrap;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.dashboard-credit-header-copy {
  min-width: 0;
  flex: 1;
}

/* ── Orders table — 6-column layout ─────────────────────────────────────────── */

#orders-view table {
  table-layout: fixed;
  width: 100%;
}

#orders-view table th:nth-child(1) { width: 20%; } /* Customer */
#orders-view table th:nth-child(2) { width: 22%; } /* Order */
#orders-view table th:nth-child(3) { width: 12%; } /* Status */
#orders-view table th:nth-child(4) { width: 10%; } /* Days Open */
#orders-view table th:nth-child(5) { width: 14%; } /* Notifications */
#orders-view table th:nth-child(6) { width: 22%; } /* Actions */

#orders-view table td {
  vertical-align: middle;
}

/* Show-collected toggle sits to the right of the filter pills. */
.orders-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.orders-show-collected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 0.875rem;
  color: var(--muted);
}
.orders-show-collected input[type="checkbox"] {
  cursor: pointer;
}
.orders-show-collected:hover { color: var(--text); }

/* Sortable column header — used by Days Open. */
.th-sortable { cursor: pointer; user-select: none; }
.th-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.th-sort-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.55;
}
.th-sortable[aria-sort="none"] .th-sort-arrow {
  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  height: 6px;
  width: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  opacity: 0.3;
}
.th-sortable[aria-sort="ascending"] .th-sort-arrow {
  border-bottom: 5px solid currentColor;
  border-top: 0;
  opacity: 0.95;
}
.th-sortable[aria-sort="descending"] .th-sort-arrow {
  border-top: 5px solid currentColor;
  border-bottom: 0;
  opacity: 0.95;
}
.col-days-open { font-variant-numeric: tabular-nums; }

/* Generic warning pill — replaces the older `.status-overdue` reuse on the
   credit-forecast badge once Overdue was removed from order statuses. */
.status-warning {
  background: rgba(220, 38, 38, 0.10);
  color: #b91c1c;
}

/* ── Orders row-actions cluster ────────────────────────────────────────────── */

/* Layout: primary icon buttons on the left, ⋮ menu pinned right via
   margin-left: auto. Never wraps — narrow rows still keep the cluster
   on a single line because each button is a fixed-size icon target. */
.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  width: 100%;
}
.row-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.row-action-btn:hover {
  background: var(--hover, rgba(14, 96, 85, 0.08));
  border-color: var(--accent);
  color: var(--accent);
}
.row-action-btn--collect {
  border-color: var(--accent);
  color: var(--accent);
}
.row-action-btn--collect:hover {
  background: var(--accent);
  color: #fff;
}
.row-action-btn--reopen {
  border-color: rgba(14, 96, 85, 0.3);
  color: var(--accent);
}

.row-action-menu {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
.row-action-trigger {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.row-action-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}
.row-action-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 4px;
  z-index: 30;
}
.row-action-popover.hidden { display: none; }
.row-action-popover-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.row-action-popover-item:hover { background: rgba(0, 0, 0, 0.05); }
.row-action-popover-item--danger { color: #b91c1c; }
.row-action-popover-item--danger:hover { background: rgba(220, 38, 38, 0.08); }

/* ── Customer table — actions column alignment ──────────────────────────────── */

.customer-actions .secondary-button {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 6px 10px;
}

/* ── Todos table — consistent row height ────────────────────────────────────── */

.todos-table td {
  vertical-align: middle;
  padding: 10px 12px;
}

.todos-table .todo-name-cell {
  max-width: 280px;
  word-break: break-word;
}

/* ── Settings audit panel link ───────────────────────────────────────────────── */

#settings-goto-audit {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Todo status text — plain, no pill background ───────────────────────────── */
.todo-status-text {
  font-size: 0.82rem;
  font-weight: 600;
}
.todo-status-open     { color: var(--muted); }
.todo-status-overdue  { color: #c0392b; }
.todo-status-complete { color: var(--teal); }

/* ── Todo table — fix due date and status column alignment ──────────────────── */
.todo-table td {
  vertical-align: middle !important;
  padding: 12px 10px !important;
}

.todo-due-cell {
  font-size: 0.82rem;
  white-space: nowrap;
  vertical-align: middle !important;
}

.todo-due-overdue-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c0392b;
  font-weight: 600;
}

.todo-status-cell {
  vertical-align: middle !important;
}
/* ── Dashboard button system — two consistent sizes ─────────────────────────── */

/* Text link — "View all", "Open orders" — same size as surrounding text */
.dash-link-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.12s;
  text-decoration: none;
}
.dash-link-btn:hover { color: var(--accent); }

/* Action button — "Add Order", "New Campaign", "Manage credits", "Add Customer" */
.dash-action-btn {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: white;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s, transform 0.12s;
  flex-shrink: 0;
}
.dash-action-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
/* Panel header — keep link and action on same row, right-aligned */
.panel-header .dashboard-card-actions,
.dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Banner credit wallet chip ───────────────────────────────────────────────── */

.banner-credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(14,96,85,0.08);
  border: 1.5px solid rgba(14,96,85,0.2);
  border-radius: 99px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.banner-credit-chip:hover {
  background: rgba(14,96,85,0.14);
  border-color: rgba(14,96,85,0.35);
}

.banner-credit-label {
  color: var(--muted);
  font-weight: 500;
}

.banner-credit-balance {
  font-weight: 800;
  color: var(--teal);
  font-size: 0.82rem;
}
/* Hide old sidebar wallet card if still present */
.wallet-card { display: none !important; }

/* ── Icon-only banner button ─────────────────────────────────────────────────── */
.icon-only-btn {
  padding: 6px 8px !important;
  min-width: unset;
}
.icon-only-btn span { display: none; }

/* ── Sidebar logo — expanded vs collapsed states ────────────────────────────── */

/* Expanded: show full logo, hide compact */
.sidebar-logo-full    { display: block; }
.sidebar-logo-compact { display: none; }

/* Collapsed: hide full logo, show compact frog only */
.app-shell.sidebar-collapsed .sidebar-logo-full    { display: none; }
.app-shell.sidebar-collapsed .sidebar-logo-compact { display: block; }

/* Centre the compact icon in the collapsed brand area */
.app-shell.sidebar-collapsed .sidebar-logo-btn {
  justify-content: center;
  padding: 4px;
}

/* ── User profile floating menu ─────────────────────────────────────────────── */
.sidebar-user-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 280px;
  background: var(--panel-strong, #ffffff);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 6px;
  overflow: hidden;
}
#sidebar-user-menu.hidden { display: none !important; }
#sidebar-user-menu:not(.hidden) { display: block !important; }

.sum-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; }
.sum-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal, #0e6055), var(--teal-dark, #0a4a42));
  color: white; font-size: 0.85rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: inherit;
}
.sum-identity strong { display: block; font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.sum-identity span { font-size: 0.75rem; color: var(--muted); }
.sum-divider { height: 1px; background: var(--line); margin: 4px 0; }
.sum-group { padding: 4px 0; }
.sum-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border: none;
  background: transparent; border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; font-weight: 500;
  color: var(--ink); cursor: pointer; text-align: left;
  transition: background 0.1s;
}
.sum-item svg { color: var(--muted); flex-shrink: 0; }
.sum-item:hover { background: rgba(0,0,0,0.04); }
.sum-item:hover svg { color: var(--ink); }
.sum-item-trailing span:first-of-type { flex: 1; }
.sum-theme-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  background: rgba(0,0,0,0.05); padding: 2px 7px;
  border-radius: 99px; flex-shrink: 0;
}
.sum-chevron { color: var(--muted) !important; margin-left: 2px; }
.sum-item-danger { color: #dc2626; }
.sum-item-danger svg { color: #dc2626; }
.sum-item-danger:hover { background: rgba(220,38,38,0.06); }

/* ── Auth brand panel: white text on dark green background ──────────────────── */
.auth-brand-panel h1,
.auth-brand-panel h2,
.auth-brand-panel p,
.auth-brand-panel span,
.auth-brand-panel li,
.auth-tagline,
.auth-feature,
.auth-feature span,
.auth-feature-list {
  color: rgba(255, 255, 255, 0.9) !important;
}
.auth-brand-panel .feature-icon {
  color: rgba(255, 255, 255, 0.7);
}
.auth-brand { position: relative; z-index: 1; }

/* ── Sidebar user menu: fixed position above avatar button ──────────────────── */
#sidebar-user-menu:not(.hidden) {
  bottom: 70px;
  left: 12px;
}

/* ── Topbar action buttons: match sidebar nav-link hover style ──────────────── */
.topbar-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-action-btn:hover {
  background: rgba(14, 96, 85, 0.10);
  color: #0e6055;
  border-color: rgba(14, 96, 85, 0.2);
}
.topbar-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Topbar store selector: seamless, no background or avatar ───────────────── */
.topbar-store-btn {
  background: transparent;
  border-color: transparent;
  padding: 5px 8px;
  width: auto;
  gap: 6px;
}
.topbar-store-btn:hover {
  background: rgba(14, 96, 85, 0.07);
  border-color: rgba(14, 96, 85, 0.15);
}
.topbar-store-btn .store-selector-avatar {
  display: none;
}
.topbar-store-btn .store-selector-name {
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Product item code badge ────────────────────────────────────────────────── */
.item-code-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: monospace;
  color: var(--muted);
  background: var(--line);
  border-radius: 4px;
}

/* ── Icon-only action buttons for tables ────────────────────────────────────── */
.icon-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.icon-action-btn:hover {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent);
  border-color: rgba(14, 96, 85, 0.2);
}
.icon-action-btn.danger:hover {
  background: rgba(220, 38, 38, 0.07);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}
.customer-actions,
.product-group-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Credits chip in topbar — matches topbar-action-btn style ───────────────── */
.topbar-credits-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topbar-credits-chip:hover {
  background: rgba(14, 96, 85, 0.10);
  color: #0e6055;
  border-color: rgba(14, 96, 85, 0.2);
}

/* ── Documentation view layout ──────────────────────────────────────────────── */
.doc-guide {
  display: none;
}
.doc-guide.active {
  display: block;
}

.doc-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}
.doc-headings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 20px;
}
.doc-heading-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.doc-heading-link:hover,
.doc-heading-link.active {
  background: rgba(14, 96, 85, 0.10);
  color: var(--accent);
}
.doc-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.doc-section {
  display: none;
}
.doc-section.active {
  display: block;
}
.doc-section h3 { margin: 0 0 8px; }
.doc-section h4 { margin: 20px 0 6px; font-size: 0.95rem; }
.doc-section p { margin: 0 0 10px; line-height: 1.65; }
.doc-section ol, .doc-section ul { padding-left: 20px; line-height: 1.8; }
.doc-code {
  background: rgba(28, 42, 43, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: var(--accent-deep);
  overflow-x: auto;
  margin: 8px 0 14px;
  white-space: pre;
}
code {
  background: rgba(28, 42, 43, 0.06);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Courier New', monospace;
  font-size: 0.85em;
  color: var(--accent-deep);
}

/* ── Help drawer items ──────────────────────────────────────────────────────── */
.help-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.help-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.help-item strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: var(--ink);
}
.help-item p {
  margin: 0;
  line-height: 1.55;
}
/* ── Orders table: right-aligned columns ─────────────────────────────────── */
.th-right,
.td-right {
  text-align: right;
}

/* ── Order group tags (multi-group display in table) ────────────────────── */
.order-group-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.order-group-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--accent-rgb, 28, 87, 78), 0.1);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb, 28, 87, 78), 0.2);
  white-space: nowrap;
}

/* ── Group pill picker (multi-select in order drawer) ───────────────────── */
.group-pill-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 2px;
}
.group-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.group-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.group-pill.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Collapsible sections in order drawer ───────────────────────────────── */
.collapsible-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: var(--panel);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  text-align: left;
}
.collapsible-header:hover {
  background: rgba(0,0,0,0.03);
}
.collapsible-chevron {
  display: inline-block;
  font-size: 0.75rem;
  transition: transform 0.2s;
  color: var(--muted);
}
.collapsible-section.expanded .collapsible-chevron {
  transform: rotate(180deg);
}
.collapsible-body {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.collapsible-section.expanded .collapsible-body {
  display: block;
}

/* ── Manual intake row (barcode / name / qty / add) ─────────────────────── */
.manual-intake-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.manual-intake-row input {
  flex: 1;
  min-width: 80px;
}
.manual-intake-row input.intake-qty {
  flex: 0 0 64px;
}
.manual-intake-row .secondary-button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Checklist items ─────────────────────────────────────────────────────── */
.checklist-instruction {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.checklist-group-header {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.checklist-group-header:first-child {
  margin-top: 0;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.checklist-item:last-child {
  border-bottom: none;
}
.checklist-item input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.checklist-item span {
  line-height: 1.45;
}

/* ── Orders table row hover ──────────────────────────────────────────────── */
.order-row:hover td {
  background: rgba(0,0,0,0.025);
}

/* ── Group multiselect dropdown ─────────────────────────────────────────── */
.group-multiselect {
  position: relative;
  width: 100%;
}
.group-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.group-multiselect-trigger:hover {
  border-color: var(--accent);
}
.group-multiselect-trigger svg {
  flex-shrink: 0;
  opacity: 0.5;
}
.group-multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.group-multiselect-dropdown.hidden {
  display: none;
}
.group-multiselect-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.group-multiselect-option:hover {
  background: var(--hover, rgba(0,0,0,0.04));
}
.group-multiselect-option input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

/* ── Scrollable order drawer form ───────────────────────────────────────── */
.drawer-form-scroll {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
}

/* ── Section dividers inside the order drawer ───────────────────────────── */
.order-drawer-divider {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 20px;
}

/* ── Drawer section heading ─────────────────────────────────────────────── */
.drawer-section-head {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ── Order drawer tab navigation ────────────────────────────────────────────── */
.order-drawer-tabs {
  display: flex;
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.order-drawer-tab {
  flex: 1;
  padding: 11px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}
.order-drawer-tab:hover {
  color: var(--text);
}
.order-drawer-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Order drawer tab panels ────────────────────────────────────────────────── */
.order-drawer-panel {
  display: none;
  flex-direction: column;
}
.order-drawer-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

/* ── Form group spacing (Item 1: 24px between groups, 8px label→field) ─────── */
.form-group {
  margin-bottom: 24px;
}
.form-group:last-child {
  margin-bottom: 0;
}
.form-group > label,
.form-group > .field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.form-group > input,
.form-group > select,
.form-group > textarea {
  width: 100%;
}

/* ── Solid (non-translucent) dropdowns (Item 2) ─────────────────────────────── */
select,
.group-multiselect-dropdown {
  background-color: #ffffff !important;
}
/* ── Staging table (Items 3–5) ──────────────────────────────────────────────── */
.staging-table-header {
  display: grid;
  grid-template-columns: 1fr 64px 36px;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.staging-row {
  display: grid;
  grid-template-columns: 1fr 64px 36px;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
}
.staging-row:last-child {
  border-bottom: none;
}
.staging-row-name {
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staging-manual .staging-row-name {
  font-style: italic;
}
.staging-barcode {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 4px;
}
.staging-qty {
  width: 100%;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  text-align: center;
}
.staging-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.staging-remove:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

/* ── Clean checklist rows (Items 8–9) ───────────────────────────────────────── */
.checklist-row {
  display: grid;
  grid-template-columns: 24px 1fr 60px 28px;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.checklist-row:last-child {
  border-bottom: none;
}
.checklist-received-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.checklist-received-cb {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}
.checklist-item-name {
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checklist-barcode {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 4px;
}
.checklist-qty-input {
  width: 100%;
  padding: 3px 5px;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  text-align: center;
}
.checklist-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s, color 0.1s;
}
.checklist-delete-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

/* ── Compact customer search overlay (Item 11) ──────────────────────────────── */
.lookup-field {
  position: relative;
}
.lookup-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 300;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-height: 180px;
  overflow-y: auto;
}

/* ── Order drawer 3-row layout: header | tabs | scrollable form (which now
   contains the action buttons at its very bottom). Removed the previous
   4th `auto` row used for a fixed footer because the Cancel/Save row was
   eating ~half the viewport on mobile. Buttons now scroll with the form. */
#order-drawer {
  grid-template-rows: auto auto 1fr;
  padding: 28px 28px 0;
  gap: 0;
}
#order-drawer .drawer-header {
  margin-bottom: 20px;
}
#order-drawer .order-drawer-tabs {
  /* Extend edge-to-edge past the container padding */
  margin: 0 -28px;
  padding: 0 28px;
}
#order-drawer form.drawer-form,
#order-drawer form.drawer-form-scroll {
  /* Force the order form to a normal block element. The default
     `.drawer-form-scroll` class uses `display: flex; flex-direction: column`
     so its old fixed-footer sibling (now removed) could sit at the bottom.
     With the footer now INSIDE the form, the flex layout was making the
     active panel (`flex: 1 1 0`) expand to fill the form, which pushed the
     buttons to the visible bottom of the viewport even when the panel
     content above them was shorter — they appeared mid-page floating.
     Block layout lets every child (panels + footer) stack by its natural
     height so the buttons sit AFTER the active panel's content, scrolling
     with it. */
  display: block !important;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 0;
}
/* Cancel the active panel's flex sizing inside this block-mode form. */
#order-drawer .order-drawer-panel.active {
  flex: none;
  min-height: 0;
}

/* Panels: just block, let the form scroll */
.order-drawer-panel {
  display: none !important;
}
.order-drawer-panel.active {
  display: block !important;
  padding-top: 20px;
}

/* Checklist tab inner padding */
.order-tab-checklist-inner {
  padding-bottom: 20px;
}

/* ── Fixed footer bar ───────────────────────────────────────────────────────── */
.order-drawer-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line, #e5e7eb);
  padding: 16px 0 20px;
  background: transparent;
}
.order-drawer-footer .auth-error {
  margin-bottom: 8px;
}

/* ── Collapsible order sections ─────────────────────────────────────────────── */
.order-section {
  border: 1px solid var(--line, rgba(30, 20, 10, 0.1));
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: visible; /* allow absolutely-positioned dropdowns (lookup, multiselect) to escape */
  background: rgba(255, 255, 255, 0.62); /* card background, same as .drawer-section */
}
.order-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line, rgba(30, 20, 10, 0.08));
  border-radius: 10px 10px 0 0;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text, #111827);
  transition: background 0.15s;
}
/* When section is collapsed, hide the bottom border and round all corners */
.order-section:not(.open) .order-section-header {
  border-bottom: none;
  border-radius: 10px;
}
.order-section-header:hover {
  background: rgba(0, 0, 0, 0.025);
}
.order-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-section-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.order-section.open .order-section-chevron {
  transform: rotate(0deg);
}
.order-section-body {
  display: none;
  padding: 16px 16px 4px;
}
.order-section.open .order-section-body {
  display: block;
}

/* Ensure form-group spacing inside sections */
.order-section-body .form-group {
  margin-bottom: 16px;
}
.order-section-body .form-group:last-child {
  margin-bottom: 0;
}

/* Mode toggle styled consistently */
.order-section-body .mode-toggle {
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL TABLE STANDARDISATION
   Master template: Product Groups table padding/height/spacing applied
   universally. All columns left-aligned; right-align only via explicit class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Left-align every header and cell by default */
thead th { text-align: left !important; }
tbody td  { text-align: left !important; }

/* Preserve explicit right-align overrides */
.th-right { text-align: right !important; }
.td-right  { text-align: right !important; }

/* All table rows are clickable by default */
tbody tr  { cursor: pointer; }

/* ── Universal hover: pale teal-green tint ──────────────────────────────── */
tbody tr:hover {
  background: var(--hover) !important;
  position: relative;
}

/* ── Active / selected row (while a drawer is open for that row) ─────────── */
tbody tr.row-active {
  background: var(--row-active) !important;
}
tbody tr.row-active:hover {
  background: var(--row-active) !important;
}

/* ── Order table: order title + group micro-chips ───────────────────────── */
.order-title-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.order-micro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.order-micro-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(14, 96, 85, 0.09);
  color: var(--accent);
  white-space: nowrap;
}

/* ── Delivery table: icon-only action buttons ───────────────────────────── */
.scan-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.scan-icon-btn:hover {
  background: var(--hover, rgba(0, 0, 0, 0.06));
  color: var(--text);
}
.scan-icon-btn.danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.3);
}
.scan-session-actions { display: flex; gap: 6px; align-items: center; }
/* =========================================================
   DASHBOARD COMMAND CENTER
   ========================================================= */

/* Panel layout */
.command-center-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.command-center-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

/* Glance chips row — replaces old glance strip + filter pills */
.command-glance-row {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.command-glance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 99px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.command-glance-chip strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: inherit;
}

.command-glance-chip span {
  font-size: 0.78rem;
}

/* All chip (no count) */
.command-glance-chip[data-dashboard-filter="All"] {
  font-size: 0.82rem;
  font-weight: 600;
}

/* Active / hover states */
.command-glance-chip.active,
.command-glance-chip:hover {
  border-color: var(--accent);
  background: rgba(14, 96, 85, 0.07);
  color: var(--accent);
}

/* Colour variants */
.command-glance-chip.chip-pending strong  { color: #92400e; }
.command-glance-chip.chip-pending.active,
.command-glance-chip.chip-pending:hover  {
  border-color: #d97706;
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
}

.command-glance-chip.chip-arrived strong  { color: var(--highlight, #1f7a6e); }
.command-glance-chip.chip-arrived.active,
.command-glance-chip.chip-arrived:hover  {
  border-color: var(--highlight, #1f7a6e);
  background: rgba(14, 96, 85, 0.07);
  color: var(--highlight, #1f7a6e);
}

/* Search + bulk actions row */
.command-controls-row {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.command-controls-row input[type="search"] {
  flex: 1;
  min-width: 0;
}

/* Bulk selection bar */
.command-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(14, 96, 85, 0.06);
  border-bottom: 1px solid rgba(14, 96, 85, 0.12);
  flex-shrink: 0;
}

.command-bulk-bar.hidden { display: none; }

.bulk-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.command-bulk-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stack container */
.command-stack {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Section headers inside the stack */
.command-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 4px 6px;
  margin-top: 4px;
}

.command-section-header:first-child { margin-top: 0; }

/* Command card */
.command-card {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  margin-bottom: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
}

.command-card:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
  transform: translateY(-1px);
}

/* Left colour bar */
.command-card-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: 0;
}

.bar-pending  { background: #d97706; }
.bar-arrived  { background: var(--highlight, #1f7a6e); }

/* Card body */
.command-card-body {
  flex: 1;
  padding: 11px 14px 11px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Bulk checkbox */
.command-card-check {
  display: none;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.bulk-mode .command-card-check { display: block; }

/* Context text */
.command-card-context {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.command-card-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-card-meta {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action button on card */
.command-card-action {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.command-card-action:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Card exit animation */
@keyframes cardDismiss {
  from { opacity: 1; transform: translateX(0);   max-height: 80px; }
  to   { opacity: 0; transform: translateX(40px); max-height: 0;   margin-bottom: 0; padding: 0; }
}

.command-card.dismissing {
  animation: cardDismiss 0.35s ease forwards;
  pointer-events: none;
  overflow: hidden;
}

/* ==========================================================================
   Settings → Shop & Team panel: team table + permissions
   ========================================================================== */
.team-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

.team-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.team-table th,
.team-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.team-table tbody tr:last-child td {
  border-bottom: 0;
}

.team-actions-col {
  width: 220px;
}

.team-actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.team-row-action {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink, #2a2018);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.team-row-action:hover {
  background: rgba(14, 96, 85, 0.08);
  border-color: rgba(14, 96, 85, 0.35);
}

.team-row-action.team-row-danger:hover {
  background: rgba(188, 95, 50, 0.08);
  border-color: rgba(188, 95, 50, 0.4);
  color: #8a3f1f;
}

.team-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
}

.permissions-stack {
  display: grid;
  gap: 20px;
}

.permissions-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .team-actions-cell {
    flex-direction: column;
    align-items: stretch;
  }
  .team-row-action {
    text-align: center;
  }
}

/* ── Prompt 4 — Notification engine UI surfaces ─────────────────────────────
   Three separate elements live here:
     1. .consent-optout-banner    — top-of-customer-drawer SMS opt-out alert
     2. .consent-history-list     — chronological consent events
     3. .notification-log-list    — per-order dispatch attempts
     4. .modal/.modal-card        — re-enable SMS confirmation modal
   All scoped to keep them out of the way of unrelated tables/drawers. */

.consent-optout-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(171, 59, 45, 0.08);
  border: 1px solid rgba(171, 59, 45, 0.30);
  border-radius: 12px;
}
.consent-optout-banner-body {
  display: flex; align-items: flex-start; gap: 12px;
  flex: 1; min-width: 0;
}
.consent-optout-banner-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(171, 59, 45, 0.15);
  color: #ab3b2d;
  flex-shrink: 0;
}
.consent-optout-banner strong { display: block; font-size: 0.95rem; color: #1c2a2b; }
.consent-optout-banner .muted { margin: 2px 0 0; font-size: 0.82rem; }
.consent-reenable-btn { flex-shrink: 0; }

.consent-history-section .consent-history-list {
  list-style: none;
  margin: 0; padding: 0;
}
.consent-history-list li {
  position: relative;
  padding: 10px 12px 10px 28px;
  margin: 0 0 8px;
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.06);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
}
.consent-history-list li::before {
  content: "";
  position: absolute;
  left: 12px; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted, #5f6d69);
}
.consent-history-list li[data-action="opt-out"]::before { background: #ab3b2d; }
.consent-history-list li[data-action="opt-in"]::before  { background: #0e6055; }
.consent-history-list .consent-history-when { display: block; font-weight: 600; color: #1c2a2b; margin-bottom: 2px; }
.consent-history-list .consent-history-meta { color: var(--muted, #5f6d69); font-size: 0.78rem; }
.consent-history-list .consent-history-reason {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--muted, #5f6d69);
}

/* Per-order notification log — same visual rhythm as consent history but
   coloured by status. Read-only; click handlers intentionally absent. */
.notification-log-section .notification-log-list {
  list-style: none;
  margin: 0; padding: 0;
}
.notification-log-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.06);
  border-radius: 8px;
  font-size: 0.85rem;
}
.notification-log-status {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}
.notification-log-status[data-status="sent"]          { background: rgba(14, 96, 85, 0.12); color: #0e6055; }
.notification-log-status[data-status="failed"]        { background: rgba(171, 59, 45, 0.12); color: #ab3b2d; }
.notification-log-status[data-status="undeliverable"] { background: rgba(28, 42, 43, 0.08); color: var(--muted, #5f6d69); }
.notification-log-body { flex: 1; min-width: 0; }
.notification-log-meta { color: var(--muted, #5f6d69); font-size: 0.78rem; margin-top: 2px; }
.notification-log-reason { color: var(--muted, #5f6d69); font-style: italic; margin-top: 2px; word-wrap: break-word; }
.notification-log-empty { font-size: 0.85rem; }

/* Re-enable SMS modal — minimal centred card. The drawer-form's existing
   `.auth-error` style handles validation messaging. */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 42, 43, 0.45);
  z-index: 90;
}
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 91;
  padding: 24px;
}
.modal-card {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(28, 42, 43, 0.25);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(28, 42, 43, 0.08);
}
.modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.modal-body { padding: 16px 20px; }
.modal-body label { display: block; margin: 0 0 6px; font-size: 0.85rem; font-weight: 600; }
.modal-body textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid rgba(28, 42, 43, 0.18);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}
.modal-body textarea:focus { outline: 2px solid rgba(14, 96, 85, 0.35); outline-offset: 1px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(28, 42, 43, 0.06);
}

/* ── Prompt 6 — Password reset surfaces ─────────────────────────────────────
   Just one tiny rule — the "Forgot password?" link sits between the password
   input and the Sign in button, so it needs slightly tighter top spacing
   and a right-aligned look so it reads as an action rather than another
   form caption. The Forgot panel and Reset panel re-use the existing
   .auth-panel / .auth-error / .password-rules styles already in the file. */
.auth-forgot-link {
  margin: 4px 0 8px;
  text-align: right;
  font-size: 0.82rem;
}

/* ── Drawer expand toggle (applies to ALL right-hand drawers) ─────────────
   Lets the user widen any side drawer when the default 720 px feels tight.
   The toggle button is injected by JS on page load so we don't have to
   touch every drawer's HTML. Each drawer gets the same widening behaviour
   and persists its own state under `leaption-drawer-expanded:<id>`. */

.drawer-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.drawer-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(28, 42, 43, 0.10);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted, #5f6d69);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-icon-button:hover {
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent, #0e6055);
}
/* Show the right icon for the right state. Generic — works on any drawer. */
.drawer-expand-toggle .drawer-collapse-icon { display: none; }
.drawer-expand-toggle[aria-pressed="true"] .drawer-expand-icon   { display: none; }
.drawer-expand-toggle[aria-pressed="true"] .drawer-collapse-icon { display: block; }

/* Animate width so the change feels intentional rather than jarring. */
.side-drawer { transition: width 0.18s ease; }
.side-drawer.is-expanded { width: min(1100px, 100%); }

/* ══════════════════════════════════════════════════════════════════════════
   Phase A — Edit panel restructure
   Tab 1 (Order Details) flattens its old `.order-section` accordions into
   plain section blocks. Tab 2 (Item Checklist) gains a visual hand-off
   between Product Capture (form inputs) and the arrival checklist
   (checkbox rows). Mobile fix for the Add Item Manually row stacks the
   inputs vertically so placeholders aren't clipped.
   ══════════════════════════════════════════════════════════════════════════ */

/* Flat (non-collapsible) section block used inside the Edit panel's Tab 1.
   Visually matches `.drawer-section` elsewhere in the app so the user
   doesn't perceive a different design language between drawers. */
.flat-section {
  border: 1px solid rgba(28, 42, 43, 0.08);
  border-radius: 10px;
  background: #ffffff;
  margin-bottom: 14px;
  padding: 16px 16px 4px;
}
.flat-section:last-child {
  margin-bottom: 0;
}
.flat-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text, #1c2a2b);
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0 0 12px;
  margin: 0;
  border-bottom: 1px solid rgba(28, 42, 43, 0.06);
}
.flat-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(14, 96, 85, 0.08);
  color: var(--accent, #0e6055);
  flex-shrink: 0;
}
.flat-section-body {
  padding: 12px 0 0;
}
.flat-section-body .form-group:last-child {
  margin-bottom: 0;
}

/* Visual divider between Product Capture and the checklist on Tab 2.
   The Product Capture section uses .order-section (existing collapsible
   styling). The .order-tab-checklist-inner that follows it gets a
   slightly inset background + a soft top border so the user perceives
   "this is where the items live, distinct from the inputs above". */
#order-tab-checklist > .order-tab-checklist-inner {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(28, 42, 43, 0.12);
}

/* ── Phase B — Full Capture stepper ───────────────────────────────────────
   Centered modal-card pattern on desktop (mirrors the delivery scanner
   overlay — translucent backdrop covers the screen, stepper sits centred
   inside). Mobile takes over the full viewport edge-to-edge. The shared
   chrome-hide rule —
   `body:has(.side-drawer:not(.hidden), .full-capture-stepper:not(.hidden))`
   — handles top bar / FAB / bottom nav on mobile. */

/* Backdrop — kept for the click-outside-to-close affordance, but the
   stepper's white background covers the entire viewport so the
   backdrop is never visible. r3 mirrors the Scan Delivery overlay
   pattern (.scanner-overlay). */
#full-capture-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 42, 43, 0.45);
  z-index: 80;
}
#full-capture-backdrop.hidden { display: none; }

/* Stepper — exact Scan Delivery overlay parity:
   the outer .full-capture-stepper is the white full-screen surface,
   and .fc-shell is a centred 800px column inside it that hosts the
   header / progress / body / footer (matching .scanner-overlay +
   .scanner-shell). */
.full-capture-stepper {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 81;
  display: flex;
  flex-direction: column;
  animation: fcFadeIn 0.2s ease;
}
.full-capture-stepper.hidden { display: none; }
@keyframes fcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fc-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* Inputs inside the existing-customer .lookup-field need to span the
   full width — without this, the relative-positioned wrapper leaves
   the input at its default browser width and the search bar looks
   narrower than the New Customer name field directly above. */
.full-capture-stepper .lookup-field { width: 100%; }
.full-capture-stepper .lookup-field input { width: 100%; box-sizing: border-box; }

/* Tighten the Email + Phone two-column row to match the gap used by
   the SMS Consent + Email Consent row directly below it (12px vs the
   default 18px). Without this override the consent boxes were a few
   px wider than Email/Phone, which read as a visual inconsistency. */
.full-capture-stepper .drawer-two-col { gap: 12px; }

/* Header — title row + progress bar. Matches Scan Delivery's header
   spacing (20px 0 16px) inside the centred shell. */
.fc-header {
  padding: 20px 0 16px;
  border-bottom: 1px solid rgba(28, 42, 43, 0.08);
  background: #ffffff;
  flex-shrink: 0;
}
.fc-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.fc-header-row h3 {
  margin: 0; font-size: 1.15rem; font-weight: 600;
}

/* Progress dots — connected by lines, current step is filled, prior steps
   are checkmarked, future steps are muted. Pure CSS state from `.active`
   and `.done` classes set by JS. */
.fc-progress {
  display: flex; align-items: center;
  list-style: none; padding: 0; margin: 0;
  gap: 0;
}
.fc-progress-step {
  flex: 1;
  display: flex; align-items: center; flex-direction: column;
  gap: 6px;
  position: relative;
  font-size: 0.78rem;
  color: var(--muted, #5f6d69);
}
.fc-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px;
  background: rgba(28, 42, 43, 0.12);
  z-index: 0;
}
.fc-progress-step.done:not(:last-child)::after {
  background: #0e6055;
}
.fc-progress-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(28, 42, 43, 0.08);
  color: var(--muted, #5f6d69);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.85rem;
  position: relative; z-index: 1;
  transition: background 0.15s, color 0.15s;
}
.fc-progress-step.active .fc-progress-dot {
  background: #0e6055; color: #ffffff;
}
.fc-progress-step.done .fc-progress-dot {
  background: #0e6055; color: #ffffff;
}
.fc-progress-step.active .fc-progress-label {
  color: var(--text, #1c2a2b); font-weight: 600;
}

/* Body — scrolls; one step visible at a time. flex:1 grows inside the
   shell so the footer stays pinned at the bottom. */
.fc-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 0;
  background: #ffffff;
}
.fc-step { display: none; }
.fc-step.active { display: block; }
.fc-step-inner {
  display: flex; flex-direction: column; gap: 14px;
}
.fc-hint {
  font-size: 0.82rem; margin: 4px 0 0;
}

/* Items list — captured items in step 2 */
.fc-items-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fc-items-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.08);
  border-radius: 8px;
  font-size: 0.88rem;
}
.fc-items-list .fc-item-meta {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fc-items-list .fc-item-name {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-items-list .fc-item-sub {
  font-size: 0.78rem; color: var(--muted, #5f6d69);
}
.fc-items-list .fc-item-remove {
  background: transparent; border: none;
  color: #ab3b2d; font-size: 0.85rem;
  cursor: pointer; padding: 4px 8px;
}
.fc-items-list .fc-item-remove:hover {
  text-decoration: underline;
}
.fc-empty {
  font-size: 0.85rem; margin: 4px 0 0;
}

/* Review cards (Step 4) */
.fc-review-instruction {
  font-size: 0.88rem;
  color: var(--muted, #5f6d69);
  margin: 0 0 4px;
}
.fc-review-card {
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
}
.fc-review-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.fc-review-card-head strong {
  font-size: 0.95rem;
}
.fc-review-card-body {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.88rem;
}
.fc-review-row {
  display: flex; gap: 8px;
}
.fc-review-row .fc-review-label {
  color: var(--muted, #5f6d69);
  min-width: 110px;
}
.fc-review-row .fc-review-value {
  flex: 1; word-break: break-word;
}
.fc-edit-link {
  background: transparent;
  border: 1px solid rgba(14, 96, 85, 0.25);
  color: #0e6055;
  font-size: 0.78rem; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.fc-edit-link:hover {
  background: rgba(14, 96, 85, 0.06);
}

/* Phase C — Quick Add success "Edit order" secondary action.
   Appears under the "Order saved!" confirmation; clicking it closes the
   Quick Add overlay and opens the new order in the Edit drawer. */
.qa-edit-order-link {
  margin-top: 12px;
  background: transparent;
  border: 1px solid rgba(14, 96, 85, 0.3);
  color: #0e6055;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.qa-edit-order-link:hover {
  background: rgba(14, 96, 85, 0.08);
  border-color: rgba(14, 96, 85, 0.5);
}
.qa-edit-order-link:focus-visible {
  outline: 2px solid #0e6055;
  outline-offset: 2px;
}

/* r3 — editable items review (Step 4). Mirrors the order drawer's
   checklist visual rhythm but without the received checkbox column. */
.fc-review-group {
  border: 1px solid rgba(28, 42, 43, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.6);
}
.fc-review-group-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.fc-review-group-head strong {
  font-size: 0.92rem;
}
.fc-review-remove-group {
  background: transparent;
  border: none;
  color: #ab3b2d;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.fc-review-remove-group:hover {
  text-decoration: underline;
}
.fc-review-group-empty {
  font-size: 0.82rem; margin: 4px 0 0; font-style: italic;
}
.fc-review-item-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.fc-review-item-row,
.fc-review-manual-row {
  display: grid;
  grid-template-columns: 1fr 84px 32px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(28, 42, 43, 0.025);
  border: 1px solid rgba(28, 42, 43, 0.06);
  border-radius: 8px;
  font-size: 0.88rem;
}
.fc-review-manual-row {
  margin-bottom: 10px;
}
.fc-review-item-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-review-item-qty {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(28, 42, 43, 0.15);
  font-size: 0.85rem;
  box-sizing: border-box;
  text-align: center;
}
.fc-review-item-remove {
  background: transparent;
  border: none;
  color: var(--muted, #5f6d69);
  cursor: pointer;
  padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.fc-review-item-remove:hover {
  color: #ab3b2d;
  background: rgba(171, 59, 45, 0.06);
}

/* Footer — Back / Next / Create. Pinned at bottom of the centred shell,
   matching Scan Delivery's `.scan-step-footer` spacing. */
.fc-footer {
  padding: 16px 0;
  border-top: 1px solid rgba(28, 42, 43, 0.08);
  background: #ffffff;
  flex-shrink: 0;
}
.fc-footer-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
#fc-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile — same .scanner-overlay pattern: shell still 100% width but
   tighter padding inside the shell. Mobile and desktop share the same
   white-overlay shape; the only diffs are padding and hidden step
   labels (matching Scan Delivery's @media (max-width: 480px) rule). */
@media (max-width: 768px) {
  .fc-shell  { padding: 0 16px; }
  .fc-header { padding: 14px 0 10px; }
  .fc-body   { padding: 14px 0; }
  .fc-footer { padding: 12px 0; }
  .fc-progress-label {
    /* Step labels disappear on tight viewports — dots alone carry the
       progress signal. */
    display: none;
  }
  /* Items step manual-add row — stack vertically. Barcode and Item Name
     each get a full-width row; Quantity and Add share the final row.
     Same pattern as #order-manual-intake (Edit drawer) so the two
     create surfaces feel consistent on mobile. */
  #fc-manual-intake.manual-intake-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  #fc-manual-intake.manual-intake-row input#fc-manual-barcode,
  #fc-manual-intake.manual-intake-row input#fc-manual-name {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  #fc-manual-intake.manual-intake-row input.intake-qty {
    flex: 0 0 80px;
  }
  #fc-manual-intake.manual-intake-row .secondary-button {
    flex: 1 1 auto;
    min-width: 88px;
  }
}