/* ============================================
   Giooby Dashboard — TailAdmin-inspired Theme
   Sidebar: #3C8ACC | Body: #EBEBEB
   ============================================ */

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  background: #E8F0FA;
  color: #1a1a2e;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: #3C8ACC; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* === CSS Variables === */
:root {
  /* Primary */
  --primary: #0364B1;
  --primary-dark: #024f8e;
  --primary-light: #e8f2fb;
  --primary-50: #f0f7ff;

  /* Sidebar */
  --sidebar-bg: #0870c2;
  --sidebar-width: 150px;
  --sidebar-collapsed: 52px;
  --sidebar-text: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.7);
  --sidebar-active-bg: #024f8e;
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.15);
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Body */
  --body-bg: #E8F0FA;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --card-radius: 7px;

  /* Topbar */
  --topbar-bg: #ffffff;
  --topbar-height: 52px;
  --topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Text */
  --text-primary: #1a1a2e;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-placeholder: #a0aec0;

  /* Borders */
  --border-color: #cbd5e1;
  --border-light: #f1f5f9;

  /* Status */
  --success: #22c55e;
  --success-bg: #dcfce7;
  --success-text: #166534;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --warning-text: #92400e;
  --danger: #ef4444;
  --danger-bg: #fee2e2;
  --danger-text: #991b1b;
  --info: #3C8ACC;
  --info-bg: #e8f2fb;
  --info-text: #1e5a8a;

  /* Transitions */
  --transition: 0.2s ease;
}

/* === Typography === */
h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
h4 { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--text-secondary); }
.text-primary { color: var(--primary); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* === Quick Filter Pills === */
.quick-filter.active {
  background: #d0e4f7;
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}
.quick-filter.active .qf-count {
  color: inherit;
  opacity: 0.8;
}

/* === Layout: App Shell === */
.app { display: flex; min-height: 100vh; }

/* === Sidebar === */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  z-index: 50;
  transition: width var(--transition);
  overflow: visible;
}
.sidebar.collapsed { width: var(--sidebar-collapsed); }

/* Sidebar Logo */
.sidebar-logo {
  height: var(--topbar-height);
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
/* Location pill block — sibling to sidebar-logo, sits between logo and nav */
.sidebar-location-block {
  padding: 6px 6px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.sidebar-location-block > .location-picker {
  margin-top: 0;
}
.sidebar-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-logo .logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.sidebar-location {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary);
  text-align: right;
  width: 100%;
  margin-top: -16px;
  line-height: 1;
}
.collapsed .logo-text { display: none; }
.sidebar-logo .logo-full,
.sidebar-logo .logo-mark {
  height: 29px;
  width: auto;
  margin: 0 auto;
  display: block;
}
.sidebar-logo .logo-mark { display: none; }
.collapsed .sidebar-logo .logo-full { display: none !important; }
.collapsed .sidebar-logo .logo-mark { display: block !important; }

/* Sidebar Location Picker */
.location-picker {
  position: relative;
  width: calc(100% + 6px);
  margin-top: 1px;
  margin-right: -6px;
  cursor: pointer;
  user-select: none;
}
.location-picker__selected {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #E8F0FA;
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 18px 6px;
  transition: all 0.2s ease;
}
.location-picker__selected:hover {
  background: #d6e6f7;
  border-color: rgba(59, 130, 246, 0.3);
}
.location-picker.open .location-picker__selected {
  background: #d6e6f7;
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.location-picker__pin { flex-shrink: 0; color: #3b82f6; width: 12px; height: 12px; }
.location-picker__label {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e3a5f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.location-picker.open .location-picker__chevron { transform: rotate(180deg); }

/* Dropdown menu */
.location-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  min-width: 100%;
  padding-right: 20px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.16), 0 8px 16px -6px rgba(0, 0, 0, 0.08);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
}
.location-picker.open .location-picker__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Option items */
.location-picker__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.location-picker__option + .location-picker__option { margin-top: 2px; }
.location-picker__option:hover { background: #f1f5f9; }
.location-picker__option.active { background: #eff6ff; }
.location-picker__opt-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 8px;
  color: #94a3b8;
}
.location-picker__option.active .location-picker__opt-icon { background: #dbeafe; color: #3b82f6; }
.location-picker__option:hover .location-picker__opt-icon { background: #cbd5e1; }
.location-picker__opt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.location-picker__opt-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}
.location-picker__opt-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 400;
}
.location-picker__check {
  flex-shrink: 0;
  color: #3b82f6;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.location-picker__option.active .location-picker__check { opacity: 1; }

/* Collapsed sidebar */
.collapsed .location-picker__selected { padding: 18px 6px; justify-content: center; }
.collapsed .location-picker__label,
.collapsed .location-picker__chevron { display: none; }
.collapsed .location-picker__menu { left: 100%; top: 0; right: auto; width: max-content; margin-left: 6px; }

/* Sidebar Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.nav-section { margin-bottom: 20px; width: 100%; }
.nav-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-muted);
  padding: 0 12px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.collapsed .nav-section-title { visibility: hidden; height: 0; margin: 0; padding: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--sidebar-text);
  font-size: 0.9375rem;
  font-weight: 400;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.nav-item:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
  text-decoration: none;
}
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 500;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #fbbf24;
  border-radius: 0 3px 3px 0;
}
.nav-item .nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.nav-item .nav-label { white-space: nowrap; }
.collapsed .nav-label { display: none; }
.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.collapsed .nav-item .nav-icon { margin: 0; }
.collapsed .nav-item.active::before { display: none; }
/* Nav notification dot — right-side marker indicating new activity */
.nav-item .nav-dot {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #fbbf24;
  border-radius: 50%;
}
.collapsed .nav-dot { right: 4px; }

/* Sidebar Bottom Nav (Settings) */
.sidebar-bottom-nav {
  padding: 8px 12px;
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  margin-top: auto;
}
.collapsed .sidebar-bottom-nav .nav-item { justify-content: center; padding: 10px 0; }

/* Sidebar Bottom Row (Minimize) */
.sidebar-bottom-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sidebar-collapse-icon {
  background: none;
  border: none;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.sidebar-collapse-icon:hover { color: var(--sidebar-text); background: var(--sidebar-hover-bg); }
.sidebar-collapse-icon svg { transition: transform 0.2s ease; }
.collapsed .sidebar-collapse-icon svg { transform: rotate(180deg); }
.collapsed .sidebar-bottom-row { justify-content: center; }
.collapsed .sidebar-collapse-icon { padding: 8px; }

/* Sidebar Toggle Button */
.sidebar-collapse-btn {
  position: absolute;
  bottom: 70px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: var(--sidebar-bg);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 51;
  transition: transform 0.2s ease, background 0.2s ease;
  color: #fff;
}
.sidebar-collapse-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.sidebar-collapse-btn svg { transition: transform 0.2s ease; }
.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

/* Sidebar User */
.sidebar-user .user-name { font-weight: 600; font-size: 13px; color: #fff; }
.collapsed .user-info { display: none; }

/* === Main Content === */
.main {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
}
.sidebar.collapsed ~ .main { margin-left: var(--sidebar-collapsed); }

/* === Topbar === */
.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  flex-shrink: 0;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  padding: 0 24px 0 8px;
  gap: 8px;
  box-shadow: var(--topbar-shadow);
}
.sidebar.collapsed ~ .main .topbar { padding-left: 0; }
.topbar-toggle {
  background: var(--primary);
  border: none;
  color: #ffffff;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-toggle:hover { background: var(--primary-dark); }
.topbar-toggle svg { transition: transform 0.2s ease; }
.sidebar.collapsed ~ .main .topbar-toggle svg { transform: rotate(180deg); }

.topbar-search {
  flex: 1;
  max-width: 400px;
  margin-left: 4px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1px solid #e3e1c5;
  border-radius: 4px;
  background: #f7f6e8;
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: border-color var(--transition);
}
/* Sidebar collapse icon, when relocated into the topbar */
.topbar > .sidebar-collapse-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: #E8F0FA;
  border: 1px solid #c5d9ed;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.topbar > .sidebar-collapse-icon svg { width: 20px; height: 20px; }
.topbar > .sidebar-collapse-icon:hover {
  color: var(--primary);
  background: #d6e6f7;
}
.sidebar.collapsed ~ .main .topbar > .sidebar-collapse-icon svg { transform: rotate(180deg); }

/* Brand cell (logo) at the start of the topbar */
.topbar > .topbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: var(--sidebar-width);
  padding: 0;
  flex-shrink: 0;
}
.topbar > .topbar-brand img.logo-full { width: calc(var(--sidebar-width) * 0.81); height: auto; max-height: 32px; display: block; transform: translateX(-10px); }
.topbar > .topbar-brand img.logo-mark { width: auto; height: 28px; max-width: calc(var(--sidebar-collapsed) - 12px); display: none; transform: none; }
.sidebar.collapsed ~ .main .topbar > .topbar-brand { width: var(--sidebar-collapsed); }
.sidebar.collapsed ~ .main .topbar > .topbar-brand img.logo-full { display: none; }
.sidebar.collapsed ~ .main .topbar > .topbar-brand img.logo-mark { display: block; }

/* Location picker, when relocated into the topbar */
.topbar > .location-picker {
  width: auto;
  flex-shrink: 0;
  margin: 0 0 0 auto;
}
.topbar > .location-picker .location-picker__selected {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
}
.topbar > .location-picker .location-picker__selected:hover {
  background: var(--border-light, #f1f5f9);
  border: none;
}
.topbar-search input::placeholder { color: var(--text-placeholder); }
.topbar-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(60,138,204,0.1); }
.topbar-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar-btn {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 1.15rem;
  position: relative;
  transition: background var(--transition);
}
.topbar-btn:hover { background: var(--border-light); }
.topbar-btn .notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--topbar-bg);
}

.topbar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: default;
  transition: background var(--transition);
}
.topbar-user:hover { background: transparent; }
.topbar-user .avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}
.topbar-user .avatar-sm:hover { background: var(--primary-dark, #2563b3); }
.topbar-user > div > .flex { flex-direction: row-reverse; }
.topbar-user .user-info-sm { text-align: right; }
.topbar-user .user-name-sm { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.topbar-user .user-role-sm {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e3a5f;
  cursor: pointer;
  user-select: none;
}
.topbar-user .user-role-sm:hover { color: var(--primary); }
.topbar-user .user-role-sm__pin { color: #3b82f6; }
/* Location picker, when relocated into the user pill */
.topbar-user .location-picker {
  position: absolute;
  top: 100%;
  right: 8px;
  width: auto;
  margin: 0;
  pointer-events: none;
}
.topbar-user .location-picker__selected { display: none; }
.topbar-user .location-picker.open .location-picker__menu {
  pointer-events: auto;
  right: 0;
  left: auto;
  width: 240px;
}

/* === Content Area === */
.content { flex: 1; padding: 6px 24px 24px; max-width: 1280px; }
.dashboard-grid-3 > .card,
.dashboard-grid-equal > .card,
.dashboard-grid > .card { min-width: 0; overflow: hidden; }

/* === Page Header === */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 12px;
}
.page-header .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.page-header .breadcrumb a { color: var(--text-secondary); }
.page-header .breadcrumb a:hover { color: var(--primary); }
.page-header .breadcrumb .sep { color: var(--text-muted); }
.page-header-actions { display: flex; gap: 8px; }
.page-subtitle { margin-top: 4px; }
.export-icon { height: 42px; }

/* === Cards === */
.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 20px; }
.card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* === KPI Cards (global standard — matches Dashboard) === */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.kpi-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  padding: 14px 16px;
}
.kpi-card .kpi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.kpi-card .kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-card .kpi-icon svg { width: 22px; height: 22px; }
.kpi-card .kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.kpi-card .kpi-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.kpi-label--title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.kpi-subtitle {
  margin-top: 4px;
  color: var(--text-secondary);
}
.kpi-card .kpi-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-primary);
}
.kpi-card .kpi-trend {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.kpi-card .kpi-trend.up { color: var(--success-text); background: var(--success-bg); }
.kpi-card .kpi-trend.down { color: var(--danger-text); background: var(--danger-bg); }
.kpi-card .kpi-trend.neutral { color: var(--text-secondary); background: #f1f5f9; }
.kpi-value--danger { color: var(--danger); }
.kpi-value--warning { color: var(--warning); }
.kpi-value-suffix {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* === Legacy stat-card aliases (use kpi-* for new pages) === */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.stat-card { background: var(--card-bg); border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: 1px solid var(--border-color); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.stat-icon { width: 42px; height: 42px; border-radius: var(--radius-lg, 10px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 22px; height: 22px; }

/* Shared color variants for KPI icons (admin-parity palette) */
.kpi-icon.blue,   .stat-icon.blue   { background: var(--color-primary-bg, #DBEAFE);  color: var(--color-primary, #3B82F6); }
.kpi-icon.green,  .stat-icon.green  { background: var(--color-success-light, #D1FAE5); color: var(--color-success, #22C55E); }
.kpi-icon.cyan,   .stat-icon.cyan   { background: var(--color-accent-light, #CFFAFE);  color: var(--color-accent, #06B6D4); }
.kpi-icon.yellow, .stat-icon.yellow { background: #FEF3C7; color: var(--color-warning, #F59E0B); }
.kpi-icon.red,    .stat-icon.red    { background: #FEE2E2; color: #DC2626; }
.kpi-icon.purple, .stat-icon.purple { background: #F3E8FF; color: #7C3AED; }
.stat-content { flex: 1; }
.stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.stat-change { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; margin-top: 6px; padding: 2px 6px; border-radius: 4px; }
.stat-change.up { color: var(--success-text); background: var(--success-bg); }
.stat-change.down { color: var(--danger-text); background: var(--danger-bg); }

/* === Filter Bar (global — search + pills + selectors above tables) === */
.filter-bar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: #d7e2f1;
}
.filter-bar__search {
  flex: 0 0 auto;
  width: 350px;
  min-width: 180px;
}
.filter-bar__search-input {
  padding: 10px 12px;
  width: 100%;
  font-size: 0.8125rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: var(--text-primary);
  background: #fff;
}
.filter-bar__search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(60,138,204,0.12);
}
.filter-bar__search--with-btn {
  position: relative;
}
.filter-bar__search--with-btn .filter-bar__search-input {
  padding-right: 40px;
}
.filter-bar__search-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.filter-bar__right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* === Filter Pills (global — product type + status selectors) === */
.pricing-pill-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pricing-pill {
  padding: 5px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pricing-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pricing-pill--active {
  background: #d0e4f7;
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

/* === Topbar Store Link Pill === */
.store-link-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  margin-right: 8px;
}
/* Show store-link pill only on Dashboard and Storefront-related pages */
body[data-page="dashboard"] .store-link-pill,
body[data-page="storefront"] .store-link-pill { display: flex; }

.store-link-pill__url {
  font-size: 0.75rem;
  color: #0364B1;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.store-link-pill__copy {
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #475569;
  white-space: nowrap;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--border-light); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #16a34a; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--border-light); color: var(--text-primary); }
.btn-sm { padding: 5px 12px; font-size: 0.8125rem; border-radius: 6px; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-icon.sm { width: 30px; height: 30px; }

/* === Tables === */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2a60ac;
  background: #e0e7f2;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}
.th-flex {
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-add-btn,
.add-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.th-add-btn:hover,
.add-row-btn:hover { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.th-add-btn:hover svg,
.add-row-btn:hover svg { stroke: var(--primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--primary-50); }
.table-wrap::after {
  content: '';
  display: block;
  height: 24px;
}

/* === Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.08);
}
.badge-success { background: var(--success-bg); color: var(--success-text); border-color: #bbf7d0; }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); border-color: #fde68a; }
.badge-danger { background: var(--danger-bg); color: var(--danger-text); border-color: #fecaca; }
.badge-info { background: var(--info-bg); color: var(--info-text); border-color: #bfdbfe; }
.badge-neutral { background: #f1f5f9; color: #475569; border-color: #d0d5dd; }
.badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.badge-success.badge-dot::before { background: var(--success); }
.badge-warning.badge-dot::before { background: var(--warning); }
.badge-danger.badge-dot::before { background: var(--danger); }
.badge-info.badge-dot::before { background: var(--info); }

/* === Product Type Badge Variants === */
.badge--natural-slab {
  background: #c8def5; color: #0a4a8a;
  display: inline-flex; align-items: center; gap: 5px;
}
.badge--service {
  background: #c8e6c9; color: #2e7d32;
  display: inline-flex; align-items: center; gap: 5px;
}

/* === Forms === */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e8d98a;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: #fef9e7;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--text-placeholder); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(60, 138, 204, 0.12);
}
.form-control:disabled, .form-control[readonly] {
  background: #f1f5f9; border-color: var(--border-color); cursor: not-allowed;
}
.form-control.error { border-color: var(--danger); background: #fef2f2; }
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2364748b' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
textarea.form-control { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Checkbox / Toggle */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* === Tabs === */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #cbd5e1;
  margin-bottom: 20px;
}
.tab {
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* === Pagination === */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination .page-btn {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.pagination .page-btn:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .page-btn.disabled { opacity: 0.4; pointer-events: none; }

/* === Modal === */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card-bg);
  border-radius: 4px;
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-body { padding: 24px; }

/* Compact inline modal variant */
.modal-box {
  background: var(--card-bg);
  border-radius: 4px;
  width: 90%;
  max-width: 480px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal-box h3 { margin: 0 0 12px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* === Toast === */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  animation: toast-in 0.3s ease;
  min-width: 300px;
}
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }
.toast-warning { background: var(--warning); color: #fff; }
.toast-info { background: var(--primary); color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === Dropdown === */
.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 60;
  padding: 4px;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  border-radius: 6px;
  transition: background var(--transition);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dropdown-item:hover { background: var(--border-light); text-decoration: none; }
.dropdown-divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.dropdown-menu--notifications { min-width: 280px; padding: 0; }
.dropdown-menu--notifications .dropdown-item { display: block; padding: 10px 14px; border-radius: 0; border-bottom: 1px solid var(--border-light); white-space: normal; }
.dropdown-menu--notifications .dropdown-item:last-of-type { border-bottom: none; }
.dropdown-header { padding: 10px 14px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-light); }
.dropdown-footer { padding: 10px 14px; text-align: center; border-top: 1px solid var(--border-light); }
.dropdown-footer a { font-size: 0.8125rem; color: var(--color-primary, #0870c2); }
.topbar-notifications { display: inline-block; }

/* Notifications header row */
.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 10px 14px;
}
.notifications-mark-read {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-primary, #0870c2);
  text-transform: none;
  letter-spacing: 0;
}
.notifications-mark-read:hover { color: var(--primary); }

/* Category tabs inside notification dropdown */
.notifications-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  scrollbar-width: none;
}
.notifications-tabs::-webkit-scrollbar { display: none; }
.notifications-tab {
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.notifications-tab:hover { color: var(--text-primary); }
.notifications-tab.active {
  color: var(--color-primary, #0870c2);
  border-bottom-color: var(--color-primary, #0870c2);
}
.notifications-tab-count {
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  min-width: 16px;
  text-align: center;
}
.notifications-tab.active .notifications-tab-count {
  background: var(--color-primary, #0870c2);
  color: #fff;
}

/* Notification list + items */
.notifications-list {
  max-height: 360px;
  overflow-y: auto;
}
.notification-item {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
}
.notification-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  background: #f1f5f9;
}
.notification-icon--warning { background: #fef3c7; color: #b45309; }
.notification-icon--info    { background: #dbeafe; color: #1d4ed8; }
.notification-icon--success { background: #dcfce7; color: #166534; }
.notification-body { flex: 1; min-width: 0; }
.notification-body strong { font-weight: 600; }

/* === Empty State === */

/* === Utility === */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.w-full { width: 100%; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hidden { display: none !important; }

/* === Responsive === */
@media (max-width: 1200px) {
  .stats-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main { margin-left: 0 !important; }
  .stats-grid, .kpi-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* === Login Page === */
.auth-page {
  display: flex;
  min-height: 100vh;
}
.auth-form-panel {
  flex: 0 0 440px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 24px 40px 48px;
  background: #E8F0FA;
}
.auth-form-inner { width: 100%; max-width: 420px; }
.auth-form-inner h1 { margin-bottom: 8px; }
.auth-form-inner .subtitle { color: var(--text-secondary); margin-bottom: 32px; }

/* Grid Pattern for Auth Panel */

/* Pin icon prefixed to the location text inside the user pill */
.user-role-sm__pin {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 2px;
  color: #3b82f6;
}

/* Shared on/off switch — reusable across pages */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.toggle-switch .toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch .toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::after { transform: translateX(16px); }

/* =====================================================================
   Shared Page Settings drawer + gear trigger
   Used on Catalog, Stock, Storefront, Promotions, Clients.
   ===================================================================== */
.page-settings-trigger {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cbd5e1; background: #fff; color: #64748b;
  border-radius: 4px; cursor: pointer; transition: all .12s;
}
.page-settings-trigger:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-50); }
.page-settings-trigger svg { width: 16px; height: 16px; }

.page-settings-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.3); z-index: 140;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.page-settings-overlay.open { opacity: 1; pointer-events: auto; }
.page-settings-drawer {
  position: fixed; top: var(--topbar-height); right: 0; bottom: 0; width: 480px; max-width: 100vw;
  background: #fff; border-left: 1px solid #cbd5e1; z-index: 141;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease;
  box-shadow: -8px 0 24px rgba(15,23,42,0.08);
}
.page-settings-drawer.open { transform: translateX(0); }
.page-settings-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid #cbd5e1;
}
.page-settings-drawer__head h3 { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.page-settings-drawer__head .ps-subtitle { font-size: 0.75rem; color: #64748b; margin-top: 3px; }
.page-settings-drawer__close {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cbd5e1; background: #fff; color: #64748b;
  border-radius: 4px; cursor: pointer; transition: all .12s;
}
.page-settings-drawer__close:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.ps-scope-notice { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 8px 12px; background: #eaf3fc; border: 1px solid #c9def0; color: #1e5a8a; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
.ps-scope-notice svg { width: 14px; height: 14px; flex: 0 0 14px; }
.page-settings-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 20px; }
.page-settings-drawer__foot {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-top: 1px solid #cbd5e1; background: #f8fafc;
}

.ps-section {
  margin-bottom: 16px; padding: 12px 14px 10px;
  background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px;
}
.ps-section:last-child { margin-bottom: 0; }
.ps-section__title {
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid #cbd5e1;
  font-size: 0.75rem; font-weight: 700; color: #334155;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ps-field { margin-bottom: 14px; }
.ps-field:last-child { margin-bottom: 0; }

/* Side-by-side field layout for row-oriented sections */
.ps-section--row { display: flex; flex-wrap: wrap; gap: 12px; }
.ps-section--row > .ps-section__title { flex: 1 0 100%; margin-bottom: 4px; }
.ps-section--row > .ps-field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* Nudge the "Default Product Type Selected" radio down a bit */
.ps-field:has(input[data-fid="defaultType"]) { margin-top: 30px; }
.ps-field__label { display: block; font-size: 0.8125rem; font-weight: 600; color: #0f172a; margin-bottom: 8px; }
.ps-field__help { font-size: 0.75rem; color: #64748b; margin-bottom: 6px; }
.ps-field__options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ps-check, .ps-radio {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 4px;
  font-size: 0.8125rem; color: #334155; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s;
}
.ps-check:hover, .ps-radio:hover { border-color: #bfdbfe; background: #f0f7ff; }
.ps-check input, .ps-radio input { accent-color: var(--primary); flex: 0 0 auto; }
.ps-check:has(input:checked),
.ps-radio:has(input:checked) { border-color: var(--primary); background: #eff6ff; color: #0f172a; font-weight: 500; }
.ps-toggle { display: inline-flex; align-items: center; gap: 8px; }

/* Compact inline layout: switch left, label right (project convention) */
.ps-field--toggle {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; margin-bottom: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed #cbd5e1;
}
.ps-field--toggle:last-child { border-bottom: 0; margin-bottom: 0; }
.ps-field--toggle .ps-field__label { margin-bottom: 0; flex: 0 1 auto; order: 2; }
.ps-field--toggle .ps-toggle { flex: 0 0 auto; order: 1; }

/* Shared footer credit (bottom-right of page content) */
.powered-by {
  text-align: right;
  padding: 20px 0 8px;
  font-size: 10px;
  color: #b0b0b0;
}
.powered-by a { color: #b0b0b0; text-decoration: none; }

/* === Utilities for inline-style elimination === */
.list-row-sm { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.list-row-sm-text { padding: 8px; border-bottom: 1px solid #f1f5f9; font-size: 0.8125rem; }
.relative { position: relative; }
.relative-clip { position: relative; overflow: hidden; }
.obj-cover { object-fit: cover; }
.fill-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-70 { opacity: 0.7; }
.mt-1 { margin-top: 4px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mt-px-2 { margin-top: 2px; }
.full-width { width: 100%; }
.flex-row-gap-2 { display: flex; align-items: center; gap: 8px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.hidden { display: none !important; }
.p-0 { padding: 0; }
.checkbox-primary { accent-color: var(--primary); width: 16px; height: 16px; }
.sf-card-img-content { width: 100%; height: 180px; object-fit: cover; border-radius: 4px 4px 0 0; display: block; }
.pl-59 { padding-left: 59px; }
.pl-60 { padding-left: 60px; }
.subdomain-input-group { display: flex; align-items: center; gap: 0; }
.card-body--flush { padding: 0; }

/* === Catalog page — extracted from inline styles === */
.cat-min-w-110 { min-width: 110px; }
.cat-w-50 { width: 50px; }
.text-slate { color: #64748b; }
.italic { font-style: italic; }
.fs-13-medium-muted { font-size: 0.75rem; color: #94a3b8; font-weight: 500; }
.fs-13-bold { font-size: 0.875rem; font-weight: 600; }
.fs-13-medium { font-size: 0.875rem; font-weight: 500; }
.fs-bold-1rem { font-weight: 600; font-size: 1rem; }
.fs-link-tone { font-size: 0.8125rem; color: var(--primary); font-weight: 500; }
.fs-13-muted-mt { font-size: 0.8125rem; color: #64748b; margin-top: 2px; }
.cat-grid-row { display: grid; grid-template-columns: 1fr 100px 80px 28px; gap: 6px; align-items: center; }
/* Manage Price Tiers — real table */
.tier-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}
.tier-table thead th { padding: 10px 12px; }
.tier-table tbody td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; background: #fff; }
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table th:nth-child(2),
.tier-table th:nth-child(3),
.tier-table td:nth-child(2),
.tier-table td:nth-child(3) { text-align: center; }
.tier-table td:nth-child(2) .tier-type-toggle,
.tier-table td:nth-child(3) .subdomain-input-group { display: inline-flex; }
.tier-table .tier-name-input { width: 100%; }
.tier-table .tier-base-label { font-size: 0.625rem; color: #94a3b8; }
.tier-table .tier-clients { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Read-only / edit-mode toggle */
.tier-table .tier-actions { white-space: nowrap; text-align: right; }
.tier-table .tier-actions > * + * { margin-left: 6px; }
.tier-table .tier-save-btn { display: none; }
.tier-table tr.is-editing .tier-edit-btn { display: none; }
.tier-table tr.is-editing .tier-save-btn { display: inline-flex; }
.tier-table tr:not(.is-editing) .cat-pill-btn,
.tier-table tr:not(.is-editing) .cat-input-spinner {
  border: none;
  background: transparent;
  padding: 4px 0;
  pointer-events: none;
  font-weight: 500;
}
.tier-table tr:not(.is-editing) .subdomain-input-group { border: none; }
.tier-table tr:not(.is-editing) .cat-suffix-block {
  background: transparent;
  border: none;
  padding: 4px 2px;
  color: #64748b;
}
.tier-table tr:not(.is-editing) .tier-type-toggle { pointer-events: none; }
.tier-table tr:not(.is-editing) .tier-client-add { display: none; }
.tier-table tr:not(.is-editing) .cat-tag-chip .cat-link-btn { display: none; }
.cat-tags-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cbd5e1; }
.cat-link-btn { background: none; border: none; color: #0364B1; cursor: pointer; padding: 0; line-height: 1; font-size: 0.875rem; }
.cat-input-spinner { width: 44px; padding: 5px; border: 1px solid #cbd5e1; border-right: none; border-radius: 5px 0 0 5px; font-size: 0.8125rem; text-align: center; }
.cat-pill-btn { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.8125rem; font-weight: 500; }
.cat-suffix-block { padding: 5px 6px; background: #ececed; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.8125rem; color: #64748b; }
.cat-section-head { font-weight: 600; font-size: 0.8125rem; margin-bottom: 12px; }
.cat-tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; background: #e8f2fb; color: #0364B1; border-radius: 4px; font-size: 0.75rem; font-weight: 500; }
.cat-add-tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #64748b; cursor: pointer; }
.cat-input-group { display: flex; align-items: center; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.cat-icon-btn { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1.125rem; }
.cat-input-bare { padding: 5px 8px; border: none; font-size: 0.8125rem; font-weight: 500; width: 70px; }
.cat-input-prefix { padding: 5px 8px; background: #f8fafc; border-right: 1px solid #cbd5e1; font-size: 0.8125rem; color: #64748b; }
.cat-tier-chip { padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: #e8f2fb; color: #0364B1; min-width: 70px; }
.cat-summary-card { padding: 10px 14px; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; }
.cat-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid #cbd5e1; }
.cat-form-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 16px; margin-bottom: 16px; }
.bg-slate-50 { background: #f8fafc; }
.cat-thumb { width: 80px; height: 80px; border-radius: 6px; background: #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mb-5 { margin-bottom: 20px; }
/* catalog.html more */
.fs-13-muted-pad { font-size: 0.75rem; color: #94a3b8; padding: 0 4px; }
.fs-13-muted-italic { font-size: 0.75rem; color: #94a3b8; font-style: italic; }
.cat-popover-440 { display: none; width: 440px; }
.cat-popover-460 { display: none; width: 460px; }
.cat-tier-row { display: grid; grid-template-columns: 1fr 100px 100px; gap: 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.cat-tier-row--last { display: grid; grid-template-columns: 1fr 100px 100px; gap: 6px; align-items: center; padding: 10px 0; }
.cat-meta-grid { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 0.8125rem; }
.cat-thumb-empty { width: 80px; height: 80px; border-radius: 6px; border: 2px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cat-input-bare-100 { padding: 7px 10px; border: none; font-size: 0.875rem; font-weight: 500; width: 100px; }
.cat-input-prefix-lg { padding: 7px 10px; background: #f8fafc; border-right: 1px solid #cbd5e1; font-size: 0.875rem; color: #64748b; }
.cat-disabled-pill { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.8125rem; font-weight: 500; background: #ececed; color: #94a3b8; }
.cat-tier-chip-success { padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: #ecfdf5; color: #059669; min-width: 70px; }
.cat-btn-tiny { padding: 4px 8px; font-size: 0.75rem; }
.cat-summary-card-light { padding: 10px 14px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px; }
.cat-modal-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid #cbd5e1; }
.fs-13-bold-only { font-weight: 600; font-size: 0.8125rem; }
.fs-text-secondary-mb { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 16px; }
.fs-13-muted-only { font-size: 0.8125rem; color: #64748b; }
.fs-13-slate-line { font-size: 0.8125rem; color: #475569; margin: 0; line-height: 1.5; }
.fs-13-success-medium { font-size: 0.8125rem; color: #059669; font-weight: 500; }
.cat-th-row { display: grid; grid-template-columns: 1fr 100px 80px 28px; gap: 6px; padding: 0 0 6px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.cat-th-row-3 { display: grid; grid-template-columns: 1fr 100px 100px; gap: 6px; padding-bottom: 8px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.flex-row-wrap-gap { display: flex; gap: 8px; flex-wrap: wrap; }
.flex-col-gap-3 { display: flex; flex-direction: column; gap: 12px; }
.flex-between-mb { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cat-add-row-btn { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 0.8125rem; color: var(--primary); font-weight: 500; width: 100%; justify-content: center; }
.flex-row-gap-4 { display: flex; align-items: center; gap: 16px; }
.subdomain-input-hidden { display: flex; align-items: center; gap: 0; visibility: hidden; }
.flex-between-row { display: flex; justify-content: space-between; align-items: center; }
.flex-between-start { display: flex; align-items: flex-start; justify-content: space-between; }
.flex-row-mt-18 { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.cat-menu-item-btn { display: block; width: 100%; text-align: left; padding: 6px 10px; background: none; border: none; border-radius: 5px; font-size: 0.8125rem; cursor: pointer; color: #334155; }
.text-red { color: #dc2626; }
.text-green-medium { color: #16a34a; font-weight: 500; }
.cat-info-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 16px; }

/* === Promotion pages — extracted from inline styles === */
.badge-tiny { padding: 3px 10px; font-size: 0.75rem; }
.icon-mid { vertical-align: middle; margin-right: 6px; }
.progress-track { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.fw-600-primary { font-weight: 600; color: var(--text-primary); }
.flex-between-sm { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 4px; }
.flex-center-gap-6 { display: flex; gap: 6px; justify-content: center; }
.text-success-strong { color: #15803d; }
.text-secondary-only { color: var(--text-secondary); }
.col-w-100-center { width: 100px; text-align: center; }
.col-w-200-center { width: 200px; text-align: center; }
.mb-10 { margin-bottom: 10px; }
.flex-between-row { display: flex; align-items: center; justify-content: space-between; }
.text-muted-94 { color: #94a3b8; }
.badge-fecaca { border: 1px solid #fecaca; font-size: 0.75rem; }
.badge-bfdbfe { border: 1px solid #bfdbfe; font-size: 0.75rem; }
.col-w-140 { width: 140px; }
.col-w-200 { width: 200px; }
.col-w-130 { width: 130px; }
.cat-input-prefix-light { padding: 4px 6px; background: #ececed; border: 1px solid #cbd5e1; border-right: none; border-radius: 5px 0 0 5px; font-size: 0.8125rem; color: #64748b; }
.cat-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; cursor: pointer; }
.flex-row-gap-1 { display: flex; align-items: center; gap: 4px; }
.text-primary-only { color: var(--text-primary); }
.cat-input-num-60 { width: 60px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 0; font-size: 0.8125rem; }
.cat-input-num-48-disabled { width: 48px; padding: 4px 6px; border: 1px solid #cbd5e1; border-right: none; border-radius: 5px 0 0 5px; font-size: 0.8125rem; text-align: center; background: #f8fafc; color: #94a3b8; }
.cat-input-num-48-pad { width: 48px; padding: 3px 6px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.8125rem; text-align: center; margin: 0 4px; }
.col-w-160 { width: 160px; }
.cat-suffix-disabled { padding: 4px 6px; background: #f1f5f9; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.8125rem; color: #cbd5e1; }
.cat-suffix-tiny { padding: 4px 4px; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.75rem; color: var(--text-primary); }
.max-w-520 { max-width: 520px; }
.mt-14 { margin-top: 14px; }
.section-label-blue { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #2a60ac; margin-bottom: 10px; }
.col-w-80-center-pt { width: 80px; text-align: center; padding-top: 4px; }
.cat-input-num-60-disabled { width: 60px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 0; font-size: 0.8125rem; background: #f8fafc; color: #94a3b8; }
.col-w-55-mid { width: 55px; text-align: center; vertical-align: middle; }
.cat-input-num-55 { width: 55px; padding: 4px 6px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.8125rem; text-align: center; }
.cat-input-num-48 { width: 48px; padding: 4px 6px; border: 1px solid #cbd5e1; border-right: none; border-radius: 5px 0 0 5px; font-size: 0.8125rem; text-align: center; }
.col-w-32-mid { width: 32px; vertical-align: middle; }
.col-w-180-pt { width: 180px; padding-top: 4px; }

/* progress fill widths (parameterized) */
.progress-fill-71 { width: 71%; height: 100%; background: var(--primary); border-radius: 4px; }
.progress-fill-56 { width: 56%; height: 100%; background: #22c55e; border-radius: 3px; }
.progress-fill-67 { width: 67%; height: 100%; background: #22c55e; border-radius: 4px; }
.progress-fill-25 { width: 25%; height: 100%; background: #f59e0b; border-radius: 4px; }
.progress-fill-8 { width: 8%; height: 100%; background: #ef4444; border-radius: 4px; }

.btn-primary-flat { text-decoration: none; background: var(--primary); border-color: var(--primary); }
.btn-primary-rect { padding: 8px 16px; background: #0364B1; color: #fff; border: none; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.banner-info-blue { padding: 16px 20px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 4px; margin-bottom: 14px; }
.btn-amber-gradient { padding: 12px 28px; background: linear-gradient(135deg, #d97706, #b45309); color: #fff; border: none; border-radius: 4px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(217,119,6,0.3); }
.p-2px { padding: 2px; }
.flex-row-mt-1-gap-6 { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.badge-bfdbfe-ml-6 { margin-left: 6px; font-size: 0.75rem; border: 1px solid #bfdbfe; }

/* === Promotion pages — more === */
.badge-light-slate { background: #f1f5f9; color: #64748b; font-size: 0.75rem; border: 1px solid #d0d5dd; }
.callout-primary-bg { border-left: 3px solid var(--primary); background: #f8fbff; }
.divider-top { border-top: 1px solid #f1f5f9; padding-top: 12px; }
.divider-top-mb-14 { border-top: 1px solid #f1f5f9; padding-top: 12px; margin-bottom: 14px; }
.badge-bbf7d0 { border: 1px solid #bbf7d0; font-size: 0.75rem; }
.badge-bfdbfe-inline { border: 1px solid #bfdbfe; display: inline-flex; align-items: center; gap: 4px; }
.text-success-bold { color: #16a34a; font-weight: 600; }
.text-white { color: #fff; }
.text-white-80 { color: rgba(255,255,255,0.8); }
.text-primary-bold { color: var(--primary); font-weight: 600; }
.flex-row-mb-1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.flex-row-gap-4-sm { display: flex; gap: 16px; font-size: 0.8125rem; }
.flex-row-mb-3 { display: flex; gap: 6px; margin-bottom: 12px; }
.flex-row-mt-3 { display: flex; gap: 8px; margin-top: 12px; }
.grid-2-col-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.banner-success-hidden { display: none; padding: 14px 20px; background: #f0fdf4; border: 1px solid #a7f3d0; border-radius: 4px; margin-bottom: 14px; }
.flex-1-input { flex: 1; font-size: 0.8125rem; padding: 8px 10px; }
.fs-13-muted-94 { font-size: 0.75rem; color: #94a3b8; }
.fs-13-muted-medium-ml { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.fs-13-slate-mt { font-size: 0.75rem; color: #64748b; margin-top: 6px; }
.fs-section-label { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.fs-13-slate-ml { font-size: 0.8125rem; color: #64748b; margin-left: 8px; }
.fs-13-secondary-mb { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 6px; }
.fs-15-primary-bold { font-size: 0.9375rem; font-weight: 600; color: #0364B1; }
.fs-15-success-bold { font-size: 0.9375rem; font-weight: 600; color: #15803d; }
.progress-track-h6 { height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.mb-14 { margin-bottom: 14px; }

/* promo-create/copy specifics */
.col-w-160-disabled { width: 160px; opacity: 0.4; }
.va-mid { vertical-align: middle; }
.cell-no-border-pad { text-align: center; border-bottom: none; padding-bottom: 0; }
.cat-pill-btn-text { padding: 5px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.cat-suffix-light-2 { padding: 4px 6px; background: #ececed; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.8125rem; color: #64748b; }
.cat-suffix-tiny-light { padding: 4px 4px; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.75rem; color: #64748b; background: #f8fafc; }
.max-w-380 { max-width: 380px; }
.max-h-160-scroll { max-height: 160px; overflow-y: auto; }
.divider-top-mt-5 { margin-top: 20px; padding-top: 16px; border-top: 1px solid #cbd5e1; }
.divider-top-mt-4 { margin-top: 16px; padding-top: 16px; border-top: 1px solid #cbd5e1; }
.input-mb-2-280 { margin-bottom: 8px; max-width: 280px; font-size: 0.8125rem; padding: 8px 10px; }
.fs-13-secondary { font-size: 0.8125rem; color: var(--text-secondary); }
.fs-13-secondary-bold { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.fs-13-muted-mb-1 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.input-link-mono { font-family: monospace; font-size: 0.8125rem; color: #0364B1; flex: 1; }
.flex-fixed-320 { flex: 0 0 320px; }
.inline-flex-gap-1-nowrap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.grid-tier-row-2 { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.grid-2-col-mb-3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.grid-3-col-mb-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.flex-row-gap-1-1 { display: flex; gap: 6px; }
.flex-row-gap-3-end { display: flex; gap: 12px; align-items: end; }
.flex-wrap-row { display: flex; flex-wrap: wrap; gap: 6px; }
.flex-col-gap-2 { display: flex; flex-direction: column; gap: 8px; }
.flex-between-mb-2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.banner-success-shown { display: none; align-items: center; gap: 6px; }

/* promo-create/copy more */
.checkbox-primary-14 { accent-color: var(--primary); width: 14px; height: 14px; }
.bg-primary-subtle { background: #e8f2fb; }
.bg-success-subtle { background: #ecfdf5; }
.btn-primary-tiny { background: var(--primary); color: #fff; border: none; padding: 4px 10px; border-radius: 5px; font-size: 0.75rem; cursor: pointer; }
.flex-row-card-mb { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px; margin-bottom: 14px; }
.flex-row-cursor-pb { display: flex; align-items: center; gap: 6px; cursor: pointer; padding-bottom: 4px; }
.flex-row-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.8125rem; color: var(--text-primary); }
.flex-row-checkbox-bold { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.flex-row-mb-10 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.flex-row-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px; }

/* === Stock + Client pages === */
.label-block { display: block; margin-bottom: 4px; }
.cell-empty-state { padding: 14px 8px; font-size: 0.75rem; color: #94a3b8; text-align: center; }
.max-w-480 { max-width: 480px; }
.max-w-420 { max-width: 420px; }
.m-0-bottom-tight { margin: 0 0 4px; }
.m-0-bottom-3 { margin: 0 0 16px; }
.m-0-bottom-14 { margin: 0 0 14px; }
.flex-end-row-mt { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.flex-col-gap-3-only { display: flex; flex-direction: column; gap: 12px; }
.col-w-90 { width: 90px; }
.full-resize-v { width: 100%; resize: vertical; }
.position-static { position: static; }
.fs-13-slate-only { font-size: 0.8125rem; color: #475569; }
.fs-13-only { font-size: 0.75rem; }
.font-mono-13 { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 0.75rem; }
.font-inherit-13 { font-family: inherit; font-size: 0.8125rem; }
.full-min-w-unset { min-width: unset; width: 100%; }
.flex-col-gap-px-2 { flex-direction: column; gap: 2px; }
.cp-textarea { width: 100%; min-height: 80px; padding: 10px 14px; font-size: 0.8125rem; font-family: 'Inter', sans-serif; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical; color: var(--text-primary); }
.link-flex-center { text-decoration: none; display: flex; align-items: center; }
.no-underline { text-decoration: none; }
.cp-icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--border-light); border-radius: 4px; cursor: pointer; border: none; transition: background 0.15s; }
.cp-badge-abs { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cp-shell-pad { max-width: 1200px; margin: 0 auto; padding: 16px 24px 12px; }
.justify-center { justify-content: center; }
.h-41 { height: 41px; }
.fs-14-primary-leading { font-size: 0.875rem; color: var(--text-primary); line-height: 1.6; }
.cp-warning-chip { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; background: #fef9c3; border: 1px solid #d4c96a; border-radius: 6px; padding: 5px 14px; }
.cp-link-secondary { font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.section-label-primary { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.fs-13-muted-mt-2 { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
.cd-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.gap-10 { gap: 10px; }
.fs-13-success-bold { font-size: 0.75rem; font-weight: 600; color: var(--success-text); }
.opacity-disabled { opacity: 0.6; pointer-events: none; }
.justify-self-end { justify-self: end; }
.cd-tenant-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; text-align: center; }
.cd-warning-chip { font-size: 0.875rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; background: #fef9c3; border: 1px solid #d4c96a; border-radius: 6px; padding: 5px 14px; }
.cd-grid-3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.flex-row-gap-5 { display: flex; align-items: center; gap: 20px; }

/* === stock.html more === */
.bg-violet-light { background: linear-gradient(135deg,#f1f5ff,#e0e7ff); color: #6366f1; }
.label-block-mb-6 { display: block; margin-bottom: 6px; }
.flex-row-gap-1-slate { display: flex; gap: 6px; align-items: center; font-size: 0.8125rem; color: #475569; }
.flex-end-row-only { display: flex; gap: 8px; justify-content: flex-end; }
.flex-end-row-mt-18 { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.grid-2-col-gap-10 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* === client-portal.html more === */
.cp-avatar-empty { background: #e0f2f1; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #64748b; font-weight: 500; }
.bg-light-grey { background: #f1f1f1; }
.cp-callout-blue { background: #f8fbff; border: 1px solid #bdd7f1; border-left: 4px solid var(--primary); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.cp-form-label-block { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.cp-input-group { display: flex; align-items: center; gap: 0; }
.flex-row-gap-4 { display: flex; align-items: center; gap: 16px; }
.cp-form-grid { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; }
.cp-tabs-vert { flex-direction: column; overflow-x: visible; margin-bottom: 0; position: sticky; top: 80px; }

/* === client-detail.html — bar heights === */
.h-19 { height: 19px; }
.h-28 { height: 28px; }
.h-37 { height: 37px; }
.h-40 { height: 40px; }
.h-54 { height: 54px; }
.h-56 { height: 56px; }
.h-68 { height: 68px; }
.h-82 { height: 82px; }
.h-96 { height: 96px; }
.h-108 { height: 108px; }
.h-136 { height: 136px; }
.h-164 { height: 164px; }
.h-190 { height: 190px; }

/* === storefront-detail === */
.sf-img-thumb { width: 100%; height: 100px; object-fit: cover; display: block; }
.sf-thumb-80x60 { width: 80px; height: 60px; object-fit: cover; }
.sf-thumb-80x60-right { width: 80px; height: 60px; object-fit: cover; object-position: right center; }
.sf-thumb-80x60-left { width: 80px; height: 60px; object-fit: cover; object-position: left center; }
.sf-thumb-80x60-top { width: 80px; height: 60px; object-fit: cover; object-position: center top; }
.sf-img-hero { width: 100%; height: 400px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.max-w-450 { max-width: 450px; }
.mb-6-tight { margin-bottom: 6px; }
.mb-neg-2 { margin-bottom: -2px; line-height: 1.2; }

/* === clients.html === */
.cl-cell-sm { padding: 8px; font-size: 0.8125rem; }
.cl-cell-pad { padding: 8px; }
.cl-th-bg { width: 32px; background: #e0e7f2; border-bottom: 1px solid #cbd5e1; }
.cl-table { width: 100%; border-collapse: collapse; }
.cl-th-tag { white-space: nowrap; padding: 6px 10px; font-size: 0.75rem; }
.cl-th-strong { text-align: left; padding: 6px 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #2a60ac; font-weight: 700; background: #e0e7f2; border-bottom: 1px solid #cbd5e1; }
.cl-empty { padding: 16px; text-align: center; font-size: 0.8125rem; color: #94a3b8; }
.max-w-350 { max-width: 350px; }
.max-w-200 { max-width: 200px; }
.max-h-360-scroll { max-height: 360px; overflow-y: auto; }

/* === stock3.html === */
.pl-44 { padding-left: 44px; }
.pl-43 { padding-left: 43px; }
.pl-28 { padding-left: 28px; }
.pl-27 { padding-left: 27px; }
.fs-12-only { font-size: 12px; }

/* === promotions.html === */
.flex-row-iconic-muted { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #94a3b8; }
.cursor-pointer { cursor: pointer; }
.va-neg-1 { vertical-align: -1px; margin-right: 2px; }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.fs-13-amber { font-size: 0.8125rem; font-weight: 500; color: #92400e; }
.dot-amber { display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: #f59e0b; }
.dot-red { display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: #ef4444; }
.dot-green { display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: #22c55e; }
.banner-amber { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 4px; margin-bottom: 12px; }

/* === storefront-inquiry.html === */
.si-thumb-80 { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.link-inherit { text-decoration: none; color: inherit; }
.va-neg-2 { vertical-align: -2px; margin-right: 3px; }
.si-modal-img { max-width: 90%; max-height: 90%; border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.si-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 999; align-items: center; justify-content: center; cursor: pointer; }

/* misc cleanup */
.fs-14-medium-primary { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); }
.fs-1rem-secondary-mb { font-size: 1rem; color: var(--text-secondary); font-weight: 500; margin: 0 0 4px; }
.bg-grey-light { background: #e3e3e3; }
.flex-row-mb-3-1 { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.fs-13-bold-primary { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.btn-amber-tiny { background: #f59e0b; color: #fff; border: none; padding: 5px 12px; border-radius: 5px; font-size: 0.75rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.text-success-light { color: #059669; }
.text-danger-light { color: #ef4444; }
.text-warning-amber { color: #f59e0b; }
.cl-cell-link-truncate { color: var(--primary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.flex-row-gap-10 { display: flex; align-items: center; gap: 10px; }
.flex-row-gap-4 { display: flex; align-items: center; gap: 16px; }

/* Final batch */
.flex-row-gap-2-only { display: flex; gap: 8px; }
.flex-fixed-140 { flex: 0 0 140px; }
.bar-fill-17-violet { width: 17%; background: #6366f1; }
.bar-fill-17-danger { width: 17%; background: var(--danger); }
.bar-fill-26-primary { width: 26%; background: var(--primary); }
.bar-fill-30-warning { width: 30%; background: var(--warning); }
.bar-fill-6-violet-light { width: 6%; background: #a78bfa; }
.bar-fill-68-primary { width: 68%; background: var(--primary); }
.bar-fill-8-grey { width: 8%; background: #cbd5e1; }
.bar-fill-9-violet-mid { width: 9%; background: #8b5cf6; }

.bg-grey-border-slate { background: #f1f5f9; border-color: #64748b; }
.set-icon-btn { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1.125rem; }
.input-prefix-radius { border-right: none; border-radius: 5px 0 0 5px; text-align: right; }
.flex-row-center { display: flex; align-items: center; }
.set-add-row-btn { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; background: #fff; border: 1px dashed #cbd5e1; border-radius: 4px; cursor: pointer; font-size: 0.8125rem; color: var(--primary); font-weight: 500; }
.set-row-attr { display: grid; grid-template-columns: 1fr 110px 28px; gap: 8px; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 4px; }
.set-suffix-grey { padding: 5px 8px; background: #ececed; border: 1px solid #cbd5e1; border-left: none; border-radius: 0 5px 5px 0; font-size: 0.8125rem; color: #64748b; }

.set-bg-blue { background: #e8f2fb; border-color: #0364B1; }
.set-bg-teal { background: #f0fdfa; border-color: #0d9488; }
.set-bg-purple { background: #f3e8ff; border-color: #7c3aed; }
.set-bg-amber { background: #fef3c7; border-color: #92400e; }
.set-bg-grey { background: #f1f5f9; border-color: #64748b; }
.set-callout-muted { font-size: 0.8125rem; color: var(--text-muted); padding: 10px 12px; background: var(--border-light); border-radius: 6px; margin-top: 10px; max-width: 420px; }
.mt-1-5 { margin-top: 6px; }
.max-w-420 { max-width: 420px; }

.sf-select-chevron { border: 1px solid #cbd5e1; border-radius: 5px; padding: 4px 24px 4px 8px; font-size: 0.8125rem; font-weight: 500; color: #1e293b; background: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; cursor: pointer; }
.fs-13-slate-darker { font-size: 0.75rem; color: #334155; }
.mr-3 { margin-right: 12px; }
.sf-toggle-knob { position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; background: #fff; border-radius: 5px; transition: left 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.sf-toggle-track { position: relative; width: 36px; height: 20px; background: #0364B1; border-radius: 4px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }

/* Final cleanup */
.fs-13-tag-ml { font-size: 0.75rem; vertical-align: middle; margin-left: 8px; }
.m-pad-20-bot { margin: 0 20px 20px; }
.m-pad-20 { margin: 0 20px; }
.text-right-bold { text-align: right; font-weight: 600; }
.text-link-blue { color: #2563eb; }
.email-promo-divider { font-size: 0.8125rem; color: #9ca3af; text-align: center; margin-bottom: 24px; }
.fs-13-only-only { font-size: 0.8125rem; }
.flex-fixed-120 { flex: 0 0 120px; }
.flex-row-gap-10-aligned { display: flex; gap: 10px; align-items: center; }
.crm-header-pad { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; }
.btn-tag-pad { font-size: 0.75rem; padding: 2px 6px; }
.wizard-card-cream { background: #f5f0e8; border: 1px solid #e5ddd0; border-radius: 4px; padding: 24px; }

/* === Unified Pill Tab Bar (full-width white panel) === */
.pill-tabs {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border-color);
  padding: 4px;
  border-radius: 4px;
  margin-top: 28px;
  margin-bottom: 16px;
  font-size: 0.75rem;
  box-sizing: border-box;
}
.pill-tabs-label,
.pill-tab {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  line-height: 1;
  font-size: 0.8125rem;
  font-family: inherit;
  border: none;
  background: transparent;
  border-radius: 4px;
  box-sizing: border-box;
}
.pill-tabs-label {
  flex-shrink: 0;
  color: #006aff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.9em;
  height: auto;
  padding: 0 16px;
  margin: -4px 16px -4px -4px;
  background: #e2e8f0;
  border-radius: 3px 0 0 3px;
  align-self: stretch;
  justify-content: center;
}
.pill-tab {
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0;
  transition: none;
}
.pill-tab:hover:not(.active) {
  background: #f1f5f9;
  color: #1e293b;
}
.pill-tab.active {
  background: #c7e2ff;
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}