*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #f4f4f2;
  --surface:      #ffffff;
  --border:       #e2e1da;
  --border-focus: #1a3a6b;
  --text:         #181816;
  --muted:        #65655f;
  --accent:       #1a3a6b;
  --accent-mid:   #2d5fa8;
  --accent-light: #e8eef7;
  --danger:       #c0392b;
  --danger-bg:    #fde8e8;
  --success:      #1a6b3a;
  --success-bg:   #e8f5ee;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --transition:   0.18s cubic-bezier(.4,0,.2,1);
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: opacity var(--transition); }
a:hover { text-decoration: underline; opacity: .85; }

/* ── Navbar ──────────────────────────────────────────────────────────────────*/
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
}
.navbar-right { display: flex; align-items: center; gap: 12px; }
.navbar-user  { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.navbar-user span { font-weight: 500; color: var(--text); }

/* ── Language toggle ─────────────────────────────────────────────────────────*/
#lang-toggle { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  background: none;
  border: 1.5px solid transparent;
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
}
.lang-btn:hover      { opacity: 0.8; }
.lang-btn--active    { opacity: 1; border-color: var(--accent); }
.lang-btn img        { display: block; border-radius: 2px; }

/* ── Buttons ─────────────────────────────────────────────────────────────────*/
.btn-logout {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.btn-logout:hover { background: var(--bg); color: var(--text); }

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.btn:hover    { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active   { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
  color: #fff;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 6px rgba(26,58,107,.25);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(26,58,107,.35); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ── Layout ──────────────────────────────────────────────────────────────────*/
.page      { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.page-wide { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem; }

/* ── Auth screens ────────────────────────────────────────────────────────────*/
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  flex-direction: column;
  gap: 1rem;
  background: radial-gradient(ellipse at 60% 0%, #dde8f7 0%, var(--bg) 60%);
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  animation: cardIn .3s cubic-bezier(.4,0,.2,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-card h1      { font-size: 20px; font-weight: 700; margin-bottom: 0.25rem; }
.auth-card p.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 2rem; }
.auth-lang { display: flex; gap: 4px; }

/* ── Form inputs ─────────────────────────────────────────────────────────────*/
label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
}
input[type="email"],
input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(26,58,107,.10);
}
textarea { resize: vertical; min-height: 80px; }
.field       { margin-bottom: 1.25rem; }
.field-hint  { font-size: 12px; color: var(--muted); margin-top: 4px; }
.otp-input   { letter-spacing: 10px; font-size: 22px; font-weight: 700; text-align: center; font-family: monospace; }

/* ── Cards ───────────────────────────────────────────────────────────────────*/
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

/* ── Messages ────────────────────────────────────────────────────────────────*/
.msg-error {
  background: #fdf0ef;
  border: 1px solid #f5c6c2;
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 1rem;
  display: none;
  animation: fadeIn .2s ease both;
}
.msg-error.show { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Page headings ───────────────────────────────────────────────────────────*/
.page-heading { font-size: 22px; font-weight: 700; margin-bottom: 0.25rem; }
.page-sub     { font-size: 13px; color: var(--muted); margin-bottom: 2rem; }

/* ── Division picker ─────────────────────────────────────────────────────────*/
.division-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.division-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.division-btn:hover  {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.division-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(26,58,107,.12);
}
.division-btn img { width: 64px; height: 64px; object-fit: contain; }

/* ── Service catalog ─────────────────────────────────────────────────────────*/
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
  box-shadow: var(--shadow-sm);
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.service-card h3     { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.service-card .price { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.service-card p      { font-size: 12px; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.4; }
.service-arrow       { font-size: 13px; color: var(--accent); font-weight: 500; }
.category-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

/* ── Orders list ─────────────────────────────────────────────────────────────*/
.order-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.order-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.order-ref     { font-family: monospace; font-size: 13px; color: var(--muted); }
.order-service { font-weight: 500; font-size: 15px; margin-bottom: 2px; }
.order-date    { font-size: 12px; color: var(--muted); }
.unread-dot    { display:inline-block; width:8px; height:8px; background:var(--accent); border-radius:50%; margin-left:6px; vertical-align:middle; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.6; transform:scale(1.2); } }

/* ── Status badges ───────────────────────────────────────────────────────────*/
.status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.status-pending    { background: #fef3c7; color: #92400e; }
.status-processing { background: #dbeafe; color: #1e40af; }
.status-completed  { background: var(--success-bg); color: var(--success); }
.status-rejected   { background: var(--danger-bg); color: var(--danger); }

/* ── Order confirmed ─────────────────────────────────────────────────────────*/
.success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 8px rgba(26,107,58,.08);
  animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:scale(1); } }
.success-icon svg { width: 24px; height: 24px; stroke: var(--success); fill: none; }
.order-ref-badge {
  font-family: monospace;
  font-size: 15px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  display: inline-block;
  margin-top: 4px;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--muted); }

/* ── Checkout summary ────────────────────────────────────────────────────────*/
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; font-weight: 600; }
.summary-label { color: var(--muted); }

/* ── Workspace button ────────────────────────────────────────────────────────*/
.btn-workspace {
  background: linear-gradient(135deg, #1a3a6b 0%, #2d60a0 100%);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(26,58,107,.3);
  transition: box-shadow var(--transition), transform var(--transition);
}
.btn-workspace::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 35%; height: 200%;
  background: rgba(255,255,255,.2);
  transform: skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
}
@keyframes shine { 0%{left:-75%} 60%,100%{left:130%} }
.btn-workspace:hover {
  box-shadow: 0 4px 12px rgba(26,58,107,.4);
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* ── Worker dashboard tabs ───────────────────────────────────────────────────*/
.tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  margin-bottom: -2px;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover  { color: var(--accent); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn .badge {
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  font-size: 11px;
  padding: 1px 7px;
  margin-left: 6px;
  font-weight: 700;
}

/* ── Worker order cards ──────────────────────────────────────────────────────*/
.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.order-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.order-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.order-card-title  { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.order-card-meta   { font-size: 12px; color: var(--muted); }

/* ── File upload zone ────────────────────────────────────────────────────────*/
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.upload-zone:hover, .upload-zone.drag {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: scale(1.01);
}
.upload-zone p { font-size: 13px; color: var(--muted); margin: 0; }

/* ── Notes timeline ──────────────────────────────────────────────────────────*/
.note-entry {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.note-entry:last-child { border-bottom: none; }
.note-meta  { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.note-body  { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ── Section labels ──────────────────────────────────────────────────────────*/
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

/* ── Billing table ───────────────────────────────────────────────────────────*/
.billing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.billing-table th {
  text-align: left;
  padding: 8px;
  border-bottom: 2px solid var(--border);
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.billing-table td         { padding: 8px; border-bottom: 1px solid var(--border); }
.billing-table tr:last-child td { border-bottom: none; font-weight: 600; }
.billing-table .amount    { text-align: right; font-weight: 500; }

/* ── Variant / size picker ───────────────────────────────────────────────────*/
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.variant-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  user-select: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.variant-option:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.variant-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(26,58,107,.12);
}
.variant-option .v-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.variant-option .v-price { font-size: 18px; font-weight: 700; color: var(--accent); }
.variant-option input[type="radio"] { display: none; }
.pmp-unavailable {
  background: #fff8f0;
  border: 1px solid #f0c070;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: #8a5a00;
  font-size: 13px;
  margin-top: 12px;
}
.variant-section-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  margin-top: 4px;
}
#price-preview    { font-weight: 700; color: var(--accent); font-size: 20px; margin-top: 12px; }
.price-pending    { color: var(--muted); font-size: 13px; font-style: italic; margin-top: 6px; }

/* ── Extra info form (CSS/legal) ─────────────────────────────────────────────*/
.info-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.info-group-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: 12px;
}
.info-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.info-row.full { grid-template-columns: 1fr; }
.info-row:last-child { margin-bottom: 0; }
.info-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.info-field input, .info-field textarea { width: 100%; box-sizing: border-box; font-size: 13px; }
.info-field textarea { min-height: 70px; resize: vertical; }
.canarias-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--muted);
}
.canarias-toggle input { margin: 0; cursor: pointer; }
#css-dob-row { display: none; }
.info-subsection {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.info-subsection:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* ── Worker status buttons ───────────────────────────────────────────────────*/
.status-btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  transition: border-color var(--transition), color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
  box-shadow: var(--shadow-sm);
}
.status-btn:hover       { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.status-btn.active-status { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 6px rgba(26,58,107,.25); }

/* ── Workspace button in navbar ──────────────────────────────────────────────*/
.btn-workspace-link {
  text-decoration: none;
  color: inherit;
}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .navbar         { padding: 0 1rem; }
  .page, .page-wide { padding: 1.5rem 1rem; }
  .auth-card      { padding: 1.75rem 1.25rem; }
  .info-row       { grid-template-columns: 1fr; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────────*/
html[data-theme="dark"] {
  --bg:           #111113;
  --surface:      #1c1c1f;
  --border:       #2e2e33;
  --border-focus: #5a8fd4;
  --text:         #e6e6e2;
  --muted:        #8a8a84;
  --accent:       #5a8fd4;
  --accent-mid:   #4a78ba;
  --accent-light: #1a2840;
  --danger:       #e06c5e;
  --danger-bg:    #2c1816;
  --success:      #4aad6a;
  --success-bg:   #142a1e;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:    0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

/* Inputs in dark mode */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #242428;
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

/* Auth gradient in dark */
html[data-theme="dark"] .auth-wrap {
  background: radial-gradient(ellipse at 60% 0%, #1a2535 0%, var(--bg) 60%);
}

/* Buttons in dark */
html[data-theme="dark"] .btn-secondary {
  background: #242428;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-logout {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .btn-logout:hover {
  background: #242428;
  color: var(--text);
}

/* Pill buttons in dark */
html[data-theme="dark"] .filter-pill {
  background: #242428;
  border-color: var(--border);
  color: var(--muted);
}
html[data-theme="dark"] .filter-pill.active {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="dark"] .filter-pill.pill-rejected.active {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
html[data-theme="dark"] .filter-pill.pill-completed.active {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

/* Status badge text stays readable in dark */
html[data-theme="dark"] .status-pending    { background: #332c00; color: #f0c030; }
html[data-theme="dark"] .status-processing { background: #0e1e38; color: #7ab0f0; }
html[data-theme="dark"] .status-completed  { background: var(--success-bg); color: var(--success); }
html[data-theme="dark"] .status-rejected   { background: var(--danger-bg);  color: var(--danger);  }

/* OTP input in dark */
html[data-theme="dark"] .otp-input {
  background: #242428;
  color: var(--text);
}

/* Upload zone in dark */
html[data-theme="dark"] .upload-zone {
  border-color: var(--border);
}
html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .upload-zone.drag {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* Billing filter bar in dark */
html[data-theme="dark"] #billing-filter-bar,
html[data-theme="dark"] #filter-bar {
  background: var(--surface);
  border-color: var(--border);
}

/* Smooth transition for bg/color changes when toggling */
body, .card, .navbar, .auth-card, .service-card, .order-card, .order-row,
input, textarea, select, .btn, .status-badge, .upload-zone, .tab-btn {
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

/* ── Theme toggle button ─────────────────────────────────────────────────────*/
.theme-toggle-wrap { display:flex; align-items:center; }
.theme-toggle-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.theme-toggle-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: scale(1.08);
}
@keyframes themeSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  40%  { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}
.theme-toggle-spin {
  animation: themeSpin 0.35s cubic-bezier(.4,0,.2,1) both;
}

/* ── Logo light/dark switching ───────────────────────────────────────────────*/
.logo-dark { display: none !important; }
html[data-theme="dark"] .logo-light { display: none !important; }
/* inline-block keeps text-align:center working on auth pages */
html[data-theme="dark"] .logo-dark  { display: inline-block !important; }

/* Dark mode: fix info-group (checkout extra fields) white background */
html[data-theme="dark"] .info-group {
  background: #1e1e23;
  border-color: var(--border);
}

/* ── Division buttons — always dark, theme-independent ──────────────────────*/
/* Override the default .division-btn which inherits --surface */
.division-btn {
  background:    #1a1a20 !important;
  border:        1.5px solid #3d6eaa !important;
  color:         #e6e6e2 !important;
  box-shadow:    0 2px 8px rgba(0,0,0,.35) !important;
}
.division-btn:hover {
  background:    #22222c !important;
  border-color:  #5a8fd4 !important;
  box-shadow:    0 4px 16px rgba(61,110,170,.30) !important;
  transform:     translateY(-2px);
}
.division-btn.selected {
  background:    #1e2840 !important;
  border-color:  #5a8fd4 !important;
  box-shadow:    0 0 0 3px rgba(90,143,212,.25), 0 4px 12px rgba(0,0,0,.3) !important;
}
/* Text inside division buttons */
.division-btn span { color: #e6e6e2 !important; }