:root {
  --wp-sidebar-bg: #1d2327;
  --wp-sidebar-bg-hover: #2c3338;
  --wp-sidebar-active: #2271b1;
  --wp-sidebar-text: #c3c4c7;
  --wp-sidebar-text-active: #ffffff;
  --wp-topbar-bg: #ffffff;
  --wp-content-bg: #f0f0f1;
  --wp-border: #dcdcde;
  --wp-accent: #2271b1;
  --wp-sidebar-width: 240px;
}

/* Legacy variable declarations above are superseded by the red/near-black
   theme block appended at the end of this file (later rules win for
   custom properties, same as any CSS cascade) — kept here rather than
   edited in place so the history of this file stays traceable. */

* { box-sizing: border-box; }

body {
  background-color: var(--wp-content-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1d2327;
  margin: 0;
}

.wp-wrap {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.wp-sidebar {
  width: var(--wp-sidebar-width);
  background: var(--wp-sidebar-bg);
  color: var(--wp-sidebar-text);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 1030;
}

.wp-sidebar-brand {
  padding: 18px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-nav {
  padding: 8px 0;
}

.wp-nav-link, .wp-nav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  color: var(--wp-sidebar-text);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 0.92rem;
  cursor: pointer;
  text-align: left;
}

.wp-nav-link:hover, .wp-nav-toggle:hover {
  background: var(--wp-sidebar-bg-hover);
  color: #fff;
}

.wp-nav-link.active, .wp-nav-toggle.active {
  background: var(--wp-sidebar-active);
  color: #fff;
}

.toggle-arrow { transition: transform 0.2s ease; font-size: 0.75rem; }
.wp-nav-toggle.open .toggle-arrow { transform: rotate(180deg); }

.wp-nav-link.wp-nav-locked {
  opacity: 0.5;
  cursor: pointer;
}
.wp-nav-link.wp-nav-locked:hover {
  background: none;
  color: var(--wp-sidebar-text);
  opacity: 0.7;
}
.wp-premium-icon {
  margin-left: auto;
  font-size: 0.8rem;
  color: #c0c4cc;
}
.btn-premium-locked {
  opacity: 0.55;
  cursor: pointer;
}
.btn-premium-locked:hover {
  opacity: 0.9;
}

.wp-submenu {
  display: none;
  flex-direction: column;
  background: var(--wp-sidebar-bg);
}

.wp-submenu.show { display: flex; }

.wp-submenu a {
  padding: 9px 20px 9px 48px;
  color: var(--wp-sidebar-text);
  text-decoration: none;
  font-size: 0.87rem;
  font-weight: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-submenu a:hover {
  color: #fff;
  background: var(--wp-sidebar-bg-hover);
}

.wp-submenu a.wp-nav-locked {
  opacity: 0.5;
}
.wp-submenu a.wp-nav-locked:hover {
  opacity: 0.7;
  color: var(--wp-sidebar-text);
  background: none;
}

.wp-nav-divider {
  border: none;
  border-top: 1px solid #b9c6e0;
  margin: 8px 20px;
}

/* Main column */
.wp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wp-topbar {
  background: var(--wp-topbar-bg);
  border-bottom: 1px solid var(--wp-border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.wp-topbar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1d2327;
}

.wp-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wp-sidebar-burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #1d2327;
}

.wp-screen-options-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: none;
  border: 1px solid var(--wp-border);
  border-radius: 4px;
  color: #50575e;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background-color var(--transition, 150ms ease), color var(--transition, 150ms ease);
}
.wp-screen-options-btn:hover,
.wp-screen-options-btn[aria-expanded="true"] {
  background: #f6f7f7;
  color: var(--wp-accent);
}
.wp-screen-options-panel {
  padding: 16px 24px;
  background: #f6f7f7;
  border-bottom: 1px solid var(--wp-border);
}
.wp-screen-options-intro {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #50575e;
}
.wp-screen-options-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.wp-screen-options-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  color: #1d2327;
  cursor: pointer;
}
body.theme-dark .wp-screen-options-panel {
  background: #23272b;
  border-color: #43494f;
}
body.theme-dark .wp-screen-options-intro {
  color: #a6acc0;
}
body.theme-dark .wp-screen-options-check {
  color: #e6e8ea;
}
body.theme-dark .wp-screen-options-btn {
  color: #a6acc0;
}
body.theme-dark .wp-screen-options-btn:hover,
body.theme-dark .wp-screen-options-btn[aria-expanded="true"] {
  background: #2c3136;
}

.dash-greeting-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #b0b5c0;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color var(--transition, 150ms ease), color var(--transition, 150ms ease);
}
.dash-greeting-dismiss:hover {
  background: rgba(0,0,0,0.06);
  color: #50575e;
}

.wp-topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--wp-border);
  border-radius: 50%;
  color: #1d2327;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color var(--transition, 150ms ease), color var(--transition, 150ms ease);
}
.wp-topbar-icon-btn:hover {
  background: #f6f7f7;
  color: var(--wp-accent);
  text-decoration: none;
}
.wp-badge-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid #fff;
}

/* Topbar quick actions (New Ticket / New Sale) - same pill shape and
   restrained, outline-first language as the account button and icon
   buttons right next to them, not generic filled Bootstrap buttons. */
.wp-quick-action {
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--wp-border);
  border-radius: 20px;
  background: none;
  color: #1d2327;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition);
}
.wp-quick-action:hover {
  background: #f6f7f7;
  border-color: color-mix(in srgb, var(--wp-accent) 40%, var(--wp-border));
  box-shadow: var(--shadow-sm);
  color: #1d2327;
}
.wp-quick-action-accent {
  border-color: color-mix(in srgb, var(--wp-accent) 35%, var(--wp-border));
  color: var(--wp-accent);
}
.wp-quick-action-accent:hover {
  background: color-mix(in srgb, var(--wp-accent) 8%, transparent);
  border-color: var(--wp-accent);
  color: var(--wp-accent);
}
.wp-key-cap {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.06);
  color: inherit;
  opacity: 0.75;
}
.wp-quick-action-accent .wp-key-cap {
  background: color-mix(in srgb, var(--wp-accent) 14%, transparent);
}
body.theme-dark .wp-quick-action { color: #e6e8ea; border-color: #43494f; }
body.theme-dark .wp-quick-action:hover { background: #2c3136; color: #e6e8ea; }
body.theme-dark .wp-key-cap { background: rgba(255,255,255,0.1); }

/* Plan indicator, between New Ticket and New Sale - deliberately more
   muted than the two action buttons either side of it, since this is
   informational (which plan this shop is on), not an action. Clickable
   to Billing for admins only, matching that page's own access rule. */
.wp-plan-badge {
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--wp-accent) 6%, transparent);
  color: var(--wp-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
a.wp-plan-badge:hover {
  background: color-mix(in srgb, var(--wp-accent) 12%, transparent);
  color: var(--wp-accent);
  text-decoration: none;
}
.wp-plan-badge i { font-size: 0.72rem; }
body.theme-dark .wp-plan-badge { background: color-mix(in srgb, var(--wp-accent) 16%, transparent); }

.wp-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--wp-border);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  font-size: 0.88rem;
  color: #1d2327;
}

.wp-account-btn:hover {
  background: #f6f7f7;
}

.wp-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.wp-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp-accent);
  color: #fff;
  font-size: 1rem;
}

.wp-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--wp-border);
}

.wp-content {
  padding: 24px;
  flex: 1;
}

.wp-footer {
  text-align: center;
  color: #8c8f94;
  padding: 16px;
  border-top: 1px solid var(--wp-border);
  background: var(--wp-topbar-bg);
}

/* Cards */
.card {
  border: 1px solid var(--wp-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Bootstrap's .card is display:flex with the default align-items:stretch,
   which silently stretches any button/link that's a direct child (not
   wrapped in its own container) to the card's full width - not what a
   compact action button inside a card's body text should ever look like. */
.card > a.btn,
.card > button.btn {
  align-self: flex-start;
}

.dash-greeting {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #5b6270;
  line-height: 1.25;
}
.dash-greeting-name {
  font-weight: 700;
  color: var(--wp-accent);
}
.dash-trial-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}
.dash-trial-line i {
  color: var(--wp-accent);
  opacity: 0.85;
  font-size: 0.95rem;
}
.dash-trial-pill {
  display: inline-block;
  padding: 1px 9px;
  margin-left: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp-accent) 12%, white);
  color: var(--wp-accent);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0;
}
body.theme-dark .dash-greeting {
  color: #c4c9d6;
}
body.theme-dark .dash-trial-line {
  color: #a6acc0;
}

.stat-card h2 {
  font-weight: 700;
}

.table thead {
  background-color: #f6f7f7;
}

.btn-primary {
  background-color: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-on-accent, #030625);
}

.badge { font-weight: 500; }

/* Social login buttons */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none;
  border: 1px solid var(--wp-border);
  margin-bottom: 8px;
}

.btn-google { background: #fff; color: #1d2327; }
.btn-google:hover { background: #f6f7f7; color: #1d2327; }
.btn-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn-facebook:hover { background: #166fe5; color: #fff; }

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #8c8f94;
  font-size: 0.82rem;
  margin: 16px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--wp-border);
}
.auth-divider:not(:empty)::before { margin-right: .75em; }
.auth-divider:not(:empty)::after { margin-left: .75em; }

/* ============================================================
   Responsive: Tablet & Mobile (<=991px covers tablets and phones;
   a tighter <=575px block below handles phone-only refinements)
   ============================================================ */
@media (max-width: 991px) {
  .wp-sidebar {
    position: fixed;
    left: calc(-1 * var(--wp-sidebar-width) - 20px);
    top: 0;
    transition: left 0.25s ease;
    height: 100vh;
    z-index: 1050;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  }
  .wp-sidebar.open { left: 0; }
  .wp-sidebar-burger { display: flex; align-items: center; justify-content: center; }

  .wp-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .wp-sidebar-backdrop.show { display: block; opacity: 1; }

  body.wp-scroll-locked { overflow: hidden; }

  /* Tighter chrome so more of the actual content is visible */
  .wp-topbar { padding: 10px 14px; gap: 10px; }
  .wp-topbar-title { font-size: 1rem; }
  .wp-content { padding: 14px; }
  .wp-footer { flex-direction: column; gap: 4px; text-align: center; padding: 12px 14px !important; }

  /* Page header rows (title + action buttons) wrap instead of
     overflowing horizontally or squeezing buttons unreadably thin */
  .wp-content > .d-flex.justify-content-between {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .wp-content > .d-flex.justify-content-between > h3,
  .wp-content > .d-flex.justify-content-between > h2 {
    width: 100%;
  }

  /* Card padding: still comfortable, just not oversized on a small screen */
  .card.p-4 { padding: 1.1rem !important; }
  .card.p-5 { padding: 1.25rem !important; }

  /* Touch targets: keep every tap target comfortably sized */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .form-check-input { width: 1.2em; height: 1.2em; }

  /* Note: the dashboard's own stat-card and ticket-card grids already
     use well-chosen responsive column classes (col-md-4, col-sm-6
     col-lg-4 col-xl-3) directly in their markup, so no override is
     needed here - verified against the actual markup, not assumed. */

  /* Sidebar submenu items already have generous tap padding; bump the
     parent toggle rows slightly for easier thumb targeting */
  .wp-nav-link, .wp-nav-toggle { padding-top: 13px; padding-bottom: 13px; }
  .wp-submenu a { padding-top: 11px; padding-bottom: 11px; }
}

@media (max-width: 575px) {
  .wp-content { padding: 10px; }
  .wp-topbar { padding: 8px 10px; }
  .wp-topbar-title { font-size: 0.95rem; }

  /* Account button name is already hidden on phones via a PHP-driven
     class when an avatar photo exists to fall back to (see header.php)
     - intentionally not hidden unconditionally here, since without an
     avatar the button would otherwise show nothing but a caret icon. */
  .wp-account-btn { padding: 4px 10px 4px 4px; }

  .card.p-4, .card.p-4.p-md-5 { padding: 1rem !important; }
  h3 { font-size: 1.3rem; }
  h5 { font-size: 1.05rem; }

  /* Table text a touch smaller so more columns stay legible before
     the horizontal scroll (table-responsive) kicks in */
  .table { font-size: 0.85rem; }
  .table td, .table th { padding: 0.5rem 0.6rem; }

  /* Dense selector grids: paper size cards get a touch more breathing
     room reduced on phones. Business type checkboxes and template
     pickers already collapse correctly via Bootstrap's own row-cols-1
     utility class, already in use on those grids - no override needed. */
  .paper-size-card { padding: 8px 6px; }
  .paper-size-label { font-size: 0.78rem; }
  .paper-size-desc { font-size: 0.68rem; }

  /* Signature pad: shorter on phones so the whole flow (terms + pad +
     buttons) fits without excessive scrolling before the client signs */
  .sign-pad-canvas { height: 160px !important; }
  .sign-terms-box { max-height: 110px; }

  /* Calendar: shorter cells on phones - the table already scrolls
     horizontally (table-responsive + min-width), this just keeps the
     vertical scroll from getting excessive too */
  .calendar-table td { height: 68px; }
  .calendar-job { font-size: 0.65rem; }

  /* Full-width primary actions read better stacked on narrow screens */
  .wp-content > .d-flex.justify-content-between .btn,
  .wp-content > .d-flex.justify-content-between form {
    flex: 1 1 auto;
  }
}

/* Touch-specific: remove hover-only affordances that can get "stuck"
   after a tap on touch devices (no true mouse-out event to clear them) */
@media (hover: none) {
  .card:hover, a:hover > .card, a:hover .card { transform: none; }
  .btn:hover:not(:disabled):not(.btn-link) { transform: none; }
}

.print-only { display: none; }

@media print {
  .wp-sidebar, .wp-topbar, .wp-footer, .no-print { display: none !important; }
  .print-only { display: block !important; }
  .wp-content { padding: 0; }

  /* Bootstrap's .text-muted grey (~#6c757d) reads fine on a screen or a
     laser printer, but thermal print heads render it very faint to
     nearly invisible - this is exactly the invoice/quotation meta info
     (Invoice #, Date, Device, Notes, etc.) that print directly from
     invoices/view.php and quotations/view.php via the browser Print
     button. Tickets never hit this because ticket view.php only uses
     text-muted on admin-only helper text, not the printed document
     itself. Force solid black + semi-bold on print, same density
     approach as the thermal receipt templates - on-screen grey is
     untouched, this rule only applies inside @media print. */
  .text-muted { color: #000 !important; font-weight: 600 !important; }
}

/* Field jobs calendar */
.calendar-table {
  min-width: 700px; /* keeps cells legible; .table-responsive wrapper scrolls below this */
}
.calendar-table td {
  height: 96px;
  width: 14.28%;
  vertical-align: top;
  padding: 4px;
}
.calendar-date {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.calendar-today {
  background: #eef4fb;
}
.calendar-empty {
  background: #fafafa;
}
.calendar-job {
  display: block;
  margin-bottom: 2px;
  font-size: 0.7rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

/* Accent color swatches (Settings page) */
.accent-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  padding: 0;
}
.accent-swatch[aria-pressed="true"] {
  border-color: #1d2327;
  box-shadow: 0 0 0 2px #fff inset;
}

.accent-custom-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--wp-topbar-bg, rgba(0,0,0,0.03));
  border-radius: 8px;
  margin-bottom: 10px;
}
.accent-custom-swatch-label {
  flex-shrink: 0;
  cursor: pointer;
}
.accent-custom-swatch {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--wp-border);
  border-radius: 10px;
  cursor: pointer;
  background: none;
}
.accent-hex-input {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  text-transform: lowercase;
}
body.theme-dark .accent-custom-picker {
  background: #23272b;
}

/* Dark theme */
body.theme-dark {
  background-color: #191c1f;
  color: #d7dade;
}
body.theme-dark .wp-topbar,
body.theme-dark .wp-footer {
  background: #23272b;
  border-color: #33383d;
}
body.theme-dark .wp-topbar-title,
body.theme-dark .wp-sidebar-burger { color: #e6e8ea; }
body.theme-dark .wp-account-btn { color: #e6e8ea; border-color: #43494f; }
body.theme-dark .wp-account-btn:hover { background: #2c3136; }
body.theme-dark .wp-topbar-icon-btn { color: #e6e8ea; border-color: #43494f; }
body.theme-dark .wp-topbar-icon-btn:hover { background: #2c3136; }
body.theme-dark .card {
  background: #23272b;
  border-color: #33383d;
  color: #d7dade;
}
body.theme-dark .table { color: #d7dade; --bs-table-bg: transparent; --bs-table-color: #d7dade; }
body.theme-dark .table thead { background: #2c3136; }
body.theme-dark .table td, body.theme-dark .table th { border-color: #33383d; }
body.theme-dark .table-hover tbody tr:hover { --bs-table-hover-bg: #2c3136; --bs-table-hover-color: #e6e8ea; }
body.theme-dark .form-control, body.theme-dark .form-select {
  background: #2c3136; border-color: #43494f; color: #e6e8ea;
}
body.theme-dark .form-control::placeholder { color: #8b9299; }
body.theme-dark .text-muted, body.theme-dark .form-text { color: #9aa1a8 !important; }
body.theme-dark .list-group-item { background: #23272b; border-color: #33383d; color: #d7dade; }
body.theme-dark .list-group-item-action:hover { background: #2c3136; color: #fff; }
body.theme-dark .alert-light { background: #2c3136; border-color: #43494f; color: #d7dade; }
body.theme-dark .btn-outline-secondary { color: #b7bec4; border-color: #5a6167; }
body.theme-dark .btn-outline-secondary:hover { background: #383e44; color: #fff; }
body.theme-dark .calendar-empty { background: #1f2226; }
body.theme-dark .calendar-today { background: #253141; }
body.theme-dark .modal-content { background: #23272b; color: #d7dade; }

/* Dashboard ticket status cards */
.ticket-status-card {
  border-radius: 6px;
  border: 1px solid var(--wp-border);
  padding: 12px;
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease;
}
.ticket-status-card:hover { transform: translateY(-2px); color: inherit; }
.ticket-card-completed { background: #d1e7dd; border-color: #a3cfbb; }
.ticket-card-cancelled { background: #f8d7da; border-color: #f1aeb5; }
.ticket-card-pending { background: #fff3cd; border-color: #ffe69c; }
.ticket-card-open { background: #ffffff; }
body.theme-dark .ticket-card-completed { background: #14352a; border-color: #1e5c43; color: #d7dade; }
body.theme-dark .ticket-card-cancelled { background: #3d1a1e; border-color: #6e2c33; color: #d7dade; }
body.theme-dark .ticket-card-pending { background: #3c341f; border-color: #6b5d1f; color: #d7dade; }
body.theme-dark .ticket-card-open { background: #23272b; border-color: #33383d; color: #d7dade; }

/* Ticket progress panel */
.progress-step {
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  color: #fff;
  font-weight: 600;
}
.progress-step .step-label { font-size: 0.78rem; font-weight: 400; opacity: 0.9; display: block; }
.progress-step-yes { background: #1e8a3c; }
.progress-step-no { background: #b91c1c; }

/* Customer map */
#customerMap { height: 480px; border-radius: 6px; }

/* Map attribution (required by OpenStreetMap's license) - styled to
   match this app's own design language rather than Leaflet's plain
   default, which has square corners and its own font. The content
   itself (the Leaflet and OpenStreetMap links) is untouched. */
.leaflet-control-attribution {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  border-radius: 6px 0 0 0;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 -1px 3px rgba(0,0,0,0.06);
}
.leaflet-control-attribution a {
  color: var(--wp-accent);
}
body.theme-dark .leaflet-control-attribution {
  background: rgba(35, 39, 43, 0.85);
  color: #c4c9d6;
}
body.theme-dark .leaflet-control-attribution a {
  color: var(--wp-accent);
}

/* Sharper avatar rendering */
.wp-avatar-sm, .wp-avatar-lg {
  image-rendering: -webkit-optimize-contrast;
}

/* Red map pins */
.red-pin-marker {
  background: none;
  border: none;
}
.red-pin-marker i {
  font-size: 30px;
  color: #dc2626;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Location autocomplete dropdown */
.loc-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--wp-border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-height: 240px;
  overflow-y: auto;
}
.loc-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f1;
  font-size: 0.9rem;
  cursor: pointer;
}
.loc-suggestion:hover {
  background: #f0f6fc;
}
body.theme-dark .loc-suggestions { background: #2c3136; border-color: #43494f; }
body.theme-dark .loc-suggestion { color: #d7dade; border-color: #383e44; }
body.theme-dark .loc-suggestion:hover { background: #383e44; }

/* Custom brand logo in sidebar */
.wp-brand-logo {
  max-height: 30px;
  max-width: 120px;
  object-fit: contain;
}

/* Default system logo: wider aspect ratio (wordmark + tagline), sized
   to read clearly in the sidebar header without the white chip — its
   own red icon and dark text already work on the dark sidebar. */
.wp-brand-logo-default {
  max-height: 42px;
  max-width: 180px;
}

/* Custom shop-uploaded logo: wrapped in a white chip. A client's own
   logo could be any color scheme (including dark text meant for a
   white background), so it always gets a light backdrop to guarantee
   visibility against the dark sidebar, regardless of what they upload.
   Capped to a max-width relative to the sidebar itself (not a fixed
   px value) so it reads as a neat badge rather than a wide block,
   regardless of the uploaded logo's own aspect ratio. */
.wp-brand-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 14px;
  max-width: 80%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.wp-brand-logo-chip .wp-brand-logo {
  max-height: 28px;
  max-width: 100%;
}

/* Same white-chip treatment for the login/signup/etc. brand panel,
   which is also a dark background. */
.auth-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.auth-logo-chip img {
  max-height: 56px;
  max-width: 260px;
  object-fit: contain;
}

/* Centered brand logo */
.wp-sidebar-brand--logo {
  justify-content: center;
}

/* Powered-by link */
.powered-by-link {
  color: #BC401E;
  font-weight: 600;
  text-decoration: none;
}
.powered-by-link:hover {
  color: #a33317;
  text-decoration: underline;
}

/* Constrained chart height (Tickets by Status doughnut) */
.chart-box-md {
  position: relative;
  height: 230px;
}

/* Template picker cards (Settings) */
.paper-size-card {
  display: block;
  cursor: pointer;
  border: 2px solid var(--wp-border);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.paper-size-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.paper-size-body { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.paper-size-card i { font-size: 1.3rem; color: #888; margin-bottom: 2px; }
.paper-size-label { font-weight: 600; font-size: 0.85rem; }
.paper-size-desc { font-size: 0.72rem; color: #888; }
.paper-size-card:hover { border-color: color-mix(in srgb, var(--wp-accent) 40%, var(--wp-border)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.paper-size-card input:checked ~ .paper-size-body i,
.paper-size-card input:checked ~ .paper-size-body .paper-size-label {
  color: #030625;
}
.paper-size-card:has(input:checked) {
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-accent) 20%, transparent);
  background: color-mix(in srgb, var(--wp-accent) 6%, transparent);
}

.tpl-card {
  cursor: pointer;
  text-align: center;
}
.tpl-card input { position: absolute; opacity: 0; }
.tpl-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 120px;
  height: 150px;
  padding: 10px;
  background: #fff;
  border: 2px solid var(--wp-border);
  border-radius: 6px;
  transition: border-color 0.15s;
}
.tpl-card input:checked + .tpl-preview {
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-accent) 25%, transparent);
}
.tpl-name { display: block; margin-top: 6px; font-size: 0.85rem; }
.tpl-card input:checked ~ .tpl-name { font-weight: 700; color: #030625; }

.tpl-row { display: flex; justify-content: space-between; }
.tpl-title { width: 45%; height: 10px; background: #1d2327; border-radius: 2px; }
.tpl-title.sm { height: 7px; }
.tpl-meta { width: 30%; height: 8px; background: #c9cdd1; border-radius: 2px; }
.tpl-meta.sm { height: 6px; }
.tpl-header-bar { width: 100%; height: 26px; background: var(--wp-accent); border-radius: 4px 4px 0 0; }
.tpl-line { width: 100%; height: 8px; background: #e3e6e8; border-radius: 2px; }
.tpl-line.thin { height: 5px; }
.tpl-line.short { width: 55%; }
.tpl-grid { width: 100%; height: 26px; background: repeating-linear-gradient(180deg, #f0f2f4 0 8px, #e3e6e8 8px 9px); border-radius: 2px; }
.tpl-total { width: 45%; height: 10px; background: #1e8a3c; border-radius: 2px; margin-left: auto; margin-top: auto; }
.tpl-total.sm { height: 7px; }
.tpl-preview-bordered { border-style: dashed; }
body.theme-dark .tpl-preview { background: #2c3136; }
body.theme-dark .tpl-title { background: #e6e8ea; }

/* ============================================================
   UI/UX Polish Pass — professional feel, consistent hovers,
   dynamic accent-aware interactions throughout the system.
   Appended (not edited in place) so nothing above this line
   changes behavior; these rules refine and extend it.
   ============================================================ */

/* --- Design tokens --- */
:root {
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow: 0 1px 3px rgba(16,24,40,0.07), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 10px 28px rgba(16,24,40,0.12);
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Smooth page-in --- */
.wp-content { animation: rmFadeIn 0.25s var(--transition); }
@keyframes rmFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- Cards: softer, slightly more rounded, consistent shadow scale --- */
.card {
  border-radius: 10px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

/* Clickable cards (a wrapping a .card, e.g. dashboard stat links) lift on hover */
a:hover > .card,
a:hover .card {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--wp-accent) 35%, var(--wp-border));
}

/* --- Buttons: consistent weight, lift + shadow on hover, press feedback --- */
.btn {
  border-radius: 7px;
  font-weight: 500;
  transition: all var(--transition);
}
.btn:hover:not(:disabled):not(.btn-link) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn-primary {
  background-color: var(--wp-accent);
  border-color: var(--wp-accent);
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: color-mix(in srgb, var(--wp-accent) 85%, black);
  border-color: color-mix(in srgb, var(--wp-accent) 85%, black);
  color: var(--wp-on-accent, #030625);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wp-accent) 35%, transparent);
}
.btn-outline-primary {
  color: #030625;
  border-color: var(--wp-accent);
}
.btn-outline-primary:hover {
  background-color: var(--wp-accent);
  border-color: var(--wp-accent);
  color: var(--wp-on-accent, #ffffff);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wp-accent) 25%, transparent);
}
.btn-outline-secondary:hover {
  box-shadow: var(--shadow-sm);
}
.btn-outline-danger:hover, .btn-danger:hover {
  box-shadow: 0 4px 12px rgba(220,53,69,0.25);
}
.btn-link { transition: color var(--transition); }

/* --- Links: subtle, consistent underline-on-hover feel --- */
a { transition: color var(--transition); }
.card a:not(.btn):not(.wp-nav-link):not(.wp-nav-toggle):hover,
.wp-content a:not(.btn):hover {
  text-decoration: underline;
}

/* --- Sidebar: accent indicator bar + smoother hover --- */
.wp-sidebar {
  box-shadow: 2px 0 10px rgba(0,0,0,0.10);
}
.wp-nav-link, .wp-nav-toggle {
  position: relative;
  transition: background-color var(--transition), color var(--transition), padding-left var(--transition);
}
.wp-nav-link::before, .wp-nav-toggle::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--wp-accent);
  transform: scaleY(0);
  transition: transform var(--transition);
}
.wp-nav-link:hover::before, .wp-nav-toggle:hover::before,
.wp-nav-link.active::before, .wp-nav-toggle.active::before {
  transform: scaleY(1);
}
.wp-nav-link:hover, .wp-nav-toggle:hover {
  padding-left: 24px;
}
.wp-submenu a {
  transition: background-color var(--transition), color var(--transition), padding-left var(--transition);
}
.wp-submenu a:hover {
  padding-left: 52px;
}
.wp-sidebar-brand { transition: background-color var(--transition); }

/* --- Topbar --- */
.wp-topbar {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.wp-account-btn {
  transition: all var(--transition);
}
.wp-account-btn:hover {
  border-color: color-mix(in srgb, var(--wp-accent) 40%, var(--wp-border));
  box-shadow: var(--shadow-sm);
}
.wp-sidebar-burger {
  transition: color var(--transition), transform var(--transition);
  border-radius: 6px;
}
.wp-sidebar-burger:hover {
  color: #030625;
}

/* --- Forms: accent-aware focus ring --- */
.form-control, .form-select {
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-accent) 18%, transparent);
}
.form-check-input:focus {
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-accent) 18%, transparent);
}
.form-check-input:checked {
  background-color: color-mix(in srgb, var(--wp-accent) 80%, black);
  border-color: color-mix(in srgb, var(--wp-accent) 80%, black);
}

/* --- Tables: smoother row hover --- */
.table-hover > tbody > tr {
  transition: background-color 120ms ease;
}
.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* --- Dropdowns --- */
.dropdown-menu {
  background: #030625;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.dropdown-item {
  border-radius: 6px;
  color: #c3c9d6;
  transition: background-color var(--transition), color var(--transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--wp-accent);
  color: var(--wp-on-accent, #ffffff);
}
.dropdown-divider {
  border-color: rgba(255,255,255,0.1);
}

/* --- Badges: slightly softer corners --- */
.badge {
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* --- Alerts: refined --- */
.alert {
  border-radius: 8px;
  border: none;
  box-shadow: var(--shadow-sm);
}

/* --- Modals --- */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: var(--shadow-lg);
}

/* --- List group actions --- */
.list-group-item-action {
  transition: background-color var(--transition), padding-left var(--transition);
}
.list-group-item-action:hover {
  padding-left: 18px;
}

/* --- Accent swatches: lift on hover --- */
.accent-swatch {
  transition: transform var(--transition), box-shadow var(--transition);
}
.accent-swatch:hover {
  transform: scale(1.12);
  box-shadow: var(--shadow-md);
}

/* --- Template picker cards: lift on hover, not just on select --- */
.tpl-card .tpl-preview {
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.tpl-card:hover .tpl-preview {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Stat cards --- */
.stat-card {
  transition: box-shadow var(--transition), transform var(--transition);
}

/* --- Calendar job pills --- */
.calendar-job {
  transition: transform var(--transition), box-shadow var(--transition);
  border-radius: 4px;
}
.calendar-job:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

/* --- Location suggestions --- */
.loc-suggestion {
  transition: background-color var(--transition), padding-left var(--transition);
}
.loc-suggestion:hover {
  padding-left: 16px;
}

/* --- Custom scrollbars (WebKit) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c9cdd1;
  border-radius: 10px;
  border: 2px solid var(--wp-content-bg);
}
::-webkit-scrollbar-thumb:hover { background: #a8adb3; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #43494f; border-color: #191c1f; }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #5a6167; }

/* --- Progress steps: subtle hover for interactivity feel --- */
.progress-step { transition: transform var(--transition); }

/* --- Icons inside nav/buttons inherit color transitions automatically via currentColor --- */

/* --- Dark mode companions for new elements --- */
body.theme-dark ::selection { background: color-mix(in srgb, var(--wp-accent) 40%, transparent); }
::selection { background: color-mix(in srgb, var(--wp-accent) 25%, transparent); }

/* ============================================================
   Shared Auth Pages (login, signup, forgot-password, reset-password)
   Split-screen layout: brand panel + form panel. All four auth pages
   use this same shell for a consistent, professional first impression.
   ============================================================ */
html, body { height: 100%; }
body.auth-body {
  margin: 0;
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f8f9fb;
}
/* Fluid sizing throughout both panels below: every font-size, margin,
   and padding that could plausibly cause overflow on a short or narrow
   viewport uses clamp() tied to vh/vw, so it shrinks continuously as
   the window shrinks instead of staying fixed until a breakpoint hits
   and then jumping. The result holds up at any window size dragged to
   any dimension, not just the handful of sizes a fixed breakpoint list
   happens to cover. overflow: hidden on each panel - scrollbars are
   never shown, relying entirely on the fluid sizing above to fit. */
.auth-panel-brand {
  flex: 1 1 46%;
  background: linear-gradient(160deg, #000000 0%, #030625 50%, #150410 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 5vh, 56px) clamp(24px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  max-height: 100vh;
  max-height: 100dvh;
}
.auth-panel-brand::before, .auth-panel-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,33,50,0.22) 0%, rgba(244,33,50,0) 70%);
  pointer-events: none;
}
.auth-panel-brand::before { width: 460px; height: 460px; top: -180px; right: -160px; }
.auth-panel-brand::after { width: 320px; height: 320px; bottom: -140px; left: -90px; }
.auth-brand-top { position: relative; z-index: 1; margin: auto 0; }
.auth-brand-logo-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 4vh, 48px); }
.auth-brand-logo-wrap img { max-height: clamp(40px, 6vh, 64px); max-width: 260px; object-fit: contain; }
.auth-brand-logo-wrap span { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.2px; }
.auth-tagline { font-size: clamp(1.25rem, 1rem + 1.6vh, 2rem); font-weight: 700; line-height: 1.25; max-width: 420px; margin-bottom: clamp(8px, 2vh, 20px); }
.auth-subtext { font-size: clamp(0.82rem, 0.7rem + 0.5vh, 1rem); opacity: 0.85; max-width: 400px; line-height: 1.55; }
.auth-feature-list { list-style: none; padding: 0; margin: clamp(14px, 3vh, 28px) 0 0; position: relative; z-index: 1; }
.auth-feature-list li { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(5px, 1.4vh, 13px); font-size: clamp(0.75rem, 0.68rem + 0.35vh, 0.92rem); opacity: 0.95; }
.auth-feature-list i {
  font-size: clamp(0.8rem, 1vh + 0.3rem, 1rem);
  background: rgba(244,33,50,0.20);
  color: #f42132;
  border-radius: 50%;
  width: clamp(20px, 3vh, 28px);
  height: clamp(20px, 3vh, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-brand-footer { position: relative; z-index: 1; font-size: 0.8rem; opacity: 0.7; margin-top: clamp(10px, 2vh, 20px); flex-shrink: 0; }

.auth-panel-form {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 32px) clamp(16px, 3vw, 24px);
  overflow: hidden;
  max-height: 100vh;
  max-height: 100dvh;
}
.auth-form-box { width: 100%; max-width: 400px; animation: rmFadeIn 0.3s var(--transition); margin: auto 0; }
.auth-form-box .card { border: none; box-shadow: 0 8px 30px rgba(0,0,0,0.07); border-radius: 14px; padding: clamp(20px, 4vh, 48px) !important; }
.auth-mobile-logo { display: none; text-align: center; margin-bottom: clamp(12px, 3vh, 24px); }
.auth-mobile-logo img { max-height: clamp(48px, 8vh, 72px); max-width: 260px; }
.auth-welcome-title { font-size: clamp(1.2rem, 1rem + 0.6vh, 1.5rem); font-weight: 700; margin-bottom: 4px; }
.auth-welcome-sub { color: #6b7280; font-size: 0.92rem; margin-bottom: clamp(12px, 3vh, 24px); }

.auth-input-group { position: relative; }
.auth-input-group > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.95rem; pointer-events: none; }
.auth-input-group .form-control { padding-left: 40px; }
.auth-input-group:has(.toggle-password-text) .form-control { padding-right: 52px; }
.auth-input-group .toggle-password-text {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--wp-accent, #2271b1);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 2px;
  cursor: pointer;
}
.auth-input-group .toggle-password-text:hover { text-decoration: underline; }

/* Some browsers (notably Edge) add their OWN built-in password-reveal
   icon inside password fields automatically - a native, unstyleable
   element separate from the custom button above. Left alone, both end
   up visible at once and fight over control of the same field's
   visibility state, which is exactly the erratic behavior this fixes:
   only the custom button should ever control it. */
.auth-input-group input[type="password"]::-ms-reveal,
.auth-input-group input[type="password"]::-ms-clear {
  display: none;
}

/* Social login buttons: lift on hover, matching the rest of the system */
.btn-social {
  transition: all var(--transition);
}
.btn-social:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 991px) {
  .auth-panel-brand { display: none; }
  .auth-panel-form { flex: 1 1 100%; max-width: 100%; }
  .auth-mobile-logo { display: block; }
}

/* Extreme-case safety net only - fluid sizing above already handles
   the vast majority of narrow/short combinations smoothly. This just
   trims the least-essential list items on genuinely tiny viewports
   (e.g. a phone in landscape) rather than letting them get illegibly
   small or forcing that panel to scroll. */
@media (max-height: 420px) {
  .auth-feature-list li:nth-child(n+5) { display: none; }
  .auth-brand-footer { display: none; }
}

/* ============================================================
   Racing Red + Midnight Black Brand Theme
   Dark = #030625 (near-black), Accent = #f42132 (red).
   White used generously — content backgrounds, text-on-dark, and
   (per explicit direction) text on solid red fills too. White on
   #f42132 measures ~4.1:1 — just under WCAG's 4.5:1 minimum for
   small normal-weight text, but passes comfortably for the bold/
   medium-weight button and badge text this is actually used on
   (large/bold text only needs 3:1). White-on-near-black measures
   >19:1 (AAA) with plenty of room to spare.
   ============================================================ */
:root {
  --wp-sidebar-bg: #030625;
  --wp-sidebar-bg-hover: color-mix(in srgb, var(--wp-accent) 10%, #030625);
  --wp-sidebar-active: color-mix(in srgb, var(--wp-accent) 22%, #030625);
  --wp-sidebar-text: #b9c6e0;
  --wp-sidebar-text-active: #ffffff;
  --wp-topbar-bg: #ffffff;
  --wp-content-bg: #f4f7fb;
  --wp-border: #dde4ee;
  --wp-accent: #f42132;
  --wp-on-accent: #ffffff; /* text color used ON TOP of solid accent (red) fills */
}

/* Sidebar brand block: keep a crisp white/light divider against the dark sidebar */
.wp-sidebar-brand {
  border-bottom-color: rgba(255,255,255,0.10);
}

/* Sidebar text: slightly cool light blue-white, brightens to pure white on hover/active */
.wp-nav-link, .wp-nav-toggle, .wp-submenu a {
  color: var(--wp-sidebar-text);
}
.wp-nav-link:hover, .wp-nav-toggle:hover, .wp-submenu a:hover,
.wp-nav-link.active, .wp-nav-toggle.active {
  color: #ffffff;
}

/* Topbar: white background, near-black text/icons for a crisp, professional look */
.wp-topbar-title { color: #030625; }
.wp-sidebar-burger { color: #030625; }
.wp-account-btn { color: #030625; }

/* Stat numbers and headings pick up near-black for a cohesive brand feel
   where they aren't already using a semantic color (success/danger/etc). */
.stat-card h2, .stat-card h3, .stat-card h4 {
  color: #030625;
}

/* Cards: crisp white, subtle cool-toned border */
.card {
  background: #ffffff;
  border-color: var(--wp-border);
}

/* Badges using the accent color as background also need near-black text */
.badge.bg-accent, .tpl-header-bar {
  color: var(--wp-on-accent);
}

/* Active/checked radio-card borders (template pickers, etc.) glow red */
.tpl-card input:checked + .tpl-preview {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-accent) 30%, transparent);
}

/* Dark mode: sidebar stays near-black (it already reads as "dark"), only the
   main content area switches — keeps the brand identity consistent
   whether a shop is in light or dark mode. */
body.theme-dark {
  --wp-content-bg: #12161c;
}
body.theme-dark .wp-topbar-title,
body.theme-dark .wp-sidebar-burger,
body.theme-dark .wp-account-btn {
  color: #e6e8ea;
}
body.theme-dark .stat-card h2, body.theme-dark .stat-card h3, body.theme-dark .stat-card h4 {
  color: #e6e8ea;
}

/* Focus-visible polish (keyboard navigation) in the new accent */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--wp-accent);
  outline-offset: 2px;
}

/* ============================================================
   Digital Signature Capture (tickets/sign.php)
   ============================================================ */
.sign-terms-box {
  background: var(--wp-content-bg);
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  padding: 14px 16px;
  max-height: 160px;
  overflow-y: auto;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
}
.sign-pad-wrap {
  position: relative;
  border: 2px dashed var(--wp-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.sign-pad-canvas {
  display: block;
  width: 100%;
  height: 220px;
  cursor: crosshair;
}
.sign-pad-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #c3c9d6;
  font-size: 1.1rem;
  font-style: italic;
  pointer-events: none;
}
.sign-existing-preview {
  background: #fff;
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.sign-existing-preview img {
  max-width: 100%;
  max-height: 120px;
}

/* ============================================================
   Account avatar placeholder & dropdown text fix
   ============================================================ */
.wp-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e4e6ea;
  color: #8a8f98;
  font-size: 16px;
}
body.theme-dark .wp-avatar-placeholder {
  background: #3a3f45;
  color: #b9c0c9;
}

/* Dropdown menu background is dark (#030625) - "Signed in as" needs
   light text instead of Bootstrap's default muted grey, which is
   nearly unreadable against it. */
.wp-signed-in-as {
  color: #b9c6e0 !important;
}

/* Saved locations shown in the autocomplete dropdown - visually
   distinct from generic OpenStreetMap results, since they're curated
   and instant rather than fetched externally. */
.loc-suggestion-saved {
  background: color-mix(in srgb, var(--wp-accent) 6%, transparent);
  font-weight: 500;
}
body.theme-dark .loc-suggestion-saved {
  background: color-mix(in srgb, var(--wp-accent) 15%, transparent);
}

/* Sidebar footer links (Help & Support, About) - visually separated
   from the main module-driven nav above them. */
.wp-nav-footer-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   About / Help & Support modals
   ============================================================ */
.about-modal-content {
  border-radius: 16px;
  border: none;
}
.about-modal-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 14px;
  border: 1px solid var(--wp-border);
  border-radius: 20px;
  background: #030625;
}
.release-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: color-mix(in srgb, var(--wp-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--wp-accent) 30%, white);
  border-left: 4px solid var(--wp-accent);
  border-radius: 8px;
  padding: 14px 16px;
}
.release-banner-text {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: #030625;
}
.release-banner-text i.bi-stars {
  color: var(--wp-accent);
  font-size: 1.1rem;
  margin-top: 2px;
}
.release-banner-notes {
  white-space: pre-line;
  color: #4a4f5e;
  font-size: 0.88rem;
  margin-top: 4px;
  line-height: 1.5;
}
.release-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #8a8f98;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color var(--transition), color var(--transition);
}
.release-banner-dismiss:hover {
  background: rgba(0,0,0,0.06);
  color: #030625;
}
body.theme-dark .release-banner-notes {
  color: #b8bcc8;
}
.about-modal-links {
  margin: 0 auto;
  max-width: 320px;
}
.about-modal-links li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--wp-border);
  font-size: 0.92rem;
}
.about-modal-links li:last-child {
  border-bottom: none;
}
.about-modal-links i {
  color: var(--wp-accent);
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.about-modal-links a {
  color: #030625;
  text-decoration: none;
}
.about-modal-links a:hover {
  color: var(--wp-accent);
  text-decoration: underline;
}

/* ============================================================
   Dark mode: text color adaptations
   Several buttons/labels use a fixed near-black (#030625) text color
   because their LIGHT-mode background is white/near-white. In dark
   mode those same backgrounds turn dark (cards, buttons, modals), so
   the same near-black text becomes unreadable against them. Each of
   these needs an explicit light-text override for dark mode - this
   is exactly the "Edit" button issue reported: .btn-outline-primary's
   default (unfilled) state had no dark-mode variant at all.
   ============================================================ */
body.theme-dark .btn-outline-primary {
  color: #e6e8ea;
}
body.theme-dark .paper-size-card input:checked ~ .paper-size-body i,
body.theme-dark .paper-size-card input:checked ~ .paper-size-body .paper-size-label {
  color: #e6e8ea;
}
body.theme-dark .tpl-card input:checked ~ .tpl-name {
  color: #e6e8ea;
}
body.theme-dark .wp-sidebar-burger:hover {
  color: #e6e8ea;
}
body.theme-dark .about-modal-links a {
  color: #d7dade;
}
body.theme-dark .about-modal-links a:hover {
  color: var(--wp-accent);
}
body.theme-dark .about-modal-links li {
  border-bottom-color: #33383d;
}
body.theme-dark .about-modal-logo {
  border-color: #43494f;
}

/* ============================================================
   Inline live document preview (Settings > System)
   ============================================================ */
.doc-preview-wrap {
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  overflow: hidden;
  background: #f4f5f7;
}
.doc-preview-frame {
  width: 100%;
  height: 520px;
  border: none;
  display: block;
  background: #fff;
}

/* ============================================================
   Part/product photo thumbnails (list views)
   ============================================================ */
.inv-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--wp-border);
  flex-shrink: 0;
}
.inv-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f1f3;
  color: #b0b5bc;
  font-size: 1rem;
}
body.theme-dark .inv-thumb-placeholder {
  background: #2c3136;
  color: #6b7280;
}

/* "On offer" red tag - small badge version for table-row thumbnails
   (where space is tight), and a larger corner-ribbon version for
   bigger product images and barcode stickers. */
.inv-thumb-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.offer-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc2626;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}
.offer-ribbon-wrap { position: relative; display: inline-block; }
.offer-ribbon {
  position: absolute;
  top: 6px;
  right: -6px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  z-index: 2;
  border-radius: 3px;
}
.offer-ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  border-width: 4px 6px 0 0;
  border-style: solid;
  border-color: #7f1d1d transparent transparent transparent;
}

@keyframes fadeInCheck { from { opacity: 0; } to { opacity: 1; } }
.fade-in-check { animation: fadeInCheck 0.3s ease; }

/* ============================================================
   Sale success celebration overlay
   ============================================================ */
.sale-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 37, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeInCheck 0.2s ease;
}
.sale-success-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: saleSuccessPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sale-success-emoji {
  font-size: 3.5rem;
  line-height: 1;
}
@keyframes saleSuccessPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
body.theme-dark .sale-success-card {
  background: #1c1f24;
  color: #e6e8ea;
}

/* ============================================================
   Defensive fix: a button placed inside a .d-flex row without
   align-items-center will, by Bootstrap/flexbox default, stretch
   vertically to match a taller sibling (e.g. a multi-line label or
   a form field with helper text next to it), distorting the
   button's normal compact height. Scoped to direct children only,
   so it never affects unrelated nested flex layouts.
   ============================================================ */
.d-flex > .btn,
.d-flex > a.btn,
.d-flex > button.btn {
  align-self: center;
}