/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light dark;

  --primary:       #4F46E5;
  --primary-rgb:   79, 70, 229;
  --primary-h:     #4338CA;
  --primary-light: #EEF2FF;
  --success:       #16A34A;
  --danger:        #DC2626;
  --warning:       #D97706;

  --bg:            #F0F4FA;
  --bg-subtle:     #F8FAFD;
  --card:          #FFFFFF;
  --border:        #E2E8F0;
  --border-h:      #C7D2E1;

  --text:          #0F172A;
  --text-muted:    #64748B;
  --text-light:    #94A3B8;

  --shadow-sm:     0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:        0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:     0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);
  --shadow-card:   0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
  --radius:        8px;
  --radius-lg:     14px;
  --radius-xl:     18px;

  --muted:         #64748B;
  --hover-bg:      #F8FAFC;
  --bg-secondary:  #F8FAFC;

  /* Status palette */
  --s-new-bg:      #EFF6FF; --s-new-fg:      #1D4ED8; --s-new-dot:      #3B82F6;
  --s-labels-bg:   #FFF7ED; --s-labels-fg:   #C2410C; --s-labels-dot:   #F97316;
  --s-waiting-bg:  #FFFBEB; --s-waiting-fg:  #92400E; --s-waiting-dot:  #F59E0B;
  --s-picked-bg:   #F5F3FF; --s-picked-fg:   #6D28D9; --s-picked-dot:   #8B5CF6;
  --s-dispatch-bg: #EEF2FF; --s-dispatch-fg: #4338CA; --s-dispatch-dot: #6366F1;
  --s-delivered-bg:#F0FDF4; --s-delivered-fg:#15803D; --s-delivered-dot:#22C55E;
  --s-cancel-bg:   #FEF2F2; --s-cancel-fg:   #DC2626; --s-cancel-dot:   #EF4444;
  --s-follow-bg:   #F8FAFC; --s-follow-fg:   #475569; --s-follow-dot:   #94A3B8;
  --s-selfpick-bg: #ECFDF5; --s-selfpick-fg: #065F46; --s-selfpick-dot: #10B981;
}

html { font-size: 15px; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.header {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(15,23,42,.25);
}
.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1.75rem;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header-logo { display: flex; align-items: center; gap: .75rem; }
.header-logo-img { height: 36px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; }
.header-icon { font-size: 1.4rem; }
.header-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  opacity: .92;
  white-space: nowrap;
}
.header-stats {
  font-size: .82rem;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.header-stat-chip {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: .28rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.header-stat-year {
  font-size: .7rem;
  font-weight: 700;
  opacity: .55;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sep { opacity: .3; font-size: .7rem; }
.header-user {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.header-bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.header-bell-btn:hover { background: rgba(255,255,255,.16); transform: scale(1.05); }
.bell-wrap { position: relative; flex-shrink: 0; }
.bell-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: none;
  width: 340px;
  max-width: calc(100vw - 16px);
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  z-index: 2000;
  direction: rtl;
  overflow: hidden;
}
.bell-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 18px;
  transform: rotate(-45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid #E2E8F0;
  border-right: 1px solid #E2E8F0;
}
.bell-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem .6rem;
  border-bottom: 1px solid #F1F5F9;
}
.bell-dd-title { font-weight: 700; font-size: .92rem; color: #1E293B; }
.bell-dd-close {
  background: none;
  border: none;
  color: #94A3B8;
  cursor: pointer;
  font-size: .85rem;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}
.bell-dd-close:hover { background: #F1F5F9; color: #475569; }
.bell-dd-list {
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bell-dd-loading {
  text-align: center;
  padding: 1.5rem;
  color: #94A3B8;
  font-size: .85rem;
}
.bell-dd-item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .65rem 1rem;
  border-bottom: 1px solid #F8FAFC;
  cursor: pointer;
  transition: background .12s;
}
.bell-dd-item:hover { background: #F8FAFC; }
.bell-dd-item.is-new { background: #FFF7ED; }
.bell-dd-item.is-new:hover { background: #FEF3C7; }
.bell-dd-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.bell-dd-body { flex: 1; min-width: 0; }
.bell-dd-item-title { font-size: .82rem; font-weight: 600; color: #1E293B; line-height: 1.35; }
.bell-dd-item-desc { font-size: .76rem; color: #64748B; margin-top: 2px; line-height: 1.3; }
.bell-dd-item-time { font-size: .7rem; color: #94A3B8; margin-top: 3px; }
.bell-dd-footer {
  display: flex;
  gap: .5rem;
  padding: .6rem .75rem;
  border-top: 1px solid #F1F5F9;
  background: #FAFBFC;
}
.bell-dd-more, .bell-dd-all {
  flex: 1;
  padding: .45rem .5rem;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  border: none;
}
.bell-dd-more { background: #F1F5F9; color: #475569; }
.bell-dd-more:hover { background: #E2E8F0; }
.bell-dd-all { background: #4F46E5; color: #fff; }
.bell-dd-all:hover { background: #4338CA; }
.header-bell-badge {
  position: absolute;
  top: -3px;
  left: -3px;
  min-width: 17px;
  height: 17px;
  background: #EF4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 9px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0F172A;
  line-height: 1;
}
.header-user-chip {
  display: flex;
  align-items: center;
  gap: .42rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: .22rem .65rem .22rem .28rem;
}
.header-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.header-username {
  font-size: .8rem;
  font-weight: 600;
  opacity: .9;
  white-space: nowrap;
}
.btn-logout {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  border-radius: var(--radius);
  padding: .32rem .7rem;
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit;
  font-weight: 500;
}
.btn-logout:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}

/* ═══════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════ */
.main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ═══════════════════════════════════════════════
   VIEW TOGGLE
═══════════════════════════════════════════════ */
.view-toggle {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.vt-btn {
  padding: .4rem .65rem;
  background: var(--card);
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
  line-height: 1;
}
.vt-btn + .vt-btn { border-right: 1.5px solid var(--border); }
.vt-btn.active { background: var(--primary); color: #fff; }
.vt-btn:not(.active):hover { background: var(--bg); }

/* ═══════════════════════════════════════════════
   DATE FILTER
═══════════════════════════════════════════════ */
.date-filter-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.date-preset-btn {
  padding: .45rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.date-preset-btn:hover { border-color: var(--primary); color: var(--primary); }
.date-preset-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.search-filter-hint {
  display: none;
  font-size: .75rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius);
  padding: .25rem .55rem;
  white-space: nowrap;
}
.search-filter-hint.visible { display: inline-flex; align-items: center; }

.date-range-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.date-icon {
  position: absolute;
  right: .6rem;
  font-size: .85rem;
  pointer-events: none;
  z-index: 1;
}
.date-range-input {
  padding: .45rem .7rem .45rem 1.8rem;
  padding-right: 2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  min-width: 150px;
  font-family: inherit;
  direction: ltr;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.date-range-input:focus,
.date-range-input:hover { border-color: var(--primary); }
.date-range-input::placeholder { direction: rtl; color: var(--text-muted); }

#clearDateFilter {
  position: absolute;
  left: .4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .8rem;
  padding: .15rem .3rem;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  display: none;
}
#clearDateFilter:hover { background: var(--border); }

/* Flatpickr RTL overrides */
.flatpickr-calendar { direction: ltr; }

/* ═══════════════════════════════════════════════
   ORDER CARDS
═══════════════════════════════════════════════ */
.orders-cards-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .65rem;
  align-items: stretch;
}
.order-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226,232,240,.8);
  border-right: 4px solid var(--border);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  cursor: default;
  box-shadow: var(--shadow-card);
}
.order-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

/* accent border per group */
.order-card.gc-active  { border-right-color: #1D4ED8; }
.order-card.gc-ready   { border-right-color: #C2410C; }
.order-card.gc-transit { border-right-color: #6D28D9; }
.order-card.gc-history { border-right-color: #CBD5E1; opacity: .65; }
.order-card.gc-history:hover { opacity: .85; }

/* ── Order card layout: flex column so footer always sticks to bottom ── */
.order-card {
  display: flex;
  flex-direction: column;
}

.card-top {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem .3rem;
  flex-shrink: 0;
}
.card-order-num {
  font-weight: 700;
  font-size: .88rem;
  color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.card-order-num:hover { text-decoration: underline; }
.card-date {
  font-size: .7rem;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
}
.card-fulfillment {
  font-size: .68rem;
  font-weight: 600;
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 8px;
  padding: .12rem .45rem;
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  flex-shrink: 0;
}

/* body grows to fill space — keeps footer at bottom in equal-height rows */
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-mid {
  padding: .2rem .7rem .35rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.card-customer { flex: 1; min-width: 0; }
.card-name {
  font-weight: 700;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-phone {
  font-size: .72rem;
  color: var(--text-muted);
  direction: ltr;
  text-align: right;
  font-family: monospace;
  margin-top: .1rem;
}
.card-meta {
  text-align: left;
  flex-shrink: 0;
}
.card-amount {
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  white-space: nowrap;
}
.card-items {
  font-size: .68rem;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.card-note {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .75rem;
  color: #6B4F00;
  background: #FFFBEB;
  border-top: 1px solid #FDE68A;
  padding: .28rem .7rem;
  line-height: 1.4;
}

/* tags + badges zone — always rendered, keeps card height stable */
.card-extras {
  flex: 1;
  padding: .25rem .7rem .4rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 0;
}
.card-badges {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.card-bot {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem .5rem;
  border-top: 1px solid var(--border);
  background: #FAFBFC;
  flex-shrink: 0;
}
.card-bot .status-select {
  flex: 1;
  max-width: none;
}
.card-actions {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}

/* group section header in cards view */
.cards-group-header {
  grid-column: 1 / -1;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .1rem .1rem;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  margin-bottom: .1rem;
}
.cards-group-header.gs-active  { color: #1D4ED8; border-color: #BFDBFE; }
.cards-group-header.gs-ready   { color: #C2410C; border-color: #FED7AA; }
.cards-group-header.gs-transit { color: #6D28D9; border-color: #DDD6FE; }
.cards-group-header.gs-history { color: #94A3B8; border-color: #CBD5E1; }


/* ═══════════════════════════════════════════════
   TOOLBAR
═══════════════════════════════════════════════ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.toolbar-filters {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  flex: 1;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 380px;
}
.search-icon {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: .55rem .75rem .55rem 2.2rem;
  padding-right: 2.2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  direction: rtl;
  font-family: inherit;
}
.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.clear-btn {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: .85rem;
  padding: .1rem .3rem;
  border-radius: 4px;
}
.clear-btn:hover { background: var(--border); }

.select-filter {
  padding: .55rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  min-width: 185px;
  direction: rtl;
}
.select-filter:focus { border-color: var(--primary); }

/* ═══════════════════════════════════════════════
   MULTI-SELECT DROPDOWN
═══════════════════════════════════════════════ */
.multiselect-wrap {
  position: relative;
}
.multiselect-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .9rem;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  min-width: 160px;
  justify-content: space-between;
  transition: border-color .15s;
}
.multiselect-btn:focus,
.multiselect-btn:hover { border-color: var(--primary); }
.ms-arrow { font-size: .7rem; color: var(--text-muted); }

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  min-width: 210px;
  padding: .4rem 0;
}
.ms-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  font-size: .88rem;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
  user-select: none;
}
.ms-option:hover { background: var(--bg); }
.ms-option input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.ms-clear {
  border-top: 1px solid var(--border);
  padding: .5rem .9rem;
  display: flex;
  gap: .5rem;
  margin-top: .3rem;
}
.ms-clear button {
  flex: 1;
  font-size: .78rem;
  font-weight: 600;
  padding: .3rem .5rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: background .1s;
}
.ms-clear button:hover { background: var(--border); color: var(--text); }
.ms-clear button:first-child { color: var(--primary); border-color: var(--primary); }
.ms-clear button:first-child:hover { background: var(--primary); color: #fff; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.15rem;
  border: none;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -.01em;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(.97); }

.btn-primary   { background: var(--primary); color: #fff; box-shadow: 0 1px 3px rgba(79,70,229,.35), 0 2px 8px rgba(79,70,229,.2); }
.btn-primary:hover { background: var(--primary-h); box-shadow: 0 2px 6px rgba(79,70,229,.4), 0 4px 12px rgba(79,70,229,.25); }

.btn-secondary { background: var(--card); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--bg); border-color: var(--border-h); }

.btn-success   { background: var(--success); color: #fff; box-shadow: 0 1px 3px rgba(22,163,74,.3); }
.btn-success:hover { background: #15803D; }

.btn-danger    { background: var(--danger); color: #fff; box-shadow: 0 1px 3px rgba(220,38,38,.3); }
.btn-danger:hover { background: #B91C1C; }

/* WhatsApp button */
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: .82rem;
  text-decoration: none;
  transition: background .15s, transform .1s;
  cursor: pointer;
  border: none;
}
.btn-wa:hover { background: #128C7E; transform: scale(1.1); }
.btn-wa.disabled { background: var(--border); cursor: default; }
.btn-wa.disabled:hover { transform: none; background: var(--border); }

/* Detail button */
.btn-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: .78rem;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-detail:hover { background: var(--primary); color: #fff; transform: scale(1.1); }

/* ═══════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(226,232,240,.8);
  overflow: hidden;
  transition: box-shadow .2s;
}

/* ═══════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  min-width: 700px;
}

.orders-table thead th {
  background: var(--bg-subtle);
  padding: .5rem .65rem;
  font-weight: 700;
  color: var(--text-muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  text-align: right;
  position: sticky;
  top: 0;
}

.orders-table tbody tr {
  border-bottom: 1px solid rgba(226,232,240,.6);
  transition: background .1s;
}
.orders-table tbody tr:nth-child(even):not(.group-separator) { background: rgba(248,250,252,.6); }
.orders-table tbody tr:last-child { border-bottom: none; }
.orders-table tbody tr:hover:not(.group-separator) { background: var(--primary-light); }

.orders-table td {
  padding: .42rem .65rem;
  color: var(--text);
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}

/* Column widths */
.col-id      { width: 38px; }
.col-web     { width: 80px; }
.col-date    { width: 82px; }
.col-name    { min-width: 120px; white-space: normal; }
.col-phone   { width: 110px; }
.col-items   { width: 46px; text-align: center !important; }
.col-total   { width: 76px; }
.col-ship    { width: 70px; }
.col-fulfill { width: 100px; white-space: normal; }
.col-pay     { width: 110px; }
.col-status  { width: 170px; }
.col-cost    { width: 76px; }
.col-wcstatus { width: 84px; }
.col-actions { width: 72px; }
.col-profit  { width: 76px; }

/* על מסכים קטנים — הסתר עמודות כלכליות שלא נחוצות למחסן */
@media (max-width: 900px) {
  .col-cost, .col-profit, .col-pay, .col-wcstatus, .col-ship,
  .orders-table .hide-mobile { display: none; }
  .orders-table { min-width: 480px; font-size: .78rem; }
  .orders-table td { padding: .32rem .45rem; }
  .orders-table thead th { padding: .38rem .45rem; }
}

/* WooCommerce status badges */
.card-wc-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .7rem .3rem;
}
.card-wc-label {
  font-size: .72rem;
  color: var(--text-muted);
}

.wc-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.wcs-pending    { background: #FFF7ED; color: #C2410C; }
.wcs-processing { background: #EFF6FF; color: #1D4ED8; }
.wcs-completed  { background: #F0FDF4; color: #15803D; }
.wcs-cancelled  { background: #FEF2F2; color: #DC2626; }
.wcs-onhold     { background: #FFFBEB; color: #B45309; }

.td-id   { font-weight: 700; color: var(--text-muted); }
.td-webno { font-family: monospace; font-size: .8rem; color: var(--text-muted); }
.td-name { font-weight: 600; }
.td-phone { font-family: monospace; font-size: .82rem; direction: ltr; text-align: right; }
.td-amount { font-weight: 600; }
.td-center { text-align: center; }
.actions-cell {
  display: flex;
  gap: .4rem;
  align-items: center;
}

/* ═══════════════════════════════════════════════
   STATUS SELECT (inline in table)
═══════════════════════════════════════════════ */
.status-select {
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: .25rem .55rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  width: 100%;
  max-width: 168px;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .5rem center;
  padding-left: 1.4rem;
}
.status-select:focus { border-color: currentColor; }

/* Status colour classes */
/* ── Status badge classes ───────────────────────────────────────────────── */
.s-new       { background: var(--s-new-bg);       color: var(--s-new-fg);       border-color: #BFDBFE; }
.s-labels    { background: var(--s-labels-bg);    color: var(--s-labels-fg);    border-color: #FED7AA; }
.s-waiting   { background: var(--s-waiting-bg);   color: var(--s-waiting-fg);   border-color: #FDE68A; }
.s-picked    { background: var(--s-picked-bg);    color: var(--s-picked-fg);    border-color: #DDD6FE; }
.s-dispatch  { background: var(--s-dispatch-bg);  color: var(--s-dispatch-fg);  border-color: #C7D2FE; }
.s-delivered { background: var(--s-delivered-bg); color: var(--s-delivered-fg); border-color: #BBF7D0; }
.s-cancel    { background: var(--s-cancel-bg);    color: var(--s-cancel-fg);    border-color: #FECACA; }
.s-follow    { background: var(--s-follow-bg);    color: var(--s-follow-fg);    border-color: #E2E8F0; }
.s-selfpick  { background: var(--s-selfpick-bg);  color: var(--s-selfpick-fg);  border-color: #A7F3D0; }

.status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 20px; padding: .28rem .8rem;
  font-size: .8rem; font-weight: 700; border: 1px solid transparent;
}
.status-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.status-badge.s-new::before       { background: var(--s-new-dot); }
.status-badge.s-labels::before    { background: var(--s-labels-dot); }
.status-badge.s-waiting::before   { background: var(--s-waiting-dot); }
.status-badge.s-picked::before    { background: var(--s-picked-dot); }
.status-badge.s-dispatch::before  { background: var(--s-dispatch-dot); }
.status-badge.s-delivered::before { background: var(--s-delivered-dot); }
.status-badge.s-cancel::before    { background: var(--s-cancel-dot); }
.status-badge.s-follow::before    { background: var(--s-follow-dot); }
.status-badge.s-selfpick::before  { background: var(--s-selfpick-dot); }

/* ═══════════════════════════════════════════════
   STATUS BUBBLES (detail modal)
═══════════════════════════════════════════════ */
.status-bubbles-section {
  padding: 1rem 1.25rem .75rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.status-bubbles-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}
.status-bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.status-bubble {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .75rem;
  border-radius: 20px;
  border: 1.5px solid transparent;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  opacity: .55;
  background: transparent;
}
.status-bubble::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-bubble:hover   { opacity: .85; transform: translateY(-1px); }
.status-bubble.active  { opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: none; }

.status-bubble.s-new       { background: var(--s-new-bg);       color: var(--s-new-fg);       border-color: #BFDBFE; }
.status-bubble.s-new::before { background: var(--s-new-dot); }
.status-bubble.s-labels    { background: var(--s-labels-bg);    color: var(--s-labels-fg);    border-color: #FED7AA; }
.status-bubble.s-labels::before { background: var(--s-labels-dot); }
.status-bubble.s-waiting   { background: var(--s-waiting-bg);   color: var(--s-waiting-fg);   border-color: #E9D5FF; }
.status-bubble.s-waiting::before { background: var(--s-waiting-dot); }
.status-bubble.s-picked    { background: var(--s-picked-bg);    color: var(--s-picked-fg);    border-color: #BBF7D0; }
.status-bubble.s-picked::before { background: var(--s-picked-dot); }
.status-bubble.s-dispatch  { background: var(--s-dispatch-bg);  color: var(--s-dispatch-fg);  border-color: #A5F3FC; }
.status-bubble.s-dispatch::before { background: var(--s-dispatch-dot); }
.status-bubble.s-delivered { background: var(--s-delivered-bg); color: var(--s-delivered-fg); border-color: #BBF7D0; }
.status-bubble.s-delivered::before { background: var(--s-delivered-dot); }
.status-bubble.s-cancel    { background: var(--s-cancel-bg);    color: var(--s-cancel-fg);    border-color: #FECACA; }
.status-bubble.s-cancel::before { background: var(--s-cancel-dot); }
.status-bubble.s-follow    { background: var(--s-follow-bg);    color: var(--s-follow-fg);    border-color: #E2E8F0; }
.status-bubble.s-follow::before { background: var(--s-follow-dot); }
.status-bubble.s-selfpick  { background: var(--s-selfpick-bg);  color: var(--s-selfpick-fg);  border-color: #A7F3D0; }
.status-bubble.s-selfpick::before { background: var(--s-selfpick-dot); }

/* ═══════════════════════════════════════════════
   STATUS FILTER BAR
═══════════════════════════════════════════════ */
.order-group-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.order-group-tabs::-webkit-scrollbar { display: none; }

.ogt-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ogt-btn::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); flex-shrink: 0; transition: background .15s;
}
.ogt-btn[data-status=""]::before               { display: none; }
.ogt-btn[data-status="הזמנה חדשה"]::before              { background: var(--s-new-dot); }
.ogt-btn[data-status="מדבקות מוכנות ממתין לליקוט"]::before { background: var(--s-labels-dot); }
.ogt-btn[data-status="ממתין לאיסוף ע\"י חברת המשלוחים"]::before { background: var(--s-waiting-dot); }
.ogt-btn[data-status="נאסף ע\"י חברת השילוח"]::before   { background: var(--s-picked-dot); }
.ogt-btn[data-status="יצאה להפצה"]::before              { background: var(--s-dispatch-dot); }
.ogt-btn[data-status="נמסר ללקוח"]::before              { background: var(--s-delivered-dot); }
.ogt-btn[data-status="ביטול"]::before                   { background: var(--s-cancel-dot); }
.ogt-btn[data-status="מעקב"]::before                    { background: var(--s-follow-dot); }
.ogt-btn[data-status="מוכן לאיסוף עצמי"]::before        { background: var(--s-selfpick-dot); }

.ogt-btn:hover { background: var(--bg); color: var(--text); }
.ogt-btn.active {
  background: #1E293B;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.ogt-btn.active::before { background: #fff !important; }

.ogt-badge {
  background: rgba(255,255,255,.2);
  color: inherit;
  border-radius: 20px;
  padding: .05rem .42rem;
  font-size: .72rem; font-weight: 700;
  min-width: 1.3rem; text-align: center;
}
.ogt-btn:not(.active) .ogt-badge {
  background: var(--bg);
  color: var(--text-muted);
}

/* Group separator row in table */
.group-separator td {
  background: var(--bg);
  padding: .28rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.group-separator.gs-active td { background: #EFF6FF; color: #1D4ED8; border-top-color: #BFDBFE; }
.group-separator.gs-ready  td { background: #FFF7ED; color: #C2410C; border-top-color: #FED7AA; }
.group-separator.gs-transit td { background: #F5F3FF; color: #6D28D9; border-top-color: #DDD6FE; }
.group-separator.gs-history td { background: #F8FAFC; color: #94A3B8; border-top-color: #CBD5E1; }

/* History rows — muted */
tr.row-history td { opacity: .55; }
tr.row-history:hover td { opacity: .8; }

/* ═══════════════════════════════════════════════
   EMPTY / LOADING STATES
═══════════════════════════════════════════════ */
.state-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
  font-size: 1rem;
}
.state-icon { font-size: 2.5rem; }

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 1rem;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.1);
  border: 1px solid rgba(226,232,240,.6);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp .22s cubic-bezier(.34,1.56,.64,1);
}
.modal-lg { max-width: 860px; }

@keyframes slideUp {
  from { transform: translateY(24px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);    opacity: 1; }
}

/* ── Order item picker ── */
.order-items-section { margin-top: .4rem; }
.order-items-section > label { font-weight: 600; display: block; margin-bottom: .6rem; }

.order-item-picker {
  display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .75rem;
}
.oip-product-wrap { position: relative; flex: 1 1 220px; min-width: 0; }
.oip-qty   { width: 70px !important; text-align: center; flex-shrink: 0; }
.oip-price-wrap { position: relative; display: flex; align-items: center; }
.oip-currency { position: absolute; right: 10px; color: var(--muted); pointer-events: none; font-size: .85rem; }
.oip-price { width: 110px !important; padding-right: 22px !important; text-align: center; flex-shrink: 0; }

.oip-dropdown {
  position: absolute; top: calc(100% + 2px); right: 0; left: 0; z-index: 9999;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto;
}
.oip-option {
  padding: .5rem .8rem; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.oip-option:last-child { border-bottom: none; }
.oip-option:hover { background: var(--bg); }
.oip-opt-name { font-weight: 500; font-size: .88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oip-opt-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

.order-items-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.order-items-table th { background: var(--bg); padding: .45rem .6rem; font-weight: 600; font-size: .78rem; color: var(--muted); text-align: right; border-bottom: 2px solid var(--border); }
.order-items-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.order-items-table tr:last-child td { border-bottom: none; }

.oitm-qty, .oitm-price { padding: .2rem .35rem !important; font-size: .84rem !important; }

.btn-icon-del {
  background: none; border: none; cursor: pointer; color: #ef4444; font-size: 1rem;
  padding: .1rem .3rem; border-radius: 4px; transition: background .15s;
}
.btn-icon-del:hover { background: #fee2e2; }

.order-items-totals {
  display: flex; gap: 1.2rem; align-items: center; justify-content: flex-end;
  padding: .6rem .8rem; background: var(--bg); border-radius: 0 0 8px 8px;
  font-size: .88rem; flex-wrap: wrap;
}
.order-items-totals .oitTotal { font-size: .95rem; }
.order-items-totals strong { color: var(--primary); }


.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); }

.modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: .25rem .4rem;
  border-radius: 4px;
  line-height: 1;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body {
  padding: 1.4rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
  gap: .75rem;
  flex-shrink: 0;
}
.undo-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.2rem;
  background: #1E293B;
  color: #fff;
  flex-shrink: 0;
}
.undo-bar-left { display: flex; align-items: center; gap: .6rem; flex: 1; }
.undo-msg { font-size: .82rem; color: #CBD5E1; }
.undo-action-btn {
  background: #F59E0B;
  color: #1E293B;
  border: none;
  border-radius: 6px;
  padding: .3rem .75rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.undo-action-btn:hover { background: #FBBF24; }
.undo-countdown-wrap {
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.undo-countdown-fill {
  height: 100%;
  background: #F59E0B;
  border-radius: 3px;
  width: 100%;
}

/* ═══════════════════════════════════════════════
   DETAIL VIEW
═══════════════════════════════════════════════ */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .1rem;
}
.detail-row {
  padding: .65rem .5rem;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.detail-row.full { grid-column: 1 / -1; }
.detail-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.detail-value { font-size: .95rem; color: var(--text); font-weight: 500; }
.detail-value.note {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .88rem;
  color: #78350F;
  white-space: pre-wrap;
}
.detail-wa { margin-right: .5rem; }

/* ═══════════════════════════════════════════════
   ORDER ITEMS (in detail modal)
═══════════════════════════════════════════════ */
.order-items-section {
  margin-top: 1.25rem;
  border-top: 2px solid var(--border);
  padding-top: 1rem;
}
.order-items-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .65rem;
}
.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.order-items-table thead th {
  background: #F8FAFC;
  padding: .5rem .75rem;
  font-weight: 600;
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1.5px solid var(--border);
  text-align: right;
}
.order-items-table tbody tr {
  border-bottom: 1px solid var(--border);
}
.order-items-table tbody tr:last-child {
  border-bottom: none;
}
.order-items-table tbody td {
  padding: .6rem .75rem;
  vertical-align: middle;
  text-align: right;
}

/* ═══════════════════════════════════════════════
   FORM
═══════════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group-full { margin-top: .75rem; }

label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.req-star { color: var(--danger); }

.form-control {
  padding: .55rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text);
  background: var(--card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  direction: rtl;
  font-family: inherit;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
.form-control.error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
textarea.form-control { resize: vertical; }

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.toast-copy-btn {
  pointer-events: all;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  margin-right: .5rem;
  padding: 2px 6px;
}

.toast {
  background: #0F172A;
  color: #fff;
  padding: .72rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(15,23,42,.25), 0 2px 8px rgba(15,23,42,.15);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity .22s, transform .22s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  letter-spacing: -.01em;
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.toast.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast.toast-success { background: #14532D; border-color: rgba(34,197,94,.2); }
.toast.toast-error   { background: #7F1D1D; border-color: rgba(239,68,68,.2); }

/* ═══════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════ */
/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,.18);
  transform: scale(1.08);
}

/* ── Navigation tabs ── */
.tabs-nav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.75rem 0 9rem;
  gap: 0;
  position: sticky;
  top: 62px;
  z-index: 90;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative;
  background: none;
  border: none;
  border-bottom: none;
  padding: .85rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 0;
  transition: color .18s;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -.01em;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: .55rem;
  right: .55rem;
  height: 2.5px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 8px rgba(99,102,241,.45);
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb),.06);
}
.tab-btn.active {
  color: var(--primary);
}
.tab-btn.active::after {
  transform: scaleX(1);
}
/* ─── Sync / Tools dropdown menu ─────────────────────────────────────────── */
.sync-menu-wrap {
  position: fixed;
  top: 62px;
  left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  height: 43px;
  padding: 0 1.75rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(15,23,42,.04);
}
.sync-menu-trigger {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0;
  padding: .42rem .85rem;
  font-size: .85rem;
  background: var(--card);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
}
.sync-menu-trigger:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #EEF2FF;
}
.sync-menu-trigger.open {
  border-color: var(--primary);
  color: var(--primary);
  background: #EEF2FF;
}
.sync-menu-arrow {
  font-size: .7rem;
  transition: transform .2s;
}
.sync-menu-trigger.open .sync-menu-arrow { transform: rotate(180deg); }

.sync-menu-panel {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 230px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .35rem;
  z-index: 10001;
}
.sync-menu-panel.open { display: block; }

.sync-menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .85rem;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--text);
  font-size: .88rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: right;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.sync-menu-item:hover { background: var(--bg); color: var(--primary); }
.sync-menu-item:disabled { opacity: .55; cursor: not-allowed; }

.sync-menu-divider {
  height: 1px;
  background: var(--border);
  margin: .3rem .5rem;
}

/* ─── Reorder recommendations ───────────────────────────────────────────────── */
.reorder-toolbar {
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.reorder-settings {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.reorder-settings label { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

.reorder-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.rsumm-badge {
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.rsumm-critical { background:#fef2f2; color:#dc2626; }
.rsumm-warning  { background:#fffbeb; color:#d97706; }
.rsumm-soon     { background:#fefce8; color:#ca8a04; }
.rsumm-ok       { background:#f0fdf4; color:#16a34a; }
.rsumm-cost     { font-weight: 700; font-size: .85rem; color: var(--primary); margin-right: .5rem; }
.rsumm-window   { font-size: .8rem; color: var(--muted); margin-right: auto; }

.velocity-note { font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.velocity-stockout { color: #d97706; font-weight: 600; }

/* ═══════════════════════════════════════════════
   TAB: CUSTOMERS
═══════════════════════════════════════════════ */
.card-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.card-title { font-size: 1rem; font-weight: 700; margin: 0; }

.cust-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.cust-retention-card,
.cust-abc-card { padding: 1.1rem 1.2rem; }

/* KPI grid — חזרתיות */
.ret-kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin-bottom: .9rem;
}
.ret-kpi {
  background: var(--bg); border-radius: 8px; padding: .55rem .7rem;
  text-align: center;
}
.ret-kpi-val { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.ret-kpi-lbl { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.ret-kpi-returning .ret-kpi-val { color: var(--primary); }
.ret-kpi-new       .ret-kpi-val { color: var(--success); }

/* ABC badges */
.abc-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.abc-badge  {
  display: inline-block; padding: .2rem .55rem; border-radius: 12px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.abc-A { background: #ede9fe; color: #4F46E5; }
.abc-B { background: #fef3c7; color: #D97706; }
.abc-C { background: #f3f4f6; color: #6B7280; }

/* cumulative bar */
.cumulative-bar-wrap {
  display: flex; align-items: center; gap: .4rem; font-size: .8rem;
}
.cumulative-bar-wrap > span { flex-shrink: 0; }
.cumulative-bar {
  height: 8px; border-radius: 4px; min-width: 2px; transition: width .3s;
}

/* רשימת לקוחות */
.cust-badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 10px;
  font-size: .75rem; font-weight: 700;
}
.cust-returning { background: #ede9fe; color: #4F46E5; }
.cust-new       { background: #d1fae5; color: #065F46; }
.cust-row:hover td { background: var(--bg); }
td.cust-link { color: var(--primary); cursor: pointer; font-weight: 600; }
td.cust-link:hover { text-decoration: underline; }

.card-name.cust-link {
  color: var(--primary);
  cursor: pointer;
  transition: color .15s;
}
.card-name.cust-link:hover { color: var(--primary-h); text-decoration: underline; }

/* ═══════════════════════════════════════════════
   CUSTOMER CARD MODAL
═══════════════════════════════════════════════ */
.cust-card {
  background: var(--card);
  border-radius: 20px;
  width: min(780px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

/* Header */
.cust-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.3rem;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 60%, #1E293B 100%);
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.cust-card-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  letter-spacing: -.02em;
  border: 2px solid rgba(255,255,255,.15);
}
.cust-card-identity { flex: 1; min-width: 0; }
.cust-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-card-meta {
  font-size: .8rem;
  color: rgba(255,255,255,.65);
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.cust-card-meta a { color: #86EFAC; text-decoration: none; font-weight: 600; }
.cust-card-meta a:hover { color: #BBF7D0; }
.cust-card-meta-sep { color: rgba(255,255,255,.25); }
.cust-card-actions {
  display: flex; gap: .5rem; flex-shrink: 0;
}
.cust-card-action-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .85rem;
  border-radius: 8px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.09);
  color: #fff; cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.cust-card-action-btn:hover { background: rgba(255,255,255,.18); }
.cust-card-action-btn.wa { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); color: #86EFAC; }
.cust-card-action-btn.wa:hover { background: rgba(34,197,94,.3); }
.cust-card-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: none; color: rgba(255,255,255,.55);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.cust-card-close:hover { background: rgba(255,255,255,.18); color: #fff; }

/* KPI strip */
.cust-card-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cust-kpi-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem .5rem;
  border-left: 1px solid var(--border);
  gap: .2rem;
}
.cust-kpi-cell:last-child { border-left: none; }
.cust-kpi-icon { font-size: 1.1rem; margin-bottom: .1rem; }
.cust-kpi-val {
  font-size: 1.05rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em;
  line-height: 1.1;
}
.cust-kpi-lbl {
  font-size: .68rem; color: var(--text-muted);
  font-weight: 500; text-align: center; line-height: 1.3;
}
.cust-kpi-val.profit-pos { color: #16A34A; }
.cust-kpi-val.profit-neg { color: #DC2626; }

.cust-modal-loading {
  grid-column: 1/-1;
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}

/* Orders section */
.cust-card-orders-wrap {
  flex: 1; overflow-y: auto; min-height: 0;
}
.cust-card-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.4rem .6rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.cust-card-section-title {
  font-size: .78rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
}
.cust-card-orders-badge {
  font-size: .75rem; font-weight: 700;
  background: var(--primary-light); color: var(--primary);
  padding: .18rem .6rem; border-radius: 20px;
}
.cust-card-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.cust-card-table thead th {
  padding: .55rem 1rem;
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg); border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: right;
}
.cust-card-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.cust-card-table tbody tr:hover td { background: var(--primary-light); }
.cust-card-table tbody tr:last-child { border-bottom: none; }
.cust-card-table td {
  padding: .65rem 1rem; vertical-align: middle; text-align: right;
}
.cust-ord-num { font-weight: 700; color: var(--primary); }
.cust-ord-date { color: var(--text-muted); white-space: nowrap; }
.cust-ord-method {
  font-size: .75rem; color: var(--text-muted);
  background: var(--bg); border-radius: 6px;
  padding: .15rem .45rem; white-space: nowrap;
}

@media (max-width: 680px) {
  .cust-card-kpis { grid-template-columns: repeat(3, 1fr); }
  .cust-card-header { gap: .75rem; }
  .cust-card-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
  .cust-card-name { font-size: 1rem; }
  .cust-card-actions { display: none; }
}

@media (max-width: 900px) {
  .cust-top-row { grid-template-columns: 1fr; }
  .cust-modal-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .ret-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.urgency-badge {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.peak-badge {
  display: inline-block;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: .2rem .5rem;
  font-size: .75rem;
  font-weight: 700;
}
.peak-adj { font-size: .72rem; color: var(--muted); font-weight: 400; }

/* months progress bar */
.months-bar-wrap {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
  max-width: 90px;
  margin: 0 auto;
}
.months-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .4s ease;
}

.reorder-table th { white-space: pre-line; text-align: center; line-height: 1.2; }
.reorder-row:hover { background: var(--hover-bg); }

/* ─── Annual projection card ─────────────────────────────────────────────────── */
.projection-card {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  color: #fff;
  border: none;
}
.projection-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.projection-icon { font-size: 2rem; line-height: 1; }
.projection-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
}
.projection-sub {
  font-size: .78rem;
  color: #94a3b8;
  margin-top: .2rem;
}
.projection-body {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.proj-kpi {
  flex: 1;
  padding: .5rem 1.25rem;
  text-align: center;
}
.proj-kpi-highlight {
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.proj-kpi-label {
  font-size: .72rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.proj-kpi-val {
  font-size: 1.55rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.1;
}
.proj-kpi-val.proj-expenses { color: #fca5a5; }
.proj-kpi-hint {
  font-size: .72rem;
  color: #64748b;
  margin-top: .3rem;
}
.proj-divider {
  width: 1px;
  background: rgba(255,255,255,.1);
  margin: .25rem 0;
}
@media (max-width: 640px) {
  .projection-body { flex-direction: column; }
  .proj-divider { width: 100%; height: 1px; margin: .5rem 0; }
  .proj-kpi { padding: .6rem .5rem; }
}

/* ─── Projection chart ───────────────────────────────────────────────────────── */
.proj-chart-wrap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ─── Month compare card ─────────────────────────────────────────────────────── */
.month-compare-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 0 1.25rem 1rem;
  flex-wrap: wrap;
}
.month-compare-picker {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.month-compare-picker label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.month-compare-vs {
  font-weight: 800;
  font-size: 1rem;
  color: var(--muted);
  padding-bottom: .35rem;
}

/* KPI comparison grid — 7 columns: label | prevA | A | ΔA | prevB | B | ΔB */
.cmp-kpi-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) repeat(3, 1fr);
  gap: .3rem .5rem;
  padding: .5rem 1.25rem 1rem;
  font-size: .82rem;
}
.cmp-kpi-header       { font-weight: 700; font-size: .75rem; color: var(--muted); padding-bottom: .25rem; border-bottom: 2px solid var(--border); text-align: center; }
.cmp-kpi-header.cmp-prev-year  { color: var(--muted); opacity: .7; }
.cmp-kpi-header.cmp-delta-head { color: var(--primary); }
.cmp-kpi-label        { font-weight: 600; display: flex; align-items: center; }
.cmp-kpi-val          { text-align: center; }
.cmp-kpi-val.cmp-prev-year { color: var(--muted); opacity: .75; font-size: .8rem; }

/* compare chart */
.cmp-chart-wrap { padding: 0 1.25rem 1.25rem; }

/* compare products tables */
.cmp-products-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}
.cmp-col-title {
  font-weight: 700;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .4rem;
  text-align: center;
}
.cmp-table { min-width: unset; width: 100%; }

@media (max-width: 640px) {
  .cmp-kpi-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: .75rem; }
  .cmp-products-wrap { grid-template-columns: 1fr; }
}

/* ─── Expense frequency badges ──────────────────────────────────────────────── */
.freq-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.freq-monthly  { background: #dbeafe; color: #1d4ed8; }
.freq-annual   { background: #fef3c7; color: #92400e; }
.freq-variable { background: #fce7f3; color: #9d174d; }

/* ─── Auto-sync status bar ─────────────────────────────────────────────────── */
.sync-status-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .22rem 1.75rem;
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
  min-height: 1.5rem;
  letter-spacing: .01em;
}
.sync-status-bar.syncing { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sync-status-bar.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ═══════════════════════════════════════════════
   PROFIT COLUMN
═══════════════════════════════════════════════ */
.col-profit { width: 90px; }
.profit-pos { color: var(--success); font-weight: 700; }
.profit-zero { color: var(--text-muted); }
.profit-neg { color: var(--danger); font-weight: 700; }

/* ═══════════════════════════════════════════════
   STOCK CARDS
═══════════════════════════════════════════════ */
/* Legacy aliases kept for any other tab that might use them */
.stock-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.stock-card  { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow-sm); }
.stock-card-num   { font-size: 2rem; font-weight: 800; color: var(--text); }
.stock-card-label { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.sc-ok    .stock-card-num { color: var(--success); }
.sc-warn  .stock-card-num { color: var(--warning); }
.sc-danger .stock-card-num { color: var(--danger); }

/* ── inv-* and pd-* styles moved to /css/inventory.css ── */

/* ═══════════════════════════════════════════════
   PRODUCTS TABLE EXTRAS
═══════════════════════════════════════════════ */
.col-center { text-align: center !important; }
.col-center th { text-align: center !important; }
.stock-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
}
.stock-in     { background: #F0FDF4; color: #15803D; }
.stock-low    { background: #FFFBEB; color: #B45309; }
.stock-out    { background: #FEF2F2; color: #DC2626; }

.btn-edit-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .3rem .65rem;
  border-radius: var(--radius);
  background: var(--border);
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--text);
  transition: background .15s;
}
.btn-edit-cost:hover { background: var(--primary); color: #fff; }

.btn-impersonate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .55rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  cursor: pointer; font-size: .85rem; color: var(--primary);
  transition: background .15s;
}
.btn-impersonate:hover { background: var(--primary); color: #fff; }

/* Admin-only columns: hidden for user role (JS adds class to body) */
body.role-user .admin-only-col { display: none; }
body.role-user .admin-only-el  { display: none; }
body.role-user .cust-link { cursor: default; pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   SUPPORT — KANBAN BOARD
   ═══════════════════════════════════════════════════════ */

/* Strip .main padding when support tab visible */
.main:has(> #tab-support:not(.d-none)),
.main:has(> #tab-knowledge:not(.d-none)) {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

@media (min-width: 901px) {
  .main:has(> #tab-support:not(.d-none)),
  .main:has(> #tab-knowledge:not(.d-none)) {
    margin-right: 224px !important;
    max-width: calc(100% - 224px) !important;
  }
  body.sb-collapsed .main:has(> #tab-support:not(.d-none)),
  body.sb-collapsed .main:has(> #tab-knowledge:not(.d-none)) {
    margin-right: 56px !important;
    max-width: calc(100% - 56px) !important;
  }
}

/* Full-height wrapper */
.sp-board-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 138px); /* header 62 + tabs 44 + sync-bar 32 */
  min-height: 0;
  overflow: hidden;
}

/* ── Activity feed ── */
.sp-feed {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  max-height: 160px;
  flex-shrink: 0;
}
.sp-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .85rem .25rem;
  border-bottom: 1px solid var(--border);
  gap: .5rem;
}
.sp-feed-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.sp-feed-clear {
  background: none;
  border: none;
  font-size: .75rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
  opacity: .6;
}
.sp-feed-clear:hover { opacity: 1; }
.sp-feed-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: .3rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sp-feed-empty {
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
  padding: .5rem 1rem;
}
.sp-feed-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .22rem .85rem;
  font-size: .78rem;
  cursor: pointer;
  transition: background .12s;
  line-height: 1.4;
  border-right: 3px solid transparent;
}
.sp-feed-item:hover { background: rgba(var(--primary-rgb), .04); }
.sp-feed-item.fi-in    { border-right-color: #0891b2; }
.sp-feed-item.fi-out   { border-right-color: #16a34a; }
.sp-feed-item.fi-auto  { border-right-color: var(--primary); }
.sp-feed-item.fi-ai    { border-right-color: #d97706; }
.sp-feed-item.fi-manual{ border-right-color: #7c3aed; }
.sp-feed-item-time {
  font-size: .7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 38px;
}
.sp-feed-item-icon { flex-shrink: 0; }
.sp-feed-item-body {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.sp-feed-item-name { font-weight: 600; }
.sp-feed-item-msg  { color: var(--text-muted); }

@media (max-width: 640px) {
  .sp-feed { max-height: 130px; }
  .sp-feed-item { font-size: .75rem; padding: .2rem .7rem; }
}

/* ── Toolbar ── */
.sp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1.5rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.sp-board-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.sp-badge-new {
  background: var(--danger);
  color: #fff;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .45rem;
}
.sp-toolbar-kpis {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.sp-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .3rem .9rem;
  border-left: 1px solid var(--border);
}
.sp-kpi:last-child { border-left: none; }
.sp-kpi-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.sp-kpi-lbl {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: .05rem;
}
.sp-toolbar-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.sp-search-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .42rem .85rem;
  color: var(--text);
  font-size: .88rem;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
  width: 200px;
}
.sp-search-input:focus { border-color: var(--primary); }
.sp-search-input::placeholder { color: var(--text-muted); }
.sp-queue-tools { display: flex; gap: .3rem; }
.sp-tool-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 7px;
  padding: .32rem .65rem;
  font-size: .77rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.sp-tool-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), .04);
}

/* ── Global AI toggle button ── */
.sp-ai-toggle-btn {
  border-radius: 7px;
  padding: .32rem .75rem;
  font-size: .77rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.sp-ai-toggle-btn.sp-ai-on {
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.4);
  color: #15803d;
}
.sp-ai-toggle-btn.sp-ai-on:hover { background: rgba(22,163,74,.2); }
.sp-ai-toggle-btn.sp-ai-off {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.35);
  color: #dc2626;
}
.sp-ai-toggle-btn.sp-ai-off:hover { background: rgba(220,38,38,.15); }

/* ── Kanban board ── */
.sp-board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
}

/* Column */
.sp-board-col {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg);
  min-height: 0;
}
.sp-board-col:last-child { border-left: none; }

/* Column header */
.sp-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.sp-col-pending { border-top: 3px solid var(--primary); color: var(--primary); }
.sp-col-open    { border-top: 3px solid #0891b2;       color: #0891b2; }
.sp-col-closed  { border-top: 3px solid #16a34a;       color: #15803d; }
.sp-col-badge {
  font-size: .75rem;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: inherit;
  border-radius: 20px;
  padding: .1rem .5rem;
  min-width: 22px;
  text-align: center;
}

/* Scrollable card area */
.sp-col-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .85rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── Conversation card (order-card style) ── */
.sp-conv-card {
  background: var(--card);
  border: 1px solid rgba(226,232,240,.9);
  border-right: 4px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* prevent flex from shrinking cards and clipping content */
}
.sp-conv-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.sp-conv-card.sp-card-active {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow);
}
.sp-conv-pending { border-right-color: var(--primary); }
.sp-conv-open    { border-right-color: #0891b2; }
.sp-conv-closed  { border-right-color: #16a34a; opacity: .7; }
.sp-conv-closed:hover { opacity: 1; }

/* Card top row: avatar + name + time */
.sp-card-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .8rem .45rem;
}
.sp-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #0891b2);
}
.sp-card-info { flex: 1; min-width: 0; }
.sp-card-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-card-phone {
  font-size: .72rem;
  color: var(--text-muted);
  direction: ltr;
  text-align: right;
  margin-top: .05rem;
}
.sp-card-time {
  font-size: .7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: .1rem;
}

/* AI progress bar — bottom edge of card while Gemini processes */
@keyframes sp-ai-fill {
  from { width: 0% }
  to   { width: 82% }
}
.sp-ai-pbar {
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #06b6d4);
  border-radius: 0 0 8px 8px;
  transition: none;
  pointer-events: none;
}

/* iOS-style AI toggle on conversation card */
.sp-ai-toggle-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 2px;
  border-radius: 20px;
  transition: opacity .15s;
}
.sp-ai-toggle-wrap.sp-ai-toggling { opacity: .5; pointer-events: none; }
.sp-ios-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 19px;
  cursor: pointer;
}
.sp-ios-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sp-ios-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 19px;
  transition: background .25s;
}
.sp-ios-slider::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sp-ios-toggle input:checked + .sp-ios-slider { background: #34c759; }
.sp-ios-toggle input:checked + .sp-ios-slider::before { transform: translateX(15px); }
html.dark .sp-ios-slider { background: #555; }
html.dark .sp-ios-toggle input:checked + .sp-ios-slider { background: #30d158; }

/* Card message preview */
.sp-card-preview {
  padding: 0 .8rem .55rem;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer: badges */
.sp-card-foot {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem .55rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.018);
  flex-wrap: wrap;
}
.sp-card-badge-pending {
  font-size: .7rem;
  font-weight: 700;
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary);
  border-radius: 5px;
  padding: .1rem .4rem;
}
.sp-card-badge-unread {
  font-size: .68rem;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  border-radius: 20px;
  padding: .08rem .4rem;
  min-width: 20px;
  text-align: center;
}
.sp-card-order {
  font-size: .7rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), .07);
  color: var(--primary);
  border-radius: 5px;
  padding: .1rem .4rem;
}
.sp-col-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
  padding: 2rem 1rem;
  opacity: .7;
}

/* ── Card reopen bar ── */
.sp-card-reopen-bar {
  padding: .45rem .75rem .5rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.018);
}
.sp-card-reopen-btn {
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .3rem .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.sp-card-reopen-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), .04);
}

/* ── Archive-to-history bar ── */
.sp-card-archive-bar {
  padding: .35rem .75rem .4rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.015);
}
.sp-card-archive-btn {
  width: 100%;
  background: none;
  border: 1px solid #b8cce4;
  border-radius: 7px;
  padding: .28rem .6rem;
  font-size: .77rem;
  font-weight: 600;
  color: #5580aa;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.sp-card-archive-btn:hover {
  border-color: #4471a0;
  color: #2a5080;
  background: rgba(68,113,160,.06);
}
.sp-card-archive-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* ── Card order badge row ── */
.sp-card-order-row {
  padding: .2rem .8rem .3rem;
}
.sp-card-order-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 5px;
  padding: .1rem .45rem;
}
.order-badge-active { background: rgba(79,70,229,.1);  color: var(--primary); }
.order-badge-done   { background: rgba(22,163,74,.1);  color: #15803d; }
.order-badge-cancel { background: rgba(220,38,38,.1);  color: #dc2626; }
.order-badge-other  { background: rgba(100,116,139,.1); color: var(--text-muted); }

/* ── Card AI suggestion block ── */
.sp-card-ai {
  border-top: 1px dashed rgba(var(--primary-rgb), .3);
  padding: .6rem .8rem .55rem;
  background: rgba(var(--primary-rgb), .03);
}
.sp-card-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.sp-card-ai-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--primary);
}
.sp-card-ai-edit {
  background: none;
  border: none;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 .2rem;
  border-radius: 4px;
  transition: background .12s;
}
.sp-card-ai-edit:hover { background: var(--border); }
.sp-card-ai-textarea {
  width: 100%;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .55rem;
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 60px;
  margin-bottom: .45rem;
  transition: border-color .15s;
}
.sp-card-ai-textarea:focus { border-color: var(--primary); }
.sp-card-ai-btns { display: flex; gap: .4rem; }
.sp-card-ai-ok {
  flex: 1;
  padding: .32rem .45rem;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(22,163,74,.4);
  background: rgba(22,163,74,.08);
  color: #15803d;
  transition: background .15s;
}
.sp-card-ai-ok:hover { background: rgba(22,163,74,.18); }
.sp-card-ai-ok:disabled { opacity: .55; cursor: default; }
.sp-card-ai-no {
  padding: .32rem .5rem;
  border-radius: 6px;
  font-size: .76rem;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(220,38,38,.3);
  background: rgba(220,38,38,.05);
  color: #dc2626;
  transition: background .15s;
}
.sp-card-ai-no:hover { background: rgba(220,38,38,.14); }

/* ── Variant tabs (formal / friendly) ── */
.sp-card-var-tabs {
  display: flex;
  gap: .35rem;
  padding: .35rem .55rem .2rem;
}
.sp-var-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .3rem .5rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.sp-var-tab.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.sp-var-tab:hover:not(.active) { background: var(--hover-bg); border-color: var(--border-h); }
.sp-var-score {
  font-size: .7rem;
  font-weight: 700;
  border-radius: 5px;
  padding: .05rem .3rem;
}
.sp-var-score.high { background: rgba(22,163,74,.12); color: #15803d; }
.sp-var-score.mid  { background: rgba(217,119,6,.12);  color: #b45309; }
.sp-var-score.low  { background: rgba(100,116,139,.12); color: #475569; }

/* ── "📋 מרשימה" picker button ── */
.sp-card-ai-pick {
  flex-shrink: 0;
  background: rgba(79,70,229,.07);
  color: var(--primary);
  border: 1.5px solid rgba(79,70,229,.25);
  border-radius: 8px;
  padding: .3rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.sp-card-ai-pick:hover { background: rgba(79,70,229,.15); }

/* ── Answer picker panel ── */
.sp-card-picker {
  margin: .5rem .55rem .2rem;
  border: 1.5px solid rgba(79,70,229,.2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-subtle);
}
.sp-card-picker-head {
  font-size: .73rem;
  font-weight: 700;
  color: var(--primary);
  padding: .4rem .7rem;
  background: rgba(79,70,229,.06);
  border-bottom: 1px solid rgba(79,70,229,.12);
}
.sp-picker-loading, .sp-picker-empty {
  font-size: .8rem;
  color: var(--text-muted);
  padding: .6rem .8rem;
  text-align: center;
}
.sp-picker-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  transition: background .12s;
}
.sp-picker-item:last-child { border-bottom: none; }
.sp-picker-item:hover { background: var(--hover-bg); }
.sp-picker-score {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .2rem .45rem;
  white-space: nowrap;
  margin-top: .15rem;
}
.sp-picker-score.high { background: rgba(22,163,74,.1); color: #15803d; }
.sp-picker-score.mid  { background: rgba(217,119,6,.1);  color: #b45309; }
.sp-picker-score.low  { background: rgba(100,116,139,.1); color: #475569; }
.sp-picker-body { flex: 1; min-width: 0; }
.sp-picker-q {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-picker-a {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-picker-use {
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: .25rem .55rem;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity .15s;
  margin-top: .1rem;
}
.sp-picker-use:hover { opacity: .85; }

/* ── Customer message bubble on card ── */
.sp-card-msg {
  padding: .5rem .75rem;
  margin: .1rem 0;
}
.sp-card-msg-txt {
  background: rgba(15,23,42,.035);
  border-right: 3px solid #94a3b8;
  border-radius: 0 7px 7px 0;
  padding: .4rem .65rem;
  font-size: .82rem;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.sp-conv-pending .sp-card-msg-txt {
  border-right-color: var(--primary);
  background: rgba(79,70,229,.04);
}

/* ── Card quick-reply bar ── */
.sp-card-reply {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .75rem .55rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.018);
}
.sp-card-reply-input {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .32rem .65rem;
  font-size: .82rem;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  min-width: 0;
}
.sp-card-reply-input:focus { border-color: var(--primary); }
.sp-card-reply-input::placeholder { color: var(--text-muted); font-size: .8rem; }
.sp-card-reply-send {
  flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: .3rem .65rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.sp-card-reply-send:hover { opacity: .85; }

/* ══════════════════════════════════════════════
   Drawer (slides in from right)
══════════════════════════════════════════════ */
.sp-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 190;
  animation: sp-fade-in .18s ease;
}
.sp-drawer {
  position: fixed;
  top: 106px; /* header + tabs */
  right: 0;
  bottom: 0;
  width: 520px;
  max-width: 100vw;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 2px solid var(--border);
  box-shadow: -4px 0 24px rgba(15,23,42,.12);
  animation: sp-slide-in .2s cubic-bezier(.22,.68,0,1.2);
}
@keyframes sp-slide-in {
  from { transform: translateX(100%); opacity: .7; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes sp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ticket view fills drawer */
.sp-ticket-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── Drawer header ── */
.sp-tv-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1.1rem;
  background: var(--card);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}
.sp-drawer-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.sp-drawer-close:hover { background: var(--border); color: var(--text); }
.sp-tv-customer {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.sp-avatar-lg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #0891b2);
}
.sp-customer-name {
  font-size: .96rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-customer-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .1rem;
}
.sp-order-badge {
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: 5px;
  padding: .1rem .4rem;
  font-size: .72rem;
  font-weight: 600;
}
.sp-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sp-status-dot.open   { background: #22c55e; }
.sp-status-dot.closed { background: var(--text-muted); }
.sp-status-text { font-size: .75rem; }
.sp-action-btn {
  border: none;
  border-radius: 8px;
  padding: .42rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
  flex-shrink: 0;
}
.sp-tv-actions { display: flex; gap: .45rem; align-items: center; flex-shrink: 0; }
.sp-action-btn.resolve { background: #22c55e; color: #fff; }
.sp-action-btn.resolve:hover { opacity: .85; }
.sp-action-btn.invoice { background: rgba(var(--primary-rgb),.1); color: var(--primary); border: 1px solid rgba(var(--primary-rgb),.25); }
.sp-action-btn.invoice:hover { background: rgba(var(--primary-rgb),.18); }
.sp-action-btn.avail { background: rgba(5,150,105,.1); color: #065f46; border: 1px solid rgba(5,150,105,.3); }
.sp-action-btn.avail:hover { background: rgba(5,150,105,.18); }
.sp-action-btn.ai-pause { background: rgba(251,191,36,.15); color: #b45309; border: 1px solid rgba(251,191,36,.4); }
.sp-action-btn.ai-pause:hover { background: rgba(251,191,36,.25); }
.sp-action-btn.ai-pause.ai-paused-on { background: #ef4444; color: #fff; border-color: #ef4444; }
.sp-action-btn.ai-pause.ai-paused-on:hover { opacity: .85; }
.sp-ai-paused-banner { background: #fef3c7; border-bottom: 2px solid #f59e0b; color: #92400e; padding: .5rem 1rem; font-size: .82rem; font-weight: 600; text-align: center; }

/* ── Thread ── */
.sp-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.25rem .75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  background: var(--bg);
}

/* Date divider */
.sp-date-div {
  text-align: center;
  font-size: .72rem;
  color: var(--text-muted);
  margin: 1rem 0 .8rem;
  position: relative;
}
.sp-date-div::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.sp-date-div span {
  position: relative;
  background: var(--bg);
  padding: 0 .65rem;
}

/* ── Customer message entry ── */
.sp-entry { margin-bottom: 1.25rem; }
.sp-entry-customer {
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sp-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .95rem;
  background: rgba(var(--primary-rgb), .04);
  border-bottom: 1px solid var(--border);
}
.sp-entry-who {
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.sp-entry-meta { font-size: .72rem; color: var(--text-muted); }
.sp-entry-body {
  padding: .85rem .95rem;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text);
  word-break: break-word;
}

/* ── AI suggestion (inside entry) ── */
.sp-si {
  border-top: 1px dashed rgba(var(--primary-rgb), .35);
  padding: .85rem .95rem;
  background: rgba(var(--primary-rgb), .025);
}
.sp-si.sp-si-done { opacity: .35; pointer-events: none; }
.sp-si-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.sp-si-label { font-size: .76rem; font-weight: 700; color: var(--primary); }
.sp-si-order {
  font-size: .72rem;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  border-radius: 5px;
  padding: .1rem .4rem;
  font-weight: 600;
}
.sp-si-loading { font-size: .84rem; color: var(--text-muted); padding: .3rem 0; }

.sp-si-variants { display: flex; flex-direction: column; gap: .7rem; }
.sp-si-variant {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .75rem .9rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.sp-si-variant.formal   { border-top: 2.5px solid #0891b2; }
.sp-si-variant.friendly { border-top: 2.5px solid var(--primary); }
.sp-si-vtype {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sp-si-variant.formal   .sp-si-vtype { color: #0891b2; }
.sp-si-variant.friendly .sp-si-vtype { color: var(--primary); }
.sp-si-vtextarea {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  resize: none;
  width: 100%;
  min-height: 54px;
}
.sp-si-vbtns {
  display: flex;
  gap: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.sp-si-ok {
  flex: 1;
  padding: .38rem .5rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(22,163,74,.4);
  background: rgba(22,163,74,.07);
  color: #15803d;
  transition: background .15s;
}
.sp-si-ok:hover { background: rgba(22,163,74,.15); }
.sp-si-ok.sent  { color: var(--text-muted); border-color: var(--border); background: none; cursor: default; }
.sp-si-no {
  padding: .38rem .55rem;
  border-radius: 6px;
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(220,38,38,.3);
  background: rgba(220,38,38,.05);
  color: #dc2626;
  transition: background .15s;
}
.sp-si-no:hover { background: rgba(220,38,38,.12); }
.sp-si-no.done  { color: var(--text-muted); border-color: var(--border); background: none; cursor: default; }

/* ── Sent reply ── */
.sp-entry-reply {
  margin-right: 1.5rem;
  border: 1px solid var(--border);
  border-top: 3px solid #0891b2;
  border-radius: 9px;
  background: var(--card);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.sp-entry-reply.auto-sent { border-top-color: #16a34a; }
.sp-entry-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .9rem;
  background: rgba(8,145,178,.04);
  border-bottom: 1px solid var(--border);
}
.sp-entry-reply.auto-sent .sp-entry-reply-head { background: rgba(22,163,74,.04); }
.sp-entry-reply-who { font-size: .78rem; font-weight: 700; color: #0891b2; }
.sp-entry-reply.auto-sent .sp-entry-reply-who { color: #16a34a; }
.sp-entry-reply-time { font-size: .7rem; color: var(--text-muted); }
.sp-entry-reply-body {
  padding: .75rem .9rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
  word-break: break-word;
}

/* ── Reply area ── */
.sp-reply-area {
  flex-shrink: 0;
  border-top: 2px solid var(--border);
  padding: .85rem 1.1rem .95rem;
  background: var(--card);
}
.sp-reply-area-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.sp-reply-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: .65rem .9rem;
  color: var(--text);
  font-size: .9rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color .15s;
  line-height: 1.5;
}
.sp-reply-input:focus { border-color: var(--primary); }
.sp-reply-input::placeholder { color: var(--text-muted); }
.sp-reply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .5rem;
}
.sp-reply-hint { font-size: .72rem; color: var(--text-muted); }
.sp-send-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .46rem 1.3rem;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.sp-send-btn:hover    { opacity: .87; }
.sp-send-btn:disabled { opacity: .45; cursor: default; }

/* ══════════════════════════════════════════════
   Knowledge modal
══════════════════════════════════════════════ */
.sp-k-form { margin-bottom: 1rem; }
.sp-k-form-row { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.sp-k-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .85rem;
  color: var(--text);
  font-family: inherit;
  font-size: .87rem;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.sp-k-input:focus { border-color: var(--primary); }
.sp-k-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .75rem .85rem;
  margin-bottom: .5rem;
}
.sp-k-item.auto-reply-on  { border-right: 3px solid #16a34a; }
.sp-k-item.auto-send-on   { border-right: 3px solid #2563eb; background: rgba(37,99,235,.04); }
.sp-k-q {
  font-size: .86rem;
  font-weight: 600;
  margin-bottom: .3rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.sp-k-a    { font-size: .83rem; color: var(--text-muted); line-height: 1.45; }
.sp-k-usage { font-size: .71rem; color: var(--text-muted); margin-top: .25rem; }
.sp-k-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.sp-k-badge {
  font-size: .68rem;
  background: rgba(22,163,74,.12);
  color: #15803d;
  border-radius: 4px;
  padding: .08rem .35rem;
  font-weight: 600;
}
.sp-k-badge.auto-send { background: rgba(37,99,235,.12); color: #1d4ed8; }
.sp-k-badge.queue     { background: rgba(234,179,8,.15);  color: #92400e; }
.sp-k-autosend {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 5px;
  font-size: .72rem;
  padding: .15rem .4rem;
  cursor: pointer;
  color: var(--text-muted);
}
.sp-k-autosend.on { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.sp-k-edit { border: none; background: none; cursor: pointer; font-size: .8rem; padding: .1rem .25rem; opacity: .5; }
.sp-k-edit:hover { opacity: 1; }
.sp-k-edit-row { margin-top: .4rem; }
.sp-k-edit-ta {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--primary); border-radius: 6px;
  padding: .45rem .6rem; font-size: .83rem; font-family: inherit;
  color: var(--text); background: var(--bg); resize: vertical; min-height: 60px;
}
.sp-k-edit-btns { display: flex; gap: .4rem; margin-top: .35rem; }
.sp-k-toggle {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 5px;
  font-size: .72rem;
  cursor: pointer;
  padding: .12rem .4rem;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.sp-k-toggle.on  { border-color: #16a34a; color: #15803d; }
.sp-k-toggle.off { border-color: var(--text-muted); color: var(--text-muted); }
.sp-k-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .82rem;
  padding: 0;
  flex-shrink: 0;
}
.sp-k-del:hover { color: var(--danger); }
.sp-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: .86rem;
  padding: 2.5rem 1rem;
}

/* ══════════════════════════════════════════════
   Mobile column tabs (hidden on desktop)
══════════════════════════════════════════════ */
.sp-mobile-col-tabs {
  display: none;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sp-mct-btn {
  flex: 1;
  padding: .65rem .4rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-bottom: -1px;
}
.sp-mct-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.sp-mct-btn[data-col="open"].active  { color: #0891b2; border-bottom-color: #0891b2; }
.sp-mct-btn[data-col="closed"].active { color: #16a34a; border-bottom-color: #16a34a; }
.sp-mct-badge {
  background: rgba(0,0,0,.08);
  border-radius: 20px;
  padding: .05rem .38rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
}
.sp-mct-btn.active .sp-mct-badge {
  background: currentColor;
  color: var(--card);
}

/* ══════════════════════════════════════════════
   Responsive — desktop medium
══════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .sp-board { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; }
  .sp-drawer { width: 440px; }
}

/* ══════════════════════════════════════════════
   Responsive — mobile (≤640px)
══════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Board root height — account for smaller mobile header */
  .sp-board-root {
    height: calc(100dvh - 126px); /* 54px header + 40px tabs + 32px sync-bar */
  }

  /* Toolbar: two-row layout */
  .sp-toolbar {
    padding: .5rem .75rem;
    gap: .4rem;
    flex-direction: column;
    align-items: stretch;
  }
  .sp-toolbar-left {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  /* Hide KPIs on small screens — counts visible in column tabs */
  .sp-toolbar-kpis { display: none; }
  .sp-toolbar-right {
    gap: .35rem;
    flex-wrap: nowrap;
  }
  .sp-search-input {
    flex: 1;
    width: auto;
    min-width: 0;
    font-size: .85rem;
  }
  /* Show only emoji for tool buttons on mobile */
  .sp-tool-btn .sp-btn-txt { display: none; }
  .sp-tool-btn {
    padding: .38rem .55rem;
    font-size: 1rem;
    line-height: 1;
  }

  /* Show mobile column tabs */
  .sp-mobile-col-tabs { display: flex; }

  /* Board: single column */
  .sp-board {
    grid-template-columns: 1fr;
    overflow-x: hidden;
  }
  .sp-board-col { display: none; }
  .sp-board-col.sp-col-active { display: flex; }

  /* Bigger card touch targets */
  .sp-conv-card { border-radius: 12px; }
  .sp-card-top { padding: .8rem .9rem .5rem; }
  .sp-card-avatar { width: 40px; height: 40px; font-size: .95rem; }
  .sp-card-name { font-size: .95rem; }
  .sp-card-preview { font-size: .85rem; padding: 0 .9rem .6rem; }
  .sp-card-reply { padding: .55rem .85rem .6rem; gap: .45rem; }
  .sp-card-reply-input {
    font-size: .88rem;
    padding: .48rem .75rem;
    min-height: 40px;
  }
  .sp-card-reply-send {
    padding: .48rem 1rem;
    font-size: .86rem;
    min-height: 40px;
  }
  .sp-card-ai-btns {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .sp-card-ai-ok, .sp-card-ai-no, .sp-card-ai-pick {
    padding: .52rem .7rem;
    font-size: .84rem;
    min-height: 42px;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Drawer: full-screen overlay */
  .sp-drawer {
    top: 0;
    inset: 0;
    width: 100%;
    max-width: 100%;
    border-left: none;
    box-shadow: none;
    border-radius: 0;
  }
  .sp-drawer-overlay { inset: 0; }

  /* Drawer header */
  .sp-tv-head {
    padding: .7rem .9rem;
    gap: .55rem;
    flex-wrap: nowrap;
  }
  .sp-drawer-close {
    font-size: 1.1rem;
    padding: .3rem .5rem;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sp-avatar-lg { width: 36px; height: 36px; font-size: .88rem; }
  .sp-customer-name { font-size: .9rem; }
  .sp-tv-actions { gap: .3rem; flex-shrink: 0; }
  .sp-action-btn {
    padding: .4rem .75rem;
    font-size: .78rem;
    white-space: nowrap;
  }

  /* Thread */
  .sp-thread { padding: .85rem .75rem .5rem; }
  .sp-entry { margin-bottom: 1rem; }
  .sp-entry-body { font-size: .9rem; }

  /* Reply area */
  .sp-reply-area { padding: .6rem .85rem .8rem; }
  .sp-reply-area-label { display: none; }
  .sp-reply-input {
    font-size: .92rem;
    padding: .6rem .9rem;
    border-radius: 12px;
  }
  .sp-reply-footer { margin-top: .45rem; }
  .sp-reply-hint { display: none; }
  .sp-send-btn {
    padding: .55rem 1.6rem;
    font-size: .9rem;
    min-height: 42px;
    border-radius: 10px;
  }

  /* AI suggestion blocks */
  .sp-si { padding: .75rem .85rem; }
  .sp-si-variants { gap: .55rem; }
  .sp-si-vtextarea { min-height: 52px; font-size: .88rem; }
  .sp-si-ok, .sp-si-no {
    padding: .48rem .6rem;
    font-size: .84rem;
    min-height: 40px;
  }
}

/* Impersonation banner */
#impersonationBanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #d97706; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .5rem 1rem; font-size: .88rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
#impersonationBanner button {
  background: rgba(0,0,0,.25); border: none; color: #fff;
  border-radius: var(--radius); padding: .25rem .65rem; cursor: pointer;
  font-size: .82rem; font-weight: 600;
}
#impersonationBanner button:hover { background: rgba(0,0,0,.4); }
body:has(#impersonationBanner) { padding-top: 36px; }

.modal-sm { max-width: 380px; }

/* ═══════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════ */
.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 0 .25rem;
}
.dash-toolbar-left  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.dash-toolbar-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.period-btns {
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.period-btn {
  background: none;
  border: none;
  padding: .38rem .85rem;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .12s, box-shadow .15s;
  font-family: inherit;
  white-space: nowrap;
}
.period-btn:hover  { background: var(--card); color: var(--text); }
.period-btn.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.period-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.period-label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  min-width: 130px;
  text-align: center;
}
.nav-arrow {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .12s, border-color .12s;
}
.nav-arrow:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

/* Filter button (replaces multiselect-btn in dashboard) */
.dash-filter-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .42rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .12s;
  white-space: nowrap;
}
.dash-filter-btn:hover { border-color: var(--primary); background: var(--bg); }
.dash-filter-btn svg   { color: var(--text-muted); flex-shrink: 0; }

/* CSV action button */
.dash-action-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .42rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .12s, background .12s;
  white-space: nowrap;
}
.dash-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--bg); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .75rem;
}
.kpi-card {
  background: var(--card);
  border: 1px solid rgba(226,232,240,.8);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s, transform .2s;
}
.kpi-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.kpi-card.kpi-success { border-top: 3px solid var(--success); }
.kpi-card.kpi-danger  { border-top: 3px solid var(--danger); }
.kpi-card.kpi-warning { border-top: 3px solid var(--warning); }

.kpi-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.kpi-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.kpi-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

.dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.dash-card { padding: 0; }
.dash-card-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border);
}

.status-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.status-bar-row:last-child { border-bottom: none; }
.status-bar-num {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

/* ═══════════════════════════════════════════════
   IMPORT MODAL
═══════════════════════════════════════════════ */
.modal-xl { max-width: 860px; }

.import-sections { display: flex; flex-direction: column; gap: 1.5rem; }

.import-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.import-section-title {
  background: #F8FAFC;
  padding: .65rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.import-section .form-grid { padding: 1rem; }
.import-items-table { margin: 0; }
.import-items-table td, .import-items-table th { padding: .45rem .6rem; }

.import-items-total {
  padding: .6rem 1rem;
  background: #F8FAFC;
  border-top: 1px solid var(--border);
  font-size: .88rem;
  color: var(--text-muted);
  text-align: left;
}

/* ═══════════════════════════════════════════════
   EXPENSES
═══════════════════════════════════════════════ */
/* legacy — kept for safety */
.expenses-total-row { display: none; }
.expenses-total-num { display: none; }

/* ══════════════════════════════════════════════
   EXPENSES — redesigned mobile-first
══════════════════════════════════════════════ */

/* Month nav */
/* Expenses toolbar */
.exp-toolbar { margin-bottom: .75rem; }
.exp-month-ctrl {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.exp-month-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  text-align: center;
  cursor: pointer;
  outline: none;
  width: 160px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.exp-month-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}

/* ══ KPI row ══ */
.exp-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.exp-kpi-row .kpi-card {
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  overflow: hidden;
}
.exp-kpi-row .kpi-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 56px; height: 56px;
  border-radius: 0 14px 0 60px;
  opacity: .07;
  background: currentColor;
}
.exp-kpi-row .kpi-card .kpi-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: .1rem;
}
.exp-kpi-row .kpi-card .kpi-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.exp-kpi-row .kpi-card .kpi-val {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.exp-kpi-row .kpi-card .kpi-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .05rem;
}
.kpi-card.kpi-exp-total { border-right: 3px solid #EF4444; }
.kpi-card.kpi-exp-total .kpi-val { color: #EF4444; }
.kpi-card.kpi-exp-recur { border-right: 3px solid #324A6D; }
.kpi-card.kpi-exp-recur .kpi-val { color: #324A6D; }
.kpi-card.kpi-exp-var   { border-right: 3px solid #F59E0B; }
.kpi-card.kpi-exp-var   .kpi-val { color: #F59E0B; }
.kpi-card.kpi-exp-count { border-right: 3px solid #467FF7; }
.kpi-card.kpi-exp-count .kpi-val { color: #467FF7; }

/* ══ Category group ══ */
.exp-cat-group { margin-bottom: .85rem; }

.exp-cat-hdr {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  margin-bottom: .45rem;
  background: linear-gradient(90deg, rgba(50,74,109,.07) 0%, transparent 100%);
  border-radius: 10px;
  border-right: 3px solid var(--primary);
}
.exp-cat-emoji {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.exp-cat-nm {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .07em;
  flex: 1;
}
.exp-cat-count {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: .1rem .45rem;
  border-radius: 20px;
  border: 1px solid var(--border);
}
.exp-cat-tot {
  font-size: .9rem;
  font-weight: 800;
  color: #EF4444;
  font-variant-numeric: tabular-nums;
}

/* ══ Expense card ══ */
.exp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: .45rem;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.exp-card:hover { box-shadow: 0 4px 16px rgba(50,74,109,.10); transform: translateY(-1px); }
.exp-card-inactive { opacity: .45; filter: grayscale(.3); }

.exp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem .45rem;
  gap: .5rem;
}
.exp-card-name {
  font-size: .93rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-card-eff {
  font-size: 1.1rem;
  font-weight: 800;
  color: #EF4444;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  background: rgba(239,68,68,.06);
  padding: .15rem .5rem;
  border-radius: 8px;
}

.exp-card-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .85rem .55rem;
  gap: .5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.exp-card-badges {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  align-items: center;
}
.exp-badge {
  font-size: .67rem;
  font-weight: 600;
  padding: .15rem .45rem;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}
.exp-badge-recur { background: rgba(50,74,109,.1); color: #324A6D; }
.exp-badge-ship  { background: #FEF3C7; color: #D97706; }
.exp-badge-freq  { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.exp-card-acts {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
}
.exp-icon-btn {
  background: none;
  border: 1px solid transparent;
  padding: .28rem .35rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: .95rem;
  transition: background .12s, border-color .12s;
  line-height: 1;
}
.exp-icon-btn:hover { background: var(--border); border-color: var(--border); }
.exp-icon-btn.exp-del-btn:hover { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); }

/* mini switch */
.ce-switch-sm .ce-track {
  width: 34px;
  height: 20px;
}
.ce-switch-sm .ce-track::after {
  width: 14px;
  height: 14px;
  top: 3px;
  right: 3px;
}
.ce-switch-sm input:checked ~ .ce-track::after {
  transform: translateX(-14px);
}

/* ══ FAB — mobile only ══ */
.exp-fab {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #324A6D, #467FF7);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(70,127,247,.45), 0 1px 4px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.exp-fab:hover  { transform: scale(1.08); box-shadow: 0 6px 24px rgba(70,127,247,.55); }
.exp-fab:active { transform: scale(.93); }

/* ══ Desktop — 2-col cards, show add btn, hide FAB ══ */
@media (min-width: 700px) {
  #expCategoryGroups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.25rem;
    align-items: start;
  }
  .exp-fab { display: none; }
  .exp-add-top { display: inline-flex !important; }
}
@media (max-width: 699px) {
  .exp-add-top { display: none !important; }
  .exp-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  #expCategoryGroups { grid-template-columns: repeat(3, 1fr); }
}

/* iOS padding at bottom of content */
#tab-expenses { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .stock-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 1fr; }
  .modal-xl { max-width: 98vw; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 640px)
═══════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Base ── */
  html { font-size: 14px; }
  .main { padding: .75rem .5rem calc(.75rem + env(safe-area-inset-bottom, 0px)) .5rem; gap: .75rem; }

  /* ── Header ── */
  .header-inner { padding: 0 .75rem; height: 54px; }
  .header-title { font-size: .95rem; }
  .header-logo-img { height: 30px; }
  .header-icon  { font-size: 1.1rem; }
  .header-stats { display: none; }
  .header-username { display: none; }
  .btn-logout   { font-size: .75rem; padding: .28rem .55rem; }

  /* ── Tabs ── */
  .tabs-nav {
    padding: 0 .5rem;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    top: 54px;
  }
  .tabs-nav::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: .75rem .75rem;
    font-size: .8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .sync-menu-trigger {
    font-size: .78rem;
    padding: .38rem .65rem;
  }
  .sync-menu-panel {
    position: fixed;
    left: auto;
    right: .5rem;
    top: 100px;
    z-index: 9999;
  }

  /* ── Toolbar ── */
  .toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .toolbar-filters { flex-direction: column; gap: .5rem; }
  .search-wrap { max-width: 100%; min-width: unset; }
  .select-filter { min-width: unset; width: 100%; }
  .multiselect-btn { width: 100%; }
  .toolbar .btn { width: 100%; justify-content: center; }
  .date-filter-wrap { flex-wrap: wrap; }
  .date-range-input { min-width: unset; flex: 1; }

  /* ── Tables — horizontal scroll ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Do NOT override min-width here — 900px breakpoint already sets 480px.
     Overriding back to 680px caused overflow on phones. */
  .orders-table { font-size: .78rem; }
  .orders-table thead th,
  .orders-table td { padding: .4rem .45rem; }

  /* ── Cards ── */
  .card { border-radius: var(--radius); }

  /* ── KPI ── */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .kpi-val  { font-size: 1.25rem; }
  .kpi-card { padding: .85rem .9rem; }

  /* ── Dashboard ── */
  .dash-toolbar        { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .dash-toolbar-left   { width: 100%; }
  .dash-toolbar-right  { width: 100%; justify-content: flex-end; }
  .period-btns         { flex-wrap: wrap; gap: 2px; }
  .period-btn          { padding: .32rem .6rem; font-size: .78rem; }
  .period-label        { min-width: 100px; font-size: .85rem; }
  .dash-row            { grid-template-columns: 1fr; }

  /* ── Stock cards ── */
  .stock-cards { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stock-card  { padding: .9rem 1rem; }
  .stock-card-num { font-size: 1.5rem; }

  /* ── Modals ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal, .modal-lg, .modal-xl, .modal-sm {
    max-width: 100%;
    width: 100%;
    max-height: 93vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-header { padding: .9rem 1rem; }
  .modal-body   { padding: 1rem; }
  .modal-footer { padding: .75rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .modal-footer .btn { flex: 1; justify-content: center; min-width: 120px; min-height: 48px; touch-action: manipulation; }

  /* ── Forms ── */
  .form-grid    { grid-template-columns: 1fr; gap: .75rem; }
  .detail-grid  { grid-template-columns: 1fr; }

  /* ── Import modal ── */
  .import-section .form-grid { padding: .75rem; }
  .import-items-table td,
  .import-items-table th { padding: .35rem .4rem; font-size: .8rem; }

  /* ── Cards grid — 2 columns on mobile ── */
  .orders-cards-wrap { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  /* compact padding inside each card */
  .card-top     { padding: .38rem .5rem .22rem; }
  .card-mid     { padding: .18rem .5rem .28rem; }
  .card-extras  { padding: .18rem .5rem .32rem; gap: .22rem; }
  .card-bot     { padding: .32rem .5rem .38rem; gap: .3rem; }
  /* hide phone — space is too tight */
  .order-card .card-phone { display: none; }
  /* fulfillment: keep but shrink */
  .card-fulfillment { max-width: 72px; font-size: .63rem; }
  /* text sizes */
  .card-order-num { font-size: .82rem; }
  .card-name      { font-size: .82rem; }
  .card-amount    { font-size: .82rem; }
  .card-items     { font-size: .63rem; }
  .card-date      { font-size: .63rem; }
  /* status select — full width, smaller */
  .card-bot .status-select { font-size: .7rem; padding: .22rem .28rem; }
  /* action buttons — slightly smaller */
  .btn-wa, .btn-detail { width: 28px; height: 28px; font-size: .82rem; }

  /* ── Multiselect dropdown — stay within viewport ── */
  .multiselect-dropdown { position: fixed; right: .5rem; left: .5rem; width: auto; z-index: 200; }

  /* ── View toggle — bump up card button on mobile ── */
  .vt-btn#viewCards { order: -1; }

  /* ── Customers top row — already handled at 900px, keep single col ── */
  .cust-top-row { grid-template-columns: 1fr; }

  /* ── Cashflow summary ── */
  .cf-summary { grid-template-columns: repeat(2, 1fr); }

  /* ── Toast ── */
  .toast { white-space: normal; max-width: 90vw; text-align: center; }
}

/* ═══════════════════════════════════════════════
   CASHFLOW
═══════════════════════════════════════════════ */
.cf-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: .75rem;
}
@media (max-width: 700px) { .cf-summary { grid-template-columns: repeat(2, 1fr); } }

.cf-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(226,232,240,.8);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: .9rem;
  transition: transform .18s, box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.cf-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px;
  height: 100%;
}
.cf-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cf-card-in::after  { background: #16A34A; }
.cf-card-out::after { background: #DC2626; }
.cf-card-net::after { background: #4F46E5; }
.cf-card-bal::after { background: #0284C7; }

.cf-card-icon {
  font-size: 1.45rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cf-card-in  .cf-card-icon { background: #dcfce7; }
.cf-card-out .cf-card-icon { background: #fee2e2; }
.cf-card-net .cf-card-icon { background: #ede9fe; }
.cf-card-bal .cf-card-icon { background: #e0f2fe; }

.cf-card-content { flex: 1; min-width: 0; }
.cf-card-label {
  font-size: .7rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; white-space: nowrap;
}
.cf-card-val   { font-size: 1.3rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.cf-card-in  .cf-card-val { color: #16A34A; }
.cf-card-out .cf-card-val { color: #DC2626; }
.cf-card-net .cf-card-val { color: #4F46E5; }
.cf-card-bal .cf-card-val { color: #0284C7; }

.cf-date-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  font-size: .88rem;
  background: var(--card);
  color: var(--text);
  direction: ltr;
}
.cf-date-input:focus { outline: none; border-color: var(--primary); }

/* Drop zone */
.cf-dropzone {
  border: 2px dashed var(--border-h);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.cf-dropzone.drag-over { border-color: var(--primary); background: #EEF2FF; }
.cf-drop-icon  { font-size: 2.5rem; margin-bottom: .75rem; }
.cf-drop-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.cf-drop-sub   { font-size: .9rem; margin-bottom: .5rem; }
.cf-drop-hint  { font-size: .78rem; color: var(--text-light); }

/* Import result banner */
.cf-import-result {
  padding: .8rem 1.2rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  margin-top: .5rem;
}
.cf-import-result.success { background: #F0FDF4; color: #15803D; border: 1.5px solid #BBF7D0; }
.cf-import-result.error   { background: #FEF2F2; color: #DC2626; border: 1.5px solid #FECACA; }

/* Cashflow table cells */
#cfTable .cf-debit  { color: #DC2626; font-weight: 600; text-align: left; direction: ltr; }
#cfTable .cf-credit { color: #16A34A; font-weight: 600; text-align: left; direction: ltr; }
#cfTable .cf-bal    { color: #0284C7; text-align: left; direction: ltr; font-size: .82rem; }
#cfTable .cf-desc   { max-width: 220px; white-space: normal; line-height: 1.35; }
#cfTable .cf-ref    { font-family: monospace; font-size: .78rem; color: var(--text-muted); }
#cfTable .cf-note   { font-size: .78rem; color: var(--text-muted); font-style: italic; max-width: 160px; white-space: normal; }
.cf-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: .9rem;
  padding: .2rem .3rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.cf-del-btn:hover { color: var(--danger); background: #FEF2F2; }

/* ═══════════════════════════════════════════════
   CNY / EXCHANGE RATE
═══════════════════════════════════════════════ */
.cny-rate-bar {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFF3E0 100%);
  border: 1.5px solid #FED7AA;
  border-right: 4px solid #F97316;
}
.cny-status {
  font-size: .82rem;
  color: var(--text-muted);
  padding: .3rem .7rem;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.cny-status.loading { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.cny-status.loaded  { color: #15803D; border-color: #BBF7D0; background: #F0FDF4; font-weight: 700; }
.cny-status.error   { color: #DC2626; border-color: #FECACA; background: #FEF2F2; }

.cny-diff-badge {
  padding: .5rem .8rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  text-align: center;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cny-diff-badge.positive { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
.cny-diff-badge.negative { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.cny-diff-badge.zero     { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }

/* ═══════════════════════════════════════════════
   IMPORT PRODUCT AUTOCOMPLETE
═══════════════════════════════════════════════ */
.imp-ac-wrap {
  position: relative;
}
.imp-ac-input {
  width: 100%;
}
.imp-ac-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  background: var(--card);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}
.imp-ac-opt {
  padding: .5rem .8rem;
  font-size: .85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.imp-ac-opt:last-child { border-bottom: none; }
.imp-ac-opt:hover { background: #EEF2FF; color: var(--primary); }
.imp-ac-new {
  color: var(--primary);
  font-weight: 600;
  background: #F8FAFF;
  font-size: .8rem;
}
.imp-ac-new:hover { background: #EEF2FF; }
.imp-new-badge {
  position: absolute;
  top: 50%;
  left: .5rem;
  transform: translateY(-50%);
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 8px;
  border: 1px solid #BFDBFE;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════ */
.pg-btn {
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.pg-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--border-h); }
.pg-btn:disabled { opacity: .35; cursor: default; }

/* ═══════════════════════════════════════════════
   CSP-SAFE UTILITIES (replaces inline styles)
═══════════════════════════════════════════════ */

/* Visibility helper */
.d-none { display: none; }
/* Bell dropdown needs higher specificity to override mobile media-query display:flex */
.bell-dropdown.d-none { display: none; }

/* ── Specific element layout ────────────────────────────────────────────── */
#paginationBar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
}
#cmpEmpty { padding: 1.5rem; }
#topProductsTable { min-width: unset; }
#trendTable { min-width: 600px; }
#expensesTable { min-width: 600px; }
#reorderTable { min-width: 860px; }
#reorderLeadDays { width: 80px; text-align: center; }
#reorderTargetMonths, #reorderAnalysisMonths { width: 70px; text-align: center; }
#retentionMonths, #abcMonths { width: 60px; text-align: center; }
#cfForecastSection { margin-bottom: 1.25rem; }
#cfForecastMeta { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
#cfForecastTable { min-width: unset; font-size: .88rem; }
#cfRecommendation { margin-bottom: 1rem; }
#cfCheckAmount { width: 160px; }
#cfCheckBtn, #saveExpHistoryEntry { white-space: nowrap; }
#cfShowMoreWrap { text-align: center; padding: .75rem; }
#cfShowMoreBtn { font-size: .85rem; }
#imp_cny_rate { width: 110px; font-weight: 700; }
#exp_billing_day { width: 120px; }
#exp_amount_hint { color: var(--muted); margin-top: .25rem; display: block; }
#impViewBody { padding: 1.25rem; }
#u_active { margin-left: .4rem; }
#impAcGlobalDropdown {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  max-height: 240px;
  overflow-y: auto;
  min-width: 200px;
}
#importItemsTable { min-width: unset; }
#importItemsTable th:nth-child(2) { width: 80px; text-align: center; }
#importItemsTable th:nth-child(3) { width: 120px; text-align: center; }
#importItemsTable th:nth-child(4),
#importItemsTable th:nth-child(5) { width: 100px; text-align: center; }
#importItemsTable th:nth-child(6) { width: 40px; }
#orderItemsEmpty td { text-align: center; color: var(--muted); padding: .8rem; }
#customerModal .modal-body { padding: 0; }

/* ── Column alignment ───────────────────────────────────────────────────── */
.col-left { text-align: left !important; }

/* ── Layout flex utilities ──────────────────────────────────────────────── */
.flex-row      { display: flex; align-items: center; gap: .5rem; }
.flex-row-wrap { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.flex-row-lg   { display: flex; align-items: center; gap: .75rem; }
.flex-btns-row { display: flex; gap: .5rem; }
.flex-space    { display: flex; justify-content: space-between; align-items: center;
                 flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.flex-form-row { display: flex; gap: .75rem; align-items: flex-end;
                 margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar-end   { justify-content: flex-end; }

/* ── Spacing utilities ──────────────────────────────────────────────────── */
.mt-1   { margin-top: 1rem; }
.mb-sm  { margin-bottom: .5rem; }
.mt-sm  { margin-top: .5rem; }
.mw-260 { max-width: 260px; }
.mw-280 { max-width: 280px; }

/* ── Table/wrap utilities ───────────────────────────────────────────────── */
.table-wrap-limited { max-height: 320px; overflow-y: auto; }
.table-wrap-modal   { max-height: 340px; overflow-y: auto; }
.chart-wrap-sm      { position: relative; height: 160px; }

/* ── Text utilities ─────────────────────────────────────────────────────── */
.title-md          { font-weight: 700; font-size: 1rem; }
.label-xs          { font-size: .8rem; }
.label-muted       { color: var(--muted); }
.label-sm          { font-size: .85rem; font-weight: 600; }
.label-toolbar     { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.note-small        { font-weight: 400; opacity: .7; }
.note-muted        { font-weight: 400; color: var(--text-muted); font-size: .75rem; }
.text-muted-sm     { color: var(--text-muted); }
.text-primary      { color: var(--primary); }
.text-primary-bold { color: var(--primary); font-weight: 700; }
.fw-bold-sm        { font-weight: 700; font-size: .9rem; }
.td-empty          { text-align: center; color: var(--muted); padding: 1.5rem; }

/* ── Input utilities ────────────────────────────────────────────────────── */
.input-inline { width: auto; padding: .3rem .6rem; }
.input-dense  { padding: .35rem .5rem; }

/* ── Form utilities ─────────────────────────────────────────────────────── */
.form-grid-3       { grid-template-columns: repeat(3, 1fr); }
.form-group-flex   { margin: 0; flex: 1; min-width: 120px; }
.form-group-flex-lg { margin: 0; flex: 2; min-width: 160px; }

/* ── Button utilities ───────────────────────────────────────────────────── */
.btn-xs          { font-size: .8rem; padding: .3rem .7rem; }
.btn-danger-soft { font-size: .8rem; padding: .3rem .7rem;
                   background: rgba(239,68,68,.1); color: var(--danger);
                   border: 1px solid rgba(239,68,68,.3); }
.btn-nowrap { white-space: nowrap; }

/* ── Import modal layout ────────────────────────────────────────────────── */
.import-section-flex { display: flex; justify-content: space-between; align-items: center; }
.import-total-flex   { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }

/* ── CNY rate bar layout ────────────────────────────────────────────────── */
.cny-rate-inner  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cny-rate-title  { font-weight: 700; font-size: .9rem; }
.cny-rate-manual { display: flex; align-items: center; gap: .4rem; margin-right: auto; }
.cny-rate-label  { font-size: .82rem; color: var(--text-muted); }
.cny-rate-unit   { font-size: .8rem; color: var(--text-muted); }

/* ── Dashboard title variant ────────────────────────────────────────────── */
.dash-card-title-compact { padding-bottom: .5rem !important; }


/* ═══════════════════════════════════════════════
   WHATSAPP PANEL
═══════════════════════════════════════════════ */
.wa-panel          { max-width: 860px; margin: 0 auto; padding: 1.2rem; }
.wa-title          { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
.wa-header-row     { display: flex; justify-content: space-between; align-items: flex-start;
                     background: var(--card); border-radius: var(--radius-lg);
                     padding: 1.2rem 1.4rem; margin-bottom: 1rem;
                     box-shadow: var(--shadow-sm); gap: 1rem; flex-wrap: wrap; }
.wa-header-left    { display: flex; flex-direction: column; gap: .5rem; }
.wa-instance-row   { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wa-instance-label { font-size: .9rem; color: var(--text-muted); }
.wa-btn-sm         { font-size: .78rem; padding: .25rem .6rem; }

.wa-status-badge        { display: inline-block; padding: .25rem .7rem; border-radius: 999px;
                          font-size: .82rem; font-weight: 600; }
.wa-status-badge.connected    { background: #DCFCE7; color: #15803D; }
.wa-status-badge.disconnected { background: #FEE2E2; color: #B91C1C; }
.wa-status-badge.checking     { background: #FEF9C3; color: #854D0E; }
.wa-status-badge.warning      { background: #FFEDD5; color: #C2410C; }

.wa-global-toggle-wrap { display: flex; align-items: center; }
.wa-global-label       { display: flex; align-items: center; gap: .6rem;
                         font-size: .9rem; font-weight: 600; cursor: pointer; }

/* Toggle switch */
.wa-toggle        { position: relative; display: inline-block; width: 42px; height: 24px; }
.wa-toggle input  { opacity: 0; width: 0; height: 0; }
.wa-toggle-slider { position: absolute; inset: 0; background: #CBD5E1;
                    border-radius: 999px; cursor: pointer; transition: .2s; }
.wa-toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px;
                             left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
                             transition: .2s; }
.wa-toggle input:checked + .wa-toggle-slider { background: var(--primary); }
.wa-toggle input:checked + .wa-toggle-slider::before { transform: translateX(18px); }
.wa-toggle-lg     { width: 52px; height: 28px; }
.wa-toggle-lg .wa-toggle-slider::before { height: 22px; width: 22px; }
.wa-toggle-lg input:checked + .wa-toggle-slider::before { transform: translateX(24px); }

.wa-section        { background: var(--card); border-radius: var(--radius-lg);
                     padding: 1.2rem 1.4rem; margin-bottom: 1rem;
                     box-shadow: var(--shadow-sm); }
.wa-section-title  { font-size: 1rem; font-weight: 700; margin-bottom: .8rem;
                     color: var(--text); }

.wa-triggers-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                     gap: .8rem; margin-bottom: 1rem; }
.wa-trigger-card   { border: 1px solid var(--border); border-radius: var(--radius);
                     padding: .8rem 1rem; }
.wa-trigger-header { display: flex; justify-content: space-between; align-items: center;
                     margin-bottom: .5rem; }
.wa-trigger-label  { font-weight: 600; font-size: .9rem; }
.wa-trigger-msg    { width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
                     padding: .45rem .6rem; font-size: .85rem; resize: vertical;
                     font-family: inherit; color: var(--text); background: var(--bg); }
.wa-trigger-msg:focus { outline: none; border-color: var(--primary); }
.wa-vars-hint      { font-size: .75rem; color: var(--text-muted); margin-top: .3rem; }
.wa-vars-hint code { background: var(--border); border-radius: 3px; padding: 1px 4px;
                     font-size: .73rem; margin: 0 2px; }

.wa-save-btn       { margin-top: .4rem; }

.wa-manual-row     { display: flex; flex-direction: column; gap: .6rem; }
.wa-input          { border: 1px solid var(--border); border-radius: var(--radius);
                     padding: .5rem .8rem; font-size: .9rem; width: 100%;
                     font-family: inherit; color: var(--text); }
.wa-input:focus    { outline: none; border-color: var(--primary); }
.wa-textarea       { width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
                     padding: .5rem .8rem; font-size: .9rem; resize: vertical;
                     font-family: inherit; color: var(--text); }
.wa-textarea:focus { outline: none; border-color: var(--primary); }

.wa-log-header     { display: flex; justify-content: space-between; align-items: center;
                     margin-bottom: .8rem; }
.wa-log-header .wa-section-title { margin-bottom: 0; }
.wa-log-wrap       { overflow-x: auto; }
.wa-log-table      { width: 100%; border-collapse: collapse; font-size: .85rem; }
.wa-log-table th   { text-align: right; padding: .4rem .6rem; font-weight: 600;
                     border-bottom: 2px solid var(--border); color: var(--text-muted); }
.wa-log-table td   { padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.wa-log-table tr.wa-log-fail td { color: var(--danger); }
.wa-log-empty      { text-align: center; color: var(--text-muted); padding: 1.2rem !important; }

.wa-toast          { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
                     background: var(--text); color: #fff; padding: .6rem 1.4rem;
                     border-radius: 999px; font-size: .9rem; opacity: 0;
                     transition: opacity .25s, transform .25s; pointer-events: none; z-index: 9999; }
.wa-toast.show     { opacity: 1; transform: translateX(-50%) translateY(0); }
.wa-toast-error    { background: var(--danger); }

/* ── Dispatch modal ────────────────────────────────────────────────────── */
.dispatch-timing-row { display: flex; gap: 1.5rem; margin-top: .4rem; }
.dispatch-radio      { display: flex; align-items: center; gap: .4rem;
                       cursor: pointer; font-size: .9rem; }
.dispatch-radio input { cursor: pointer; }

/* ── WhatsApp read receipts ─────────────────────────────────────────────── */
.wa-read-cell        { text-align: center; }
.wa-read-badge       { font-size: .82rem; font-weight: 700; }
.rs-sent             { color: #94A3B8; }
.rs-delivered        { color: #64748B; }
.rs-read             { color: #3B82F6; }
.rs-failed           { color: #DC2626; }

/* ── WhatsApp log on order card ─────────────────────────────────────────── */
/* ── Detail log sections (WA + status history) ──────────────────────────── */
.detail-log-section {
  margin-top: 1.2rem;
  border-top: 1px solid var(--border);
  padding-top: .9rem;
}
.detail-log-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.detail-log-title { font-size: .88rem; font-weight: 700; color: var(--text-muted); }
.detail-log-count {
  font-size: .72rem;
  font-weight: 700;
  background: #E2E8F0;
  color: #475569;
  border-radius: 10px;
  padding: 1px 7px;
}
.log-expand-btn {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .35rem;
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: .78rem;
  color: #4F46E5;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .12s;
}
.log-expand-btn:hover { background: #EEF2FF; }
.wa-order-log           { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.wa-order-log-title     { font-size: .88rem; font-weight: 700; color: var(--text-muted);
                          margin-bottom: .5rem; }
.wa-order-log-table     { width: 100%; border-collapse: collapse; font-size: .82rem; }
.wa-order-log-table th  { text-align: right; padding: .3rem .5rem; font-weight: 600;
                          color: var(--text-muted); border-bottom: 1px solid var(--border); }
.wa-order-log-table td  { padding: .3rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.status-history-table td:nth-child(3) { color: #94A3B8; font-size: .8rem; padding: .3rem .15rem; }
.wl-preview             { color: var(--text-muted); max-width: 180px;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-sent                { color: #94A3B8; font-weight: 700; }
.wl-delivered           { color: #64748B; font-weight: 700; }
.wl-read                { color: #3B82F6; font-weight: 700; }
.wl-failed              { color: #DC2626; font-weight: 700; }
.wl-readtime            { font-size: .75rem; color: var(--text-muted); margin-right: .2rem; }

/* ── Manual product modal ───────────────────────────────────────────────── */
.pm-sync-note        { display: flex; align-items: center; gap: .6rem; margin-top: .8rem;
                       padding: .6rem .8rem; background: #FFFBEB; border-radius: var(--radius);
                       border: 1px solid #FDE68A; }
.pm-sync-badge       { font-size: .8rem; font-weight: 600; color: #B45309; white-space: nowrap; }
.pm-sync-hint        { font-size: .78rem; color: var(--text-muted); }
.pm-badge-manual     { font-size: .75rem; background: #EFF6FF; color: #1D4ED8;
                       padding: 2px 7px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pm-badge-wc         { font-size: .75rem; background: #F5F3FF; color: #6D28D9;
                       padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.pm-delete-btn       { margin-left: auto; }

/* ── Free-text product hint in order form ───────────────────────────────── */
.oip-free-hint       { display: none; font-size: .75rem; color: var(--primary);
                       padding: .2rem .3rem; margin-top: .2rem; }

/* ── Sync pending badge ─────────────────────────────────────────────────── */
.sync-pending-badge { position: absolute; top: -6px; left: -6px;
                      background: var(--danger); color: #fff;
                      font-size: .7rem; font-weight: 700;
                      min-width: 18px; height: 18px; border-radius: 999px;
                      display: flex; align-items: center; justify-content: center;
                      padding: 0 4px; }

/* ══════════════════════════════════════════════
   DELIVERY MAP TAB
══════════════════════════════════════════════ */
.map-panel          { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.map-toolbar        { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.map-title          { font-size: 1.2rem; font-weight: 700; margin: 0; }
.map-filters        { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.map-filter-label   { font-size: .85rem; color: var(--text-muted); }
.map-select         { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 6px;
                      font-size: .875rem; background: #fff; }
.map-input-date     { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 6px;
                      font-size: .875rem; }
.map-counter        { font-size: .85rem; color: var(--text-muted); font-weight: 500; }
.delivery-map-container { height: 500px; border-radius: 10px; overflow: hidden;
                           border: 1px solid var(--border); background: #f0f0f0; }
.map-orders-table   { width: 100%; border-collapse: collapse; font-size: .85rem; }
.map-orders-table th { background: var(--bg-secondary); padding: .5rem .75rem;
                        text-align: right; font-weight: 600; border-bottom: 1px solid var(--border); }
.map-orders-table td { padding: .45rem .75rem; border-bottom: 1px solid var(--border-light); }
.map-list-row:hover { background: var(--bg-hover); }
.map-no-coords td   { opacity: .55; }
.map-pin-ok         { font-size: 1rem; }
.map-pin-miss       { font-size: 1rem; cursor: help; }

/* ── Daily summary fields ─────────────────────────────────────────────── */
.wa-summary-row     { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.wa-field-group     { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 200px; }
.wa-field-label     { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.wa-summary-test-btns { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }

/* ── Expense entry form ──────────────────────────────────────────────────── */
.exp-entry-form       { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem;
                        background: var(--bg-secondary); padding: .75rem; border-radius: var(--radius); }
.exp-entry-row        { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.exp-payment-shortcuts{ display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.btn-xs               { padding: .2rem .55rem; font-size: .78rem; }

/* ── Cashflow upcoming payments ──────────────────────────────────────────── */
.cf-upcoming-header   { font-weight: 700; font-size: .9rem; margin-bottom: .5rem; color: #7C3AED; }
.cf-upcoming-list     { display: flex; flex-wrap: wrap; gap: .5rem; }
.cf-upcoming-item     { display: flex; align-items: center; gap: .5rem;
                        background: #F5F3FF; border: 1px solid #DDD6FE;
                        border-radius: 8px; padding: .35rem .7rem; font-size: .82rem; }
.cf-upcoming-date     { font-weight: 700; color: #5B21B6; }
.cf-upcoming-name     { color: var(--text-main); }
.cf-upcoming-amount   { font-weight: 700; color: #DC2626; }

/* ═══════════════════════════════════════════════
   ACTIVITY LOG
═══════════════════════════════════════════════ */

/* ── Tab badge ────────────────────────────────────────────────────────────── */
.activity-tab-btn     { position: relative; }
.activity-badge       { position: absolute; top: 2px; right: 2px;
                        min-width: 18px; height: 18px; padding: 0 5px;
                        background: #EF4444; color: #fff;
                        border-radius: 999px; font-size: .68rem; font-weight: 700;
                        display: flex; align-items: center; justify-content: center;
                        box-shadow: 0 1px 4px rgba(239,68,68,.4);
                        line-height: 1; }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.activity-page        { max-width: 820px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.activity-header      { display: flex; align-items: center; justify-content: space-between;
                        flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.activity-header-left { display: flex; flex-direction: column; gap: .25rem; }
.activity-title       { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--text-main); }
.activity-subtitle    { font-size: .82rem; color: var(--text-muted); }
.activity-header-right{ display: flex; align-items: center; gap: .6rem; }

.activity-filter-select { padding: .4rem .75rem; border-radius: 8px;
                           border: 1.5px solid var(--border); background: var(--bg-card);
                           font-size: .85rem; color: var(--text-main); cursor: pointer; }
.activity-filter-select:focus { outline: none; border-color: var(--primary); }

.activity-refresh-btn { padding: .4rem .75rem; font-size: 1rem; border-radius: 8px;
                        background: var(--bg-secondary); border: 1.5px solid var(--border);
                        color: var(--text-main); cursor: pointer; transition: background .15s; }
.activity-refresh-btn:hover { background: var(--bg-hover); }

/* ── Feed ────────────────────────────────────────────────────────────────── */
.activity-feed        { display: flex; flex-direction: column; gap: .6rem; }

.activity-item        { display: flex; gap: .9rem; align-items: flex-start;
                        background: var(--bg-card); border: 1.5px solid var(--border);
                        border-radius: 14px; padding: .9rem 1rem;
                        transition: box-shadow .18s, border-color .18s;
                        cursor: default; }
.activity-item:hover  { box-shadow: 0 3px 12px rgba(0,0,0,.08); border-color: var(--border-hover, #c7d2fe); }
.activity-item--new   { border-color: #818CF8; background: #F5F3FF; }

.activity-icon-wrap   { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
                        display: flex; align-items: center; justify-content: center; }
.activity-icon        { font-size: 1.25rem; line-height: 1; }

.activity-body        { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }

.activity-row-top     { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.activity-badge-type  { font-size: .72rem; font-weight: 700; padding: .15rem .55rem;
                        border-radius: 999px; }
.activity-new-dot     { width: 8px; height: 8px; border-radius: 50%;
                        background: #4F46E5; flex-shrink: 0; }
.activity-time        { font-size: .75rem; color: var(--text-muted); margin-right: auto; }

.activity-item-title  { font-weight: 600; font-size: .92rem; color: var(--text-main); }
.activity-item-desc   { font-size: .82rem; color: var(--text-muted); }

/* ── Order chip ─────────────────────────────────────────────────────────── */
.activity-order-chip  { display: inline-flex; align-items: center; gap: .4rem;
                        background: var(--bg-secondary); border: 1px solid var(--border);
                        border-radius: 8px; padding: .25rem .65rem;
                        font-size: .8rem; cursor: pointer;
                        transition: background .15s, border-color .15s;
                        width: fit-content; margin-top: .1rem; }
.activity-order-chip:hover { background: #EEF2FF; border-color: #818CF8; }
.activity-chip-name   { font-weight: 600; color: var(--text-main); }
.activity-chip-num    { color: var(--text-muted); }
.activity-chip-amount { font-weight: 700; color: #16A34A; margin-right: .1rem; }

/* ── Empty / loading states ──────────────────────────────────────────────── */
.activity-loading     { display: flex; align-items: center; justify-content: center;
                        gap: .75rem; padding: 3rem 1rem;
                        color: var(--text-muted); font-size: .95rem; }
.activity-spinner     { width: 22px; height: 22px; border: 3px solid var(--border);
                        border-top-color: var(--primary); border-radius: 50%;
                        animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.activity-empty       { display: flex; flex-direction: column; align-items: center;
                        justify-content: center; padding: 4rem 1rem; gap: .5rem; text-align: center; }
.activity-empty-icon  { font-size: 2.5rem; }
.activity-empty-text  { font-size: 1.05rem; font-weight: 600; color: var(--text-main); }
.activity-empty-sub   { font-size: .85rem; color: var(--text-muted); }

/* ── Load more ───────────────────────────────────────────────────────────── */
.activity-load-more-wrap { display: flex; justify-content: center; margin-top: 1.25rem; }
.activity-load-more-btn  { padding: .55rem 2rem; border-radius: 10px;
                           background: var(--bg-secondary); border: 1.5px solid var(--border);
                           font-size: .9rem; font-weight: 600; color: var(--text-main);
                           cursor: pointer; transition: background .15s; }
.activity-load-more-btn:hover { background: var(--bg-hover); }

/* ── Activity performer ───────────────────────────────────────────────────── */
.activity-performer       { font-size: .72rem; font-weight: 600; padding: .15rem .55rem;
                            border-radius: 999px; background: #F3F4F6; color: #374151;
                            border: 1px solid #E5E7EB; white-space: nowrap; }
.activity-performer--woo  { background: #F5F0FF; color: #7C3AED; border-color: #DDD6FE; }

/* ═══════════════════════════════════════════════
   MOBILE BOTTOM NAV + MORE SHEET
═══════════════════════════════════════════════ */

/* ── Hidden on desktop ── */
.bottom-nav,
.tools-overlay,
.tools-drawer { display: none; }

@media (max-width: 900px) {

  /* ── Hide desktop chrome ── */
  .tabs-nav        { display: none !important; }
  .sync-menu-wrap  { display: none !important; }
  .sync-status-bar { display: none !important; }

  /* ── Pad content above bottom nav ── */
  .main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ═══════  BOTTOM NAV BAR  ═══════ */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card);
    border-top: 1.5px solid var(--border);
    box-shadow: 0 -4px 24px rgba(15,23,42,.09);
    z-index: 900;
    align-items: stretch;
  }

  /* ── Per-tab accent colors ── */
  .bnav-btn[data-tab="orders"]    { --bnav-c: #6366F1; --bnav-bg: #EEF2FF; }
  .bnav-btn[data-tab="dashboard"] { --bnav-c: #7C3AED; --bnav-bg: #F5F3FF; }
  .bnav-btn[data-tab="pickup"]    { --bnav-c: #059669; --bnav-bg: #ECFDF5; }
  .bnav-btn#moreNavBtn            { --bnav-c: #D97706; --bnav-bg: #FFFBEB; }

  .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 4px 6px;
    position: relative;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
    user-select: none;
  }

  .bnav-btn.active { color: var(--bnav-c, #6366F1); }

  /* Pill indicator at top of active button */
  .bnav-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--bnav-c, #6366F1);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  }

  .bnav-btn.active .bnav-dot { transform: translateX(-50%) scaleX(1); }

  /* ── Icon bubble ── */
  .bnav-bubble {
    width: 48px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    transition: background .2s ease;
  }

  .bnav-btn.active .bnav-bubble {
    background: var(--bnav-bg, #EEF2FF);
    animation: bnavPop .35s cubic-bezier(.34,1.56,.64,1) forwards;
  }

  @keyframes bnavPop {
    0%   { transform: scale(0.7);  }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1);    }
  }

  .bnav-svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .bnav-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease;
  }

  /* Badge wrapper for pickup icon */
  .bnav-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bnav-badge {
    position: absolute;
    top: -6px;
    left: -8px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--card);
    line-height: 1;
  }

  /* ═══════  MORE SHEET OVERLAY  ═══════ */

  .tools-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 950;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .tools-overlay.open {
    display: block;
    animation: bnavFadeIn .22s ease forwards;
  }

  @keyframes bnavFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ═══════  MORE SHEET DRAWER  ═══════ */

  .tools-drawer {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-radius: 22px 22px 0 0;
    z-index: 960;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    max-height: 84vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .tools-drawer.open {
    transform: translateY(0);
    box-shadow: 0 -8px 40px rgba(15,23,42,.18);
  }

  .tools-drawer-handle {
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  .tools-drawer-header {
    text-align: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    padding: .6rem 1rem .55rem;
    border-bottom: 1px solid var(--border);
    letter-spacing: -.01em;
  }

  /* ── Navigation tiles ── */
  .more-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .45rem;
    padding: .8rem .9rem .6rem;
  }

  .more-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .7rem .15rem .6rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    min-height: 68px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s, transform .1s, border-color .14s, box-shadow .14s;
    user-select: none;
  }

  .more-nav-item:active {
    transform: scale(.92);
    background: var(--primary-light);
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(99,102,241,.2);
  }

  .more-nav-icon { font-size: 1.4rem; line-height: 1; }

  /* Badge on more-sheet tiles (e.g. שיחות) */
  .more-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .more-tile-badge {
    position: absolute;
    top: -5px;
    left: -6px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #fff;
    line-height: 1;
    animation: bnavPop .3s cubic-bezier(.34,1.56,.64,1) forwards;
  }

  .more-nav-lbl {
    font-size: .62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ── Section label ── */
  .tools-drawer-section {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .5rem .9rem .2rem;
  }

  /* ── Quick actions ── */
  .tools-drawer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .2rem .9rem .9rem;
  }

  .drawer-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: background .14s, transform .1s, border-color .14s;
  }

  .drawer-item:active {
    transform: scale(.95);
    background: var(--primary-light);
    border-color: var(--primary);
  }

  .drawer-icon { font-size: 1rem; line-height: 1; }
  .drawer-label { white-space: nowrap; }
}

/* ═══════════════════════════════════════════════
   MARKETING INTELLIGENCE
═══════════════════════════════════════════════ */
.mkt-page { padding: 0 0 3rem; }
.mkt-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.2rem; }
.mkt-header-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mkt-title       { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0 0 .15rem; }
.mkt-subtitle    { font-size: .82rem; color: var(--text-muted); display: block; }
.mkt-last-update { font-size: .72rem; color: #94A3B8; display: block; margin-top: .1rem; }
.mkt-presets  { display: flex; gap: .35rem; flex-wrap: wrap; }
.mkt-preset {
  padding: .28rem .7rem; border: 1.5px solid var(--border); border-radius: 20px;
  background: var(--card); color: var(--text-muted); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.mkt-preset.active, .mkt-preset:hover { background: #4F46E5; border-color: #4F46E5; color: #fff; }
.mkt-refresh { font-size: .8rem; padding: .28rem .7rem; }

/* KPIs */
.mkt-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px,1fr)); gap: .7rem; margin-bottom: 1rem; }
.mkt-kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; box-shadow: var(--shadow-sm); }
.mkt-kpi-top  { display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; width: 100%; }
.mkt-kpi-icon { font-size: 1rem; }
.mkt-kpi-label { font-size: .73rem; color: var(--text-muted); font-weight: 600; }
.mkt-kpi-value { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.mkt-kpi-sub   { font-size: .7rem; color: #94A3B8; margin-top: .2rem; }

/* Skeleton */
.mkt-skel { background: linear-gradient(90deg,#F1F5F9 25%,#E2E8F0 50%,#F1F5F9 75%); background-size: 200% 100%; animation: mktSkel 1.2s infinite; border-radius: 5px; }
.mkt-skel-sm { height: 12px; width: 70%; margin-bottom: .4rem; }
.mkt-skel-lg { height: 28px; width: 50%; }
@keyframes mktSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Charts row */
.mkt-charts-row { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; margin-bottom: 1rem; }
@media(max-width:900px) { .mkt-charts-row { grid-template-columns: 1fr; } }
.mkt-chart-card { padding: 1rem 1rem .6rem; }
.mkt-card-title { font-size: .88rem; font-weight: 700; color: var(--text-muted); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }

/* Day-of-week bars */
.dow-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 140px; gap: .3rem; padding: 0 .25rem; }
.dow-col { display: flex; flex-direction: column; align-items: center; flex: 1; gap: .15rem; }
.dow-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.dow-bar { width: 100%; background: #6366F1; border-radius: 4px 4px 0 0; min-height: 4px; transition: height .3s; }
.dow-col.dow-weekend .dow-bar { background: #CBD5E1; }
.dow-col.dow-best    .dow-bar { background: #22C55E; }
.dow-label      { font-size: .65rem; color: var(--text-muted); font-weight: 600; }
.dow-orders     { font-size: .75rem; font-weight: 800; color: var(--text); }
.dow-spend-label { font-size: .62rem; color: #94A3B8; }
.dow-legend { font-size: .7rem; color: #94A3B8; margin-top: .5rem; text-align: center; }
.dow-legend-bar { display: inline-block; width: 10px; height: 10px; background: #6366F1; border-radius: 2px; margin-left: .25rem; }

/* Recommendations */
.mkt-recs-card, .mkt-camp-card, .mkt-monthly-card { padding: 1rem; margin-bottom: 1rem; }

.mkt-monthly-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.mkt-monthly-tbl th {
  text-align: right;
  padding: .5rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mkt-monthly-tbl td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
}
.mkt-monthly-tbl tbody tr:hover { background: var(--hover); }
.mkt-monthly-tbl tfoot td { border-top: 2px solid var(--border); border-bottom: none; }
.mkt-monthly-spend { font-weight: 700; color: var(--warning); font-variant-numeric: tabular-nums; }
.mkt-monthly-pct   { color: var(--text-muted); font-size: .8rem; }
.mkt-live-row td   { background: rgba(34,197,94,.05); }
.mkt-live-tag      { font-size: .68rem; font-weight: 700; color: #22C55E; margin-right: .4rem; animation: mkt-pulse 1.5s infinite; }
.mkt-live-sub      { font-size: .75rem; color: var(--text-muted); margin-right: .3rem; }
@keyframes mkt-pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
.mkt-recs-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 12px; font-size: .72rem;
  font-weight: 800; color: #fff; background: #4F46E5; margin-right: .5rem;
}
.mkt-rec {
  border: 1px solid #E2E8F0; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .65rem;
  transition: box-shadow .15s;
}
.mkt-rec:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.mkt-rec-header { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .5rem; flex-wrap: wrap; }
.mkt-rec-icon   { font-size: 1.4rem; flex-shrink: 0; margin-top: .05rem; }
.mkt-rec-titles { flex: 1; min-width: 0; }
.mkt-rec-category { font-size: .7rem; font-weight: 700; color: #6366F1; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.mkt-rec-title    { font-size: .9rem; font-weight: 700; color: #1E293B; }
.mkt-rec-badges   { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; margin-top: .1rem; }
.mkt-rec-priority { padding: .15rem .5rem; border-radius: 8px; font-size: .68rem; font-weight: 800; color: #fff; }
.mkt-rec-impact   { font-size: .7rem; color: #64748B; font-weight: 600; background: #F1F5F9; padding: .15rem .45rem; border-radius: 8px; }
.mkt-rec-body     { font-size: .82rem; color: #475569; line-height: 1.55; margin-bottom: .55rem; }
.mkt-rec-action   { display: flex; align-items: center; gap: .4rem; background: rgba(79,70,229,.07); border-radius: 7px; padding: .4rem .65rem; }
.mkt-rec-action-label { font-size: .72rem; font-weight: 700; color: #6366F1; white-space: nowrap; }
.mkt-rec-action-text  { font-size: .8rem; font-weight: 600; color: #1E293B; }

/* Campaigns table */
.mkt-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.mkt-table th { text-align: right; padding: .4rem .6rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.mkt-table td { padding: .4rem .6rem; border-bottom: 1px solid #F8FAFC; }
.mkt-camp-status { font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 8px; }
.mkt-camp-active { color: #16A34A; background: #DCFCE7; }
.mkt-camp-paused { color: #B45309; background: #FEF3C7; }
.mkt-camp-arch   { color: #6B7280; background: #F3F4F6; }
.mkt-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* ── Campaign Manager ──────────────────────────────────────────────────────── */
.ce-item         { border-bottom: 1px solid #F1F5F9; }
.ce-item:last-child { border-bottom: none; }
.ce-item-adset   { background: #FAFBFC; }
.ce-item-ad      { background: #F8FAFC; }

.ce-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .75rem;
  cursor: default;
  transition: background .12s;
}
.ce-row-expandable,
.ce-row-campaign,
.ce-row-adset { cursor: pointer; }
.ce-row:hover { background: rgba(99,102,241,.05); }
.ce-row-adset { padding-right: 2rem; }
.ce-row-ad    { padding-right: 3.6rem; cursor: default; }
.ce-row-ad:hover { background: transparent; }

.ce-chevron {
  font-size: .75rem;
  color: #6366F1;
  font-weight: 700;
  transition: transform .2s ease;
  min-width: 12px;
  flex-shrink: 0;
  opacity: .8;
}
.ce-row-expandable:hover .ce-chevron { opacity: 1; }
.ce-no-children { visibility: hidden; }

/* Expand/collapse all controls */
.ce-camp-controls {
  display: flex;
  gap: .5rem;
  padding: .4rem .75rem;
  border-bottom: 1px solid #F1F5F9;
  background: #F8FAFC;
}
.ce-ctrl-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ce-ctrl-btn:hover { background: #EEF2FF; border-color: #A5B4FC; color: #4F46E5; }

/* Inline quick-budget confirm state */
.ce-act-confirming { background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD34D !important; animation: cePulse .5s ease; }
@keyframes cePulse { 0%,100% { opacity:1; } 50% { opacity:.7; } }

/* iOS toggle switch */
.ce-switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.ce-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ce-track {
  position: absolute; inset: 0;
  background: #CBD5E1;
  border-radius: 20px;
  transition: background .2s;
}
.ce-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.ce-switch input:checked + .ce-track { background: #22C55E; }
.ce-switch input:checked + .ce-track::after { transform: translateX(16px); }
.ce-switch input:disabled + .ce-track { opacity: .5; }

.ce-ad-thumb    { width: 32px; height: 32px; border-radius: 5px; object-fit: cover; flex-shrink: 0; border: 1px solid #E2E8F0; }
.ce-ad-thumb-ph { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; border-radius: 5px; font-size: 1rem; flex-shrink: 0; }

.ce-info { flex: 1; min-width: 0; overflow: hidden; }
.ce-name { display: block; font-weight: 600; font-size: .83rem; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-type { display: block; font-size: .7rem; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Effective status badges */
.ce-badge   { font-size: .7rem; font-weight: 700; padding: .12rem .45rem; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.ce-active  { background: #DCFCE7; color: #16A34A; }
.ce-paused  { background: #FEF3C7; color: #B45309; }
.ce-inh     { background: #F3F4F6; color: #6B7280; }
.ce-err     { background: #FEE2E2; color: #DC2626; }
.ce-arch    { background: #F3F4F6; color: #6B7280; }

/* Budget display & edit */
.ce-budget-wrap    { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; min-width: 100px; text-align: left; }
.ce-budget-none    { font-size: .72rem; color: #94A3B8; }
.ce-budget-display { font-size: .8rem; font-weight: 700; color: #6366F1; cursor: pointer; padding: .15rem .35rem; border-radius: 6px; border: 1px dashed #C7D2FE; transition: background .12s; white-space: nowrap; }
.ce-budget-display:hover { background: #EEF2FF; }
.ce-edit-icon { font-size: .65rem; opacity: .6; }

.ce-budget-edit { display: none; align-items: center; gap: .25rem; }
.ce-budget-input {
  width: 68px; padding: .2rem .35rem; border: 1.5px solid #6366F1; border-radius: 6px;
  font-size: .8rem; font-weight: 700; outline: none; text-align: center;
}
.ce-btn-save, .ce-btn-cancel {
  width: 22px; height: 22px; border: none; border-radius: 5px; cursor: pointer;
  font-size: .75rem; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ce-btn-save   { background: #22C55E; color: white; }
.ce-btn-cancel { background: #F1F5F9; color: #64748B; }

.ce-children { border-top: 1px solid #F1F5F9; }
.ce-empty-children { padding: .5rem 2rem; font-size: .75rem; color: #94A3B8; }

/* Insight rows */
.ce-insight-row      { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .3rem .75rem .5rem 2.6rem; background: inherit; }
.ce-insight-adset    { padding-right: 4.2rem; }
.ce-insight-ad       { padding-right: 5.8rem; }
.ce-metrics          { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ce-metrics-empty    { font-size: .72rem; color: #94A3B8; }
.cem-item            { display: inline-flex; flex-direction: column; align-items: center; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 7px; padding: .18rem .45rem; min-width: 46px; }
.cem-lbl             { font-size: .62rem; color: #94A3B8; font-weight: 600; letter-spacing: .03em; }
.cem-val             { font-size: .8rem; font-weight: 700; color: #1E293B; }
.cem-great .cem-val  { color: #16A34A; }
.cem-good  .cem-val  { color: #2563EB; }
.cem-warn  .cem-val  { color: #DC2626; }
.cem-great           { border-color: #86EFAC; background: #F0FDF4; }
.cem-good            { border-color: #BFDBFE; background: #EFF6FF; }
.cem-warn            { border-color: #FECACA; background: #FEF2F2; }

/* Recommendation pills */
.ce-rec-pill  { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px; white-space: nowrap; }
.ce-rec-great { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.ce-rec-good  { background: #DBEAFE; color: #1D4ED8; border: 1px solid #93C5FD; }
.ce-rec-ok    { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
.ce-rec-warn  { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.ce-rec-crit  { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.ce-rec-off   { background: #F3F4F6; color: #9CA3AF; border: 1px solid #E5E7EB; }

/* LIVE badge & countdown */
.mkt-live-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 20px;
  padding: .2rem .6rem; font-size: .72rem; font-weight: 800;
  color: #DC2626; letter-spacing: .05em;
}
.mkt-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #DC2626;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}
.mkt-countdown { font-size: .72rem; color: #94A3B8; font-weight: 500; white-space: nowrap; }

/* Action buttons */
.ce-act-group { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.ce-act-btn   {
  font-size: .72rem; font-weight: 700; padding: .22rem .6rem;
  border-radius: 20px; border: none; cursor: pointer; white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
.ce-act-btn:hover   { opacity: .85; transform: scale(1.03); }
.ce-act-btn:active  { transform: scale(.97); }
.ce-act-btn:disabled { opacity: .5; cursor: not-allowed; }
.ce-act-up    { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.ce-act-up2   { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.ce-act-down  { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ce-act-pause { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }
.ce-act-on    { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.ce-act-write { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }

/* Ad Copy Helper Modal */
.copy-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.copy-modal-box {
  background: white; border-radius: 16px; width: 100%; max-width: 520px;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  direction: rtl;
}
.copy-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; font-size: 1rem; font-weight: 700; border-bottom: 1px solid #F1F5F9;
  position: sticky; top: 0; background: white; z-index: 1;
}
.copy-modal-close { background: #F1F5F9; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: .85rem; }
.copy-modal-sub   { padding: .4rem 1.2rem; font-size: .8rem; color: #64748B; border-bottom: 1px solid #F8FAFC; }
.copy-modal-body  { padding: 1rem 1.2rem; }
.copy-section-title { font-size: .75rem; font-weight: 700; color: #6366F1; text-transform: uppercase; letter-spacing: .05em; margin: .9rem 0 .4rem; }
.copy-cards       { display: flex; flex-direction: column; gap: .4rem; }
.copy-cards-inline { flex-direction: row; flex-wrap: wrap; }
.copy-card {
  background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 10px;
  padding: .6rem .8rem; cursor: pointer; transition: background .12s, border-color .12s;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.copy-card:hover { background: #EEF2FF; border-color: #C7D2FE; }
.copy-card-sm { padding: .4rem .7rem; }
.copy-card-text { font-size: .82rem; color: #1E293B; line-height: 1.4; flex: 1; }
.copy-card-tag  { font-size: .65rem; font-weight: 700; color: #6366F1; background: #EEF2FF; padding: .1rem .4rem; border-radius: 8px; white-space: nowrap; }
.copy-tip-box   { margin-top: .9rem; padding: .65rem .85rem; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px; font-size: .8rem; color: #78350F; line-height: 1.5; }

/* Toast notification */
.ce-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  padding: .65rem 1.1rem; border-radius: 10px;
  font-size: .85rem; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: opacity .4s; opacity: 0; pointer-events: none;
}
.ce-toast-success { background: #1E293B; color: #F0FDF4; }
.ce-toast-error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* KPI info tooltip */
.mkt-kpi-info {
  position: relative;
  cursor: pointer;
  font-size: .7rem;
  color: #94A3B8;
  margin-right: auto;
  padding: 0 .2rem;
  user-select: none;
  flex-shrink: 0;
}
.mkt-kpi-info:hover { color: #6366F1; }
.mkt-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  background: #1E293B;
  color: #F1F5F9;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  padding: .55rem .75rem;
  border-radius: 9px;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  z-index: 200;
  white-space: normal;
  text-align: right;
  pointer-events: none;
}
.mkt-kpi-info:hover .mkt-tooltip { display: block; }

/* Budget tip card */
.mkt-budget-tip {
  border-radius: 14px;
  border: 1.5px solid #CBD5E1;
  padding: .9rem 1.1rem;
  margin-bottom: .6rem;
}
.tip-header { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .4rem; }
.tip-icon    { font-size: 1.5rem; line-height: 1; }
.tip-label   { font-size: .72rem; color: #64748B; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.tip-action  { font-size: 1rem; font-weight: 700; margin-top: .1rem; }
.tip-reason  { font-size: .83rem; color: #475569; margin-bottom: .5rem; }
.tip-stats   { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tip-stat    { font-size: .75rem; color: #64748B; margin-right: .3rem; }
.tip-badge   { font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 20px; }
.tip-badge-up   { background: #DCFCE7; color: #16A34A; }
.tip-badge-down { background: #FEF3C7; color: #B45309; }

/* ═══════════════════════════════════════════════
   MARKETING STUDIO
═══════════════════════════════════════════════ */
.studio-loading { padding: 32px; text-align: center; color: #64748B; }
.studio-hidden  { display: none !important; }
.studio-wrap    { padding: 0 4px 20px; }

.studio-tabs {
  display: flex; gap: 6px; padding: 14px 16px 0;
}
.studio-tab {
  padding: 8px 18px; border-radius: 8px 8px 0 0;
  border: 1.5px solid #E2E8F0; border-bottom: none;
  background: #F8FAFC; cursor: pointer; font-size: .88rem; font-weight: 600;
  color: #64748B; transition: background .15s, color .15s;
}
.studio-tab.active { background: #fff; color: #4F46E5; border-color: #C7D2FE; }

.studio-hint { font-size: .8rem; color: #94A3B8; padding: 10px 16px 0; }

.studio-two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; padding: 14px 16px;
}
@media (max-width: 700px) {
  .studio-two-col { grid-template-columns: 1fr; }
}

.studio-col { display: flex; flex-direction: column; gap: 10px; }
.studio-col-head {
  font-size: .82rem; font-weight: 700; color: #475569;
  padding-bottom: 6px; border-bottom: 1.5px solid #E2E8F0;
  display: flex; align-items: center; justify-content: space-between;
}
.studio-sel-count { font-size: .75rem; color: #4F46E5; font-weight: 600; }

/* Product grid */
.studio-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; max-height: 420px; overflow-y: auto;
}
.studio-product {
  border: 2px solid #E2E8F0; border-radius: 10px; padding: 8px 6px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  position: relative; text-align: center;
}
.studio-product:hover { border-color: #A5B4FC; }
.studio-product.selected { border-color: #4F46E5; background: #EEF2FF; }
.studio-product-check {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #4F46E5; color: #fff; font-size: .65rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; opacity: 0; transition: opacity .15s;
}
.studio-product.selected .studio-product-check { opacity: 1; }
.studio-product-img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; }
.studio-product-noimg { height: 70px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: #F1F5F9; border-radius: 6px; }
.studio-product-name { font-size: .72rem; color: #1E293B; margin-top: 4px; line-height: 1.2; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-product-price { font-size: .7rem; color: #16A34A; font-weight: 700; margin-top: 2px; }
.studio-load-more {
  text-align: center; font-size: .78rem; color: #4F46E5; cursor: pointer;
  padding: 8px; border: 1.5px dashed #C7D2FE; border-radius: 8px;
}
.studio-load-more:hover { background: #EEF2FF; }

/* Form */
.studio-field-row { display: flex; flex-direction: column; gap: 4px; }
.studio-field-row label { font-size: .77rem; color: #475569; font-weight: 600; }
.studio-input, .studio-select, .studio-textarea {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1.5px solid #CBD5E1; font-size: .85rem; background: #fff;
  font-family: inherit; color: #1E293B;
  transition: border-color .15s;
}
.studio-input:focus, .studio-select:focus, .studio-textarea:focus {
  outline: none; border-color: #4F46E5;
}
.studio-textarea { resize: vertical; }
.studio-field-two { flex-direction: row; gap: 10px; }
.studio-field-two > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.studio-field-two label { font-size: .77rem; color: #475569; font-weight: 600; }

/* Preview */
.studio-preview {
  border: 1.5px solid #E2E8F0; border-radius: 12px; overflow: hidden;
  background: #F8FAFC; min-height: 140px;
}
.studio-preview-empty { padding: 32px; text-align: center; color: #94A3B8; font-size: .82rem; }
.studio-preview-mock { padding: 12px; }
.studio-mock-header {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; color: #64748B; margin-bottom: 6px;
}
.studio-mock-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #4F46E5;
  color: #fff; font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.studio-mock-msg { font-size: .82rem; color: #1E293B; margin-bottom: 8px; line-height: 1.4; }
.studio-carousel-track {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
}
.studio-slide {
  flex: 0 0 90px; border: 1px solid #E2E8F0; border-radius: 8px;
  overflow: hidden; background: #fff;
}
.studio-slide img { width: 90px; height: 70px; object-fit: cover; }
.studio-slide-noimg { width: 90px; height: 70px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; font-size: 1.4rem; }
.studio-slide-name { font-size: .65rem; padding: 4px 5px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1E293B; }
.studio-slide-price { font-size: .65rem; padding: 0 5px 5px; color: #16A34A; font-weight: 700; }
.studio-mock-cta {
  margin-top: 6px; text-align: center; font-size: .75rem;
  color: #4F46E5; font-weight: 700; border-top: 1px solid #E2E8F0; padding-top: 6px;
}

/* Upload zone */
.studio-upload-zone {
  border: 2px dashed #CBD5E1; border-radius: 12px;
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; min-height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.studio-upload-zone:hover { border-color: #4F46E5; background: #EEF2FF; }
.studio-upload-icon { font-size: 2rem; margin-bottom: 8px; }
.studio-progress-bar {
  width: 100%; height: 8px; background: #E2E8F0;
  border-radius: 99px; margin-bottom: 8px; overflow: hidden;
}
.studio-progress-fill { height: 100%; background: #4F46E5; border-radius: 99px; transition: width .2s; width: 0; }
.studio-vid-status { font-size: .78rem; margin-top: 6px; color: #16A34A; }

/* Launch button */
.studio-launch-btn {
  width: 100%; padding: 12px; border-radius: 10px;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: #fff; font-size: .92rem; font-weight: 700;
  border: none; cursor: pointer; transition: opacity .15s;
}
.studio-launch-btn:hover:not(:disabled) { opacity: .88; }
.studio-launch-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Result */
.studio-result { min-height: 20px; }
.studio-success {
  background: #F0FDF4; border: 1.5px solid #86EFAC;
  border-radius: 10px; padding: 14px; margin-top: 6px;
}
.studio-success-title { font-size: .95rem; font-weight: 700; color: #16A34A; margin-bottom: 8px; }
.studio-success-row { font-size: .8rem; color: #475569; margin-bottom: 4px; }
.studio-success-row code { background: #E2E8F0; border-radius: 4px; padding: 1px 6px; font-size: .75rem; }
.studio-success-note { font-size: .78rem; color: #64748B; margin: 8px 0; }
.studio-adsmanager-btn {
  display: inline-block; padding: 7px 16px;
  background: #1877F2; color: #fff; border-radius: 8px; text-decoration: none;
  font-size: .82rem; font-weight: 600; margin-top: 4px;
}
.studio-adsmanager-btn:hover { background: #1460c0; }
.studio-err {
  background: #FEF2F2; border: 1px solid #FCA5A5;
  border-radius: 8px; padding: 10px 12px; font-size: .82rem;
  color: #DC2626; margin-top: 6px;
}
.ce-toast-warn { background: #FEF3C7; color: #B45309; border-left-color: #F59E0B; }

/* ═══════════════════════════════════════════════
   EXPENSES — updated form styles
═══════════════════════════════════════════════ */
.form-row-two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.exp-recurring-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #F8FAFC; border: 1.5px solid #E2E8F0;
  border-radius: 10px; padding: 12px 14px; margin: 4px 0 8px;
}
.exp-recurring-texts { display: flex; flex-direction: column; gap: 2px; }
.exp-recurring-title { font-size: .88rem; font-weight: 700; color: #1E293B; }
.exp-recurring-sub   { font-size: .74rem; color: #64748B; }
.exp-advanced summary {
  cursor: pointer; font-size: .8rem; color: #64748B;
  padding: 4px 0; user-select: none;
}
.exp-advanced summary:hover { color: #4F46E5; }
.exp-recur-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: #EEF2FF; color: #4F46E5;
  font-size: .73rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
}

/* ── Cashflow forecast status grid ── */
.cf-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
.cf-status-card {
  border: 1.5px solid #E2E8F0; border-radius: 10px;
  padding: 10px 14px; background: #fff;
}
.cf-status-label { font-size: .72rem; color: #64748B; font-weight: 600; margin-bottom: 2px; }
.cf-status-val   { font-size: 1.1rem; font-weight: 800; color: #1E293B; }
.cf-status-sub   { font-size: .72rem; color: #94A3B8; margin-top: 2px; }

/* ═══════════════════════════════════════════════
   FEES ANALYSIS
═══════════════════════════════════════════════ */
.cf-fees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.cf-fee-card {
  border: 1.5px solid #E2E8F0; border-radius: 10px;
  padding: 10px 14px; background: #fff;
}
.cf-fee-card.cf-fee-warn  { border-color: #FCD34D; background: #FFFBEB; }
.cf-fee-card.cf-fee-danger{ border-color: #FCA5A5; background: #FEF2F2; }
.cf-fee-card.cf-fee-ok    { border-color: #BBF7D0; background: #F0FDF4; }
.cf-fee-card.cf-fee-total { border-color: #C7D2FE; background: #EEF2FF; }
.cf-fee-label { font-size: .72rem; color: #64748B; font-weight: 600; margin-bottom: 2px; }
.cf-fee-val   { font-size: 1.1rem; font-weight: 800; color: #1E293B; }
.cf-fee-sub   { font-size: .72rem; color: #64748B; margin-top: 3px; }

/* ═══════════════════════════════════════════════
   CASHFLOW ECOSYSTEM
═══════════════════════════════════════════════ */
.cf-ecosystem { margin-bottom: 12px; }
.cf-eco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 12px;
}
@media (max-width: 900px) { .cf-eco-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cf-eco-grid { grid-template-columns: 1fr; } }

.cf-eco-card {
  background: #fff; border: 1.5px solid #E2E8F0;
  border-radius: 12px; padding: 14px 16px;
}
.cf-eco-card-wide { grid-column: span 1; }
@media (min-width: 900px) { .cf-eco-card-wide { grid-column: auto; } }

.cf-eco-title {
  font-size: .82rem; font-weight: 700; color: #475569; margin-bottom: 10px;
}
.cf-eco-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cf-eco-title-row span { font-size: .82rem; font-weight: 700; color: #475569; }

.eco-kpi-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.eco-kpi {
  font-size: .73rem; font-weight: 700; padding: 3px 8px;
  border-radius: 20px; background: #F1F5F9; color: #475569;
}
.eco-good { background: #DCFCE7; color: #16A34A; }
.eco-warn { background: #FEF3C7; color: #B45309; }
.eco-bad  { background: #FEE2E2; color: #DC2626; }

.eco-rev-cap { font-size: .78rem; color: #64748B; margin-bottom: 8px; }
.eco-rev-cap strong { color: #1E293B; }

.eco-stock-list { display: flex; flex-direction: column; gap: 4px; }
.eco-stock-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .74rem;
}
.eco-stock-name { color: #475569; flex: 1; }
.eco-stock-weeks {
  font-size: .7rem; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}

.eco-mkt-mult {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: #64748B; margin-bottom: 6px;
}

.eco-ship-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #F1F5F9;
  gap: 8px;
}
.eco-ship-row:last-child { border-bottom: none; }
.eco-ship-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.eco-ship-name { font-size: .82rem; font-weight: 600; color: #1E293B; }
.eco-ship-date { display: inline-block; margin-top: 2px; }
.eco-ship-actions { display: flex; gap: 4px; }

/* shipment modal items row */
.ship-item-row {
  display: grid;
  grid-template-columns: 2fr 80px 90px 28px;
  gap: 6px; margin-bottom: 6px; align-items: center;
}

/* ── Cashflow import row ── */
.eco-ship-import { background: #F8F7FF; }

/* ── WhatsApp notification cards ──────────────────────────────────────────── */
.wa-section-desc  { font-size: .82rem; color: var(--text-muted); margin: -.25rem 0 .75rem; }
.wa-notif-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .65rem; }
.wa-notif-card    { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
                    background: var(--bg-secondary); border: 1.5px solid var(--border);
                    border-radius: 12px; padding: .75rem 1rem;
                    transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.wa-notif-card:hover { border-color: #25D366; box-shadow: 0 2px 8px rgba(37,211,102,.12); }
.wa-notif-info    { display: flex; align-items: center; gap: .6rem; }
.wa-notif-icon    { font-size: 1.3rem; flex-shrink: 0; }
.wa-notif-title   { font-weight: 600; font-size: .88rem; color: var(--text-main); }
.wa-notif-sub     { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

/* ── PWA Install button ──────────────────────────────────────────────────── */
.btn-install-pwa {
  background: linear-gradient(135deg, #4f9cf9, #3b7de8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .35rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.btn-install-pwa:hover { opacity: .88; transform: translateY(-1px); }

/* ── PWA iOS install banner ──────────────────────────────────────────────── */
/* Push permission banner */
.push-perm-banner {
  position: fixed;
  top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  background: var(--card);
  border: 1.5px solid var(--primary);
  border-radius: 14px;
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  max-width: 420px; width: calc(100% - 32px);
  animation: slideDown .3s ease;
}
@keyframes slideDown { from { opacity:0; transform: translateX(-50%) translateY(-16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
.push-perm-icon { font-size: 1.5rem; flex-shrink: 0; }
.push-perm-text { flex: 1; }
.push-perm-text strong { display: block; font-size: .9rem; color: var(--text); }
.push-perm-text span   { font-size: .78rem; color: var(--text-muted); }
.push-perm-allow {
  background: var(--primary); color: #fff; border: none;
  border-radius: 8px; padding: .4rem .9rem;
  font-size: .83rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.push-perm-allow:hover { opacity: .9; }
.push-perm-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; padding: .2rem; flex-shrink: 0;
}

.pwa-ios-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 0 12px 12px;
  animation: pwaSlideUp .3s ease;
}
@keyframes pwaSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-ios-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e2537;
  border: 1.5px solid #4f9cf9;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
}
.pwa-ios-icon { font-size: 1.6rem; flex-shrink: 0; }
.pwa-ios-text {
  display: flex; flex-direction: column; gap: 3px;
  font-size: .82rem; color: #cbd5e1; flex: 1;
}
.pwa-ios-text strong { color: #f1f5f9; }
.pwa-ios-share-icon { font-size: 1rem; }
.pwa-ios-close {
  background: none; border: none; color: #94a3b8;
  font-size: 1rem; cursor: pointer; padding: 4px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   MOBILE — Bell dropdown full-screen
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bell-dropdown {
    position: fixed;
    top: 54px;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
  }
  .bell-dropdown::before { display: none; }
  .bell-dd-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .bell-dd-footer { padding: .6rem .75rem; }
  .bell-dd-item { padding: .8rem .9rem; }
  .bell-dd-item-title { font-size: .88rem; }
  .bell-dd-item-desc  { font-size: .8rem; }

  /* ── Header: hide install btn text on mobile ── */
  .btn-install-pwa { font-size: .72rem; padding: .28rem .55rem; }

  /* ── Sync menu panel: always fixed ── */
  .sync-menu-panel {
    position: fixed !important;
    right: .5rem;
    left: auto;
    top: 100px;
  }
}

/* ═══════════════════════════════════════════════
   PULL TO REFRESH
═══════════════════════════════════════════════ */
#ptrIndicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 9998;
  background: var(--primary, #4F46E5);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 16px rgba(79,70,229,.4);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  pointer-events: none;
  opacity: 0;
}
#ptrIndicator.ptr-pulling {
  opacity: 1;
}
#ptrIndicator.ptr-ready {
  opacity: 1;
  background: #16a34a;
}
#ptrIndicator.ptr-loading {
  opacity: 1;
  transform: translateX(-50%) translateY(72px) !important;
  animation: ptrSpin 0.7s linear infinite;
}
@keyframes ptrSpin {
  to { transform: translateX(-50%) translateY(72px) rotate(360deg); }
}

/* ─── Invoices Tab ────────────────────────────────────────────────── */
.inv-panel { padding: 1.5rem; }
.inv-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.inv-title { font-size:1.4rem; font-weight:700; margin:0; }

.inv-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.inv-stat-card { background:var(--card-bg,#fff); border:1px solid var(--border,#e5e7eb); border-radius:.75rem; padding:1rem 1.25rem; text-align:center; }
.inv-stat-num { font-size:1.8rem; font-weight:700; color:var(--primary,#4F46E5); }
.inv-stat-label { font-size:.8rem; color:var(--muted,#6b7280); margin-top:.25rem; }
.inv-stat-green .inv-stat-num { color:#16a34a; }
.inv-stat-orange .inv-stat-num { color:#ea580c; }
.inv-stat-muted .inv-stat-num { font-size:1rem; }

.inv-sync-log { background:#f8fafc; border:1px solid var(--border,#e5e7eb); border-radius:.5rem; padding:1rem; margin-bottom:1.5rem; font-size:.85rem; line-height:1.8; }

.inv-section { margin-bottom:2rem; }
.inv-section-header { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.inv-section-header h3 { margin:0; font-size:1.1rem; }
.inv-section-sub { width:100%; color:var(--muted,#6b7280); font-size:.85rem; margin:0; }

.inv-filter-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.inv-filter-btn { padding:.35rem .9rem; border:1px solid var(--border,#e5e7eb); border-radius:2rem; background:transparent; cursor:pointer; font-size:.85rem; transition:.15s; }
.inv-filter-btn.active { background:var(--primary,#4F46E5); color:#fff; border-color:var(--primary,#4F46E5); }

.inv-badge { display:inline-block; padding:.2rem .6rem; border-radius:.4rem; font-size:.75rem; font-weight:600; }
.inv-badge-green { background:#dcfce7; color:#16a34a; }
.inv-badge-orange { background:#ffedd5; color:#ea580c; }

.inv-type-tag { background:#ede9fe; color:#7c3aed; border-radius:.4rem; padding:.15rem .5rem; font-size:.75rem; }
.inv-pdf-link { color:var(--primary,#4F46E5); text-decoration:none; font-weight:500; }
.inv-pdf-link:hover { text-decoration:underline; }
.inv-desc-cell { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; color:var(--muted); }

.inv-pager { display:flex; align-items:center; gap:1rem; justify-content:center; padding:1rem 0; }
.inv-pager-btn { padding:.4rem 1rem; border:1px solid var(--border,#e5e7eb); border-radius:.5rem; background:var(--card-bg,#fff); cursor:pointer; }
.inv-pager-info { color:var(--muted,#6b7280); font-size:.85rem; }

@media(max-width:768px) {
  .inv-stats-row { grid-template-columns:repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════
   LIVE DASHBOARD
═══════════════════════════════════════════════ */
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.live-title { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.live-updated-label { font-size: .78rem; color: var(--text-muted); }

/* KPI row */
.live-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.live-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.live-kpi-label { font-size: .78rem; color: var(--text-muted); margin-bottom: .4rem; }
.live-kpi-val   { font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; }

.live-trend { font-size: 1.1rem; font-weight: 700; }
.trend-up   { color: var(--success); }
.trend-down { color: var(--danger); }

/* Two-column body */
.live-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.live-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.live-section-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: .9rem; }

/* Pipeline */
.live-pipe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.live-pipe-row:last-child { border-bottom: none; }
.live-pipe-cnt { font-weight: 700; font-size: 1rem; color: var(--primary); min-width: 2rem; text-align: left; }
.live-empty { color: var(--text-muted); font-size: .85rem; }

/* Recent orders */
.live-recent-list { display: flex; flex-direction: column; gap: .5rem; }
.live-recent-row {
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.live-recent-row:hover { background: var(--hover-bg); }
.live-recent-main { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.live-recent-name { font-weight: 600; font-size: .88rem; }
.live-recent-amt  { font-weight: 700; color: var(--primary); font-size: .88rem; }
.live-recent-sub  { display: flex; justify-content: space-between; align-items: center; }
.live-recent-time { font-size: .75rem; color: var(--text-muted); }

/* Analytics section */
.live-analytics-section { margin-bottom: 1.5rem; }
.live-analytics-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.live-analytics-badge {
  font-size: .72rem; font-weight: 600; padding: .2rem .65rem;
  border-radius: 2rem; background: var(--s-waiting-bg); color: var(--s-waiting-fg);
}
.live-analytics-badge.badge-active { background: var(--s-delivered-bg); color: var(--s-delivered-fg); }

/* Umami placeholder */
.live-umami-wrap { min-height: 200px; }
.live-umami-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; color: var(--text-muted); gap: .75rem; text-align: center;
}
.live-umami-icon { font-size: 2.5rem; }
.live-umami-placeholder p { font-size: .9rem; }
.live-umami-placeholder ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }

.umami-frame { width: 100%; height: 500px; border: none; border-radius: var(--radius); }

/* GA4 link row */
.live-ga4-row { display: flex; align-items: center; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .75rem; }
.live-ga4-label { font-size: .85rem; color: var(--text-muted); }
.live-ga4-link { font-size: .85rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.live-ga4-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .live-kpis { grid-template-columns: repeat(2, 1fr); }
  .live-body  { grid-template-columns: 1fr; }
}

.live-kpi-umami { border-color: var(--s-delivered-dot); }
.live-umami-sub { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }
.live-umami-steps { list-style: decimal; padding-right: 1.25rem; font-size: .82rem; display: flex; flex-direction: column; gap: .3rem; }
.live-umami-steps a { color: var(--primary); }
.live-umami-api-active { font-size: .82rem; color: var(--success); margin-top: .5rem; }

/* ── Status KPI row ── */
.kpi-status-row { margin-top: .75rem; }
.kpi-status-card .kpi-val { font-size: 2rem; }
.kpi-status-card.kpi-total { border-top: 2px solid var(--primary); }

/* ═══════════════════════════════════════════════
   APPLE-STYLE DASHBOARD OVERRIDE
   Scoped to #tab-dashboard for tablet/desktop
═══════════════════════════════════════════════ */

/* ── Wrapper ── */
#tab-dashboard {
  --ap-bg:       #F2F2F7;
  --ap-card:     #FFFFFF;
  --ap-label:    #6E6E73;
  --ap-blue:     #007AFF;
  --ap-green:    #34C759;
  --ap-red:      #FF3B30;
  --ap-orange:   #FF9500;
  --ap-purple:   #AF52DE;
  --ap-num:      #1C1C1E;
  --ap-border:   rgba(0,0,0,.06);
  --ap-shadow:   0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --ap-radius:   16px;
  --ap-font:     -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  background: var(--ap-bg);
  font-family: var(--ap-font);
}

/* ── Toolbar ── */
#tab-dashboard .dash-toolbar {
  background: transparent;
  padding: .25rem 0 1rem;
  gap: 1rem;
  border: none;
}

/* Segmented control */
#tab-dashboard .period-btns {
  background: rgba(118,118,128,.12);
  border: none;
  border-radius: 11px;
  padding: 2px;
  gap: 0;
}
#tab-dashboard .period-btn {
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: .42rem 1.1rem;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ap-label);
  cursor: pointer;
  font-family: var(--ap-font);
  transition: none;
  letter-spacing: -.01em;
}
#tab-dashboard .period-btn:hover { background: transparent; color: var(--ap-num); }
#tab-dashboard .period-btn.active {
  background: var(--ap-card);
  color: var(--ap-num);
  box-shadow: 0 1px 4px rgba(0,0,0,.14), 0 0 1px rgba(0,0,0,.06);
}

/* Nav arrows */
#tab-dashboard .nav-arrow {
  background: var(--ap-card);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  box-shadow: var(--ap-shadow);
  color: var(--ap-blue);
  font-size: 1rem;
}
#tab-dashboard .nav-arrow:hover { background: #F2F2F7; }
#tab-dashboard .period-label {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ap-num);
  letter-spacing: -.02em;
  min-width: 130px;
}

/* ── Financial KPI grid ── */
#tab-dashboard .kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: .75rem;
}

#tab-dashboard .kpi-card {
  background: var(--ap-card);
  border: none;
  border-radius: var(--ap-radius);
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: var(--ap-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
#tab-dashboard .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

/* Remove old colored borders */
#tab-dashboard .kpi-card.kpi-success,
#tab-dashboard .kpi-card.kpi-danger,
#tab-dashboard .kpi-card.kpi-warning { border-top: none; }

/* Subtle left color accent instead */
#tab-dashboard .kpi-card.kpi-success::before { content:''; position:absolute; right:0; top:20%; bottom:20%; width:3px; background:var(--ap-green); border-radius:2px; }
#tab-dashboard .kpi-card.kpi-danger::before  { content:''; position:absolute; right:0; top:20%; bottom:20%; width:3px; background:var(--ap-red);   border-radius:2px; }
#tab-dashboard .kpi-card.kpi-warning::before { content:''; position:absolute; right:0; top:20%; bottom:20%; width:3px; background:var(--ap-orange); border-radius:2px; }

#tab-dashboard .kpi-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--ap-label);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .45rem;
}
#tab-dashboard .kpi-val {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ap-num);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
#tab-dashboard .kpi-sub {
  font-size: .7rem;
  color: var(--ap-label);
  margin-top: .3rem;
  font-weight: 500;
}

/* ── Status row ── */
#tab-dashboard .kpi-status-row {
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  margin-bottom: .75rem;
}
#tab-dashboard .kpi-status-card {
  text-align: center;
  padding: .9rem .75rem;
}
#tab-dashboard .kpi-status-card .kpi-label {
  font-size: .65rem;
  margin-bottom: .35rem;
}
#tab-dashboard .kpi-status-card .kpi-val {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
#tab-dashboard .kpi-status-card.kpi-total {
  background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
}
#tab-dashboard .kpi-status-card.kpi-total .kpi-label { color: rgba(255,255,255,.75); }
#tab-dashboard .kpi-status-card.kpi-total .kpi-val   { color: #fff; }
#tab-dashboard .kpi-status-card.kpi-total::before    { display: none; }

/* ── Section cards ── */
#tab-dashboard .card {
  background: var(--ap-card);
  border: none;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
}
#tab-dashboard .dash-card-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--ap-label);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1.1rem 1.25rem .7rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* ── Projection card ── */
#tab-dashboard .projection-card {
  border: none;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  margin-bottom: .75rem;
}
#tab-dashboard .proj-kpi-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ap-label);
}
#tab-dashboard .proj-kpi-val {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ap-num);
}
#tab-dashboard .proj-kpi-hint {
  font-size: .72rem;
  color: var(--ap-label);
}

/* ── Status bar rows ── */
#tab-dashboard .status-bar-row {
  padding: .6rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
#tab-dashboard .status-bar-num {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ap-blue);
  font-variant-numeric: tabular-nums;
  background: rgba(0,122,255,.08);
  padding: .15rem .55rem;
  border-radius: 20px;
  min-width: 2rem;
  text-align: center;
}

/* ── Dash row ── */
#tab-dashboard .dash-row {
  gap: .75rem;
  margin-bottom: .75rem;
}

/* ── Month compare ── */
#tab-dashboard #monthCompareCard {
  margin-bottom: .75rem;
}

/* ── Responsive: tablet 768–1100 ── */
@media (min-width: 641px) and (max-width: 1100px) {
  #tab-dashboard .kpi-grid          { grid-template-columns: repeat(4, 1fr); gap: .6rem; }
  #tab-dashboard .kpi-status-row    { grid-template-columns: repeat(5, 1fr); gap: .6rem; }
  #tab-dashboard .kpi-val           { font-size: 1.4rem; }
  #tab-dashboard .kpi-status-card .kpi-val { font-size: 1.9rem; }
  #tab-dashboard .kpi-card          { padding: 1rem 1rem .85rem; }
}

/* ── Responsive: mobile ── */
@media (max-width: 640px) {
  #tab-dashboard .kpi-grid          { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  #tab-dashboard .kpi-status-row    { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  #tab-dashboard .kpi-val           { font-size: 1.15rem; }
  #tab-dashboard .kpi-status-card .kpi-val { font-size: 1.4rem; }
  #tab-dashboard .kpi-label         { font-size: .62rem; }
  #tab-dashboard .kpi-card          { padding: .7rem .65rem .6rem; }
  #tab-dashboard .kpi-status-card   { padding: .7rem .4rem; }
  #tab-dashboard .dash-row          { grid-template-columns: 1fr; }
}

/* items card */
#tab-dashboard .kpi-status-row    { grid-template-columns: repeat(6, 1fr); }
#tab-dashboard .kpi-items         { background: linear-gradient(135deg, #34C759 0%, #30D158 100%); }
#tab-dashboard .kpi-items .kpi-label { color: rgba(255,255,255,.75); }
#tab-dashboard .kpi-items .kpi-val   { color: #fff; }
#tab-dashboard .kpi-items::before    { display: none; }

@media (min-width: 641px) and (max-width: 1100px) {
  #tab-dashboard .kpi-status-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  #tab-dashboard .kpi-status-row { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
}

/* ── Custom date range ── */
.dash-custom-range {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem 1rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
  box-shadow: var(--shadow-sm);
}
.dash-custom-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-date-input {
  border: none;
  background: var(--card);
  border-radius: 8px;
  padding: .3rem .6rem;
  font-size: .83rem;
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  cursor: pointer;
  outline: none;
}
.dash-date-input:focus { box-shadow: 0 0 0 2px rgba(0,122,255,.3); }
.dash-custom-apply {
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .32rem .9rem;
  font-size: .83rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}
.dash-custom-apply:hover { opacity: .85; }

/* ── Compare CSV modal ── */
.cmp-csv-drop { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.cmp-csv-drop:hover { border-color: var(--primary); background: var(--primary-light); }
.cmp-csv-kpis { display: flex; gap: 1rem; margin: 1rem 0; }
.cmp-csv-kpi { flex: 1; background: var(--bg); border-radius: var(--radius); padding: .9rem; text-align: center; }
.cmp-csv-kpi-n { font-size: 1.8rem; font-weight: 800; color: var(--text); }
.cmp-csv-kpi-l { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.cmp-kpi-found .cmp-csv-kpi-n { color: var(--success); }
.cmp-kpi-missing .cmp-csv-kpi-n { color: var(--danger); }
.cmp-csv-section-title { font-weight: 700; font-size: .88rem; margin-bottom: .6rem; }
.cmp-csv-missing-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.cmp-csv-missing-tag { background: #FEF2F2; color: var(--danger); border: 1px solid #FECACA; border-radius: 6px; padding: .25rem .65rem; font-size: .82rem; font-weight: 600; cursor: pointer; }
.cmp-csv-missing-tag:hover { background: #FEE2E2; }
.cmp-csv-table-wrap { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ── Dashboard BI sections ── */
.dash-bi-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1rem;
}
.dash-bi-card h3 {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .9rem;
}
.dash-bi-grid6 { display: grid; grid-template-columns: repeat(6,1fr); gap: .7rem; }
.dash-bi-grid5 { display: grid; grid-template-columns: repeat(5,1fr); gap: .7rem; }
.dash-bi-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; }
.dash-bi-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
@media (max-width: 900px) {
  .dash-bi-grid6 { grid-template-columns: repeat(3,1fr); }
  .dash-bi-grid5 { grid-template-columns: repeat(3,1fr); }
  .dash-bi-grid4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .dash-bi-grid6,.dash-bi-grid5,.dash-bi-grid4,.dash-bi-grid3 { grid-template-columns: repeat(2,1fr); }
}
.dash-bi-cell {
  background: var(--bg);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.dash-bi-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-bi-val-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dash-bi-lbl {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}
.dash-bi-accent { color: var(--primary) !important; }
.dash-bi-total  { border: 2px solid var(--primary); }
.dash-bi-roas   { background: linear-gradient(135deg,#f0f9ff,#e0f2fe); border: 1.5px solid #bae6fd; }
.dash-bi-roas .dash-bi-val { color: #0369a1; }
.dash-bi-edit-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: .85rem;
  cursor: pointer;
  padding: 0 .2rem;
  line-height: 1;
  flex-shrink: 0;
}
.dash-bi-target-input {
  border: 1.5px solid var(--primary);
  border-radius: 6px;
  padding: .15rem .4rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  width: 7rem;
  outline: none;
  background: var(--card);
}
.dash-bi-target-input:focus { box-shadow: 0 0 0 2px rgba(0,122,255,.25); }

/* expense list */
.dash-exp-list { display: flex; flex-direction: column; gap: .35rem; max-height: 220px; overflow-y: auto; }
.dash-exp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.dash-exp-row:last-child { border-bottom: none; }
.dash-exp-name { color: var(--text-muted); flex: 1; }
.dash-exp-amt  { font-weight: 700; }
.dash-exp-total-row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  font-weight: 800;
  padding: .5rem 0 0;
  border-top: 2px solid var(--border);
  margin-top: .3rem;
  color: var(--text);
}

/* dash row layout */
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .dash-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════
   PICKUP APPOINTMENTS — Admin
═══════════════════════════════════════════════ */
/* ── Legacy (keep for modal) ── */
.pickup-admin-wrap  { max-width: 900px; margin: 0 auto; padding: 1rem; }
.pickup-admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.pickup-admin-title { font-size: 1.15rem; font-weight: 700; }

/* ═══════════════════════════════════════════════
   PICKUP TAB — NEW DESIGN
═══════════════════════════════════════════════ */
.pu-wrap { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
#pickupList { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 900px) { #pickupList { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #pickupList { grid-template-columns: 1fr; } }

/* ── Hero ── */
.pu-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  border-radius: 18px; padding: 1.4rem 1.6rem;
  margin-bottom: 1.2rem; color: #fff;
  box-shadow: 0 4px 20px rgba(67,56,202,.35);
}
.pu-hero-title { font-size: 1.35rem; font-weight: 800; margin-bottom: .2rem; letter-spacing: -.02em; }
.pu-hero-sub   { font-size: .78rem; opacity: .7; }

.pu-hero-stats { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pu-stat {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: .55rem 1rem; text-align: center; min-width: 72px;
  backdrop-filter: blur(4px);
}
.pu-stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.pu-stat-lbl { font-size: .66rem; opacity: .75; margin-top: .2rem; font-weight: 600; white-space: nowrap; }
.pu-stat.urgent { background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.5); }

/* ── Toolbar ── */
.pu-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pu-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.pu-filter-btn {
  padding: .38rem .9rem; border: 1.5px solid var(--border);
  border-radius: 99px; background: var(--card); color: var(--text-muted);
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap; font-family: inherit;
}
.pu-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.pu-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.pu-view-btns { display: flex; gap: .4rem; }
.pu-view-btn {
  padding: .38rem .85rem; border: 1.5px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--text);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: inherit; white-space: nowrap;
}
.pu-view-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pu-view-btn.active { background: #f0fdf4; border-color: #059669; color: #059669; }

/* ── Weekly panel ── */
.pu-week-panel {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1.25rem; margin-bottom: 1.2rem;
  box-shadow: var(--shadow-card);
}
.pu-week-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); }
.pu-week-day {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 0; border-top: 1px solid var(--border);
}
.pu-week-day:first-of-type { border-top: none; }
.pu-week-date {
  min-width: 80px; text-align: center;
  background: var(--bg-secondary); border-radius: 10px; padding: .4rem .5rem;
}
.pu-week-date-day { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
.pu-week-date-num { font-size: 1.3rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.pu-week-date.today { background: #eef2ff; }
.pu-week-date.today .pu-week-date-num { color: var(--primary); }
.pu-week-date.tomorrow { background: #fef3c7; }
.pu-week-date.tomorrow .pu-week-date-num { color: #b45309; }
.pu-week-apts { flex: 1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pu-week-apt {
  background: #d1fae5; color: #065f46; border-radius: 8px;
  padding: .25rem .65rem; font-size: .8rem; font-weight: 600;
}
.pu-week-apt.pending { background: #dbeafe; color: #1e40af; }
.pu-week-empty { font-size: .8rem; color: var(--text-muted); font-style: italic; }

/* ── Loading dots ── */
.pu-loading { display: flex; gap: .4rem; justify-content: center; padding: 2.5rem; }
.pu-loading-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  animation: puDotPulse 1.2s ease-in-out infinite;
}
.pu-loading-dot:nth-child(2) { animation-delay: .2s; }
.pu-loading-dot:nth-child(3) { animation-delay: .4s; }
@keyframes puDotPulse { 0%,80%,100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* ── Cards ── */
.pickup-card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.pickup-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  transform: translateY(-1px);
}

/* Left accent by status */
.pickup-card::before {
  content: '';
  display: block;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.pickup-card[data-status="awaiting_config"]::before    { background: #7c3aed; }
.pickup-card[data-status="pending_approval"]::before   { background: #f59e0b; }
.pickup-card[data-status="awaiting_selection"]::before { background: #3b82f6; }
.pickup-card[data-status="approved"]::before           { background: #10b981; }
.pickup-card[data-status="rejected"]::before,
.pickup-card[data-status="cancelled"]::before          { background: var(--border); }

.pickup-card-inner { padding: 1rem 1.25rem 1.1rem; }

.pickup-empty {
  text-align: center; padding: 3rem 1rem; color: var(--text-muted);
  background: var(--card); border-radius: var(--radius-lg);
  border: 1.5px dashed var(--border);
}

/* Head */
.pickup-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; margin-bottom: .6rem;
}
.pickup-card-name {
  font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.2;
}
.pickup-card-name-link {
  cursor: pointer; display: inline-block;
}
.pickup-card-name-link:hover { color: var(--primary); text-decoration: underline; }
.pickup-order-link {
  cursor: pointer; color: var(--primary); font-weight: 600;
  text-decoration: none;
}
.pickup-order-link:hover { text-decoration: underline; }
.pickup-card-order-num {
  font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-top: .1rem;
}
.pickup-round-badge {
  display: inline-block; font-size: .65rem; font-weight: 700;
  background: #fef3c7; color: #b45309;
  border-radius: 5px; padding: .05rem .35rem; margin-right: .25rem; vertical-align: middle;
}

/* Status pill */
.pu-status-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; border-radius: 99px;
  padding: .22rem .65rem; white-space: nowrap; flex-shrink: 0;
}
.pu-status-pill.config    { background: #ede9fe; color: #6d28d9; }
.pu-status-pill.pending   { background: #fef3c7; color: #92400e; }
.pu-status-pill.waiting   { background: #dbeafe; color: #1e40af; }
.pu-status-pill.approved  { background: #d1fae5; color: #065f46; }
.pu-status-pill.rejected  { background: #fee2e2; color: #991b1b; }
.pu-status-pill.cancelled { background: var(--bg-secondary); color: var(--text-muted); }
.pu-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.pu-status-pill.config .pu-status-dot    { background: #7c3aed; }
.pu-status-pill.pending .pu-status-dot   { background: #f59e0b; }
.pu-status-pill.waiting .pu-status-dot   { background: #3b82f6; }
.pu-status-pill.approved .pu-status-dot  { background: #10b981; }
.pu-status-pill.rejected .pu-status-dot  { background: #ef4444; }

/* Phone */
.pickup-card-phone {
  font-size: .82rem; color: var(--text-muted); margin-bottom: .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.pickup-card-phone a {
  font-size: .75rem; font-weight: 600; color: #16a34a;
  text-decoration: none; padding: .15rem .5rem;
  border: 1px solid #bbf7d0; border-radius: 6px; background: #f0fdf4;
}

/* Selected slot */
.pickup-selected-slot {
  display: flex; align-items: center; gap: .5rem;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 10px; padding: .55rem .85rem; margin-bottom: .7rem;
}
.pickup-selected-slot-icon { font-size: 1rem; flex-shrink: 0; }
.pickup-selected-slot-text { font-size: .88rem; font-weight: 600; color: #065f46; }
.pickup-selected-slot-label { font-size: .7rem; color: #16a34a; display: block; margin-top: .05rem; }

/* Customer note */
.pickup-customer-note {
  font-size: .8rem; color: var(--text-muted); font-style: italic;
  margin-bottom: .6rem; padding: .4rem .7rem;
  background: var(--bg-secondary); border-radius: 8px; border-right: 3px solid var(--border);
}

/* Proposed slot tags */
.pickup-slots-wrap { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.pickup-slots-label {
  font-size: .7rem; font-weight: 600; color: var(--text-muted);
  width: 100%; margin-bottom: .15rem;
}
.pickup-slot-tag {
  font-size: .76rem; font-weight: 500; color: var(--text-muted);
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 7px; padding: .2rem .55rem;
}

/* Actions */
.pickup-card-divider {
  border: none; border-top: 1px solid var(--border);
  margin: .75rem 0 .75rem;
}
.pickup-card-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.pickup-card-actions .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: .82rem; font-weight: 600;
  min-height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.pu-btn-approve  { background: #10b981; color: #fff; border: none; }
.pu-btn-approve:hover { background: #059669; }
.pu-btn-reject   { background: transparent; color: #ef4444; border: 1.5px solid #fca5a5; }
.pu-btn-reject:hover { background: #fff1f2; }
.pu-btn-config   { background: #7c3aed; color: #fff; border: none; }
.pu-btn-config:hover { background: #6d28d9; }
.pu-btn-secondary { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); }
.pu-btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

/* ── iOS toggle ── */
.ios-toggle { position: relative; display: inline-block; width: 51px; height: 31px; flex-shrink: 0; cursor: pointer; }
.ios-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-track {
  position: absolute; inset: 0;
  background: #e5e7eb; border-radius: 31px;
  transition: background .2s;
}
.ios-toggle-track::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .2s;
}
.ios-toggle input:checked + .ios-toggle-track { background: #34c759; }
.ios-toggle input:checked + .ios-toggle-track::after { transform: translateX(-20px); }

.pu-today-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #f8fafc; border: 1px solid var(--border);
  border-radius: 12px; padding: .75rem 1rem;
}
.pu-today-toggle-label { font-size: .88rem; font-weight: 700; color: var(--text); }
.pu-today-toggle-sub   { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

.pickup-slot-toggle {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .55rem; border: 1.5px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: .82rem;
  transition: border-color .12s, background .12s;
}
.pickup-slot-toggle input { width: auto; margin: 0; accent-color: var(--primary); }
.pickup-slot-toggle:has(input:checked) {
  border-color: var(--primary); background: var(--primary-light);
}
.pickup-date-panel .input-field { height: auto; padding: .25rem .5rem; font-size: .83rem; }

/* ── Order card pickup badge ── */
.card-pickup-badge {
  font-size: .73rem; font-weight: 600;
  padding: .22rem .6rem; border-radius: 6px;
  display: flex; align-items: center; gap: .35rem;
  width: 100%; box-sizing: border-box;
}
.card-pickup-badge.approved { background: #d1fae5; color: #065f46; }
.card-pickup-badge.pending  { background: #dbeafe; color: #1e40af; }
.card-pickup-badge.waiting  { background: #fef3c7; color: #92400e; }

/* ── Pickup scheduled send ── */
.pu-scheduled-chip {
  font-size: .78rem; color: #6d28d9; background: #ede9fe;
  border-radius: 8px; padding: .3rem .65rem; margin: .35rem 0 .1rem;
  display: flex; align-items: center; gap: .3rem;
}
.pu-schedule-popover {
  position: absolute; z-index: 9000;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); padding: 1rem; min-width: 260px;
  direction: rtl;
}
.pu-sched-title { font-size: .9rem; font-weight: 700; margin-bottom: .65rem; }
.pu-sched-body  { display: flex; flex-direction: column; gap: .6rem; }
.pu-sched-btns  { display: flex; gap: .45rem; flex-wrap: wrap; }
.pu-schedule-btn { color: #7c3aed !important; border-color: #ddd8fe !important; }

/* ── Pickup message templates panel ── */
.pu-msg-panel {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pu-msg-inner {
  background: #fff; border-radius: 18px; width: 100%; max-width: 560px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.pu-msg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem .8rem; font-weight: 700; font-size: .98rem;
  border-bottom: 1px solid var(--border);
}
.pu-msg-close {
  background: none; border: none; cursor: pointer; font-size: 1.1rem;
  color: var(--text-muted); padding: .2rem .4rem; border-radius: 6px;
}
.pu-msg-close:hover { background: #f3f4f6; }
.pu-msg-body {
  overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.pu-msg-section { display: flex; flex-direction: column; gap: .4rem; }
.pu-msg-section-title { font-weight: 700; font-size: .88rem; }
.pu-msg-vars { font-size: .75rem; color: var(--text-muted); }
.pu-msg-vars code {
  background: #f3f4f6; border-radius: 4px; padding: .1rem .35rem; font-size: .75rem;
}
.pu-msg-textarea {
  width: 100%; resize: vertical; font-family: inherit; font-size: .84rem;
  border: 1.5px solid var(--border); border-radius: 10px; padding: .6rem .75rem;
  line-height: 1.55; direction: rtl;
}
.pu-msg-textarea:focus { outline: none; border-color: var(--primary); }
.pu-msg-save-row { display: flex; justify-content: flex-end; padding-top: .25rem; }

.order-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.order-tag {
  font-size: .67rem; font-weight: 700; padding: .13rem .45rem;
  border-radius: 99px; display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap;
}
.order-tag.tag-returning  { background: #d1fae5; color: #065f46; }
.order-tag.tag-multi      { background: #fed7aa; color: #92400e; }
.order-tag.tag-age-new    { background: #dcfce7; color: #166534; }
.order-tag.tag-age-warn   { background: #fef3c7; color: #92400e; }
.order-tag.tag-age-old    { background: #fee2e2; color: #991b1b; }

/* ── Availability management panel ── */
.pu-avail-panel {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.pu-avail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .9rem;
}
.pu-avail-title { font-size: 1rem; font-weight: 700; }
.pu-avail-save {
  font-size: .82rem; font-weight: 700; padding: .35rem .9rem;
  border-radius: 8px; border: none; cursor: pointer;
  background: #7c3aed; color: #fff; transition: background .12s;
}
.pu-avail-save:hover   { background: #6d28d9; }
.pu-avail-save.saved   { background: #059669; }
.pu-avail-save:disabled { background: #c4b5fd; cursor: not-allowed; }

.pu-avail-grid {
  display: grid;
  grid-template-columns: 56px repeat(6, 1fr);
  gap: 3px;
  font-size: .75rem;
  overflow-x: auto;
}
.pu-avail-hdr {
  text-align: center; font-weight: 700;
  color: var(--text-muted); padding: .3rem 0;
  font-size: .72rem;
}
.pu-avail-hdr.today-col { color: #7c3aed; }

.pu-avail-time-cell {
  font-size: .72rem; color: var(--text-muted);
  display: flex; align-items: center;
  padding-right: .3rem; white-space: nowrap;
}
.pu-avail-cell {
  display: flex; align-items: center; justify-content: center;
  padding: .15rem;
}

/* Compact iOS toggle for grid */
.ios-toggle-sm { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.ios-toggle-sm input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-sm .ios-toggle-track {
  position: absolute; inset: 0;
  background: #e5e7eb; border-radius: 22px;
  transition: background .2s;
}
.ios-toggle-sm .ios-toggle-track::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.ios-toggle-sm input:checked + .ios-toggle-track { background: #34c759; }
.ios-toggle-sm input:checked + .ios-toggle-track::after { transform: translateX(-16px); }

/* Blocked slots list */

.pu-blocked-section { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.pu-blocked-title { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; color: var(--text); }
.pu-blocked-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.pu-blocked-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fee2e2; color: #991b1b;
  border-radius: 8px; padding: .28rem .65rem;
  font-size: .76rem; font-weight: 600;
}
.pu-blocked-chip button {
  background: none; border: none; cursor: pointer;
  color: #991b1b; font-size: .8rem; padding: 0; line-height: 1;
}
.pu-blocked-chip button:hover { color: #dc2626; }
.pu-blocked-empty { font-size: .82rem; color: var(--text-muted); }

/* ── Pickup delete button ── */
.pu-btn-delete {
  background: transparent; border: 1.5px solid #fee2e2;
  color: #ef4444; border-radius: 8px; padding: .3rem .55rem;
  font-size: .85rem; cursor: pointer; transition: background .12s, border-color .12s;
  margin-right: auto !important;
}
.pu-btn-delete:hover { background: #fee2e2; border-color: #fca5a5; }

/* ── Pickup card countdown ── */
.pu-card-countdown {
  font-size: .72rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 6px;
  white-space: nowrap; flex-shrink: 0;
  background: #f3f4f6; color: #6b7280;
}

/* ── Order card pickup countdown ── */
.order-pickup-countdown {
  font-size: .7rem; font-weight: 700;
  padding: .1rem .4rem; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}
.order-pickup-countdown.far    { background: rgba(0,0,0,.08); color: #065f46; }
.order-pickup-countdown.soon   { background: #fef3c7; color: #92400e; }
.order-pickup-countdown.urgent { background: #fee2e2; color: #991b1b; }
.order-pickup-countdown.now    { background: #d1fae5; color: #065f46; }

/* ── Scheduled messages table ── */
.wa-sched-dest {
  font-size: .75rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 6px;
  white-space: nowrap; display: inline-block;
  background: #f3f4f6; color: #374151;
}
.wa-sched-dest.group    { background: #ede9fe; color: #6d28d9; }
.wa-sched-dest.customer { background: #d1fae5; color: #065f46; }
.wa-sched-dest.pickup   { background: #fef3c7; color: #92400e; }
.wa-sched-pickup-row    { background: #fffbeb; }

.wa-sched-msg {
  font-size: .78rem; color: var(--text-muted);
  max-width: 220px; display: inline-block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: help; vertical-align: middle;
}

/* ── Scheduled messages table — mobile cards ── */
@media (max-width: 640px) {
  /* hide table headers on scheduled table */
  table:has(#waScheduledTable) thead { display: none; }

  .wa-log-table,
  .wa-log-table tbody,
  .wa-log-table tr { display: block; width: 100%; }

  .wa-log-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .5rem;
    padding: .55rem .7rem;
    background: var(--card);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2rem .5rem;
  }

  /* hide td borders, use grid layout */
  .wa-log-table td {
    border: none;
    padding: 0;
    font-size: .8rem;
  }

  /* empty state spans full width */
  .wa-log-table td.wa-log-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1rem 0 !important;
  }

  /* col 1: time — top-right, small, muted */
  .wa-log-table td:nth-child(1) {
    font-size: .7rem; color: var(--text-muted);
    grid-column: 1; grid-row: 1;
  }
  /* col 2: customer — bold, prominent */
  .wa-log-table td:nth-child(2) {
    font-weight: 700; font-size: .88rem;
    grid-column: 1; grid-row: 2;
  }
  /* col 3: order# — same row as customer, right side */
  .wa-log-table td:nth-child(3) {
    font-size: .75rem; color: var(--primary);
    grid-column: 2; grid-row: 2;
    text-align: left;
  }
  /* col 4: dest badge */
  .wa-log-table td:nth-child(4) {
    grid-column: 2; grid-row: 1;
    text-align: left;
  }
  /* col 5: message preview — full width */
  .wa-log-table td:nth-child(5) {
    grid-column: 1 / -1; grid-row: 3;
    color: var(--text-muted); font-size: .76rem;
  }
  .wa-log-table td:nth-child(5) .wa-sched-msg {
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* col 6: cancel button — bottom right */
  .wa-log-table td:nth-child(6) {
    grid-column: 1 / -1; grid-row: 4;
    padding-top: .35rem;
    border-top: 1px solid var(--border);
    margin-top: .25rem;
    text-align: left;
  }
}

/* ── Filters collapse ── */
.filters-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .3rem;
}
.filters-toggle-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: .28rem .7rem;
  cursor: pointer; transition: color .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.filters-toggle-btn:hover { color: var(--text); background: var(--bg); }
.filters-toggle-btn.collapsed { color: var(--primary); border-color: var(--primary-light); }

#filtersArea {
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease;
  max-height: 400px;
  opacity: 1;
}
#filtersArea.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   LOBBY TAB
═══════════════════════════════════════════════ */
.lobby-root {
  padding: 1.25rem 1rem 4rem;
  max-width: 900px;
  margin: 0 auto;
}
.lobby-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}
@media(max-width:900px) { .lobby-kpis { grid-template-columns: repeat(4, 1fr); } }
@media(max-width:640px) { .lobby-kpis { grid-template-columns: repeat(2, 1fr); } }
.lkpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem .85rem;
  text-align: center;
  transition: box-shadow .15s;
}
.lkpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.lkpi-card.lkpi-alert { border-color: #f59e0b; background: #fffbeb; }
.lkpi-icon { font-size: 1.6rem; margin-bottom: .35rem; }
.lkpi-val  { font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1; }
.lkpi-lbl  { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.lobby-section-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .6rem;
}
.lobby-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin-bottom: 1.25rem;
}
@media(max-width:640px) { .lobby-grid { grid-template-columns: repeat(3, 1fr); } }
.lobby-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem .5rem .85rem;
  cursor: pointer;
  transition: background .13s, box-shadow .13s, transform .1s;
  font-family: inherit;
}
.lobby-tile:hover {
  background: var(--primary-bg);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(99,102,241,.12);
  transform: translateY(-1px);
}
.lt-icon { font-size: 1.6rem; }
.lt-lbl  { font-size: .75rem; font-weight: 600; color: var(--text-secondary); text-align: center; }

/* ─── Pickup approved banner ─────────────────────────────── */
.pickup-approved-banner {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #16a34a;
  color: #fff;
  border-radius: 12px;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  z-index: 9999;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  max-width: 480px;
  width: calc(100vw - 2rem);
  animation: pab-in .25s ease;
}
@keyframes pab-in { from { opacity:0; transform: translateX(-50%) translateY(12px); } }
.pickup-pending-banner { background: #d97706; bottom: 5rem; }
.pab-icon { font-size: 1.2rem; flex-shrink: 0; }
.pab-text { flex: 1; font-size: .82rem; line-height: 1.3; }
.pab-link { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); border-radius: 6px; color: #fff; font-size: .78rem; padding: .25rem .6rem; cursor: pointer; white-space: nowrap; font-family: inherit; }
.pab-close { background: transparent; border: none; color: rgba(255,255,255,.7); font-size: 1rem; cursor: pointer; padding: 0 .2rem; line-height: 1; margin-right: -.2rem; }
.pab-also { opacity: .8; font-size: .78rem; }

/* ── Support section sub-tabs ───────────────────────────────────────────── */
.sp-section-tabs {
  display: flex;
  gap: .25rem;
  padding: .5rem 1rem .4rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sp-stab {
  padding: .35rem .9rem;
  border-radius: 6px 6px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sp-stab:hover { color: var(--text); background: var(--hover-bg); }
.sp-stab.active {
  background: var(--bg);
  color: var(--purple);
  border-color: var(--border);
  border-bottom-color: var(--bg);
  margin-bottom: -1px;
}

/* ── Knowledge Center panel ─────────────────────────────────────────────── */
.sp-kc-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1rem;
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.sp-kc-stats {
  display: flex;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sp-kc-stat {
  flex: 1;
  min-width: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.sp-kc-stat > span:first-child {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}
.sp-kc-stat-lbl { font-size: .78rem; color: var(--text-muted); }
.sp-kc-stat.auto-send > span:first-child { color: #0ea5e9; }
.sp-kc-stat.auto-reply > span:first-child { color: #8b5cf6; }
.sp-kc-stat.inactive > span:first-child { color: var(--text-muted); }

.sp-kc-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.sp-kc-filters {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}
.sp-kc-filter {
  padding: .3rem .75rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sp-kc-filter:hover { border-color: var(--purple); color: var(--purple); }
.sp-kc-filter.active {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}
.sp-kc-toolbar-right {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-right: auto;
}
.sp-kc-search {
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  font-family: inherit;
  width: 180px;
}
.sp-kc-search:focus { outline: none; border-color: var(--purple); }
.sp-kc-add-btn {
  padding: .35rem .9rem;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
  transition: opacity .15s;
}
.sp-kc-add-btn:hover { opacity: .85; }
.sp-kc-scan-btn {
  padding: .35rem .75rem;
  background: rgba(139,92,246,.1);
  color: var(--purple);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 8px;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.sp-kc-scan-btn:hover { background: rgba(139,92,246,.18); }

/* ── Dedup button ── */
.sp-kc-dedup-btn {
  padding: .35rem .75rem;
  background: rgba(234,88,12,.08);
  color: #c2410c;
  border: 1px solid rgba(234,88,12,.3);
  border-radius: 8px;
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.sp-kc-dedup-btn:hover { background: rgba(234,88,12,.15); }

/* ── Dedup panel ── */
.sp-kc-dedup-panel {
  border: 1.5px solid rgba(234,88,12,.3);
  border-radius: 10px;
  margin-bottom: 1rem;
  background: var(--surface);
  overflow: hidden;
}
.sp-kc-dedup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: rgba(234,88,12,.07);
  border-bottom: 1px solid rgba(234,88,12,.2);
}
.sp-kc-dedup-title {
  font-size: .9rem;
  font-weight: 700;
  color: #c2410c;
}
.sp-kc-dedup-close {
  background: none;
  border: none;
  font-size: .82rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 .3rem;
  font-family: inherit;
}
.sp-kc-dedup-close:hover { color: var(--text); }
.sp-kc-dedup-body {
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
}
.sp-kc-dedup-loading,
.sp-kc-dedup-empty {
  text-align: center;
  padding: 1.5rem;
  font-size: .88rem;
  color: var(--text-muted);
}
.sp-kc-dedup-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
  background: var(--card);
}
.sp-kc-dedup-group-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
}
.sp-kc-dedup-group-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.sp-kc-dedup-items {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .6rem;
}
.sp-kc-dedup-item {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .65rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.sp-kc-dedup-item:has(input:checked) {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb),.04);
}
.sp-kc-dedup-item input[type="radio"] {
  margin-top: .15rem;
  flex-shrink: 0;
}
.sp-kc-dedup-item-body { flex: 1; min-width: 0; }
.sp-kc-dedup-item-q {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .15rem;
}
.sp-kc-dedup-item-a {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: .15rem;
}
.sp-kc-dedup-item-meta {
  font-size: .7rem;
  color: var(--text-muted);
  opacity: .7;
}
.sp-kc-dedup-edit {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .6rem;
}
.sp-kc-dedup-eq,
.sp-kc-dedup-ea {
  width: 100%;
  font-family: inherit;
  font-size: .82rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  resize: none;
  transition: border-color .12s;
}
.sp-kc-dedup-eq:focus,
.sp-kc-dedup-ea:focus { border-color: var(--primary); }
.sp-kc-dedup-group-btns {
  display: flex;
  gap: .5rem;
}
.sp-kc-dedup-merge-btn {
  flex: 1;
  padding: .42rem .75rem;
  background: rgba(var(--primary-rgb),.1);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb),.35);
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sp-kc-dedup-merge-btn:hover { background: rgba(var(--primary-rgb),.18); }
.sp-kc-dedup-merge-btn:disabled { opacity: .55; cursor: default; }
.sp-kc-dedup-skip-btn {
  padding: .42rem .65rem;
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sp-kc-dedup-skip-btn:hover { border-color: var(--border-h); color: var(--text); }
.sp-kc-dedup-merged {
  text-align: center;
  padding: .75rem;
  font-size: .85rem;
  color: var(--text-muted);
}

.sp-kc-add-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: .75rem;
  overflow: hidden;
}
.sp-kc-add-form-inner {
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sp-kc-form-ta {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: .88rem;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.sp-kc-form-ta:focus { outline: none; border-color: var(--purple); }
.sp-kc-form-btns { display: flex; gap: .5rem; justify-content: flex-end; }

.sp-kc-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sp-kc-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
  border-right: 4px solid var(--border);
  transition: border-color .2s;
}
.sp-kc-item.kc-auto-send { border-right-color: #0ea5e9; }
.sp-kc-item.kc-auto-reply { border-right-color: #8b5cf6; }
.sp-kc-item.kc-inactive { opacity: .7; }
.sp-kc-item-q {
  font-weight: 600;
  color: var(--text);
  font-size: .9rem;
  margin-bottom: .4rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.sp-kc-item-q-text { flex: 1; }
.sp-kc-item-a {
  color: var(--text-muted);
  font-size: .85rem;
  line-height: 1.5;
  margin-bottom: .5rem;
  cursor: pointer;
}
.sp-kc-item-a.expanded { color: var(--text); cursor: default; }
.sp-kc-item-meta {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.sp-kc-item-badge {
  font-size: .72rem;
  padding: .15rem .5rem;
  border-radius: 10px;
  font-weight: 600;
}
.sp-kc-item-badge.auto-send { background: rgba(14,165,233,.1); color: #0284c7; }
.sp-kc-item-badge.auto-reply { background: rgba(139,92,246,.1); color: #7c3aed; }
.sp-kc-item-badge.inactive { background: var(--hover-bg); color: var(--text-muted); }
.sp-kc-item-usage { font-size: .75rem; color: var(--text-muted); }
.sp-kc-item-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.sp-kc-btn {
  padding: .25rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sp-kc-btn:hover { border-color: var(--purple); color: var(--purple); }
.sp-kc-btn.danger:hover { border-color: #ef4444; color: #ef4444; }
.sp-kc-btn.active-green { background: rgba(22,163,74,.1); color: #15803d; border-color: rgba(22,163,74,.3); }
.sp-kc-btn.active-blue { background: rgba(14,165,233,.1); color: #0284c7; border-color: rgba(14,165,233,.3); }
.sp-kc-btn.active-purple { background: rgba(139,92,246,.1); color: #7c3aed; border-color: rgba(139,92,246,.3); }
.sp-kc-edit-row {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.sp-kc-edit-btns { display: flex; gap: .5rem; justify-content: flex-end; }

/* ── Annual Goal Card ─────────────────────────────────────────────────────── */
.annual-goal-card {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(99,102,241,.04) 100%);
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: var(--radius-lg, 14px);
  padding: 1.4rem 1.5rem;
  margin-bottom: .75rem;
  position: relative;
  overflow: hidden;
}
.annual-goal-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 180px;
  background: radial-gradient(circle at 100% 0%, rgba(99,102,241,.08) 0%, transparent 70%);
  pointer-events: none;
}
.agc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.agc-header-info { display: flex; align-items: center; gap: .75rem; }
.agc-crown { font-size: 2rem; line-height: 1; }
.agc-title { font-size: 1.25rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.agc-subtitle { font-size: .82rem; color: var(--text-muted); margin-top: .15rem; }
.agc-days-badge {
  background: rgba(99,102,241,.12);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Progress bar */
.agc-progress-wrap { margin-bottom: 1.25rem; }
.agc-progress-track {
  position: relative;
  height: 14px;
  background: var(--bg-secondary);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.agc-progress-actual {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  border-radius: 7px;
  transition: width .6s ease;
  min-width: 2px;
}
.agc-progress-proj {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: rgba(99,102,241,.22);
  border-radius: 7px;
  transition: width .6s ease;
}
.agc-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.agc-progress-pct { font-size: .9rem; font-weight: 700; color: #818cf8; }

/* KPIs row */
.agc-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.agc-kpi { text-align: center; }
.agc-kpi-val {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.agc-kpi-lbl {
  font-size: .73rem;
  color: var(--text-muted);
  margin-top: .2rem;
  white-space: nowrap;
}
.agc-kpi-sub { font-size: .7rem; color: var(--text-muted); margin-top: .1rem; }
.agc-kpi-proj .agc-kpi-val { color: #818cf8; }
.agc-kpi-gap .agc-kpi-val { color: #f87171; }

/* Recommendations */
.agc-recs { display: flex; flex-direction: column; gap: .5rem; }
.agc-rec-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  border-radius: 8px;
  font-size: .83rem;
  line-height: 1.45;
}
.agc-rec-item.success { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); color: #16a34a; }
.agc-rec-item.warning { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2); color: #b45309; }
.agc-rec-item.urgent  { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: #dc2626; }
.agc-rec-item.tip     { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.15); color: var(--text); }
.agc-rec-item.neutral { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-muted); }
.agc-rec-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.agc-recs-loading { font-size: .82rem; color: var(--text-muted); padding: .5rem; }

/* Merged profit KPI */
.kpi-profit-combined { grid-column: span 2; }
.kpi-profit-split {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .35rem;
}
.kpi-profit-divider-v {
  width: 1px;
  height: 3rem;
  background: var(--border);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .agc-kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-profit-combined { grid-column: span 1; }
}

/* Annual Goal — collapse toggle */
.agc-toggle-btn {
  width: 28px; height: 28px;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50%;
  background: rgba(99,102,241,.08);
  color: #818cf8;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  transition: background .15s;
  flex-shrink: 0;
}
.agc-toggle-btn::after { content: '▲'; }
.agc-toggle-btn.collapsed::after { content: '▼'; }
.agc-toggle-btn:hover { background: rgba(99,102,241,.18); }

.agc-body {
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .3s ease;
  max-height: 600px;
  opacity: 1;
  margin-top: 0;
}
.agc-body.agc-collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* ── Info Tooltips System ─────────────────────────────────────────────────── */
.kpi-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(99,102,241,.08);
  color: #818cf8;
  font-size: .6rem;
  font-weight: 700;
  cursor: pointer;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.kpi-info-btn:hover {
  background: rgba(99,102,241,.22);
  border-color: #818cf8;
}

/* Overlay */
.info-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.info-modal-overlay.active {
  display: flex;
}

/* Modal box */
.info-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.6rem 1.2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  direction: rtl;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}

.info-modal-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1rem;
}
.info-modal-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.info-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.info-modal-subtitle {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.info-modal-body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.info-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .8rem;
}
.info-block-label {
  font-size: .68rem;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
.info-block-text {
  font-size: .82rem;
  color: var(--text);
  line-height: 1.5;
}

.info-modal-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.1rem;
}
.info-modal-ok {
  padding: .42rem 1.2rem;
  border-radius: 8px;
  border: none;
  background: rgba(99,102,241,.15);
  color: #818cf8;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.info-modal-ok:hover { background: rgba(99,102,241,.28); }

.info-modal-close {
  position: absolute;
  top: .8rem;
  left: .8rem;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.info-modal-close:hover { background: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — system prefers-color-scheme: dark
═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

  /* ── CSS Variable overrides ── */
  :root {
    color-scheme: dark;

    --primary:       #818cf8;
    --primary-rgb:   129, 140, 248;
    --primary-h:     #6366f1;
    --primary-light: #1e1b4b;
    --success:       #4ade80;
    --danger:        #f87171;
    --warning:       #fbbf24;

    --bg:            #0f172a;
    --bg-subtle:     #1e293b;
    --card:          #1e293b;
    --border:        #334155;
    --border-h:      #475569;

    --text:          #f1f5f9;
    --text-muted:    #94a3b8;
    --text-light:    #64748b;

    --shadow-sm:     0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow:        0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg:     0 20px 40px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);
    --shadow-card:   0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);

    --muted:         #94a3b8;
    --hover-bg:      #334155;
    --bg-secondary:  #152033;

    /* Status palette — dark */
    --s-new-bg:       #1e3a5f; --s-new-fg:       #93c5fd; --s-new-dot:       #3b82f6;
    --s-labels-bg:    #431407; --s-labels-fg:    #fb923c; --s-labels-dot:    #f97316;
    --s-waiting-bg:   #451a03; --s-waiting-fg:   #fbbf24; --s-waiting-dot:   #f59e0b;
    --s-picked-bg:    #2e1065; --s-picked-fg:    #c4b5fd; --s-picked-dot:    #8b5cf6;
    --s-dispatch-bg:  #1e1b4b; --s-dispatch-fg:  #a5b4fc; --s-dispatch-dot:  #6366f1;
    --s-delivered-bg: #052e16; --s-delivered-fg: #86efac; --s-delivered-dot: #22c55e;
    --s-cancel-bg:    #450a0a; --s-cancel-fg:    #fca5a5; --s-cancel-dot:    #ef4444;
    --s-follow-bg:    #1e293b; --s-follow-fg:    #94a3b8; --s-follow-dot:    #64748b;
    --s-selfpick-bg:  #064e3b; --s-selfpick-fg:  #6ee7b7; --s-selfpick-dot:  #10b981;
  }

  /* ── Header (already dark gradient — just keep it) ── */
  .header-bell-badge { border-color: #1e293b; }

  /* ── Bell dropdown ── */
  .bell-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  }
  .bell-dropdown::before { background: #1e293b; border-color: #334155; }
  .bell-dd-header { border-bottom-color: #334155; }
  .bell-dd-title  { color: #f1f5f9; }
  .bell-dd-close:hover { background: #334155; color: #94a3b8; }
  .bell-dd-item   { border-bottom-color: #334155; }
  .bell-dd-item:hover { background: #334155; }
  .bell-dd-item.is-new { background: #2d1f07; }
  .bell-dd-item.is-new:hover { background: #3d2a0a; }
  .bell-dd-item-title { color: #f1f5f9; }
  .bell-dd-item-desc  { color: #94a3b8; }
  .bell-dd-footer { background: #152033; border-top-color: #334155; }
  .bell-dd-more { background: #334155; color: #94a3b8; }
  .bell-dd-more:hover { background: #475569; }

  /* ── Order cards ── */
  .order-card { border-color: #334155; }
  .card-note {
    color: #fde68a;
    background: #1c1200;
    border-top-color: #78350f;
  }
  .card-bot { background: #152033; }

  /* ── Group separator rows ── */
  .group-separator.gs-active  td { background: #0d2647; color: #93c5fd; border-top-color: #1e3a5f; }
  .group-separator.gs-ready   td { background: #2c0d02; color: #fb923c; border-top-color: #431407; }
  .group-separator.gs-transit td { background: #1a0a40; color: #c4b5fd; border-top-color: #2e1065; }
  .group-separator.gs-history td { background: #1e293b; color: #64748b; border-top-color: #334155; }

  /* ── Cards group headers ── */
  .cards-group-header.gs-active  { color: #93c5fd; border-color: #1e3a5f; }
  .cards-group-header.gs-ready   { color: #fb923c; border-color: #431407; }
  .cards-group-header.gs-transit { color: #c4b5fd; border-color: #2e1065; }
  .cards-group-header.gs-history { color: #64748b; border-color: #334155; }

  /* ── Status filter bar (active btn) ── */
  .ogt-btn.active { background: #f1f5f9; color: #0f172a; }
  .ogt-btn.active::before { background: #0f172a !important; }

  /* ── WooCommerce badges ── */
  .wcs-pending    { background: #2c0d02; color: #fb923c; }
  .wcs-processing { background: #0d2647; color: #93c5fd; }
  .wcs-completed  { background: #052e16; color: #86efac; }
  .wcs-cancelled  { background: #450a0a; color: #fca5a5; }
  .wcs-onhold     { background: #451a03; color: #fbbf24; }

  /* ── Table alternating rows ── */
  .orders-table tbody tr:nth-child(even):not(.group-separator) { background: rgba(51,65,85,.35); }

  /* ── Detail modal rows ── */
  .detail-row { border-bottom-color: #334155; }
  .detail-value.note {
    background: #1c1200;
    border-color: #78350f;
    color: #fde68a;
  }

  /* ── Product picker dropdown ── */
  .oip-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
  }
  .order-items-table thead th { background: #152033; }

  /* ── Delete icon button ── */
  .btn-icon-del:hover { background: #450a0a; }

  /* ── Sync status bar states ── */
  .sync-status-bar.syncing { background: #451a03; border-color: #78350f; color: #fbbf24; }
  .sync-status-bar.error   { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }

  /* ── Sync menu trigger hover ── */
  .sync-menu-trigger:hover,
  .sync-menu-trigger.open { background: #1e1b4b; }

  /* ── Stock badges ── */
  .stock-in  { background: #052e16; color: #86efac; }
  .stock-low { background: #451a03; color: #fbbf24; }
  .stock-out { background: #450a0a; color: #fca5a5; }

  /* ── ABC badges ── */
  .abc-A { background: #1e1b4b; color: #a5b4fc; }
  .abc-B { background: #451a03; color: #fbbf24; }
  .abc-C { background: #1e293b; color: #94a3b8; }

  /* ── Customer badges ── */
  .cust-returning { background: #1e1b4b; color: #a5b4fc; }
  .cust-new       { background: #052e16; color: #86efac; }

  /* ── Peak badge ── */
  .peak-badge { background: #431407; color: #fb923c; border-color: #78350f; }

  /* ── Months progress bar ── */
  .months-bar-wrap { background: #334155; }

  /* ── Reorder summary badges ── */
  .rsumm-critical { background: #450a0a; color: #fca5a5; }
  .rsumm-warning  { background: #451a03; color: #fbbf24; }
  .rsumm-soon     { background: #3d3200; color: #facc15; }
  .rsumm-ok       { background: #052e16; color: #86efac; }

  /* ── Expense frequency badges ── */
  .freq-monthly  { background: #0d2647; color: #93c5fd; }
  .freq-annual   { background: #451a03; color: #fbbf24; }
  .freq-variable { background: #3b0764; color: #e879f9; }

  /* ── Support board AI paused banner ── */
  .sp-ai-paused-banner { background: #451a03; border-color: #d97706; color: #fbbf24; }

  /* ── Support card foot ── */
  .sp-card-foot { background: rgba(255,255,255,.03); }
  .sp-card-reopen-bar { background: rgba(255,255,255,.03); }
  .sp-card-archive-bar { background: rgba(255,255,255,.025); }
  .sp-card-archive-btn {
    border-color: #334155;
    color: #64748b;
  }
  .sp-card-archive-btn:hover {
    border-color: #475569;
    color: #94a3b8;
    background: rgba(100,116,139,.1);
  }
  .sp-card-reply { background: rgba(255,255,255,.03); }
  .sp-card-msg-txt {
    background: rgba(255,255,255,.04);
    border-right-color: #475569;
  }

  /* ── Info modal block label ── */
  .info-block-label { color: #a5b4fc; }
  .info-modal-ok {
    background: rgba(129,140,248,.15);
    color: #a5b4fc;
  }
  .info-modal-ok:hover { background: rgba(129,140,248,.28); }
  .info-modal-overlay {
    background: rgba(0,0,0,.7);
  }
  .info-modal {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
  }

  /* ── KPI cards ── */
  .kpi-card { border-color: #334155; }

  /* ── Annual goal card ── */
  .agc-card { background: #1e293b; border-color: #334155; }

  /* ── Flatpickr calendar ── */
  .flatpickr-calendar {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.5) !important;
    color: #f1f5f9 !important;
  }
  .flatpickr-day { color: #f1f5f9 !important; }
  .flatpickr-day:hover { background: #334155 !important; }
  .flatpickr-day.selected { background: #818cf8 !important; border-color: #818cf8 !important; color: #fff !important; }
  .flatpickr-day.flatpickr-disabled,
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay { color: #475569 !important; }
  .flatpickr-months { background: #152033 !important; }
  .flatpickr-month { color: #f1f5f9 !important; }
  .flatpickr-weekday { color: #94a3b8 !important; background: #152033 !important; }
  .flatpickr-current-month select,
  .flatpickr-current-month .numInputWrapper input { color: #f1f5f9 !important; }
  .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #94a3b8 !important; }

  /* ── Modal ── */
  .modal { border-color: #334155; }

  /* ── Scrollbars (webkit) ── */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #64748b; }

  /* ── Native select dark background fix ── */
  select.form-control,
  select.select-filter,
  select.status-select { background-color: #1e293b; }

  /* ── Expenses ── */
  .exp-month-input { background: #1e293b; color: #f1f5f9; border-color: #334155; }
  .exp-badge-ship  { background: #451a03; color: #fbbf24; }

  /* ── Dashboard KPI cards ── */
  .kpi-card { border-color: #334155; }
  .import-section-title { background: #152033; }
  .import-items-total   { background: #152033; }

  /* ── AGC (annual goal card) recommendations ── */
  .agc-rec-item.success { color: #4ade80; }
  .agc-rec-item.warning { color: #fbbf24; }
  .agc-rec-item.urgent  { color: #f87171; }

  /* ── Pickup / modal headers with hardcoded #F8FAFC ── */
  .pickup-section-title,
  .order-items-section .order-items-table thead th { background: #152033; }

  /* ── Live dashboard cards ── */
  .live-kpi-card { border-color: #334155; }
  .live-feed-item { border-bottom-color: #334155; }

  /* ── Dashboard --ap-* variables (Apple-style design tokens) ── */
  #tab-dashboard {
    --ap-bg:      #0f172a;
    --ap-card:    #1e293b;
    --ap-label:   #94a3b8;
    --ap-num:     #f1f5f9;
    --ap-border:  rgba(255,255,255,.06);
    --ap-shadow:  0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --ap-blue:    #60a5fa;
    --ap-green:   #4ade80;
    --ap-red:     #f87171;
    --ap-orange:  #fbbf24;
    --ap-purple:  #c084fc;
  }
  #tab-dashboard .dash-card-title {
    border-bottom-color: rgba(255,255,255,.06);
  }
  #tab-dashboard .status-bar-row {
    border-bottom-color: rgba(255,255,255,.05);
  }
  #tab-dashboard .status-bar-num {
    background: rgba(96,165,250,.12);
  }

  /* ── Chart.js canvas — dark grid ── */
  canvas { color-scheme: dark; }
}

/* ── Connections tab ── */
.conn-status-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center;
  align-items: center;
  transition: box-shadow .2s;
}
.conn-icon { font-size: 1.6rem; line-height: 1; }
.conn-name { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.conn-dot  { font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.conn-status-card.cs-ok    { border-color: rgba(34,197,94,.4); }
.conn-status-card.cs-ok    .conn-dot { color: var(--success); }
.conn-status-card.cs-err   { border-color: rgba(239,68,68,.4); }
.conn-status-card.cs-err   .conn-dot { color: var(--danger); }
.conn-status-card.cs-warn  { border-color: rgba(251,191,36,.4); }
.conn-status-card.cs-warn  .conn-dot { color: var(--warning); }

/* ══════════════════════════════════════════════════════════════════
   html.dark  —  forced dark mode (overrides system light preference)
   html.theme-light  —  forced light mode (overrides system dark)
   ══════════════════════════════════════════════════════════════════ */

/* ── Forced dark: CSS variables ── */
html.dark {
  color-scheme: dark;

  --primary:       #818cf8;
  --primary-rgb:   129, 140, 248;
  --primary-h:     #6366f1;
  --primary-light: #1e1b4b;
  --success:       #4ade80;
  --danger:        #f87171;
  --warning:       #fbbf24;

  --bg:            #0f172a;
  --bg-subtle:     #1e293b;
  --card:          #1e293b;
  --border:        #334155;
  --border-h:      #475569;

  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;

  --shadow-sm:     0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow:        0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:     0 20px 40px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.4);
  --shadow-card:   0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);

  --muted:         #94a3b8;
  --hover-bg:      #334155;
  --bg-secondary:  #152033;

  --s-new-bg:       #1e3a5f; --s-new-fg:       #93c5fd; --s-new-dot:       #3b82f6;
  --s-labels-bg:    #431407; --s-labels-fg:    #fb923c; --s-labels-dot:    #f97316;
  --s-waiting-bg:   #451a03; --s-waiting-fg:   #fbbf24; --s-waiting-dot:   #f59e0b;
  --s-picked-bg:    #2e1065; --s-picked-fg:    #c4b5fd; --s-picked-dot:    #8b5cf6;
  --s-dispatch-bg:  #1e1b4b; --s-dispatch-fg:  #a5b4fc; --s-dispatch-dot:  #6366f1;
  --s-delivered-bg: #052e16; --s-delivered-fg: #86efac; --s-delivered-dot: #22c55e;
  --s-cancel-bg:    #450a0a; --s-cancel-fg:    #fca5a5; --s-cancel-dot:    #ef4444;
  --s-follow-bg:    #1e293b; --s-follow-fg:    #94a3b8; --s-follow-dot:    #64748b;
  --s-selfpick-bg:  #064e3b; --s-selfpick-fg:  #6ee7b7; --s-selfpick-dot:  #10b981;
}

/* ── Forced dark: element overrides (hardcoded colors) ── */
html.dark .header-bell-badge { border-color: #1e293b; }
html.dark .bell-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); }
html.dark .bell-dropdown::before { background: #1e293b; border-color: #334155; }
html.dark .bell-dd-header { border-bottom-color: #334155; }
html.dark .bell-dd-title  { color: #f1f5f9; }
html.dark .bell-dd-close:hover { background: #334155; color: #94a3b8; }
html.dark .bell-dd-item   { border-bottom-color: #334155; }
html.dark .bell-dd-item:hover { background: #334155; }
html.dark .bell-dd-item.is-new { background: #2d1f07; }
html.dark .bell-dd-item.is-new:hover { background: #3d2a0a; }
html.dark .bell-dd-item-title { color: #f1f5f9; }
html.dark .bell-dd-item-desc  { color: #94a3b8; }
html.dark .bell-dd-footer { background: #152033; border-top-color: #334155; }
html.dark .bell-dd-more { background: #334155; color: #94a3b8; }
html.dark .bell-dd-more:hover { background: #475569; }
html.dark .order-card { border-color: #334155; }
html.dark .card-note { color: #fde68a; background: #1c1200; border-top-color: #78350f; }
html.dark .card-bot { background: #152033; }
html.dark .group-separator.gs-active  td { background: #0d2647; color: #93c5fd; border-top-color: #1e3a5f; }
html.dark .group-separator.gs-ready   td { background: #2c0d02; color: #fb923c; border-top-color: #431407; }
html.dark .group-separator.gs-transit td { background: #1a0a40; color: #c4b5fd; border-top-color: #2e1065; }
html.dark .group-separator.gs-history td { background: #1e293b; color: #64748b; border-top-color: #334155; }
html.dark .cards-group-header.gs-active  { color: #93c5fd; border-color: #1e3a5f; }
html.dark .cards-group-header.gs-ready   { color: #fb923c; border-color: #431407; }
html.dark .cards-group-header.gs-transit { color: #c4b5fd; border-color: #2e1065; }
html.dark .cards-group-header.gs-history { color: #64748b; border-color: #334155; }
html.dark .ogt-btn.active { background: #f1f5f9; color: #0f172a; }
html.dark .ogt-btn.active::before { background: #0f172a !important; }
html.dark .wcs-pending    { background: #2c0d02; color: #fb923c; }
html.dark .wcs-processing { background: #0d2647; color: #93c5fd; }
html.dark .wcs-completed  { background: #052e16; color: #86efac; }
html.dark .wcs-cancelled  { background: #450a0a; color: #fca5a5; }
html.dark .wcs-onhold     { background: #451a03; color: #fbbf24; }
html.dark .orders-table tbody tr:nth-child(even):not(.group-separator) { background: rgba(51,65,85,.35); }
html.dark .detail-row { border-bottom-color: #334155; }
html.dark .detail-value.note { background: #1c1200; border-color: #78350f; color: #fde68a; }
html.dark .oip-dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
html.dark .order-items-table thead th { background: #152033; }
html.dark .btn-icon-del:hover { background: #450a0a; }
html.dark .sync-status-bar.syncing { background: #451a03; border-color: #78350f; color: #fbbf24; }
html.dark .sync-status-bar.error   { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
html.dark .sync-menu-trigger:hover,
html.dark .sync-menu-trigger.open  { background: #1e1b4b; }
html.dark .stock-in  { background: #052e16; color: #86efac; }
html.dark .stock-low { background: #451a03; color: #fbbf24; }
html.dark .stock-out { background: #450a0a; color: #fca5a5; }
html.dark .abc-A { background: #1e1b4b; color: #a5b4fc; }
html.dark .abc-B { background: #451a03; color: #fbbf24; }
html.dark .abc-C { background: #1e293b; color: #94a3b8; }
html.dark .cust-returning { background: #1e1b4b; color: #a5b4fc; }
html.dark .cust-new       { background: #052e16; color: #86efac; }
html.dark .peak-badge { background: #431407; color: #fb923c; border-color: #78350f; }
html.dark .months-bar-wrap { background: #334155; }
html.dark .rsumm-critical { background: #450a0a; color: #fca5a5; }
html.dark .rsumm-warning  { background: #451a03; color: #fbbf24; }
html.dark .rsumm-soon     { background: #3d3200; color: #facc15; }
html.dark .rsumm-ok       { background: #052e16; color: #86efac; }
html.dark .freq-monthly  { background: #0d2647; color: #93c5fd; }
html.dark .freq-annual   { background: #451a03; color: #fbbf24; }
html.dark .freq-variable { background: #3b0764; color: #e879f9; }
html.dark .sp-ai-paused-banner { background: #451a03; border-color: #d97706; color: #fbbf24; }
html.dark .sp-card-foot { background: rgba(255,255,255,.03); }
html.dark .sp-card-reopen-bar { background: rgba(255,255,255,.03); }
html.dark .sp-card-archive-bar { background: rgba(255,255,255,.025); }
html.dark .sp-card-archive-btn { border-color: #334155; color: #64748b; }
html.dark .sp-card-archive-btn:hover { border-color: #475569; color: #94a3b8; background: rgba(100,116,139,.1); }
html.dark .sp-card-reply { background: rgba(255,255,255,.03); }
html.dark .sp-card-msg-txt { background: rgba(255,255,255,.04); border-right-color: #475569; }
html.dark .info-block-label { color: #a5b4fc; }
html.dark .info-modal-ok { background: rgba(129,140,248,.15); color: #a5b4fc; }
html.dark .info-modal-ok:hover { background: rgba(129,140,248,.28); }
html.dark .info-modal-overlay { background: rgba(0,0,0,.7); }
html.dark .info-modal { background: #1e293b; border-color: #334155; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
html.dark .kpi-card { border-color: #334155; }
html.dark .import-section-title { background: #152033; }
html.dark .import-items-total   { background: #152033; }
html.dark .agc-rec-item.success { color: #4ade80; }
html.dark .agc-rec-item.warning { color: #fbbf24; }
html.dark .agc-rec-item.urgent  { color: #f87171; }
html.dark .pickup-section-title,
html.dark .order-items-section .order-items-table thead th { background: #152033; }
html.dark .live-kpi-card { border-color: #334155; }
html.dark .live-feed-item { border-bottom-color: #334155; }
html.dark #tab-dashboard {
  --ap-bg:      #0f172a;
  --ap-card:    #1e293b;
  --ap-label:   #94a3b8;
  --ap-num:     #f1f5f9;
  --ap-border:  rgba(255,255,255,.06);
  --ap-shadow:  0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --ap-blue:    #60a5fa;
  --ap-green:   #4ade80;
  --ap-red:     #f87171;
  --ap-orange:  #fbbf24;
  --ap-purple:  #c084fc;
}
html.dark #tab-dashboard .dash-card-title { border-bottom-color: rgba(255,255,255,.06); }
html.dark #tab-dashboard .status-bar-row  { border-bottom-color: rgba(255,255,255,.05); }
html.dark #tab-dashboard .status-bar-num  { background: rgba(96,165,250,.12); }
html.dark .flatpickr-calendar  { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important; }
html.dark .flatpickr-day       { color: #f1f5f9 !important; }
html.dark .flatpickr-day:hover { background: #334155 !important; }
html.dark .flatpickr-day.selected { background: #818cf8 !important; border-color: #818cf8 !important; color: #fff !important; }
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay { color: #475569 !important; }
html.dark .flatpickr-months  { background: #152033 !important; }
html.dark .flatpickr-month   { color: #f1f5f9 !important; }
html.dark .flatpickr-weekday { color: #94a3b8 !important; background: #152033 !important; }
html.dark .flatpickr-current-month select,
html.dark .flatpickr-current-month .numInputWrapper input { color: #f1f5f9 !important; }
html.dark .flatpickr-prev-month svg, html.dark .flatpickr-next-month svg { fill: #94a3b8 !important; }
html.dark .modal { border-color: #334155; }
html.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
html.dark select.form-control,
html.dark select.select-filter,
html.dark select.status-select { background-color: #1e293b; }
html.dark .exp-month-input { background: #1e293b; color: #f1f5f9; border-color: #334155; }
html.dark .exp-badge-ship  { background: #451a03; color: #fbbf24; }
html.dark .exp-badge-recur { background: rgba(70,127,247,.15); color: #93c5fd; }
html.dark .kpi-card.kpi-exp-recur .kpi-val { color: #93c5fd; }
html.dark .kpi-card.kpi-exp-recur { border-right-color: #93c5fd; }
html.dark .exp-cat-hdr { background: linear-gradient(90deg, rgba(70,127,247,.08) 0%, transparent 100%); }
html.dark .exp-card-eff { background: rgba(239,68,68,.1); }
html.dark canvas { color-scheme: dark; }

/* ── Forced light: CSS variables (overrides system dark preference) ── */
html.theme-light {
  color-scheme: light !important;
  --primary:       #4F46E5 !important;
  --primary-rgb:   79, 70, 229 !important;
  --primary-h:     #4338CA !important;
  --primary-light: #EEF2FF !important;
  --success:       #10b981 !important;
  --danger:        #ef4444 !important;
  --warning:       #f59e0b !important;
  --bg:            #F8FAFC !important;
  --bg-subtle:     #F1F5F9 !important;
  --card:          #FFFFFF !important;
  --border:        #E2E8F0 !important;
  --border-h:      #CBD5E1 !important;
  --text:          #0F172A !important;
  --text-muted:    #64748B !important;
  --text-light:    #94A3B8 !important;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05) !important;
  --shadow:        0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04) !important;
  --shadow-lg:     0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06) !important;
  --shadow-card:   0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04) !important;
  --muted:         #94A3B8 !important;
  --hover-bg:      #F1F5F9 !important;
  --bg-secondary:  #F8FAFC !important;
  --s-new-bg:       #EFF6FF; --s-new-fg:       #1d4ed8; --s-new-dot:       #2563eb;
  --s-labels-bg:    #FFF7ED; --s-labels-fg:    #C2410C; --s-labels-dot:    #ea580c;
  --s-waiting-bg:   #FFFBEB; --s-waiting-fg:   #B45309; --s-waiting-dot:   #d97706;
  --s-picked-bg:    #F5F3FF; --s-picked-fg:    #6D28D9; --s-picked-dot:    #7c3aed;
  --s-dispatch-bg:  #EEF2FF; --s-dispatch-fg:  #3730A3; --s-dispatch-dot:  #4338ca;
  --s-delivered-bg: #F0FDF4; --s-delivered-fg: #15803D; --s-delivered-dot: #16a34a;
  --s-cancel-bg:    #FEF2F2; --s-cancel-fg:    #B91C1C; --s-cancel-dot:    #dc2626;
  --s-follow-bg:    #F8FAFC; --s-follow-fg:    #475569; --s-follow-dot:    #64748b;
  --s-selfpick-bg:  #ECFDF5; --s-selfpick-fg:  #065F46; --s-selfpick-dot:  #059669;
}
/* Reset hardcoded dark elements when forced light */
html.theme-light .bell-dropdown { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-lg); }
html.theme-light .bell-dropdown::before { background: var(--card); border-color: var(--border); }
html.theme-light .bell-dd-header { border-bottom-color: var(--border); }
html.theme-light .bell-dd-item   { border-bottom-color: var(--border); }
html.theme-light .bell-dd-item:hover { background: var(--hover-bg); }
html.theme-light .bell-dd-item.is-new { background: #fffbeb; }
html.theme-light .bell-dd-footer { background: var(--bg); border-top-color: var(--border); }
html.theme-light .bell-dd-more { background: var(--bg); color: var(--text-muted); }
html.theme-light .card-note { color: #92400e; background: #fffbeb; border-top-color: #fde68a; }
html.theme-light .card-bot  { background: var(--bg-secondary); }
html.theme-light .order-items-table thead th { background: var(--bg-secondary); }
html.theme-light select.form-control,
html.theme-light select.select-filter,
html.theme-light select.status-select { background-color: #fff; }

/* ── Pickup card — WhatsApp message log ── */
.pu-wa-log {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.pu-wa-log-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.pu-wa-log-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: .4rem;
  align-items: baseline;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
}
.pu-wa-log-item:last-child { border-bottom: none; }
.pu-wa-log-time {
  color: var(--text-muted);
  font-size: .72rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.pu-wa-log-preview {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
}
.pu-wa-log-status {
  font-size: .8rem;
  flex-shrink: 0;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV + TOOLS DRAWER — dark mode overrides
   Applied via html.dark class OR @media (prefers-color-scheme: dark)
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  @media (max-width: 900px) {
    .bottom-nav {
      background: #1e293b;
      border-top-color: #334155;
      box-shadow: 0 -2px 20px rgba(0,0,0,.4);
    }
    .bnav-btn { color: #64748b; }
    .bnav-badge { border-color: #1e293b; }
    .bnav-btn[data-tab="orders"]    { --bnav-bg: #1e1b4b; }
    .bnav-btn[data-tab="dashboard"] { --bnav-bg: #2e1065; }
    .bnav-btn[data-tab="pickup"]    { --bnav-bg: #064e3b; }
    .bnav-btn#moreNavBtn            { --bnav-bg: #451a03; }
    .tools-drawer { background: #1e293b; box-shadow: 0 -8px 40px rgba(0,0,0,.5); }
    .tools-drawer-handle { background: #475569; }
    .tools-drawer-header { color: #f1f5f9; border-bottom-color: #334155; }
    .more-nav-item { background: #152033; border-color: #334155; }
    .more-nav-item:active { background: #1e1b4b; border-color: #818cf8; box-shadow: 0 2px 8px rgba(99,102,241,.3); }
    .more-nav-lbl { color: #94a3b8; }
    .tools-drawer-section { color: #64748b; }
    .drawer-item { background: #152033; border-color: #334155; color: #e2e8f0; }
    .drawer-item:active { background: #1e1b4b; border-color: #818cf8; }
  }
}

html.dark .bottom-nav {
  background: #1e293b;
  border-top-color: #334155;
  box-shadow: 0 -2px 20px rgba(0,0,0,.4);
}
html.dark .bnav-btn { color: #64748b; }
html.dark .bnav-badge { border-color: #1e293b; }
html.dark .bnav-btn[data-tab="orders"]    { --bnav-bg: #1e1b4b; }
html.dark .bnav-btn[data-tab="dashboard"] { --bnav-bg: #2e1065; }
html.dark .bnav-btn[data-tab="pickup"]    { --bnav-bg: #064e3b; }
html.dark .bnav-btn#moreNavBtn            { --bnav-bg: #451a03; }
html.dark .tools-drawer {
  background: #1e293b;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
html.dark .tools-drawer-handle { background: #475569; }
html.dark .tools-drawer-header { color: #f1f5f9; border-bottom-color: #334155; }
html.dark .more-nav-item { background: #152033; border-color: #334155; }
html.dark .more-nav-item:active { background: #1e1b4b; border-color: #818cf8; box-shadow: 0 2px 8px rgba(99,102,241,.3); }
html.dark .more-nav-lbl { color: #94a3b8; }
html.dark .tools-drawer-section { color: #64748b; }
html.dark .drawer-item { background: #152033; border-color: #334155; color: #e2e8f0; }
html.dark .drawer-item:active { background: #1e1b4b; border-color: #818cf8; }

/* ── AI Rules Screen ─────────────────────────────────────────────────────── */
.ai-rules-page { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.ai-rules-header { margin-bottom: 1.5rem; }
.ai-rules-header h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .3rem; }
.ai-rules-subtitle { font-size: .9rem; color: var(--text-muted); margin: 0; }
.ai-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.ai-rules-loading { grid-column: 1/-1; text-align: center; padding: 3rem; color: var(--text-muted); font-size: 1rem; }

.air-card { background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.air-card-full { grid-column: 1 / -1; }
.air-card-head { background: var(--header-bg, #f8fafc); padding: .75rem 1rem; font-weight: 700; font-size: .95rem; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.air-card-body { padding: .9rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.air-note { padding: .6rem 1rem; font-size: .78rem; color: var(--text-muted); background: var(--note-bg, #f8fafc); border-top: 1px solid var(--border-color, #e2e8f0); }

.air-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; font-size: .87rem; }
.air-lbl { color: var(--text-muted); font-size: .82rem; white-space: nowrap; }

.air-badge { display: inline-block; padding: .15rem .55rem; border-radius: 20px; font-size: .82rem; font-weight: 700; }
.air-badge-green { background: #dcfce7; color: #16a34a; }

.air-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.air-chip { background: #e0e7ff; color: #3730a3; border-radius: 20px; padding: .15rem .6rem; font-size: .78rem; }
.air-chip-warn { background: #fef3c7; color: #92400e; }

.air-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.air-table th { text-align: right; font-weight: 600; padding: .35rem .5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); }
.air-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.air-table tr:last-child td { border-bottom: none; }

.air-rules-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; padding: .9rem 1rem; }
.air-rule-item { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem; background: var(--note-bg, #f8fafc); border-radius: 10px; }
.air-rule-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.air-rule-title { font-weight: 700; font-size: .88rem; margin-bottom: .15rem; }
.air-rule-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

html.dark .air-card { background: #1e2a3a; border-color: #2d3e52; }
html.dark .air-card-head { background: #172030; border-color: #2d3e52; }
html.dark .air-note { background: #172030; border-color: #2d3e52; }
html.dark .air-chip { background: #1e1b4b; color: #a5b4fc; }
html.dark .air-chip-warn { background: #451a03; color: #fbbf24; }
html.dark .air-table th, html.dark .air-table td { border-color: #2d3e52; }
html.dark .air-rule-item { background: #172030; }
.air-badge-warn { background: #fef3c7; color: #92400e; }
.air-src-link { font-size: .76rem; color: #6366f1; word-break: break-all; display: block; margin-top: .2rem; }
html.dark .air-src-link { color: #a5b4fc; }

/* ── AI auto-reply toggles card ── */
.air-toggles-card .air-toggles-list { display: flex; flex-direction: column; padding: .5rem 0; }
.air-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.air-toggle-row:last-child { border-bottom: none; }
.air-toggle-info { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.air-toggle-title { font-weight: 600; font-size: .9rem; color: var(--text-primary, #1e293b); }
.air-toggle-desc  { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
html.dark .air-toggle-title { color: #e2e8f0; }
.wa-field-hint { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }

/* ════ Tickets Screen ════════════════════════════════════════════════════════ */
.tk-kpi { display:flex; flex-direction:column; align-items:center; gap:.2rem; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:.75rem; padding:.6rem 1rem; font-size:.8rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:box-shadow .15s; }
.tk-kpi:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.tk-kpi span { font-size:1.4rem; font-weight:700; color:var(--text-primary,#1e293b); }
.tk-kpi-open    { border-color:#fca5a5; }
.tk-kpi-handled { border-color:#fcd34d; }
.tk-kpi-closed  { border-color:#86efac; }

.tk-card { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:1rem; padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.tk-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.75rem; flex-wrap:wrap; }
.tk-number { font-weight:700; font-size:.95rem; color:#6366f1; }
.tk-type-badge { background:#ede9fe; color:#5b21b6; font-size:.78rem; font-weight:600; padding:.15rem .55rem; border-radius:999px; }
.tk-badge { font-size:.75rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; }
.tk-badge-open    { background:#fee2e2; color:#b91c1c; }
.tk-badge-handled { background:#fef3c7; color:#92400e; }
.tk-badge-closed  { background:#dcfce7; color:#15803d; }
.tk-returning { background:#dbeafe; color:#1e40af; font-size:.75rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; }

.tk-customer-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.5rem; flex-wrap:wrap; }
.tk-name  { font-weight:600; font-size:.9rem; }
.tk-phone { font-size:.85rem; color:var(--text-muted); }
.tk-wa-btn { font-size:.75rem !important; padding:.2rem .6rem !important; }

.tk-message { background:#f8fafc; border-right:3px solid #6366f1; padding:.5rem .75rem; border-radius:.4rem; font-size:.87rem; color:#334155; margin-bottom:.75rem; }

.tk-snapshot { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem; }
.tk-section-title { font-size:.78rem; font-weight:700; color:var(--text-muted); margin-top:.5rem; text-transform:uppercase; letter-spacing:.04em; }
.tk-row { display:flex; gap:.75rem; align-items:baseline; flex-wrap:wrap; font-size:.82rem; padding:.2rem 0; border-bottom:1px solid var(--border-color,#f1f5f9); }
.tk-row:last-child { border-bottom:none; }
.tk-lbl { font-weight:600; color:#475569; }
.tk-price { font-weight:700; color:#16a34a; }
.tk-pdf-link { font-size:.75rem; color:#6366f1; text-decoration:none; }
.tk-pdf-link:hover { text-decoration:underline; }
.tk-wa-send-btn { font-size:.72rem !important; padding:.15rem .5rem !important; }
.tk-ai-summary { background:#f0fdf4; border-right:3px solid #22c55e; padding:.5rem .75rem; border-radius:.4rem; font-size:.83rem; color:#166534; margin-bottom:.6rem; line-height:1.5; }
html.dark .tk-ai-summary { background:#0f2818; border-right-color:#4ade80; color:#86efac; }
.tk-prev-row { background:#f8fafc; border-radius:.4rem; padding:.3rem .5rem; }
.tk-no-customer { background:#fef9c3; color:#92400e; font-size:.82rem; padding:.4rem .7rem; border-radius:.4rem; border:1px solid #fde68a; }

.tk-notes-row { display:flex; gap:.5rem; align-items:flex-start; margin-top:.5rem; }
.tk-notes-input { flex:1; resize:vertical; min-height:2.5rem; font-size:.83rem; border:1px solid var(--border-color,#e2e8f0); border-radius:.5rem; padding:.4rem .6rem; background:var(--card-bg,#fff); color:var(--text-primary,#1e293b); }

.tk-status-sel { font-size:.78rem; border:1px solid var(--border-color,#e2e8f0); border-radius:.4rem; padding:.15rem .4rem; background:var(--card-bg,#fff); cursor:pointer; }

html.dark .tk-card { background:#1e2a3a; border-color:#2d3e52; }
html.dark .tk-message { background:#172030; border-right-color:#818cf8; color:#cbd5e1; }
html.dark .tk-prev-row, html.dark .tk-no-customer { background:#172030; }
html.dark .tk-notes-input { background:#172030; border-color:#2d3e52; color:#e2e8f0; }
html.dark .tk-status-sel { background:#172030; border-color:#2d3e52; color:#e2e8f0; }

/* ══════════════════════════════════════════════════════════════
   TICKETS v2 — redesigned card layout
   ══════════════════════════════════════════════════════════════ */

/* KPI total chip */
.tk-kpi-total { border-color:#a5b4fc; }

/* ── Card ── */
.tk-card { background:var(--card-bg,#fff); border:1px solid var(--border-color,#e2e8f0); border-radius:1rem; padding:0; margin-bottom:1rem; box-shadow:0 2px 8px rgba(0,0,0,.05); overflow:hidden; }

/* ── Top bar ── */
.tk-topbar { display:flex; justify-content:space-between; align-items:center; padding:.65rem 1rem; background:#f8fafc; border-bottom:1px solid var(--border-color,#e2e8f0); gap:.5rem; flex-wrap:wrap; }
.tk-topbar-left  { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tk-topbar-right { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

.tk-num { font-weight:700; font-size:.92rem; color:#6366f1; letter-spacing:.01em; }
.tk-type-tag { background:#ede9fe; color:#5b21b6; font-size:.75rem; font-weight:600; padding:.15rem .55rem; border-radius:999px; }
.tk-returning-tag { background:#dbeafe; color:#1e40af; font-size:.73rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; cursor:default; }
.tk-date { font-size:.78rem; color:var(--text-muted,#64748b); }

/* Status pill */
.tk-status-pill { font-size:.75rem; font-weight:700; padding:.2rem .65rem; border-radius:999px; }
.tk-status-open    { background:#fee2e2; color:#b91c1c; }
.tk-status-handled { background:#fef3c7; color:#92400e; }
.tk-status-closed  { background:#dcfce7; color:#15803d; }

/* ── Customer bar ── */
.tk-customer-bar { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--border-color,#f1f5f9); gap:.5rem; flex-wrap:wrap; }
.tk-customer-info    { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.tk-customer-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.tk-cust-name  { font-weight:600; font-size:.9rem; color:var(--text-primary,#1e293b); }
.tk-cust-phone { font-size:.84rem; color:var(--text-muted,#64748b); direction:ltr; }

/* ── Action button ── */
.tk-action-btn { font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:.45rem; border:1px solid #c7d2fe; background:#eef2ff; color:#4338ca; cursor:pointer; transition:background .15s,transform .1s; white-space:nowrap; }
.tk-action-btn:hover { background:#e0e7ff; transform:translateY(-1px); }

/* ── Message ── */
.tk-msg { padding:.6rem 1rem; font-size:.87rem; color:#334155; border-bottom:1px solid var(--border-color,#f1f5f9); line-height:1.55; background:#fafbfc; }

/* ── AI summary box ── */
.tk-ai-box { margin:.5rem 1rem; padding:.55rem .8rem; background:#f0fdf4; border-right:3px solid #22c55e; border-radius:.45rem; font-size:.83rem; color:#166534; line-height:1.5; }

/* ── Collapsible snapshot ── */
.tk-details { border-top:1px solid var(--border-color,#e8edf3); }
.tk-details-sum { list-style:none; display:flex; align-items:center; gap:.45rem; padding:.5rem 1rem; font-size:.82rem; font-weight:600; color:var(--text-muted,#64748b); cursor:pointer; user-select:none; background:#fafbfc; }
.tk-details-sum::-webkit-details-marker { display:none; }
.tk-details[open] .tk-details-sum { background:#f1f5f9; }
.tk-detail-chip { background:#e2e8f0; color:#475569; font-size:.72rem; padding:.1rem .45rem; border-radius:999px; font-weight:600; }
.tk-details-body { padding:.6rem 1rem .8rem; display:flex; flex-direction:column; gap:.4rem; }

/* ── Section inside snapshot ── */
.tk-sec-title { font-size:.75rem; font-weight:700; color:var(--text-muted,#64748b); text-transform:uppercase; letter-spacing:.05em; margin-top:.3rem; }
.tk-sec-list  { display:flex; flex-direction:column; gap:.2rem; }
.tk-sec-row   { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; font-size:.81rem; padding:.25rem .4rem; border-radius:.35rem; background:#f8fafc; border:1px solid #f1f5f9; }
.tk-order-num      { font-weight:700; color:#6366f1; }
.tk-order-status   { font-size:.77rem; background:#e0e7ff; color:#3730a3; padding:.1rem .4rem; border-radius:999px; white-space:nowrap; }
.tk-order-date     { font-size:.76rem; color:var(--text-muted,#94a3b8); }
.tk-order-products { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#475569; font-size:.8rem; }
.tk-order-price    { font-weight:700; color:#16a34a; white-space:nowrap; }
.tk-inv-actions    { display:flex; gap:.35rem; align-items:center; margin-right:auto; }
.tk-link-btn  { font-size:.74rem; color:#6366f1; text-decoration:none; padding:.1rem .4rem; border:1px solid #c7d2fe; border-radius:.3rem; }
.tk-link-btn:hover { background:#eef2ff; }
.tk-wa-inv-btn { font-size:.74rem; padding:.1rem .45rem; border-radius:.3rem; border:1px solid #a7f3d0; background:#d1fae5; color:#065f46; cursor:pointer; transition:background .15s; }
.tk-wa-inv-btn:hover { background:#a7f3d0; }

/* ── Previous ticket row ── */
.tk-status-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; flex-shrink:0; }
.tk-prev-item  { background:#f8fafc; }

/* ── No orders / inactive ── */
.tk-no-orders { font-size:.82rem; color:#92400e; background:#fef9c3; border:1px solid #fde68a; border-radius:.4rem; padding:.35rem .65rem; }

/* ── Bottom action bar ── */
.tk-bottom-bar { display:flex; gap:.6rem; align-items:flex-start; padding:.7rem 1rem; border-top:1px solid var(--border-color,#e8edf3); background:#f8fafc; flex-wrap:wrap; }
.tk-notes { flex:1; min-width:160px; resize:vertical; min-height:2.4rem; max-height:6rem; font-size:.82rem; border:1px solid var(--border-color,#e2e8f0); border-radius:.5rem; padding:.35rem .6rem; background:var(--card-bg,#fff); color:var(--text-primary,#1e293b); font-family:inherit; line-height:1.4; }
.tk-bottom-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tk-status-select { font-size:.8rem; border:1px solid var(--border-color,#e2e8f0); border-radius:.4rem; padding:.28rem .5rem; background:var(--card-bg,#fff); color:var(--text-primary,#1e293b); cursor:pointer; }

/* ── State messages ── */
.tk-loading, .tk-empty, .tk-error { text-align:center; padding:2.5rem 1rem; color:var(--text-muted,#64748b); font-size:.9rem; }
.tk-error { color:#dc2626; }

/* ══ Dark mode ══ */
html.dark .tk-card    { background:#1e2a3a; border-color:#2d3e52; }
html.dark .tk-topbar  { background:#162030; border-bottom-color:#2d3e52; }
html.dark .tk-customer-bar { border-bottom-color:#2d3e52; }
html.dark .tk-msg     { background:#172030; color:#cbd5e1; border-bottom-color:#2d3e52; }
html.dark .tk-ai-box  { background:#0f2818; border-right-color:#4ade80; color:#86efac; }
html.dark .tk-details { border-top-color:#2d3e52; }
html.dark .tk-details-sum { background:#162030; color:#94a3b8; }
html.dark .tk-details[open] .tk-details-sum { background:#1a2840; }
html.dark .tk-detail-chip { background:#2d3e52; color:#94a3b8; }
html.dark .tk-details-body { background:#1e2a3a; }
html.dark .tk-sec-row { background:#172030; border-color:#2d3e52; }
html.dark .tk-order-products { color:#94a3b8; }
html.dark .tk-no-orders { background:#2d2010; border-color:#78350f; color:#fbbf24; }
html.dark .tk-bottom-bar { background:#162030; border-top-color:#2d3e52; }
html.dark .tk-notes   { background:#172030; border-color:#2d3e52; color:#e2e8f0; }
html.dark .tk-status-select { background:#172030; border-color:#2d3e52; color:#e2e8f0; }
html.dark .tk-action-btn { background:#1e2a5a; border-color:#4338ca; color:#a5b4fc; }
html.dark .tk-action-btn:hover { background:#1e2a6a; }

/* ══ Ticket edit button ══ */
.tk-edit-btn { background:none; border:none; cursor:pointer; font-size:.95rem; padding:.1rem .3rem; border-radius:4px; opacity:.6; transition:opacity .15s; }
.tk-edit-btn:hover { opacity:1; background:rgba(99,102,241,.1); }

/* ══ Tickets view toggle ══ */
.tk-view-active { background:#6366f1 !important; color:#fff !important; border-color:#6366f1 !important; }

/* ══ Waitlist groups ══ */
.tk-wl-group { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; padding:1.1rem 1.25rem; margin-bottom:1rem; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.tk-wl-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.tk-wl-title { display:flex; align-items:center; gap:.75rem; }
.tk-wl-product { font-weight:700; font-size:1rem; }
.tk-wl-count { background:#ede9fe; color:#7c3aed; border-radius:20px; padding:.15rem .65rem; font-size:.8rem; font-weight:600; }
.tk-wl-notify-btn { background:#6366f1; color:#fff; border:none; border-radius:8px; padding:.4rem .9rem; font-size:.82rem; cursor:pointer; font-weight:600; }
.tk-wl-notify-btn:hover { background:#4f46e5; }
.tk-wl-entries { display:flex; flex-direction:column; gap:.4rem; }
.tk-wl-entry { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.4rem .6rem; background:#f8fafc; border-radius:.5rem; font-size:.82rem; }
.tk-wl-ticket { background:#fef9c3; color:#854d0e; border-radius:4px; padding:.1rem .4rem; font-weight:600; font-size:.75rem; }
.tk-wl-date { color:#94a3b8; margin-right:auto; }

html.dark .tk-wl-group { background:#1e2a3a; border-color:#2d3e52; }
html.dark .tk-wl-entry { background:#172030; }
html.dark .tk-wl-count { background:#2d2060; color:#a5b4fc; }

/* ═══════════════════════════════════════════════
   APP SIDEBAR — desktop & tablet (≥ 901px)
═══════════════════════════════════════════════ */

/* Hidden by default (mobile first) */
.app-sidebar { display: none; }

@media (min-width: 901px) {

  /* ── Show sidebar, hide old desktop chrome ── */
  .app-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 62px;
    right: 0;
    bottom: 0;
    width: 224px;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -2px 0 16px rgba(15,23,42,.07);
    z-index: 89;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding: 0 0 1.5rem;
    transition: width .28s cubic-bezier(.4,0,.2,1);
  }

  .app-sidebar::-webkit-scrollbar { width: 4px; }
  .app-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Collapsed: icon-strip only */
  .app-sidebar.sb-collapsed {
    width: 56px;
  }

  /* ── Collapse toggle button ── */
  .sb-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: -14px;
    z-index: 91;
    transition: background .15s, color .15s, transform .28s;
    box-shadow: 0 1px 6px rgba(15,23,42,.12);
    padding: 0;
    flex-shrink: 0;
  }

  .sb-toggle:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

  .sb-toggle-ico {
    width: 14px;
    height: 14px;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }

  /* Rotates arrow when collapsed */
  .app-sidebar.sb-collapsed .sb-toggle-ico {
    transform: rotate(180deg);
  }

  /* ── Group / category ── */
  .sb-group {
    display: flex;
    flex-direction: column;
    padding: .4rem .6rem .1rem;
    border-bottom: 1px solid var(--border);
  }

  .sb-group:last-of-type { border-bottom: none; }

  .sb-group-lbl {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: .55rem .55rem .25rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity .2s;
  }

  .app-sidebar.sb-collapsed .sb-group-lbl { opacity: 0; height: 0; padding: 0; }

  /* ── Nav items ── */
  .sbnav-item,
  .sbnav-action {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem .7rem;
    border-radius: 10px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    transition: background .14s, color .14s, transform .1s;
    position: relative;
    width: 100%;
    margin-bottom: 1px;
  }

  .sbnav-item:hover,
  .sbnav-action:hover {
    background: rgba(var(--primary-rgb),.08);
    color: var(--primary);
  }

  .sbnav-item.active {
    background: rgba(var(--primary-rgb),.13);
    color: var(--primary);
    font-weight: 700;
  }

  /* Active indicator bar on the left (visual-left = RTL end) */
  .sbnav-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 2px;
    background: var(--primary);
  }

  .sbnav-action {
    font-size: .81rem;
    color: var(--text-muted);
    background: none;
  }

  .sbnav-action:hover {
    background: rgba(var(--primary-rgb),.07);
    color: var(--primary);
  }

  .sbnav-ico {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
  }

  .sbnav-lbl {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s, max-width .25s;
  }

  /* Collapsed: hide labels */
  .app-sidebar.sb-collapsed .sbnav-lbl { opacity: 0; max-width: 0; overflow: hidden; }
  .app-sidebar.sb-collapsed .sbnav-item,
  .app-sidebar.sb-collapsed .sbnav-action {
    justify-content: center;
    gap: 0;
    padding: .55rem;
  }
  .app-sidebar.sb-collapsed .sbnav-item.active::before { display: none; }
  .app-sidebar.sb-collapsed .sb-group { padding: .4rem .3rem .1rem; }

  /* ── Badge on sidebar items ── */
  .sb-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    margin-right: auto;
    flex-shrink: 0;
  }

  /* ── Sync footer ── */
  .sb-sync-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .85rem .5rem;
    border-top: 1px solid var(--border);
    font-size: .72rem;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
  }

  .sb-sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: sbSyncPulse 2.5s infinite;
  }

  @keyframes sbSyncPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }

  .sb-sync-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s;
  }

  .app-sidebar.sb-collapsed .sb-sync-foot { justify-content: center; padding: .65rem .3rem; }
  .app-sidebar.sb-collapsed .sb-sync-txt { opacity: 0; max-width: 0; overflow: hidden; }

  /* ── Push main content away from sidebar ── */
  .main {
    margin-right: 224px;
    margin-left: 0;
    max-width: min(1500px, calc(100% - 224px));
  }

  body.sb-collapsed .main {
    margin-right: 56px;
    max-width: min(1500px, calc(100% - 56px));
  }

  /* ── Hide old desktop chrome on this breakpoint ── */
  .tabs-nav        { display: none !important; }
  .sync-menu-wrap  { display: none !important; }
  .sync-status-bar { display: none !important; }

}

/* Dark mode sidebar */
html.dark .app-sidebar {
  background: #0f172a;
  border-left-color: #1e293b;
  box-shadow: -2px 0 20px rgba(0,0,0,.35);
}
html.dark .sb-toggle { background: #1e293b; border-color: #334155; }
html.dark .sbnav-item.active { background: rgba(99,102,241,.2); }
html.dark .sb-group { border-bottom-color: #1e293b; }
html.dark .sb-sync-foot { border-top-color: #1e293b; }

/* ── User tabs permission grid ─────────────────────────────────────────────── */
.u-tabs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem .6rem;
}
.u-tabs-grid label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  cursor: pointer;
  padding: .3rem .4rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background .15s;
}
.u-tabs-grid label:hover { background: var(--bg-card); border-color: var(--border); }
.u-tabs-grid input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

/* ── Reconciliation period tabs & KPI cards ─────────────────────────────── */
.recon-period-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-hover, #F1F5F9);
  border-radius: 8px;
  padding: 3px;
}
.recon-period-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.recon-period-btn.active {
  background: var(--bg-card, #fff);
  color: var(--primary, #467FF7);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.recon-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .5rem 0 .75rem;
}
.recon-kpi {
  background: var(--bg-hover, #F8FAFC);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px;
  padding: .55rem .9rem;
  min-width: 130px;
  flex: 1;
}
.recon-kpi-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main, #1E293B);
  white-space: nowrap;
}
.recon-kpi-lbl {
  font-size: .7rem;
  color: var(--text-muted, #94A3B8);
  margin-top: 2px;
}