/* ============================================================
   Vertilux Portal — Main Stylesheet
   Brand: #de3a00 orange on deep charcoal/black
   ============================================================ */

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&family=Barlow+Condensed:wght@400&display=swap');

/* --- Global: hand cursor on all interactive elements ------- */
a,
button,
select,
label[for],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
[role="button"],
.clickable-row,
.btn-primary,
.btn-ghost,
.btn-action,
.btn-export,
.btn-impersonate,
.btn-stop,
.page-btn,
.nav-link,
.nav-logout,
.nav-exit-impersonate,
.mobile-nav__link,
.mobile-menu-btn,
.dealer-option,
.btn-icon,
.btn-icon--edit,
.btn-icon--delete,
.actions-readonly,
summary {
  cursor: pointer;
}

/* --- CSS Custom Properties --------------------------------- */
:root {
  /* Brand */
  --orange:       #de3a00;
  --orange-light: #f04010;
  --orange-dark:  #b82e00;

  /* Structure */
  --charcoal:     #1c1c1c;
  --charcoal-2:   #242424;
  --charcoal-3:   #2e2e2e;
  --white:        #ffffff;
  --off-white:    #f7f6f4;
  --surface:      #ffffff;

  /* Greys */
  --grey-50:   #fafafa;
  --grey-100:  #f2f2f2;
  --grey-200:  #e4e4e4;
  --grey-300:  #cccccc;
  --grey-500:  #888888;
  --grey-700:  #444444;

  /* Text */
  --text:       #1c1c1c;
  --text-light: #666666;

  /* Semantic */
  --error:   #cc2200;
  --success: #1a7a40;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13);

  /* Shape */
  --radius:    5px;
  --radius-lg: 8px;

  /* Motion */
  --transition: 0.16s ease;

  /* Layout */
  --header-h: 68px;
}

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
strong, b, h1, h2, h3, h4, h5, h6, th { font-weight: 400; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-decoration: underline; }
a:hover { color: var(--orange-light); }

/* Suppress underline on navigation, buttons, logo, and UI chrome links */
.site-logo,
.nav-link,
.nav-logout,
.nav-exit-impersonate,
.mobile-nav__link,
.footer-contact,
.btn-primary,
.btn-ghost,
.btn-action,
.btn-impersonate,
.btn-export,
.btn-stop,
.page-btn,
.nav-user__email { text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

/* --- Site Header ------------------------------------------- */
.site-header {
  background: var(--charcoal);
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid var(--orange);
}

.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo: real PNG image sized to look great on dark bar */
.site-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo img {
  height: 32px;
  width: auto;
  /* PNG has transparent bg — white areas disappear on dark; the orange reads perfectly */
}
.site-logo__divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.site-logo__text {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Nav --------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.7);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 400;
  transition: color var(--transition), background var(--transition);
  letter-spacing: 0.01em;
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,0.07); }
.nav-link.active { color: var(--orange); }

.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,0.12);
}

.nav-user__email {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(222,58,0,0.12);
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 400;
  border: 1px solid rgba(222,58,0,0.3);
  transition: all var(--transition);
}
.nav-logout:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* --- Mobile Menu ------------------------------------------- */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 200;
}
.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--charcoal);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav.open { display: flex; }
.mobile-nav__link {
  padding: 14px 24px;
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color var(--transition);
}
.mobile-nav__link:hover { color: var(--orange); }
.mobile-nav__link--logout { color: rgba(222,58,0,0.85); }
.mobile-nav__email {
  padding: 12px 24px;
  color: rgba(255,255,255,0.35);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* --- Main Content ------------------------------------------ */
.main-content {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 28px;
}
.main-content--full { max-width: 100%; padding: 0; }

/* --- Site Footer ------------------------------------------- */
.site-footer {
  background: var(--charcoal);
  border-top: 1px solid var(--charcoal-3);
  color: rgba(255,255,255,0.3);
  padding: 18px 0;
  margin-top: auto;
}
.site-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.footer-note { color: rgba(255,255,255,0.18); }

.footer-version {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  background: rgba(222,58,0,0.25);
  color: rgba(222,58,0,0.85);
  vertical-align: middle;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.38);
  font-size: 0.78rem;
  transition: color var(--transition);
  text-decoration: none;
}
.footer-contact:hover { color: var(--orange); }
.footer-contact svg { flex-shrink: 0; opacity: 0.7; }

.footer-sep {
  color: rgba(255,255,255,0.15);
  font-size: 0.78rem;
}

/* Attribution line: two font-size steps smaller than the footer's 0.78rem
   (0.78 / 1.2 / 1.2 ≈ 0.54rem). Sits below the main footer row. */
.site-footer__attribution {
  max-width: 1400px;
  margin: 4px auto 0;
  padding: 0 28px;
  font-size: 0.54rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.22);
  text-align: left;
}
.site-footer__attribution a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer__attribution a:hover { color: var(--orange); }

/* --- Auth Layout ------------------------------------------- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal);
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
}

/* Subtle background texture: faint V-grid pattern */
.auth-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 40px,
      rgba(222,58,0,0.03) 40px,
      rgba(222,58,0,0.03) 41px
    );
  pointer-events: none;
}

/* Orange accent bar at top */
.auth-wrapper::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}

.auth-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
  width: 100%;
  max-width: 440px;
  padding: 48px 44px;
  position: relative;
  z-index: 1;
}
.auth-card--center { text-align: center; }

/* Logo in auth card: full width, centred */
.auth-logo {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-logo img {
  height: 40px;
  width: auto;
}

.auth-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.auth-subtitle {
  color: var(--text-light);
  font-size: 0.88rem;
  margin-bottom: 28px;
  line-height: 1.55;
}

/* --- Auth State -------------------------------------------- */
.auth-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.auth-state p { color: var(--text-light); }
.auth-state h2 { color: var(--charcoal); font-size: 1.3rem; }
.auth-state--error h2 { color: var(--error); }

/* --- Alerts ------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-error   { background: #fff1f0; color: #8a1500; border: 1px solid #ffc9c0; }
.alert svg     { flex-shrink: 0; margin-top: 2px; }

/* Alert variant with an inline action button (e.g. "Send code via email"
   in the SMS-failure banner). Stacks the message + button vertically. */
.alert--with-action { flex-direction: column; align-items: stretch; }
.alert--with-action .alert__row { display: flex; align-items: flex-start; gap: 10px; }
.alert--with-action .alert__action { margin-top: 12px; }
.alert--with-action .alert__action .btn-primary { margin-bottom: 0; }

/* --- Forms ------------------------------------------------- */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--charcoal);
  margin-bottom: 7px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: 'Barlow', sans-serif;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(222,58,0,0.10);
}
.form-control.is-invalid { border-color: var(--error); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(204,34,0,0.12); }
.field-error {
  display: block;
  color: var(--error);
  font-size: 0.8rem;
  margin-top: 5px;
}

/* Captcha */
.captcha-row { display: flex; gap: 12px; align-items: center; }
.captcha-question {
  background: var(--charcoal);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 400;
  font-family: 'Courier New', monospace;
  padding: 10px 16px;
  border-radius: var(--radius);
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}
.captcha-input { max-width: 90px; text-align: center; }

/* --- Buttons ----------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 42px;
  background: var(--orange);
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-primary:hover:not(:disabled) {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #ffffff;
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-full { width: 100%; }

/* --- Spinner ----------------------------------------------- */
.spinner {
  width: 18px; height: 18px;
  animation: spin 0.8s linear infinite;
}
.spinner circle {
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
}
.spinner--lg { width: 40px; height: 40px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spinner { display: inline-flex; align-items: center; gap: 8px; }
.btn-spinner-label { font-size: 0.9rem; font-weight: 400; letter-spacing: 0.02em; }
.btn-spinner-label:empty { display: none; }
.btn-primary .spinner circle,
.btn-action .spinner circle  { stroke: #ffffff; }
.btn-stop .spinner circle    { stroke: var(--orange); }

/* --- Page Header ------------------------------------------- */
.page-header { margin-bottom: 24px; }
.page-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.page-title--sm { font-size: 1.35rem; }
.page-subtitle { color: var(--text-light); font-size: 0.88rem; margin-top: 4px; }
.page-header__actions { display: flex; align-items: center; gap: 12px; }

.data-badge {
  background: var(--charcoal);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 400;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.admin-badge {
  background: var(--orange);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 400;
  padding: 4px 11px;
  border-radius: 20px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --- Card -------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--grey-200);
  overflow: hidden;
  margin-bottom: 24px;
  padding: 20px 24px;
}

/* --- Data Table -------------------------------------------- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.845rem;
  min-width: 800px;
}
.data-table thead tr {
  background: var(--charcoal);
}
.data-table th {
  padding: 11px 14px;
  text-align: left;
  color: rgba(255,255,255,0.85);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--grey-100);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: rgba(222,58,0,0.04) !important; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table td {
  padding: 10px 14px;
  color: var(--text);
  vertical-align: middle;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--grey-50); }
.data-table .col-centre { text-align: center; }

/* --- Status Badges ----------------------------------------- */
.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.73rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-badge--complete,
.status-badge--completed  { background:#dcfce7; color:#166534; }
.status-badge--pending    { background:#fef9c3; color:#854d0e; }
.status-badge--processing { background:#dbeafe; color:#1e40af; }
.status-badge--cancelled,
.status-badge--canceled   { background:#fee2e2; color:#991b1b; }
.status-badge--dispatched { background:#ede9fe; color:#5b21b6; }
.status-badge--hold       { background:#ffedd5; color:#c2410c; }
.status-badge:not([class*="--"]) { background:var(--grey-100); color:var(--grey-700); }

.bool-indicator { font-size: 0.9rem; font-weight: 400; }
.bool-yes { color: var(--success); }
.bool-no  { color: var(--error); }

/* Factory Status multiline display */
.factory-status-current  { font-weight: 500; }
.factory-status-previous { font-size: 0.78rem; color: var(--grey-500); }

/* --- Empty State ------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
}
.empty-state h3 { color: var(--charcoal); font-size: 1.1rem; }
.empty-state p  { color: var(--grey-500); font-size: 0.9rem; }

/* --- Pagination -------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--grey-200);
  background: var(--grey-50);
}
.pagination__info {
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 400;
}
.pagination__controls { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  height: 32px;
  border-radius: var(--radius);
  border: 1.5px solid var(--grey-200);
  background: var(--white);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.page-btn:hover { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.page-btn.active { background: var(--orange); color: #fff; border-color: var(--orange); }
.page-btn.page-ellipsis { border: none; background: transparent; cursor: default; padding: 0 2px; min-width: auto; }
.page-btn.page-ellipsis:hover { background: transparent; color: inherit; }

/* --- Dealer Select ---------------------------------------- */
.dealer-select-card { margin-bottom: 24px; overflow: visible; }
.dealer-select-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.dealer-search-group { flex: 1; min-width: 240px; margin-bottom: 0; }
.dealer-select-btn { height: 44px; white-space: nowrap; flex-shrink: 0; }
.selected-dealer-label { margin-top: 12px; color: var(--text-light); font-size: 0.875rem; }

/* Searchable dropdown */
.searchable-select-wrapper { position: relative; }
.dealer-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1000;
  list-style: none;
}
.dealer-dropdown li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--grey-100);
  transition: background var(--transition);
}
.dealer-dropdown li:last-child { border-bottom: none; }
.dealer-dropdown li:hover,
.dealer-dropdown li.highlighted { background: rgba(222,58,0,0.07); }
.dealer-dropdown .dd-name  { font-size: 0.875rem; font-weight: 400; color: var(--charcoal); }
.dealer-dropdown .dd-email { font-size: 0.77rem; color: var(--text-light); }

/* Email badge (locked dealer display) */
.dealer-email-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.74rem;
  background: var(--grey-100);
  color: var(--text-light);
  font-weight: 400;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Change dealer ghost link */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-light);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ================================================================
   Admin / Orders — Step panels
   ================================================================ */
.card--table { padding: 0; }
.card--dealer { overflow: visible; }

.step-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.step-row--inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.step-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.step-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-light);
  font-weight: 400;
}
.step-value {
  font-size: 0.95rem;
  color: var(--charcoal);
  font-weight: 400;
}
.step-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.dealer-select-group { flex: 1; min-width: 220px; }
.dealer-select-group label {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 6px;
}

/* Action card */
.step-row--actions { gap: 12px; }
.action-sep {
  font-size: 0.82rem;
  color: var(--grey-500);
  font-style: italic;
  flex-shrink: 0;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  height: 40px;
  background: var(--charcoal);
  color: #fff;
  border: 1.5px solid var(--charcoal);
  border-radius: var(--radius);
  font-size: 0.855rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.btn-action svg { flex-shrink: 0; }
.btn-action:hover:not(:disabled) { background: var(--charcoal-3); border-color: var(--charcoal-3); }
.btn-action--current { background: var(--orange); border-color: var(--orange); }
.btn-action--current:hover:not(:disabled) { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-action:disabled { opacity: 0.45; cursor: not-allowed; }

/* Stop button */
.btn-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 40px;
  background: #fff;
  color: var(--orange);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius);
  font-size: 0.845rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-stop:hover { background: var(--orange); color: #fff; }
.btn-stop svg { flex-shrink: 0; }
.btn-stop:disabled { opacity: 1 !important; cursor: pointer !important; }

/* Button groups */
.dealer-btn-group,
.search-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Results header */
.results-header { margin: 4px 0 8px; }
.results-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.results-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--charcoal);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pagination loading */
.pagination__loading {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-light);
}
.pagination__loading .spinner circle { stroke: var(--orange); }
.pg-stop { height: 32px; padding: 0 12px; font-size: 0.78rem; }

/* Table hint */
.table-hint {
  padding: 12px 20px 2px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--charcoal);
  font-style: normal;
}

/* Clickable row */
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover { background: rgba(222,58,0,0.05) !important; }

/* --- Row Detail Modal ------------------------------------------ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 0.17s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--charcoal);
  color: #fff;
  border-bottom: 2px solid var(--orange);
  flex-shrink: 0;
}
.modal__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.modal__subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.modal__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  line-height: 0;
  transition: color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.modal__close:hover { color: #fff; background: rgba(255,255,255,0.1); }

.modal__body { overflow-y: auto; flex: 1; }

/* Shipping Details panel (shown at top of modal, above the detail grid) */
.modal__shipping {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  margin: 0;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
  border-left: 3px solid var(--orange);
}
.modal__shipping-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.modal__shipping-value {
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.4;
}

.detail-table { width: 100%; border-collapse: collapse; }
.detail-table tr { border-bottom: 1px solid var(--grey-100); }
.detail-table tr:last-child { border-bottom: none; }
.detail-table tr:nth-child(even) { background: var(--grey-50); }
.detail-table td { padding: 10px 20px; font-size: 0.865rem; vertical-align: top; line-height: 1.5; }
.detail-table td:first-child {
  width: 42%;
  font-weight: 400;
  color: var(--charcoal);
  white-space: nowrap;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.detail-table td:last-child { color: var(--text); word-break: break-word; }
.detail-table .detail-empty { color: var(--grey-500); font-style: italic; }

.tracking-link {
  color: var(--orange);
  text-decoration: underline;
  font-weight: 400;
  transition: color 0.15s;
}
.tracking-link:hover { color: var(--orange-light); }

/* Products panel (rendered at the bottom of the modal body) */
.modal__products {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--grey-200);
  background: #fff;
}
.modal__products-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.modal__products-loading,
.modal__products-empty {
  font-size: 0.85rem;
  color: var(--grey-500);
  font-style: italic;
  padding: 6px 0 2px;
}
.products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.products-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  padding: 8px 10px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}
.products-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--grey-100);
  color: var(--text);
  vertical-align: top;
  word-break: break-word;
}
.products-table tbody tr:last-child td { border-bottom: none; }
.products-table tbody tr:nth-child(even) { background: var(--grey-50); }
.products-table .products-table__qty { text-align: right; white-space: nowrap; width: 70px; }

@media (max-width: 480px) {
  .modal__products { padding: 12px 14px 16px; }
  .products-table thead th, .products-table tbody td { padding: 7px 8px; font-size: 0.78rem; }
}

.modal__footer {
  padding: 14px 24px;
  border-top: 1px solid var(--grey-200);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--grey-50);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .main-content { padding: 20px 16px; }
  .auth-card { padding: 32px 24px; }
  .page-header__inner { flex-direction: column; align-items: flex-start; }
  .dealer-select-row { flex-direction: column; align-items: stretch; }
  .dealer-select-btn { width: 100%; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 0.8rem; }
  .pagination { flex-direction: column; align-items: flex-start; }
  .site-footer__inner { flex-direction: column; text-align: center; gap: 6px; }
  .footer-right { justify-content: center; }
  .site-footer__attribution { text-align: center; }
}

@media (max-width: 700px) {
  .step-row--actions { flex-direction: column; align-items: flex-start; }
  .step-row--inline  { flex-direction: column; align-items: flex-start; }
  .step-row--inline input[type=text] { width: 100% !important; }
  .step-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  :root { --header-h: 58px; }
  .auth-card { padding: 28px 18px; max-width: 100%; border-radius: 0; }
  .auth-wrapper { padding: 0; align-items: stretch; }
  .captcha-row { flex-direction: column; align-items: flex-start; }
  .captcha-input { max-width: 100%; }
  .modal { max-width: 100%; border-radius: var(--radius); }
  .detail-table td:first-child { width: 48%; }
  .modal__header { padding: 14px 16px; }
  .detail-table td { padding: 9px 14px; }
}

@media (max-width: 600px) {
  .order-search-row { flex-direction: column; align-items: stretch; }
  .search-mode-toggle { width: 100%; }
  .toggle-btn { flex: 1; text-align: center; }
  .order-id-input { max-width: 100%; }
  .search-submit-btn { width: 100%; justify-content: center; }
}

/* Dealer dropdown keyboard navigation */
.dealer-dropdown li.highlighted {
  background: rgba(222,58,0,0.08);
}
.dealer-dropdown li.highlighted .dd-name,
.dealer-dropdown li.highlighted .dd-email { color: var(--charcoal); }

/* Logo text fallback (unused but kept safe) */
.logo-text-fallback {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Dealer code badge ───────────────────────────────────────────── */
.dealer-code-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(222,58,0,0.10);
  color: var(--orange);
  border: 1px solid rgba(222,58,0,0.25);
  margin-left: 6px;
}

/* ── Impersonate button ──────────────────────────────────────────── */
.btn-impersonate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 400;
  cursor: pointer;
  border: 1.5px solid var(--orange);
  background: transparent;
  color: var(--orange);
  transition: background var(--transition), color var(--transition);
}
.btn-impersonate:hover {
  background: var(--orange);
  color: #fff;
}

/* ── Impersonation nav badge + exit button ───────────────────────── */
.nav-impersonate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 400;
  background: rgba(222,58,0,0.18);
  color: #ff9060;
  border: 1px solid rgba(222,58,0,0.35);
  white-space: nowrap;
  max-width: 360px;
}
.nav-impersonate-badge .badge-name {
  font-weight: 400;
  color: #ffb090;
}
.nav-impersonate-badge .badge-code {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(222,58,0,0.25);
  border-radius: 3px;
  padding: 1px 5px;
}
.nav-exit-impersonate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 400;
  border: 1.5px solid rgba(222,58,0,0.5);
  color: #ff9060;
  background: rgba(222,58,0,0.10);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-exit-impersonate:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

/* ── Dealer dropdown code column ─────────────────────────────────── */
.dd-code {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(222,58,0,0.08);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ── Data disclaimer footnote ───────────────────────────────────────── */
.data-disclaimer {
  margin-top: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(222,58,0,0.3);
  border-left: 4px solid var(--orange);
  background: rgba(222,58,0,0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.84rem;
  color: var(--charcoal);
  line-height: 1.6;
}
.data-disclaimer span:first-child {
  color: var(--orange);
  font-weight: 400;
  white-space: nowrap;
}
.data-disclaimer strong { color: var(--charcoal); font-weight: 400; }

/* ── Export buttons ─────────────────────────────────────────────────── */
.export-bar {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 400;
  cursor: pointer;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--charcoal);
  transition: background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.btn-export:hover { background: var(--grey-50); border-color: var(--charcoal); }
.btn-export--excel { border-color: #1d6f42; color: #1d6f42; }
.btn-export--excel:hover { background: #f0faf4; border-color: #1d6f42; }
.btn-export--pdf   { border-color: #b91c1c; color: #b91c1c; }
.btn-export--pdf:hover   { background: #fef2f2; border-color: #b91c1c; }

/* Modal export bar */
.modal__export-bar {
  display: flex;
  gap: 8px;
  padding: 8px 24px 0;
  justify-content: flex-end;
}

/* ── Error status code badge ─────────────────────────────────────── */
.error-code-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
}
.error-code-badge span {
  font-size: 3rem;
  font-weight: 400;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ── Modal dealer info line ─────────────────────────────────────── */
.modal__dealer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.modal-dealer-name {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
}
/* dealer-code-badge inside modal header — override colours for dark bg */
.modal__header .dealer-code-badge {
  background: rgba(222,58,0,0.30);
  color: #ffb090;
  border-color: rgba(222,58,0,0.45);
}

/* ── Login confirmation state ───────────────────────────────────── */
.login-sent-alert {
  margin-top: 8px;
  margin-bottom: 0;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
}
.login-sent-alert svg { flex-shrink: 0; margin-top: 2px; }
.login-sent-alert i { font-style: italic; color: #14532d; }
.login-sent-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--charcoal);
  font-size: 0.9rem;
  font-weight: 400;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(222, 58, 0, 0.04);
}
.btn-full {
  width: 100%;
}

/* ── OTP Input ── */
.otp-input {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 6px;
  font-family: 'Courier New', monospace;
  padding: 14px 16px;
}
.otp-input::placeholder {
  letter-spacing: 6px;
  font-weight: 400;
  color: #bbb;
}
.otp-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.otp-change-email {
  font-size: 0.85rem;
  text-align: center;
}

/* Delivery method choice (email vs SMS) */
.delivery-choice-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.delivery-option {
  cursor: pointer;
}
.delivery-option input[type="radio"] {
  display: none;
}
.delivery-option__body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px solid var(--grey-200);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.delivery-option input[type="radio"]:checked + .delivery-option__body {
  border-color: var(--orange);
  background: rgba(222, 58, 0, 0.04);
}
.delivery-option__body:hover {
  border-color: var(--orange-light);
}
.delivery-option__body svg {
  flex-shrink: 0;
  color: var(--grey-500);
}
.delivery-option input[type="radio"]:checked + .delivery-option__body svg {
  color: var(--orange);
}
.delivery-option__body strong {
  font-size: 0.92rem;
  color: var(--charcoal);
}
.delivery-option__detail {
  font-size: 0.8rem;
  color: var(--grey-500);
}

/* ============================================================
   User Management Page
   ============================================================ */

/* Alerts */
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }
.alert--success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.alert--error   { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.alert svg { flex-shrink: 0; }

/* Card title */
.card__title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 400; color: var(--charcoal); margin: 0 0 20px; }
.count-badge { background: var(--grey-100); color: var(--grey-700); font-size: 0.78rem; font-weight: 400; padding: 2px 8px; border-radius: 10px; }

/* Role summary boxes */
.user-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.user-stat {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--grey-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  /* Tiles are now clickable <a> elements that filter the grid */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.user-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Loading state — shown while a role-tile click is navigating to the
   filtered page so the operator gets feedback the click was registered. */
.user-stat { position: relative; }
.user-stat__loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-lg);
}
.user-stat__loading .spinner circle { stroke: var(--orange); }
.user-stat--loading { pointer-events: none; }
.user-stat--loading .user-stat__loading { display: flex; }
/* Sibling tiles dim a touch while another is loading, so the active one
   is the visual focus. */
.user-stats--loading .user-stat:not(.user-stat--loading) {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--transition);
}
/* Active filter state — solid coloured outline so the operator knows which
   tile is currently driving the visible grid. The accent colour is
   inherited from the role-specific border-left rules below. */
.user-stat--active {
  box-shadow: 0 0 0 2px currentColor inset, var(--shadow-md);
}
.user-stat--admin.user-stat--active  { color: #e65100; }
.user-stat--cs.user-stat--active     { color: #1565c0; }
.user-stat--dealer.user-stat--active { color: var(--grey-500); }
.user-stat--active .user-stat__value,
.user-stat--active .user-stat__label { color: var(--charcoal); }

/* "Clear filter" pill rendered next to the count badge */
.role-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 400;
  background: var(--grey-100);
  color: var(--grey-700);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.role-filter-clear:hover { background: var(--grey-200); color: var(--charcoal); }
.role-filter-clear svg { opacity: 0.7; }
.user-stat__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-700);
  overflow: hidden;
  padding: 8px;
}
.user-stat__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.user-stat__body { display: flex; flex-direction: column; }
.user-stat__value { font-size: 2rem; font-weight: 400; line-height: 1.1; color: var(--charcoal); }
.user-stat__label { font-size: 0.85rem; color: var(--grey-700); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

.user-stat--admin  { border-left-color: #e65100; }
.user-stat--admin  .user-stat__icon { background: #fff3e0; color: #e65100; }
.user-stat--cs     { border-left-color: #e65100; }
.user-stat--cs     .user-stat__icon { background: #e3f2fd; color: #1565c0; }
.user-stat--dealer { border-left-color: var(--orange); }
.user-stat--dealer .user-stat__icon { background: #e1e1e1; color: var(--orange); }

.field-optional { color: var(--grey-500); font-weight: 400; font-size: 0.78rem; }
.field-hint { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--grey-500); }
.form-control:invalid:not(:placeholder-shown) { border-color: var(--error); }

/* Add user form grid */
.user-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 24px; }
.user-form-field { display: flex; flex-direction: column; gap: 6px; }
.user-form-field label { font-size: 0.82rem; font-weight: 400; color: var(--grey-700); }
.user-form-actions { padding-top: 4px; }

/* ── Inline mobile verification (VERIFY button + OTP panel) ──────── */
/* Native [hidden] is overridden by display: inline-flex / flex on these
   bespoke elements, so reinforce it explicitly. */
.btn-verify[hidden],
.mobile-verified-badge[hidden],
.mobile-verify-panel[hidden],
.mobile-verify-error[hidden] { display: none !important; }

.mobile-verify-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mobile-verify-row .form-control { flex: 1 1 auto; }

/* VERIFY button — matches the .btn-ghost styling used by Cancel so the
   pair reads as "secondary" affordances rather than primary actions. */
.btn-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-light);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.btn-verify:hover    { border-color: var(--orange); color: var(--orange); }
.btn-verify:disabled { opacity: 0.6; cursor: wait; }
.btn-verify .btn-spinner svg circle { stroke: var(--text-light); }
.btn-verify:hover .btn-spinner svg circle { stroke: var(--orange); }

/* Small "ghost" sibling (Resend) — same height as Confirm */
.btn-sm { padding: 0 12px; font-size: 0.82rem; }

.mobile-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e8f5e9;
  color: #2e7d32;
}
.mobile-verified-badge svg { stroke: #2e7d32; }

.mobile-verify-panel {
  margin-top: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}
.mobile-verify-panel__hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--grey-700);
  line-height: 1.5;
}
.mobile-verify-panel__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mobile-verify-panel__row .otp-input {
  flex: 0 1 180px;
  font-size: 1rem;
  letter-spacing: 6px;
  text-align: center;
}
.mobile-verify-panel__row .btn-primary,
.mobile-verify-panel__row .btn-ghost { flex: 0 0 auto; }
.mobile-verify-panel__error,
.mobile-verify-error {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fff1f0;
  border: 1px solid #ffc9c0;
  border-radius: var(--radius);
  color: #8a1500;
  font-size: 0.82rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.mobile-verify-error svg { flex-shrink: 0; margin-top: 1px; }

/* In the Edit modal, the row needs the verify-row to align under the
   smaller column width but still remain side-by-side. */
.edit-form-group .mobile-verify-row { flex-wrap: wrap; }
.edit-form-group .mobile-verify-panel__row { flex-wrap: wrap; }

/* Users data table */
.data-table--users { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table--users thead th { background: var(--grey-50); padding: 10px 14px; text-align: left; font-weight: 400; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--grey-700); border-bottom: 2px solid var(--grey-200); white-space: nowrap; }
.data-table--users tbody td { padding: 10px 14px; border-bottom: 1px solid var(--grey-100); vertical-align: middle; }

/* Filter row inside users table header */
.data-table--users .filter-row td {
  padding: 6px 14px 10px;
  background: var(--grey-50);
  border-bottom: 2px solid var(--grey-200);
}
/* Filter row inside the orders grid (shared .data-table class) — tighter padding
   because the orders grid has many more columns than the users grid. */
.data-table .filter-row td {
  padding: 6px 8px 10px;
  background: var(--grey-50);
  border-bottom: 2px solid var(--grey-200);
  vertical-align: middle;
}
.filter-select, .filter-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.filter-select:focus, .filter-input:focus {
  border-color: var(--orange);
}
.filter-input::placeholder { color: var(--grey-400); }
/* Small hint shown next to "Click any row to view full details." when active
   filters are hiding some of the rendered rows. */
.filter-count-hint { color: var(--grey-600); font-size: 0.85rem; font-style: italic; }
.data-table--users tbody tr:hover { background: var(--grey-50); }
.data-table--users .row-disabled td { opacity: 0.55; }
.data-table--users .col-email { font-weight: 400; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table--users .col-mobile { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.86rem; }
.data-table--users .col-date { white-space: nowrap; color: var(--grey-500); font-size: 0.82rem; }
.data-table--users .col-actions { text-align: center; white-space: nowrap; width: 90px; }

/* Role badges */
.role-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 400; white-space: nowrap; }
.role-badge--0 { background: #fff3e0; color: #e65100; } /* Admin */
.role-badge--1 { background: #e3f2fd; color: #1565c0; } /* Customer Service */
.role-badge--2 { background: var(--grey-100); color: var(--grey-700); } /* Dealer */

/* Status dots */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.status-dot--active   { background: #4caf50; }
.status-dot--disabled { background: #bdbdbd; }

/* Protected badge */
.protected-badge { display: inline-flex; align-items: center; margin-left: 4px; color: var(--grey-500); vertical-align: middle; }

/* Icon buttons for edit/delete */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--grey-200); border-radius: var(--radius); background: transparent; cursor: pointer; transition: all 0.15s; color: var(--grey-500); }
.btn-icon:hover { border-color: var(--grey-300); }
.btn-icon--edit:hover   { color: #1565c0; border-color: #90caf9; background: #e3f2fd; }
.btn-icon--delete:hover { color: #c62828; border-color: #ef9a9a; background: #ffebee; }
.actions-readonly { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--grey-300); }

/* ── Toast notification modal ──────────────────────────────────────── */
.modal--toast {
  max-width: 400px;
  text-align: center;
  padding: 32px 28px 24px;
  border-radius: var(--radius-lg);
}
.toast-modal__icon { margin-bottom: 16px; }
.modal--toast-success .toast-modal__icon { color: var(--success); }
.modal--toast-error .toast-modal__icon   { color: var(--error); }
.toast-modal__message {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 24px;
}
.modal--toast .btn-primary { margin-top: 0; }
#toastCountdown {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-left: 4px;
}

/* ── Confirmation modal (Add / Edit / Delete user) ────────────────── */
/* The confirmation overlay must sit above any other modal that might
   be open behind it (e.g. the Edit user modal) so it isn't visually
   trapped underneath when Save triggers the confirm step. */
#confirmModalOverlay { z-index: 2100; }
.modal--confirm { max-width: 520px; }
.modal--confirm .modal__body { padding: 22px 28px; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.modal--confirm .modal__body p { margin: 0 0 12px; }
.modal--confirm .modal__body p:last-child { margin-bottom: 0; }
.confirm-details {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.confirm-details dt {
  font-weight: 500;
  color: var(--grey-700);
}
.confirm-details dd {
  margin: 0;
  color: var(--charcoal);
  word-break: break-word;
}
.confirm-details em { color: var(--grey-500); font-style: italic; }
.confirm-code { color: var(--grey-500); font-size: 0.82rem; }
.confirm-changes {
  margin: 8px 0 14px;
  padding-left: 22px;
  font-size: 0.88rem;
  color: var(--charcoal);
}
.confirm-changes li { margin-bottom: 4px; word-break: break-word; }
.confirm-changes em { color: var(--grey-500); font-style: italic; }
.confirm-nochange {
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #ffe0a3;
  border-radius: var(--radius);
  color: #6b5215;
  font-size: 0.88rem;
}
.confirm-otp-note {
  padding: 10px 12px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: var(--radius);
  color: #0d47a1;
  font-size: 0.86rem;
}
.btn-danger {
  background: #c62828 !important;
  color: #fff !important;
  border-color: #c62828 !important;
}
.btn-danger:hover { background: #a31919 !important; border-color: #a31919 !important; }

/* ── Mobile-OTP modal (Add/Edit user awaiting SMS confirmation) ───── */
.modal--otp { max-width: 460px; }
.modal--otp .modal__header { padding: 18px 28px; }
.modal--otp .modal__body { padding: 22px 28px 24px; font-size: 0.92rem; line-height: 1.55; color: var(--text); }
.modal--otp .modal__body p { margin: 0 0 10px; }
.modal--otp .otp-helper { color: var(--grey-700); font-size: 0.88rem; }
.modal--otp .otp-input { letter-spacing: 8px; text-align: center; font-size: 1.2rem; }

/* Edit modal override */
.modal--edit-user { max-width: 480px; }
.modal--edit-user .modal__header { padding: 18px 32px; }
.modal--edit-user .modal__body { padding: 32px 32px; }
.modal--edit-user .modal__footer { padding: 16px 32px; }
.edit-form-group { margin-bottom: 24px; }
.edit-form-group:last-child { margin-bottom: 12px; }
.edit-form-group label { display: block; font-size: 0.82rem; font-weight: 400; color: var(--grey-700); margin-bottom: 6px; }
.edit-email-display { display: block; padding: 10px 14px; font-weight: 400; color: var(--charcoal); font-size: 0.92rem; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; font-weight: 400; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange); cursor: pointer; }

/* Empty state */
.empty-state { text-align: center; padding: 32px; color: var(--grey-500); font-style: italic; }

/* ── Database connection error banner ─────────────────────────────── */
.db-error-banner {
  display: flex;
  gap: 18px;
  padding: 24px 28px;
  margin: 0 0 24px;
  background: #fff8f6;
  border: 1px solid #ffcabc;
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
}
.db-error-banner__icon { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.db-error-banner__body { flex: 1; }
.db-error-banner__title { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--charcoal); }
.db-error-banner__message { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.5; color: var(--grey-700); }
.db-error-banner__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.btn-report-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 400;
  color: #fff;
  background: var(--orange);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-report-error:hover { background: var(--orange-dark, #c03200); }
.btn-report-error:disabled { opacity: 0.6; cursor: not-allowed; }

.db-error-banner__sent {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: #2e7d32;
}

/* Responsive */
@media (max-width: 768px) {
  .user-form-grid { grid-template-columns: 1fr; }
  .user-stats { grid-template-columns: 1fr; gap: 12px; }
  .user-stat { padding: 16px 18px; }
  .user-stat__icon { width: 44px; height: 44px; }
  .user-stat__value { font-size: 1.6rem; }
  .data-table--users { font-size: 0.82rem; }
  .data-table--users thead th,
  .data-table--users tbody td { padding: 8px 10px; }
  .db-error-banner { flex-direction: column; gap: 12px; padding: 18px 20px; }
}