/* ================================================================
   ui-enhancements.css  —  Deep UI/UX overhaul layer
   Loaded last, after: w3.css → app.css → workspace.css → records.css
   All rules are additive and scoped. Nothing in the existing files
   is removed — this layer only improves on top.
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   SECTION 1 · GLOBAL DESIGN TOKENS & MOTION SYSTEM
   ────────────────────────────────────────────────────────────── */
:root {
  /* Elevation system */
  --elev-0:  none;
  --elev-1:  0 1px 2px  rgb(23 45 59 / 4%);
  --elev-2:  0 2px 6px  rgb(23 45 59 / 6%), 0 1px 2px rgb(23 45 59 / 4%);
  --elev-3:  0 4px 14px rgb(23 45 59 / 8%), 0 2px 4px rgb(23 45 59 / 5%);
  --elev-4:  0 8px 24px rgb(23 45 59 / 10%), 0 3px 6px rgb(23 45 59 / 6%);
  --elev-5:  0 16px 40px rgb(23 45 59 / 12%), 0 6px 12px rgb(23 45 59 / 7%);

  /* Motion */
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:     cubic-bezier(0.2, 0, 0, 1);
  --dur-xs:   80ms;
  --dur-sm:  130ms;
  --dur-md:  200ms;
  --dur-lg:  280ms;
  --dur-xl:  400ms;

  /* Geometry */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl:20px;
  --r-pill: 9999px;

  /* Brand teal (workspace primary) */
  --teal-50:  #eaf7f4;
  --teal-100: #c5ede7;
  --teal-200: #8bd7cd;
  --teal-500: #087f75;
  --teal-600: #06675f;
  --teal-700: #054d47;
  --teal-glow: 0 0 0 3px rgb(8 127 117 / 18%);

  /* Surface hierarchy */
  --surf-0: var(--color-bg, #f3f6f8);
  --surf-1: var(--panel-bg, #fff);
  --surf-2: var(--surface-muted, #f8fafc);
  --surf-3: var(--surface-subtle, #f1f5f9);
}

/* ──────────────────────────────────────────────────────────────
   SECTION 2 · BASE / TYPOGRAPHY
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p { line-height: 1.6; }

a {
  transition: color var(--dur-sm) var(--ease-snap),
              opacity var(--dur-sm) var(--ease-snap);
}

/* Better scrollbars throughout */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border, #e0e7ec);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-soft, #94a3b8); }

/* ──────────────────────────────────────────────────────────────
   SECTION 3 · FOCUS VISIBLE — universal accessible ring
   ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--teal-500) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Tighter offset inside compact UI containers */
.sidebar-menu-list :focus-visible,
.task-actions :focus-visible,
.mobile-bottom-nav :focus-visible {
  outline-offset: 1px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 4 · NAVBAR / HEADER
   ────────────────────────────────────────────────────────────── */
#navbar {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background: rgb(255 255 255 / 0.90) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: var(--elev-1) !important;
}

body[data-theme="dark"] #navbar {
  background: rgb(14 22 38 / 0.90) !important;
}

/* Workspace breadcrumb */
.workspace-context strong {
  letter-spacing: -0.015em;
  font-size: 13.5px !important;
}
.workspace-context span {
  font-size: 9.5px !important;
  letter-spacing: 0.9px !important;
}

/* Global search: pill shape, comfortable height */
#global-search {
  height: 42px !important;
  border-radius: var(--r-pill) !important;
  font-size: 13.5px !important;
  padding-left: 42px !important;
  padding-right: 60px !important;
  background: var(--surf-2) !important;
  border: 1px solid var(--color-border) !important;
  transition:
    background var(--dur-md) var(--ease-snap),
    border-color var(--dur-md) var(--ease-snap),
    box-shadow var(--dur-md) var(--ease-snap) !important;
}
#global-search:focus {
  background: var(--surf-1) !important;
  border-color: var(--teal-500) !important;
  box-shadow: var(--teal-glow) !important;
}

.search-key-hint {
  font-family: inherit !important;
  font-size: 11px !important;
  opacity: 0.6;
  border-radius: var(--r-sm) !important;
}

.search-dropdown {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-5) !important;
  overflow: hidden;
}

.search-result-item {
  padding: 11px 16px !important;
  transition: background var(--dur-xs) var(--ease-snap) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 5 · SIDEBAR  (dark navy — workspace.css owns the base)
   ────────────────────────────────────────────────────────────── */
#mySidebar {
  box-shadow: 2px 0 20px rgb(0 0 0 / 0.10) !important;
}

/* Logo container */
.sidebar-logo {
  border-radius: var(--r-md) !important;
  height: 54px !important;
  background-size: 88% auto !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

/* Nav links: taller touch targets, snappier transitions */
#mySidebar .sidebar-menu-list a {
  min-height: 44px !important;
  border-radius: var(--r-md) !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    color var(--dur-sm) var(--ease-snap) !important;
  font-size: 13.5px !important;
}

/* Active left-bar accent */
#mySidebar .sidebar-menu-list a.active {
  position: relative;
  overflow: hidden;
}
#mySidebar .sidebar-menu-list a.active::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: rgba(255,255,255,0.55);
  border-radius: 0 3px 3px 0;
}

/* User section */
.user-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #1e4d5c !important;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.18) !important;
}

.sidebar-footer {
  padding: 14px !important;
}

.version-info { font-size: 10.5px !important; }

/* Section label */
#mySidebar .sidebar-menu-list .nav-section-label {
  margin-top: 6px !important;
  opacity: 0.75;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 6 · LOGIN PAGE
   ────────────────────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(ellipse 60% 50% at 15% 5%, rgb(8 127 117 / 0.12), transparent),
    radial-gradient(ellipse 50% 45% at 85% 95%, rgb(8 127 117 / 0.09), transparent),
    linear-gradient(155deg, #ecf3f1 0%, #f0f6f4 40%, #f4f8f6 100%) !important;
}

body[data-theme="dark"] .login-page {
  background:
    radial-gradient(ellipse 60% 50% at 15% 5%, rgb(8 127 117 / 0.18), transparent),
    radial-gradient(ellipse 50% 45% at 85% 95%, rgb(8 127 117 / 0.13), transparent),
    linear-gradient(155deg, #0a1622 0%, #0c1b28 50%, #0a1622 100%) !important;
}

.login-card {
  width: 100%;
  max-width: 430px !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid rgba(8, 127, 117, 0.12) !important;
  box-shadow: 0 4px 6px rgb(8 40 35 / 0.04), 0 24px 64px rgb(8 40 35 / 0.11) !important;
  padding: 44px !important;
  background: rgba(255 255 255 / 0.97) !important;
}

@media (max-width: 480px) {
  .login-card { padding: 32px 24px !important; border-radius: var(--r-lg) !important; }
}

body[data-theme="dark"] .login-card {
  background: rgba(22 36 52 / 0.96) !important;
  border-color: rgba(8 127 117 / 0.22) !important;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.40) !important;
}

.login-logo {
  height: 80px !important;
  margin: 0 auto 20px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.login-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-main, #243746) !important;
  margin: 0 0 24px !important;
  line-height: 1.3;
}

body[data-theme="dark"] .login-heading { color: #f0f6fa !important; }

/* Form labels */
.login-form label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #697b88) !important;
  margin-bottom: 7px !important;
}

/* Inputs */
.login-form input {
  display: block;
  width: 100% !important;
  padding: 13px 15px !important;
  font-size: 15px !important;
  border: 1.5px solid var(--color-border, #e0e7ec) !important;
  border-radius: var(--r-md) !important;
  background: var(--surf-2, #f8fafc) !important;
  color: var(--text-main) !important;
  margin-bottom: 18px !important;
  transition:
    border-color var(--dur-md) var(--ease-snap),
    box-shadow    var(--dur-md) var(--ease-snap),
    background    var(--dur-md) var(--ease-snap) !important;
}

.login-form input:focus {
  background: var(--surf-1, #fff) !important;
  border-color: var(--teal-500) !important;
  box-shadow: var(--teal-glow) !important;
  outline: none !important;
}

body[data-theme="dark"] .login-form input {
  background: rgba(255 255 255 / 0.05) !important;
  border-color: rgba(255 255 255 / 0.12) !important;
  color: #f0f6fa !important;
}
body[data-theme="dark"] .login-form input:focus {
  background: rgba(255 255 255 / 0.09) !important;
  border-color: var(--teal-500) !important;
}
body[data-theme="dark"] .login-form input::placeholder { color: rgba(255 255 255 / 0.3) !important; }

/* Password field */
.password-field { position: relative; margin-bottom: 20px !important; }
.password-field input { margin-bottom: 0 !important; padding-right: 88px !important; }

.password-toggle {
  position: absolute !important;
  right: 10px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  color: var(--text-muted) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: 0.04em;
  min-height: 0 !important; min-width: 0 !important;
  padding: 5px 8px !important; cursor: pointer !important;
  transition: color var(--dur-sm) !important;
}
.password-toggle:hover { color: var(--teal-500) !important; }

/* Submit button */
.login-form button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 14px !important;
  border-radius: var(--r-md) !important;
  border: none !important;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700)) !important;
  color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgb(8 127 117 / 28%) !important;
  cursor: pointer !important;
  transition:
    box-shadow var(--dur-md) var(--ease-snap),
    transform  var(--dur-md) var(--ease-snap),
    filter     var(--dur-md) var(--ease-snap) !important;
}
.login-form button[type="submit"]:hover {
  box-shadow: 0 6px 22px rgb(8 127 117 / 36%) !important;
  filter: brightness(1.06);
}
.login-form button[type="submit"]:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 8px rgb(8 127 117 / 22%) !important;
}

/* Alert */
.login-alert {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  border-radius: var(--r-md) !important;
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  color: #991b1b !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  line-height: 1.45;
}
.login-alert::before {
  content: "\f071";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  color: #dc2626;
}
body[data-theme="dark"] .login-alert {
  background: rgb(153 27 27 / 0.18) !important;
  border-color: rgb(239 68 68 / 0.35) !important;
  color: #fca5a5 !important;
}

/* Footer */
.login-footer {
  margin-top: 28px !important;
  font-size: 12px !important;
  color: var(--text-soft, #94a3b8) !important;
  text-align: center !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 7 · WORKSPACE HEADING (page hero areas)
   ────────────────────────────────────────────────────────────── */
.workspace-heading {
  padding: 14px 0 30px !important;
}
.workspace-heading h1 {
  font-size: clamp(24px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}
.workspace-heading p {
  font-size: 14px !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  line-height: 1.55;
  max-width: 60ch;
}
.workspace-eyebrow {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.8px !important;
  margin-bottom: 10px !important;
}

/* Action buttons */
.workspace-primary,
.workspace-secondary {
  border-radius: var(--r-md) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  min-height: 42px !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    box-shadow var(--dur-sm) var(--ease-snap),
    border-color var(--dur-sm) var(--ease-snap) !important;
}
.workspace-primary {
  background: var(--teal-500) !important;
  border-color: var(--teal-500) !important;
  box-shadow: 0 2px 10px rgb(8 127 117 / 22%) !important;
}
.workspace-primary:hover {
  background: var(--teal-600) !important;
  box-shadow: 0 4px 16px rgb(8 127 117 / 32%) !important;
}
.workspace-secondary {
  border-color: var(--color-border) !important;
}
.workspace-secondary:hover {
  border-color: var(--teal-500) !important;
  color: var(--teal-500) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 8 · DASHBOARD STAT CARDS
   ────────────────────────────────────────────────────────────── */
.dashboard-page .stat-card {
  border-radius: var(--r-lg) !important;
  padding: 20px 22px !important;
  transition:
    border-color var(--dur-md) var(--ease-snap),
    box-shadow   var(--dur-md) var(--ease-snap) !important;
  cursor: pointer;
  overflow: hidden;
}

/* Hover: glow border + deeper shadow */
.dashboard-page .stat-shortcut:hover {
  border-color: var(--teal-500) !important;
  box-shadow: var(--elev-3), 0 0 0 1px var(--teal-500) !important;
  transform: none !important;
}

/* Active/pressed state from filter JS */
.dashboard-page .stat-shortcut[aria-pressed="true"] {
  border-color: var(--teal-500) !important;
  background: var(--teal-50) !important;
}

.stat-icon {
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}

.stat-info b {
  letter-spacing: -0.03em;
}

.stat-helper {
  font-size: 11px !important;
  margin-top: 6px !important;
  gap: 6px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 9 · DASHBOARD FILTER PANEL
   ────────────────────────────────────────────────────────────── */
.dashboard-filter-panel {
  border-radius: var(--r-lg) !important;
  padding: 16px 20px !important;
  margin: 20px 0 24px !important;
  box-shadow: var(--elev-1) !important;
}

.dashboard-filter-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.dashboard-filter-summary {
  font-size: 11.5px !important;
}

/* Search wrapper */
.dashboard-search-wrap {
  border-radius: var(--r-md) !important;
  transition: outline var(--dur-sm) var(--ease-snap) !important;
}
.dashboard-search-wrap:focus-within {
  outline: 2px solid var(--teal-500) !important;
  outline-offset: 2px !important;
}
.dashboard-search-wrap input {
  font-size: 13.5px !important;
}

/* Filter chips */
.dashboard-filter-btn {
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    color var(--dur-sm) var(--ease-snap),
    border-color var(--dur-sm) var(--ease-snap) !important;
}

/* Active filter chip: teal instead of brand-primary */
.dashboard-filter-panel .dashboard-filter-btn.is-active,
.dashboard-filter-panel .dashboard-filter-btn.is-active:hover {
  background: var(--teal-500) !important;
  border-color: var(--teal-600) !important;
  color: #fff !important;
}

body[data-theme="dark"] .dashboard-filter-panel .dashboard-filter-btn.is-active {
  background: var(--teal-700) !important;
  border-color: var(--teal-500) !important;
  color: #d1faf7 !important;
}

/* Reset button */
.dashboard-reset {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--teal-500) !important;
  padding: 6px 2px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  transition: color var(--dur-sm) !important;
}
.dashboard-reset:hover { color: var(--teal-700) !important; }

/* ──────────────────────────────────────────────────────────────
   SECTION 10 · JOB BOARD & TASK CARDS
   ────────────────────────────────────────────────────────────── */

/* Section headers */
.dashboard-page .dashboard-section-header {
  border-radius: var(--r-md) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 4px 0 16px !important;
  min-height: 40px !important;
}

.lane-count {
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Task cards */
.dashboard-page .task-card {
  border-radius: var(--r-lg) !important;
  padding: 17px 18px !important;
  margin-bottom: 14px !important;
  transition:
    border-color var(--dur-sm) var(--ease-snap),
    box-shadow   var(--dur-sm) var(--ease-snap) !important;
}

/* Hover: left-bar brightens + shadow deepens — NO translateY */
.dashboard-page .task-card:hover {
  transform: none !important;
  box-shadow: var(--elev-3) !important;
  border-color: var(--teal-200) !important;
}

/* Card title */
.dashboard-page .task-title-line b {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Status pills */
.task-status-pill {
  border-radius: var(--r-pill) !important;
  font-size: 10.5px !important;
  padding: 5px 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* Type pill & date value */
.task-type-pill,
.task-date-value {
  border-radius: var(--r-sm) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* Priority badge */
.priority-badge {
  border-radius: var(--r-pill) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* Warning chips */
.task-warning-chip {
  border-radius: var(--r-sm) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

/* Queue badge */
.task-queue-badge {
  border-radius: var(--r-pill) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Owner name */
.task-owner-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* Timestamp */
.task-timestamp { font-size: 10.5px !important; }

/* Action bar */
.task-actions {
  gap: 8px !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
}

.task-actions .w3-button {
  border-radius: var(--r-md) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  min-height: 36px !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    box-shadow  var(--dur-sm) var(--ease-snap) !important;
}

/* Primary action */
.task-actions .status-select-trigger {
  background: var(--teal-500) !important;
  border-color: var(--teal-600) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgb(8 127 117 / 22%) !important;
}
.task-actions .status-select-trigger:hover {
  background: var(--teal-600) !important;
  box-shadow: 0 4px 12px rgb(8 127 117 / 30%) !important;
}

/* Start button */
.task-actions .status-start-button {
  box-shadow: 0 2px 8px rgb(16 185 129 / 25%) !important;
}
.task-actions .status-start-button:hover {
  box-shadow: 0 4px 12px rgb(16 185 129 / 33%) !important;
}

/* Open / secondary buttons */
.task-actions .w3-light-grey,
.task-actions .w3-white {
  background: var(--surf-2) !important;
  border-color: var(--color-border) !important;
  color: var(--text-main) !important;
}
.task-actions .w3-light-grey:hover,
.task-actions .w3-white:hover {
  background: var(--surf-3) !important;
  border-color: var(--color-border) !important;
}

/* Secondary actions reveal */
.dashboard-page .task-secondary-actions {
  border-top: 1px dashed var(--color-border) !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
}

/* Empty state */
.dashboard-empty-results {
  border-radius: var(--r-lg) !important;
  padding: 44px 24px !important;
}
.dashboard-empty-results > i { font-size: 30px !important; opacity: 0.65; }
.dashboard-empty-results strong { font-size: 17px !important; }

/* Queue pagination */
.queue-pagination {
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
}

/* Lane empty */
.lane-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 20px 0;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 11 · STATUS PICKER MODAL (Change Status)
   ────────────────────────────────────────────────────────────── */
.status-picker-modal {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--elev-5) !important;
  overflow: hidden !important;
}

/* Header: use workspace gradient */
.status-picker-header {
  background: linear-gradient(135deg, #142c3b, #0d4a46) !important;
  padding: 22px 26px !important;
}

.status-picker-header h3 {
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
}

.status-picker-eyebrow {
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: rgba(255,255,255,0.65) !important;
}

.status-picker-close {
  border-radius: var(--r-md) !important;
}

.status-picker-body {
  padding: 20px 24px 24px !important;
}

.status-picker-choice {
  border-radius: var(--r-lg) !important;
  min-height: 58px !important;
  padding: 12px 16px !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    border-color var(--dur-sm) var(--ease-snap),
    transform var(--dur-sm) var(--ease-snap),
    box-shadow var(--dur-sm) var(--ease-snap) !important;
}
.status-picker-choice:hover {
  background: var(--teal-50) !important;
  border-color: var(--teal-500) !important;
  transform: none !important;
  box-shadow: var(--elev-2) !important;
}

.status-picker-step {
  border-radius: var(--r-pill) !important;
  font-size: 11px !important;
}

.status-picker-choice-title { font-size: 14px !important; }
.status-picker-choice-subtitle { font-size: 11.5px !important; }

.status-picker-footer {
  padding: 14px 24px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 12 · FORMS (new customer / appointment / vehicle etc.)
   ────────────────────────────────────────────────────────────── */

/* Container */
.form-container {
  border-radius: var(--r-xl) !important;
  padding: 32px !important;
  box-shadow: var(--elev-2) !important;
}

@media (max-width: 640px) {
  .form-container { padding: 20px !important; border-radius: var(--r-lg) !important; }
}

.form-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 22px !important;
  padding-bottom: 14px !important;
  border-bottom-color: var(--color-border) !important;
}

/* Form groups */
.form-group,
.quick-field {
  margin-bottom: 20px !important;
}

.form-group label,
.quick-field label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 7px !important;
  color: var(--text-muted) !important;
}

/* All inputs — global */
body #site_content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
body #site_content select,
body #site_content textarea {
  border-radius: var(--r-md) !important;
  min-height: 44px !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  border: 1.5px solid var(--color-border) !important;
  background: var(--surface-input, #fff) !important;
  padding: 10px 14px !important;
  transition:
    border-color var(--dur-md) var(--ease-snap),
    box-shadow   var(--dur-md) var(--ease-snap),
    background   var(--dur-md) var(--ease-snap) !important;
}

body #site_content input:focus,
body #site_content select:focus,
body #site_content textarea:focus {
  border-color: var(--teal-500) !important;
  box-shadow: var(--teal-glow) !important;
  outline: none !important;
  background: var(--surf-1, #fff) !important;
}

body[data-theme="dark"] #site_content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]),
body[data-theme="dark"] #site_content select,
body[data-theme="dark"] #site_content textarea {
  background: rgba(255 255 255 / 0.05) !important;
  border-color: var(--color-border) !important;
  color: var(--text-main) !important;
}

body[data-theme="dark"] #site_content input:focus,
body[data-theme="dark"] #site_content select:focus,
body[data-theme="dark"] #site_content textarea:focus {
  border-color: var(--teal-500) !important;
  background: rgba(255 255 255 / 0.08) !important;
}

/* Dashboard search inputs (exempt from the above) */
body #site_content .dashboard-search-wrap input,
body #site_content .dashboard-search-wrap input:focus {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  min-height: unset !important;
}

textarea { min-height: 96px; resize: vertical; }

/* Validation states */
body .field-error {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #b42332 !important;
  margin: 5px 0 0 !important;
  display: flex;
  align-items: center;
  gap: 5px;
}
body .field-error::before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
}

body .form-error-message {
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 13 · BUTTONS (global)
   ────────────────────────────────────────────────────────────── */
body #site_content .w3-button,
body #site_content button:not(.password-toggle):not(.mobile-menu-btn):not(.notification-btn):not(.notification-close):not(.vehicle-timeline-toggle):not(.task-more-toggle) {
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  transition:
    background var(--dur-sm) var(--ease-snap),
    border-color var(--dur-sm) var(--ease-snap),
    color var(--dur-sm) var(--ease-snap),
    box-shadow var(--dur-sm) var(--ease-snap) !important;
}

/* No lift on hover anywhere */
body #site_content .w3-button:hover,
body #site_content button:hover { transform: none !important; }

/* Blue buttons → teal */
body #site_content :is(.w3-blue, .w3-black, .w3-teal):not(.status-badge):not(.task-status-pill) {
  background: var(--teal-500) !important;
  border-color: var(--teal-600) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgb(8 127 117 / 22%) !important;
}
body #site_content :is(.w3-blue, .w3-black, .w3-teal):not(.status-badge):not(.task-status-pill):hover {
  background: var(--teal-600) !important;
  box-shadow: 0 4px 14px rgb(8 127 117 / 30%) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 14 · CARDS (info, detail, stat)
   ────────────────────────────────────────────────────────────── */

/* All content cards */
body #site_content :is(.info-card, .content-card, .section-card, .form-card, .quick-card, .report-card, .chart-card, .table-card) {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-2) !important;
}

/* Hero / header cards */
body #site_content :is(.detail-header-card, .quick-hero, .reports-hero, .settings-header, .page-hero, .stats-hero, .history-hero) {
  border-radius: var(--r-lg) !important;
  padding: 26px !important;
  margin-bottom: 22px !important;
}

/* Card titles */
body #site_content :is(.card-title, .section-title, .quick-card-title) {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}

/* Info grid items */
body #site_content .info-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-muted) !important;
}

body #site_content .info-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 15 · SPLIT-VIEW (customers, vehicles, appointments)
   ────────────────────────────────────────────────────────────── */

.list-panel {
  width: 300px !important;
}

/* List items */
body #site_content .list-item {
  border-radius: var(--r-md) !important;
  margin: 3px 8px !important;
  transition:
    background var(--dur-xs) var(--ease-snap),
    border-color var(--dur-xs) var(--ease-snap) !important;
  box-shadow: none !important;
}

body #site_content .list-item:hover {
  border-color: var(--teal-200) !important;
  color: var(--teal-600) !important;
}
body #site_content .list-item:hover .list-item-title {
  color: var(--teal-600) !important;
}

body #site_content .list-item.active {
  background: var(--teal-500) !important;
  border-color: var(--teal-600) !important;
  box-shadow: 0 2px 8px rgb(8 127 117 / 22%) !important;
}
body #site_content .list-item.active .list-item-title,
body #site_content .list-item.active .list-item-meta,
body #site_content .list-item.active small {
  color: white !important;
}

.list-item-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.list-item-meta {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  margin-top: 3px !important;
}

/* Filter chips inside split-view */
body #site_content .appointment-filter-chip {
  border-radius: var(--r-sm) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  transition: background var(--dur-sm) var(--ease-snap), color var(--dur-sm) var(--ease-snap) !important;
}

body #site_content .appointment-filter-chip.is-active {
  background: var(--teal-50) !important;
  color: var(--teal-600) !important;
  border-color: var(--teal-200) !important;
}

/* Panel headers */
.panel-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Panel search input */
.search-wrapper input {
  border-radius: var(--r-pill) !important;
  font-size: 13.5px !important;
  padding: 9px 16px 9px 40px !important;
  background: var(--surf-2) !important;
  border: 1.5px solid var(--color-border) !important;
  transition: border-color var(--dur-md) !important;
}
.search-wrapper input:focus {
  border-color: var(--teal-500) !important;
  background: var(--surf-1) !important;
}

/* Empty list states */
.record-list-empty {
  padding: 32px 16px !important;
}
.record-list-empty > i { font-size: 22px !important; margin-bottom: 14px !important; }
.record-list-empty strong { font-size: 14px !important; }

/* ──────────────────────────────────────────────────────────────
   SECTION 16 · APPOINTMENT DETAIL PAGE
   ────────────────────────────────────────────────────────────── */

/* At-a-glance strip */
.appointment-at-a-glance {
  border-radius: var(--r-lg) !important;
  margin-bottom: 18px !important;
  padding: 18px 0 !important;
}

.appointment-at-a-glance strong {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* Stage tracker */
.appointment-stage-track {
  margin-bottom: 24px !important;
}
.appointment-stage-track li {
  gap: 8px;
  padding: 10px 0 !important;
  font-size: 11.5px;
}
.appointment-stage-track li > span {
  width: 24px !important; height: 24px !important;
  font-size: 11px !important;
  border-radius: var(--r-pill) !important;
}
.appointment-stage-track .is-current {
  border-color: var(--teal-500) !important;
  color: var(--teal-600) !important;
}
.appointment-stage-track .is-current > span {
  background: var(--teal-500) !important;
}
.appointment-stage-track .is-past {
  color: var(--teal-500) !important;
  border-color: var(--teal-100) !important;
}

/* Hero card inside appointment */
body #site_content #appointment-details .appointment-record-hero {
  border-radius: var(--r-lg) !important;
}

/* Quick field edit button */
body #site_content #appointment-details .quick-field-edit {
  border-radius: var(--r-sm) !important;
}

/* Notes textarea */
body #site_content #appointment-details .quick-note-input {
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  min-height: 90px !important;
}

/* Record empty note */
.record-empty-note { gap: 14px !important; }
.record-empty-note > i { font-size: 22px !important; }

/* ──────────────────────────────────────────────────────────────
   SECTION 17 · MODALS (w3-modal family)
   ────────────────────────────────────────────────────────────── */
.w3-modal {
  background: rgba(10 18 32 / 0.50) !important;
}

.w3-modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--elev-5) !important;
}

.w3-modal header.w3-blue,
.w3-modal header.w3-red,
.w3-modal header.w3-teal,
.w3-modal header {
  padding: 18px 24px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 18 · NOTIFICATIONS
   ────────────────────────────────────────────────────────────── */
.notification-btn {
  border-radius: 12px !important;
  box-shadow: var(--elev-3) !important;
  transition: box-shadow var(--dur-sm), transform var(--dur-sm) !important;
}
.notification-btn:hover {
  box-shadow: var(--elev-4) !important;
}

.notification-dropdown {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--elev-5) !important;
}

.notification-item {
  transition: background var(--dur-xs) var(--ease-snap) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 19 · TABLES
   ────────────────────────────────────────────────────────────── */
.w3-table-all {
  border-radius: var(--r-lg) !important;
}

.w3-table-all th {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  padding: 13px 16px !important;
  background: var(--surf-2) !important;
}

.w3-table-all td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.w3-table-all tbody tr {
  transition: background var(--dur-xs) var(--ease-snap) !important;
}

.w3-table-all tbody tr:hover {
  background: var(--surf-2) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 20 · CALENDAR
   ────────────────────────────────────────────────────────────── */
.calendar-header {
  border-radius: var(--r-lg) !important;
}

.calendar-table {
  border-radius: var(--r-lg) !important;
}

.calendar-table td {
  transition: background var(--dur-xs) var(--ease-snap) !important;
}

.calendar-table td:hover {
  background: var(--surf-2) !important;
}

.appointment {
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  transition: box-shadow var(--dur-sm) !important;
}
.appointment:hover {
  transform: none !important;
  box-shadow: var(--elev-2) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 21 · TIMELINE
   ────────────────────────────────────────────────────────────── */
.timeline-event-body {
  border-radius: var(--r-md) !important;
  transition: box-shadow var(--dur-sm) !important;
}
.timeline-event-body:hover { box-shadow: var(--elev-2) !important; }

.timeline-event-title { font-size: 13.5px !important; font-weight: 700 !important; }
.timeline-event-date, .timeline-event-meta { font-size: 12px !important; line-height: 1.5 !important; }
.timeline-event-badge { border-radius: var(--r-pill) !important; font-size: 11px !important; }
.timeline-event-icon { border-radius: var(--r-md) !important; }

/* ──────────────────────────────────────────────────────────────
   SECTION 22 · SETTINGS PAGE
   ────────────────────────────────────────────────────────────── */
.settings-content-panel .panel-content,
.settings-sidebar {
  transition: none !important;
}

/* Settings table rows */
.settings-table tr:hover td {
  background: var(--surf-2) !important;
}

/* Theme choice cards */
.theme-choice,
.radio-item {
  border-radius: var(--r-lg) !important;
  transition: border-color var(--dur-sm), background var(--dur-sm) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 23 · QUICK INTAKE PAGE
   ────────────────────────────────────────────────────────────── */
body #site_content :is(.quick-card, .quick-card-head) {
  border-radius: var(--r-lg) !important;
}

body #site_content .quick-card-head {
  padding: 18px 22px !important;
}

body #site_content .quick-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

body #site_content .quick-submit-actions {
  gap: 10px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 24 · MOBILE BOTTOM NAV
   ────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  .mobile-bottom-nav {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    background: rgba(255 255 255 / 0.92) !important;
    border-top: 1px solid var(--color-border) !important;
  }

  body[data-theme="dark"] .mobile-bottom-nav {
    background: rgba(14 22 38 / 0.92) !important;
  }

  .mobile-bottom-nav-item {
    min-height: 56px !important;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: var(--r-md) !important;
    margin: 4px 2px !important;
    transition:
      color var(--dur-sm) var(--ease-snap),
      background var(--dur-sm) var(--ease-snap) !important;
  }

  .mobile-bottom-nav-item i {
    font-size: 20px !important;
    transition: transform var(--dur-sm) var(--ease-snap) !important;
  }

  .mobile-bottom-nav-item.active i {
    transform: translateY(-2px) !important;
  }

  .mobile-bottom-nav-item.active {
    color: var(--teal-500) !important;
    background: var(--teal-50) !important;
  }

  body[data-theme="dark"] .mobile-bottom-nav-item.active {
    color: var(--teal-200) !important;
    background: rgba(8 127 117 / 0.15) !important;
  }

  .mobile-bottom-nav-item span {
    font-size: 10px !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION 25 · MOBILE HEADER (slide-down panel on detail pages)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-header {
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border-radius: 0 !important;
  }

  .mobile-header-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION 26 · STATUS BADGES (detail pages)
   ────────────────────────────────────────────────────────────── */
.status-badge {
  border-radius: var(--r-sm) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 5px 10px !important;
  letter-spacing: 0.02em !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 27 · VEHICLE CARDS (in customer detail / vehicles list)
   ────────────────────────────────────────────────────────────── */
.vehicle-card-modern {
  border-radius: var(--r-lg) !important;
  transition:
    border-color var(--dur-sm) var(--ease-snap),
    box-shadow var(--dur-sm) var(--ease-snap) !important;
}
.vehicle-card-modern:hover {
  transform: none !important;
  border-color: var(--teal-200) !important;
  box-shadow: var(--elev-3) !important;
}

.vehicle-info-pill {
  border-radius: var(--r-md) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 28 · FILE & PHOTO GRIDS
   ────────────────────────────────────────────────────────────── */
.file-item-modern,
.file-item-card {
  border-radius: var(--r-md) !important;
  transition: border-color var(--dur-sm), box-shadow var(--dur-sm) !important;
}
.file-item-modern:hover,
.file-item-card:hover {
  border-color: var(--teal-200) !important;
  box-shadow: var(--elev-2) !important;
}

.picture-card {
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  transition: box-shadow var(--dur-sm) !important;
}
.picture-card:hover { box-shadow: var(--elev-3) !important; }

/* ──────────────────────────────────────────────────────────────
   SECTION 29 · CONTEXT MENU
   ────────────────────────────────────────────────────────────── */
.context-menu {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-4) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
}

.context-menu a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  transition: background var(--dur-xs) !important;
}

.context-menu a:hover {
  background: var(--teal-50) !important;
  color: var(--teal-600) !important;
}

.context-menu a:hover i {
  color: var(--teal-500) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 30 · PUBLIC / CONFIRMATION PAGES
   ────────────────────────────────────────────────────────────── */
.public-card {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--elev-4) !important;
  padding: 36px !important;
}
@media (max-width: 480px) {
  .public-card { padding: 24px !important; border-radius: var(--r-lg) !important; }
}

.public-card h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.public-card dl {
  border-radius: var(--r-md) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 31 · VERSION MODAL
   ────────────────────────────────────────────────────────────── */
.version-modal-content {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
}

.changelog-body {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  padding: 22px 24px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 32 · TOAST NOTIFICATIONS
   ────────────────────────────────────────────────────────────── */
.toast {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-4) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 33 · SKELETON / LOADING SHIMMER
   ────────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surf-2) 25%,
    var(--surf-3) 50%,
    var(--surf-2) 75%
  );
  background-size: 1000px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
  border-radius: var(--r-sm);
  min-height: 14px;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 34 · DARK MODE FINE-TUNING
   ────────────────────────────────────────────────────────────── */

body[data-theme="dark"] .task-card:hover {
  border-color: var(--teal-500) !important;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.30) !important;
}

body[data-theme="dark"] .stat-shortcut:hover {
  border-color: var(--teal-500) !important;
}

body[data-theme="dark"] .w3-table-all tbody tr:hover {
  background: var(--surface-muted) !important;
}

body[data-theme="dark"] .list-item:hover {
  background: var(--surface-muted) !important;
  border-color: var(--teal-500) !important;
}

body[data-theme="dark"] .search-dropdown {
  background: var(--panel-bg) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.40) !important;
}

body[data-theme="dark"] .status-picker-body {
  background: linear-gradient(180deg, rgba(8,127,117,0.06) 0%, var(--panel-bg) 100%);
}

body[data-theme="dark"] .status-picker-choice {
  background: var(--surface-elevated) !important;
  border-color: var(--color-border) !important;
}

body[data-theme="dark"] .status-picker-choice:hover {
  background: rgba(8,127,117,0.12) !important;
  border-color: var(--teal-500) !important;
}

body[data-theme="dark"] .status-picker-current-card {
  background: rgba(8,127,117,0.12) !important;
  border-color: rgba(8,127,117,0.35) !important;
}

body[data-theme="dark"] .context-menu {
  background: var(--surface-elevated) !important;
  border-color: var(--color-border) !important;
}

body[data-theme="dark"] .context-menu a:hover {
  background: rgba(8,127,117,0.12) !important;
}

body[data-theme="dark"] .appointment-at-a-glance {
  background: var(--panel-bg) !important;
  border-color: var(--color-border) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION 35 · REDUCED MOTION
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION 36 · PRINT
   ────────────────────────────────────────────────────────────── */
@media print {
  #navbar, #mySidebar, .mobile-bottom-nav,
  .mobile-header, .task-actions, .dashboard-filter-panel,
  #notification-area, .workspace-heading-actions,
  .context-menu, .skip-link, .pwa-install-button {
    display: none !important;
  }

  #site_content {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
  }

  .task-card, .info-card, .detail-card, .stat-card {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    break-inside: avoid;
  }

  .task-status-pill, .status-badge {
    border: 1px solid currentColor !important;
    box-shadow: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

/* ──────────────────────────────────────────────────────────────
   SECTION 37 · MISCELLANEOUS POLISH
   ────────────────────────────────────────────────────────────── */

/* Skip link */
.skip-link {
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Tag chips */
.w3-tag {
  border-radius: var(--r-xs) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  letter-spacing: 0.03em !important;
}

/* Horizontal rules */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 20px 0;
}

/* Confirmation/public page */
.confirmation-link-panel {
  border-radius: var(--r-md) !important;
}

/* Upload area */
.upload-area {
  border-radius: var(--r-lg) !important;
  transition: border-color var(--dur-md), background var(--dur-md) !important;
}

.upload-area:hover,
.upload-area.is-dragover {
  border-color: var(--teal-500) !important;
  background: var(--teal-50) !important;
}

/* Merge chip */
.merge-chip {
  border-radius: var(--r-md) !important;
}

/* Delete confirm card */
.delete-confirm-card {
  border-radius: var(--r-xl) !important;
}

/* Communication panel */
.communication-panel {
  border-radius: var(--r-lg) !important;
}

/* Note input bar */
.bottom-input-bar {
  border-radius: var(--r-lg) 0 0 var(--r-lg) !important;
}
@media (max-width: 768px) {
  .bottom-input-bar { border-radius: var(--r-lg) !important; }
}

.note-input-field {
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Appointment link cards */
.appointment-link-card {
  border-radius: var(--r-md) !important;
  transition: border-color var(--dur-sm), box-shadow var(--dur-sm) !important;
}
.appointment-link-card:hover {
  border-color: var(--teal-200) !important;
  box-shadow: var(--elev-2) !important;
}

/* LPG mileage stats */
.lpg-mileage-stat {
  border-radius: var(--r-lg) !important;
}

/* LPG mileage history rows */
.lpg-mileage-history-row {
  border-radius: var(--r-md) !important;
  transition: background var(--dur-xs) !important;
}
.lpg-mileage-history-row:hover { background: var(--surf-2) !important; }

/* VIN scanner / camera modal */
.camera-modal-content,
.vin-scanner-card {
  border-radius: var(--r-xl) !important;
}

/* History page */
.history-page .history-panel,
.history-card {
  border-radius: var(--r-lg) !important;
}