/* ═══════════════════════════════════════════════════════════════════════════
   Smitty's E-Bikes CRM — v2 Design System
   "The Machined Interface"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Material Icons variation settings ──────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #f0edec; }
::-webkit-scrollbar-thumb { background: #a63b00; border-radius: 2px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  min-height: 100vh;
  min-height: max(884px, 100dvh);
  background-color: #fcf9f8;
  color: #1c1b1b;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset browser form styles that vary across Chrome/Safari */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* Restore native controls that appearance:none breaks */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}
button { cursor: pointer; }
a { text-decoration: none; }

/* ── Layout Shell ────────────────────────────────────────────────────────── */
.crm-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #ffffff;
  box-shadow: 0 1px 0 #f0edec;
}
.crm-brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #1c1b1b;
  text-decoration: none;
}
.crm-topbar-user {
  font-size: 0.75rem;
  font-weight: 700;
  color: #5b4137;
  display: none;
}
@media (min-width: 640px) { .crm-topbar-user { display: block; } }
.crm-topbar-logout {
  display: flex;
  align-items: center;
  color: #8f7065;
  text-decoration: none;
  padding: 6px;
  border-radius: 0.25rem;
  transition: color .15s;
}
.crm-topbar-logout:hover { color: #a63b00; }

/* Desktop Sidebar */
.crm-sidebar { display: none; }
@media (min-width: 768px) {
  .crm-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 220px;
    background: #f0edec;
    z-index: 40;
    padding: 16px 0;
  }
}
.crm-sidenav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.crm-sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #5b4137;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.crm-sidenav-item:hover { background: #ebe7e7; color: #1c1b1b; }
.crm-sidenav-active { background: #ff5f00 !important; color: #ffffff !important; }
.crm-nav-icon { font-size: 20px; flex-shrink: 0; }

.crm-sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid #ebe7e7;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #a63b00;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.crm-sidebar-user-info { flex: 1; min-width: 0; }
.crm-sidebar-user-name {
  font-size: 0.75rem; font-weight: 700; color: #1c1b1b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-sidebar-user-role {
  font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #8f7065;
}
.crm-sidebar-logout-btn {
  color: #8f7065; display: flex; align-items: center;
  padding: 4px; border-radius: 0.25rem; text-decoration: none; transition: color .15s;
}
.crm-sidebar-logout-btn:hover { color: #a63b00; }

/* Main Content */
.crm-main { min-height: 100vh; }
.crm-main-authed { padding-top: 56px; padding-bottom: 80px; }
@media (min-width: 768px) { .crm-main-authed { padding-left: 220px; padding-bottom: 24px; } }
.crm-content { max-width: 680px; margin: 0 auto; padding: 24px 16px; }
@media (min-width: 640px) { .crm-content { padding: 32px 24px; } }

/* Flash Message */
.crm-flash {
  position: fixed;
  top: 56px; left: 0; right: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.crm-flash-success { background: #dcfce7; color: #14532d; }
.crm-flash-error   { background: #ffdad6; color: #93000a; }

/* Bottom Nav */
.crm-bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  height: 64px;
  background: #ffffff;
  border-top: 1px solid #f0edec;
  box-shadow: 0 -4px 20px rgba(28,27,27,.04);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 768px) { .crm-bottom-nav { display: none; } }
.crm-bottom-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 4px 12px;
  border-radius: 0.25rem;
  text-decoration: none;
  color: #8f7065;
  transition: transform .1s, color .15s;
  flex: 1;
}
.crm-bottom-item:active { transform: translateY(1px); }
.crm-bottom-active { color: #ff5f00; }
.crm-bottom-icon { font-size: 22px; }
.crm-bottom-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.crm-bottom-fab {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-top: -20px;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #a63b00, #ff5f00);
  color: #fff;
  box-shadow: 0 8px 20px rgba(166,59,0,.35);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.crm-bottom-fab:active { transform: scale(.94); box-shadow: 0 4px 10px rgba(166,59,0,.3); }

/* ── Status Bolt ─────────────────────────────────────────────────────────── */
.status-bolt {
  display: inline-block;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  width: 8px; height: 8px; flex-shrink: 0;
}
.bolt-new           { background: #5f5e5e; }
.bolt-accepted      { background: #0061a4; }
.bolt-in_progress   { background: #ff5f00; }
.bolt-waiting_parts { background: #0061a4; }
.bolt-ready         { background: #16a34a; }
.bolt-ready_takeback{ background: #16a34a; }
.bolt-completed     { background: #16a34a; }
.bolt-cancelled     { background: #ba1a1a; }

/* ── Status Pills ────────────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 9999px;
  font-size: 0.625rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.pill-new           { background: #f6f3f2; color: #5f5e5e; }
.pill-accepted      { background: #dbeafe; color: #0061a4; }
.pill-in_progress   { background: #fff0f0; color: #a63b00; }
.pill-waiting_parts { background: #dbeafe; color: #0061a4; }
.pill-ready         { background: #dcfce7; color: #16a34a; }
.pill-ready_takeback{ background: #dcfce7; color: #16a34a; }
.pill-completed     { background: #dcfce7; color: #16a34a; }
.pill-cancelled     { background: #fee2e2; color: #ba1a1a; }

/* ── Card border accent ──────────────────────────────────────────────────── */
.border-status-new           { border-left-color: #8f7065 !important; }
.border-status-accepted      { border-left-color: #0061a4 !important; }
.border-status-in_progress   { border-left-color: #ff5f00 !important; }
.border-status-waiting_parts { border-left-color: #0061a4 !important; }
.border-status-ready         { border-left-color: #16a34a !important; }
.border-status-ready_takeback{ border-left-color: #16a34a !important; }
.border-status-completed     { border-left-color: #16a34a !important; }
.border-status-cancelled     { border-left-color: #ba1a1a !important; }

/* ── Status Bar fills ────────────────────────────────────────────────────── */
.bar-fill-new           { background: #5f5e5e; }
.bar-fill-accepted      { background: #0061a4; }
.bar-fill-in_progress   { background: #ff5f00; }
.bar-fill-waiting_parts { background: #0061a4; }
.bar-fill-ready         { background: #16a34a; }
.bar-fill-ready_takeback{ background: #16a34a; }
.bar-fill-completed     { background: #16a34a; }
.bar-fill-cancelled     { background: #ba1a1a; }

/* ── Form Components ─────────────────────────────────────────────────────── */
.crm-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.625rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #5b4137; margin-bottom: 6px;
}
.crm-label .req { color: #ff5f00; margin-left: 2px; }

.crm-input {
  display: block; width: 100%;
  background: #ebe7e7;
  border: none; border-bottom: 2px solid #8f7065;
  border-radius: 0.125rem 0.125rem 0 0;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 500;
  color: #1c1b1b; outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
}
.crm-input:focus { border-bottom-color: #ff5f00; background: #f6f3f2; }
.crm-input::placeholder { color: #8f7065; font-weight: 400; }
.crm-input[type="date"] { cursor: pointer; }
textarea.crm-input { border-radius: 0.125rem; resize: vertical; min-height: 80px; }
select.crm-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f7065' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
}

.crm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) { .crm-form-grid { grid-template-columns: 1fr; } }
.crm-full { grid-column: 1 / -1; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.crm-card {
  background: #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 4px 12px rgba(28,27,27,.04);
  overflow: hidden;
  margin-bottom: 16px;
}
.crm-card-header {
  padding: 14px 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.crm-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6875rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.08em; color: #8f7065;
}
.crm-card-action {
  font-size: 0.6875rem; font-weight: 700; color: #a63b00;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
}
.crm-card-action:hover { text-decoration: underline; }
.crm-card-body { padding: 16px 20px 20px; }

/* ── Page Header ─────────────────────────────────────────────────────────── */
.crm-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 12px;
}
.crm-page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem; font-weight: 900;
  letter-spacing: -0.03em; color: #1c1b1b; line-height: 1.1;
}
.crm-back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 700; color: #8f7065;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px; transition: color .15s;
}
.crm-back-link:hover { color: #a63b00; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 0.25rem;
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none;
  cursor: pointer; border: none;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap; -webkit-appearance: none;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, #a63b00, #ff5f00);
  color: #ffffff; box-shadow: 0 4px 12px rgba(166,59,0,.25);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(166,59,0,.35); }
.btn-secondary { background: #f0edec; color: #1c1b1b; }
.btn-secondary:hover { background: #ebe7e7; }
.btn-ghost { background: transparent; color: #8f7065; }
.btn-ghost:hover { color: #1c1b1b; }
.btn-danger { background: #ffdad6; color: #93000a; }
.btn-danger:hover { background: #ffb4ab; }
.btn-sm { padding: 7px 14px; font-size: 0.6875rem; }
.btn-full { width: 100%; }

/* ── List Items ──────────────────────────────────────────────────────────── */
.crm-list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; text-decoration: none; color: inherit;
  background: #ffffff; transition: background .12s;
  border-left: 4px solid transparent; gap: 12px;
}
.crm-list-item:hover { background: #f6f3f2; }
.crm-list-item + .crm-list-item { border-top: 1px solid #f6f3f2; }
.crm-list-left { flex: 1; min-width: 0; }
.crm-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.crm-list-job { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #8f7065; }
.crm-list-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.9375rem; font-weight: 700; color: #1c1b1b;
  margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crm-list-bike { font-size: 0.8125rem; font-weight: 500; color: #5b4137; }
.crm-list-due { font-size: 0.625rem; font-weight: 700; color: #8f7065; margin-top: 4px; }
.crm-list-due.overdue { color: #ba1a1a; }
.crm-list-date { font-size: 0.625rem; font-weight: 700; color: #8f7065; text-transform: uppercase; letter-spacing: 0.05em; }
.crm-list-cost { font-size: 0.8125rem; font-weight: 700; color: #1c1b1b; }

/* ── Order Hero ──────────────────────────────────────────────────────────── */
.crm-order-hero {
  background: #1c1b1b; border-radius: 0.25rem;
  padding: 20px 20px 16px; margin-bottom: 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.crm-hero-job { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #8f7065; margin-bottom: 4px; }
.crm-hero-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; font-weight: 900; color: #fcf9f8; line-height: 1.1; }
.crm-hero-bike { font-size: 0.875rem; font-weight: 500; color: #e5e2e1; margin-top: 4px; }
.crm-hero-dates { font-size: 0.625rem; font-weight: 600; color: #8f7065; margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Status Buttons ──────────────────────────────────────────────────────── */
.crm-status-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.status-btn {
  padding: 7px 14px; border-radius: 9999px;
  font-family: 'Inter', sans-serif; font-size: 0.6875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; border: none;
  background: #f0edec; color: #5b4137;
  transition: background .15s, color .15s, transform .1s; white-space: nowrap;
}
.status-btn:hover:not(:disabled) { background: #ebe7e7; }
.status-btn:active:not(:disabled) { transform: scale(.96); }
.status-btn:disabled { opacity: .5; cursor: default; }
.status-btn.is-active.status-btn-new           { background: #f6f3f2; color: #5f5e5e; }
.status-btn.is-active.status-btn-accepted      { background: #dbeafe; color: #0061a4; }
.status-btn.is-active.status-btn-in_progress   { background: #fff0f0; color: #a63b00; }
.status-btn.is-active.status-btn-waiting_parts { background: #dbeafe; color: #0061a4; }
.status-btn.is-active.status-btn-ready         { background: #dcfce7; color: #16a34a; }
.status-btn.is-active.status-btn-ready_takeback{ background: #dcfce7; color: #16a34a; }
.status-btn.is-active.status-btn-completed     { background: #dcfce7; color: #16a34a; }
.status-btn.is-active.status-btn-cancelled     { background: #fee2e2; color: #ba1a1a; }

/* ── Delivery Toggle ─────────────────────────────────────────────────────── */
.delivery-toggle { display: flex; gap: 8px; }
.toggle-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 16px;
  background: #f0edec; border-bottom: 2px solid transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  font-size: 0.8125rem; font-weight: 700; color: #5b4137;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.toggle-option input[type="radio"] { display: none; }
.toggle-option:hover { background: #ebe7e7; }
.toggle-option.selected { background: #fff0f0; border-bottom-color: #ff5f00; color: #a63b00; }

/* ── Service Type Checkboxes ─────────────────────────────────────────────── */
.crm-service-types { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-service-type-option {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: #f0edec; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 700; color: #5b4137;
  cursor: pointer; border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s; user-select: none;
}
.crm-service-type-option input[type="checkbox"] { display: none; }
.crm-service-type-option:hover { background: #ebe7e7; }
.crm-service-type-option.checked { background: #fff0f0; border-color: #ff5f00; color: #a63b00; }

/* ── Dashboard Stat Bento ────────────────────────────────────────────────── */
.crm-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.crm-stat-hero {
  grid-column: 1 / -1;
  background: #f0edec; border-radius: 0.25rem;
  padding: 20px 20px 16px; position: relative; overflow: hidden;
  min-height: 112px; display: flex; flex-direction: column; justify-content: space-between;
}
.crm-stat-hero-bg {
  position: absolute; right: -8px; bottom: -8px;
  opacity: 0.06; pointer-events: none; line-height: 1; font-size: 100px;
}
.crm-stat-sub {
  background: #f6f3f2; border-radius: 0.25rem;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  border-bottom: 2px solid transparent;
}
.crm-stat-sub-waiting  { border-bottom-color: rgba(0,97,164,.25); }
.crm-stat-sub-ready    { border-bottom-color: rgba(22,163,74,.25); }
.crm-stat-sub-overdue  { border-bottom-color: rgba(186,26,26,.25); }
.crm-stat-label { font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #8f7065; }
.crm-stat-value-lg { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; color: #1c1b1b; }
.crm-stat-value-sm { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.crm-stat-trend { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 700; color: #a63b00; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Status Bars ─────────────────────────────────────────────────────────── */
.crm-status-bars { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.crm-status-bar-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: opacity .15s; }
.crm-status-bar-row:hover { opacity: .8; }
.crm-bar-track { flex: 1; height: 6px; background: #f0edec; border-radius: 0 0.125rem 0.125rem 0; overflow: hidden; }
.crm-bar-fill { height: 100%; border-radius: inherit; transition: width .3s ease; }
.crm-bar-count { font-family: 'Space Grotesk', sans-serif; font-size: 0.8125rem; font-weight: 700; color: #1c1b1b; min-width: 20px; text-align: right; }

/* ── Notes ───────────────────────────────────────────────────────────────── */
.crm-notes-list { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.crm-note { background: #f6f3f2; border-radius: 0.25rem; padding: 12px 14px; }
.crm-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.crm-note-author { font-size: 0.75rem; font-weight: 700; color: #1c1b1b; }
.crm-note-date { font-size: 0.625rem; font-weight: 600; color: #8f7065; }
.crm-note-body { font-size: 0.875rem; color: #1c1b1b; line-height: 1.5; }

/* ── Customer Avatar ─────────────────────────────────────────────────────── */
.crm-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #a63b00; color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.crm-avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }

/* ── Role Badge ──────────────────────────────────────────────────────────── */
.role-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.role-admin      { background: #fff0f0; color: #a63b00; }
.role-technician { background: #f0edec; color: #5b4137; }

/* ── Login ───────────────────────────────────────────────────────────────── */
.crm-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: #1c1b1b;
}
.crm-login-card {
  width: 100%; max-width: 400px; background: #fcf9f8;
  border-radius: 0.25rem; padding: 40px 32px 36px;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.crm-login-brand { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; color: #1c1b1b; margin-bottom: 4px; }
.crm-login-sub { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #8f7065; margin-bottom: 32px; }
.crm-login-error { background: #ffdad6; color: #93000a; font-size: 0.8125rem; font-weight: 700; padding: 10px 14px; border-radius: 0.25rem; margin-bottom: 20px; }
.crm-login-field { margin-bottom: 16px; }
.crm-check-row { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.crm-check-row input[type="checkbox"] { accent-color: #ff5f00; width: 16px; height: 16px; }
.crm-check-row label { font-size: 0.8125rem; font-weight: 600; color: #5b4137; cursor: pointer; }
.crm-login-hint { font-size: 0.75rem; color: #8f7065; text-align: center; margin-top: 20px; }
.crm-login-hint a { color: #a63b00; }

/* ── Order meta ──────────────────────────────────────────────────────────── */
.crm-order-meta { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 20px; font-size: 0.6875rem; font-weight: 600; color: #8f7065; background: #f6f3f2; border-radius: 0.25rem; margin-bottom: 16px; }
.crm-form-actions { margin-bottom: 16px; }

/* ── Empty State ─────────────────────────────────────────────────────────── */
.crm-empty { text-align: center; padding: 48px 16px; color: #8f7065; font-size: 0.875rem; font-weight: 500; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.crm-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.crm-page-btn {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.25rem; background: #f0edec; font-size: 0.8125rem; font-weight: 700;
  color: #5b4137; text-decoration: none; transition: background .15s;
}
.crm-page-btn:hover { background: #ebe7e7; }
.crm-page-btn.active { background: #ff5f00; color: #fff; }

/* ── Result count / Filter chips ─────────────────────────────────────────── */
.crm-result-count { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8f7065; margin-bottom: 12px; }
.crm-filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.crm-chip {
  flex-shrink: 0; padding: 6px 14px; border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; border: none; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: #f0edec; color: #5b4137; transition: background .15s; white-space: nowrap;
}
.crm-chip:hover { background: #ebe7e7; }
.crm-chip.active { background: #ff5f00; color: #fff; }

/* ── Misc ────────────────────────────────────────────────────────────────── */
a { transition: color .15s; }
.inline-form { display: inline; }
.you-badge { font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: #f0edec; color: #8f7065; padding: 4px 10px; border-radius: 9999px; }
.crm-paid-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: #dcfce7; color: #16a34a; padding: 3px 10px; border-radius: 9999px; }