:root {
  --bg: #ecf4ff;
  --panel: #ffffff;
  --text: #0f2f52;
  --muted: #4b6788;
  --accent: #1366d6;
  --accent-2: #0a4fae;
  --danger: #b32626;
  --border: #c9daef;
  --warning: #b26d00;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(17, 67, 130, 0.1);
}

/* 2026 Theme Refresh */
:root {
  --bg: #eaf2ff;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #52627a;
  --accent: #0ea5e9;
  --accent-2: #2563eb;
  --danger: #dc2626;
  --border: #d7e2f2;
  --warning: #f59e0b;
  --radius: 16px;
  --shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
}

body {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  background:
    radial-gradient(1200px 560px at -8% -18%, rgba(14, 165, 233, 0.2) 0%, transparent 65%),
    radial-gradient(1000px 480px at 108% -12%, rgba(37, 99, 235, 0.2) 0%, transparent 65%),
    linear-gradient(180deg, #eef6ff 0%, #e5eeff 100%);
}

body.theme-dark {
  --bg: #090f1d;
  --panel: #111a2d;
  --text: #edf4ff;
  --muted: #9fb1ce;
  --accent: #38bdf8;
  --accent-2: #3b82f6;
  --danger: #f87171;
  --border: #22304a;
  --warning: #fbbf24;
  --shadow: 0 18px 48px rgba(2, 6, 23, 0.55);
  background:
    radial-gradient(1100px 560px at -12% -18%, rgba(56, 189, 248, 0.18) 0%, transparent 68%),
    radial-gradient(1000px 520px at 112% -18%, rgba(59, 130, 246, 0.16) 0%, transparent 68%),
    linear-gradient(180deg, #080d18 0%, #0c1527 100%);
}

/* Desktop visual refinement */
body:not(.mobile-demo-mode) {
  --bg: #edf3fb;
  --panel: #ffffff;
  --text: #122338;
  --muted: #5d6f87;
  --accent: #1f7ccf;
  --accent-2: #2a66c7;
  --border: #d6e0ee;
  --shadow: 0 10px 28px rgba(20, 42, 72, 0.09);
  background:
    radial-gradient(1200px 560px at -10% -20%, rgba(31, 124, 207, 0.1) 0%, transparent 65%),
    radial-gradient(1000px 500px at 110% -15%, rgba(42, 102, 199, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, #f3f7fd 0%, #eaf1fb 100%);
}

body:not(.mobile-demo-mode) .topbar {
  background: linear-gradient(180deg, #eef4ff 0%, #e6eefb 100%);
  border-color: #c4d3e8;
}

body:not(.mobile-demo-mode) .panel,
body:not(.mobile-demo-mode) .stat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%);
  border-color: #d6e2f1;
  box-shadow: 0 8px 24px rgba(20, 42, 72, 0.08);
}

body:not(.mobile-demo-mode) button {
  background: linear-gradient(135deg, #2485d9 0%, #2c68c7 100%);
  box-shadow: 0 7px 18px rgba(42, 102, 199, 0.22);
}

body:not(.mobile-demo-mode) button.ghost {
  background: #f3f8ff;
  border-color: #cbdaf0;
  color: #214d88;
}

.app-save-toast {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 20000;
  max-width: min(74vw, 420px);
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #8fd1af;
  background: linear-gradient(135deg, #157347 0%, #1d8b56 100%);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(9, 71, 45, 0.32);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-save-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.app-save-toast.fade {
  opacity: 0;
  transform: translateY(8px);
}

body:not(.mobile-demo-mode) tbody tr:hover td {
  background: #f1f6fe;
}

.app-shell {
  width: min(98vw, 1820px);
  padding: 1.35rem;
}

.topbar {
  background: color-mix(in srgb, var(--panel) 88%, #dbeafe 12%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

.stat-card,
.panel {
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--border) 90%, #ffffff 10%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 94%, #f0f7ff 6%) 0%,
    color-mix(in srgb, var(--panel) 98%, #ffffff 2%) 100%
  );
  box-shadow: var(--shadow);
}

.panel {
  padding: 1.1rem;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 42px;
  background: color-mix(in srgb, #ffffff 88%, #eff6ff 12%);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent-2) 58%, #ffffff 42%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent 80%);
  outline: none;
}

button {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
  transform: translateY(0);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.34);
  filter: saturate(1.04);
}

button:active {
  transform: translateY(0);
}

button.ghost {
  background: color-mix(in srgb, var(--panel) 80%, #e6f0ff 20%);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  color: color-mix(in srgb, var(--accent-2) 78%, #0f172a 22%);
  box-shadow: none;
}

button.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.26);
}

th {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 85%, #1e293b 15%);
}

td {
  font-size: 0.88rem;
}

tbody tr:hover td {
  background: color-mix(in srgb, #eaf2ff 40%, transparent 60%);
}

.status-ok {
  background: #d1fae5;
  color: #065f46;
}

.status-low {
  background: #fef3c7;
  color: #92400e;
}

.status-out {
  background: #fee2e2;
  color: #991b1b;
}

.inline-count,
.role-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border) 65%);
  background: color-mix(in srgb, #dbeafe 62%, #ffffff 38%);
  color: #1d4ed8;
}

.table-wrap {
  border: 1px solid color-mix(in srgb, var(--border) 86%, #ffffff 14%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 94%, #f8fbff 6%);
}

thead th {
  background: color-mix(in srgb, #e7f1ff 66%, #ffffff 34%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, #ffffff 18%);
}

.company-logo-wrap {
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
  padding: 0.4rem;
}

.company-logo {
  height: 62px;
  max-width: 206px;
}

.messages-layout,
.layout,
.stats-grid {
  gap: 1.1rem;
}

@media (max-width: 900px) {
  .app-shell {
    width: min(99vw, 99vw);
    padding: 0.8rem;
  }

  .topbar {
    border-radius: 14px;
  }
}

/* Pass 2: Planner + Invoice/Quote Visual Redesign */
#homePlannerSection {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  border-radius: 20px;
  background:
    radial-gradient(140% 140% at -10% -25%, rgba(56, 189, 248, 0.22) 0%, transparent 65%),
    radial-gradient(125% 120% at 110% -20%, rgba(59, 130, 246, 0.18) 0%, transparent 66%),
    linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 20px 42px rgba(15, 23, 42, 0.14);
}

#homePlannerSection .table-head {
  align-items: flex-end;
  gap: 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, #ffffff 15%);
}

#homePlannerSection .table-head h3 {
  font-size: 1.18rem;
  letter-spacing: 0.015em;
}

#homePlannerSection .sub.planner-title {
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-weight: 800;
}

#homePlannerSection .table-wrap,
#homeDailyPlanner .home-daily-wrap {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  background: color-mix(in srgb, #ffffff 94%, #eff6ff 6%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#homePlannerSection #homePlannerTableWrap thead th,
#homeDailyPlanner .home-daily-planner-table thead th {
  background: linear-gradient(180deg, #e0efff 0%, #eaf3ff 100%);
  color: #1e3a8a;
  font-weight: 800;
  border-bottom: 1px solid #cfe0f5;
}

#homePlannerSection #weeklyPlannerBody td:first-child,
#homeDailyPlanner .home-daily-time-cell {
  background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%);
  color: #1e3a8a;
  font-weight: 800;
}

.planner-job,
.monthly-job-chip,
.planner-time-event-marker,
.planner-time-lane-occupied {
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.planner-job-label,
.planner-time-event-text {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.planner-status-key-item {
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 88%, #eff6ff 12%);
  border: 1px solid color-mix(in srgb, var(--border) 86%, #ffffff 14%);
}

#invoicePage.invoice-page,
#quotePage.invoice-page {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  background:
    radial-gradient(120% 140% at -10% -18%, rgba(14, 165, 233, 0.17) 0%, transparent 64%),
    radial-gradient(115% 130% at 108% -18%, rgba(37, 99, 235, 0.14) 0%, transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 22px 44px rgba(15, 23, 42, 0.15);
}

#invoicePage .invoice-composer,
#invoicePage .invoice-payment-panel,
#invoicePage .invoice-table-panel,
#quotePage .invoice-composer,
#quotePage .quote-preview-panel {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border) 86%);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}

#quotePage .quote-preview-panel {
  backdrop-filter: saturate(1.1) blur(1.5px);
}

#invoicePage .invoice-composer > .table-head h3,
#invoicePage .invoice-payment-panel > .table-head h3,
#invoicePage .invoice-table-panel > .table-head h3,
#quotePage .invoice-composer > .table-head h3 {
  font-size: 1.05rem;
  letter-spacing: 0.014em;
  color: #1e3a8a;
}

#invoicePage .invoice-line-items .table-wrap,
#invoicePage .invoice-table-wrap,
#quotePage .invoice-line-items .table-wrap,
#quotePage .invoice-table-wrap {
  border-radius: 12px;
  border: 1px solid #d3e3f7;
  background: #ffffff;
}

#invoicePage .invoice-line-items thead th,
#invoicePage .invoice-table-wrap thead th,
#quotePage .invoice-line-items thead th,
#quotePage .invoice-table-wrap thead th {
  background: linear-gradient(180deg, #e6f1ff 0%, #edf5ff 100%);
  color: #1e3a8a;
  font-weight: 800;
}

#invoicePage .invoice-line-items tbody tr:hover td,
#invoicePage .invoice-table-wrap tbody tr:hover td,
#quotePage .invoice-line-items tbody tr:hover td,
#quotePage .invoice-table-wrap tbody tr:hover td {
  background: #f3f8ff;
}

#quotePage .quote-stage-chip {
  font-weight: 800;
  border-radius: 999px;
}

#quotePage .quote-stage-chip.active {
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.32);
}

body.theme-dark #homePlannerSection {
  border-color: #26405f;
  background:
    radial-gradient(135% 140% at -8% -24%, rgba(56, 189, 248, 0.14) 0%, transparent 68%),
    radial-gradient(120% 130% at 110% -22%, rgba(59, 130, 246, 0.12) 0%, transparent 68%),
    linear-gradient(180deg, #0f1b30 0%, #0f1a2d 100%);
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.5);
}

body.theme-dark #homePlannerSection .table-wrap,
body.theme-dark #homeDailyPlanner .home-daily-wrap,
body.theme-dark #invoicePage .invoice-line-items .table-wrap,
body.theme-dark #invoicePage .invoice-table-wrap,
body.theme-dark #quotePage .invoice-line-items .table-wrap,
body.theme-dark #quotePage .invoice-table-wrap {
  background: #0d1628;
  border-color: #293850;
}

body.theme-dark #invoicePage.invoice-page,
body.theme-dark #quotePage.invoice-page {
  border-color: #2b4466;
  background:
    radial-gradient(120% 140% at -10% -18%, rgba(56, 189, 248, 0.11) 0%, transparent 68%),
    radial-gradient(115% 130% at 110% -18%, rgba(59, 130, 246, 0.1) 0%, transparent 68%),
    linear-gradient(180deg, #0d1628 0%, #0f1a2d 100%);
  box-shadow: 0 24px 46px rgba(2, 6, 23, 0.52);
}

body.theme-dark #invoicePage .invoice-composer,
body.theme-dark #invoicePage .invoice-payment-panel,
body.theme-dark #invoicePage .invoice-table-panel,
body.theme-dark #quotePage .invoice-composer,
body.theme-dark #quotePage .quote-preview-panel {
  border-color: #2c3f5a;
  background: linear-gradient(180deg, #101b30 0%, #0e192c 100%);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.44);
}

body.theme-dark #invoicePage .invoice-line-items thead th,
body.theme-dark #invoicePage .invoice-table-wrap thead th,
body.theme-dark #quotePage .invoice-line-items thead th,
body.theme-dark #quotePage .invoice-table-wrap thead th {
  background: linear-gradient(180deg, #1a2d49 0%, #1c3150 100%);
  color: #dbeafe;
  border-bottom-color: #2c3f5a;
}

@media (max-width: 900px) {
  #invoicePage.invoice-page,
  #quotePage.invoice-page,
  #homePlannerSection {
    border-radius: 14px;
  }

  #invoicePage .invoice-composer,
  #invoicePage .invoice-payment-panel,
  #invoicePage .invoice-table-panel,
  #quotePage .invoice-composer,
  #quotePage .quote-preview-panel {
    border-radius: 12px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, #d3e8ff 0%, transparent 40%),
    radial-gradient(circle at top left, #bddaff 0%, transparent 35%),
    var(--bg);
}

body.theme-dark {
  --bg: #0a1624;
  --panel: #14263b;
  --text: #e9f2ff;
  --muted: #a9c0de;
  --accent: #3d8dff;
  --accent-2: #226ad6;
  --danger: #d65b5b;
  --border: #2b4463;
  --warning: #f0a533;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  background:
    radial-gradient(circle at top right, #18355a 0%, transparent 45%),
    radial-gradient(circle at top left, #112949 0%, transparent 40%),
    var(--bg);
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
  background: #0e2136;
  color: var(--text);
  border-color: var(--border);
}

body.theme-dark .check-inline {
  background: #11263b;
  border-color: var(--border);
}

body.theme-dark button.ghost {
  background: transparent;
  color: #9cc8ff;
  border: 1px solid var(--border);
}

body.theme-dark .company-logo-wrap {
  background: #122338;
}

body.theme-dark .role-pill {
  background: #1b3f67;
  color: #d6e7ff;
}

body.theme-dark .inline-count {
  background: #1b3f67;
  color: #d6e7ff;
}

body.theme-dark .topbar {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(44, 105, 182, 0.22) 0%, rgba(44, 105, 182, 0) 48%),
    linear-gradient(180deg, #102338 0%, #0d1d30 100%);
  border-color: #345473;
}

body.theme-dark .topbar-actions {
  background: rgba(13, 28, 46, 0.82);
  border-color: #355472;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 24px rgba(1, 8, 16, 0.24);
}

body.theme-dark .topbar-nav-btn,
body.theme-dark .topbar-utility-btn,
body.theme-dark .topbar-profile-btn {
  border-color: #355472;
  background: rgba(18, 39, 61, 0.9);
  color: #d8ebff;
}

body.theme-dark .topbar-nav-btn:hover,
body.theme-dark .topbar-utility-btn:hover,
body.theme-dark .topbar-profile-btn:hover {
  border-color: #4d78a2;
  background: rgba(23, 50, 79, 0.96);
}

body.theme-dark .topbar-nav-btn.active,
body.theme-dark .topbar-nav-btn[aria-current="page"],
body.theme-dark .topbar-profile-btn.active,
body.theme-dark .topbar-profile-btn[aria-current="page"] {
  border-color: #5f92c3;
  background: linear-gradient(135deg, #21486f 0%, #173758 100%);
  color: #f4fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(2, 10, 18, 0.24);
}

body.theme-dark .topbar-user {
  border-color: #355472;
  background: rgba(13, 28, 46, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 24px rgba(1, 8, 16, 0.24);
}

body.theme-dark .topbar-user-kicker {
  color: #90b8e4;
}

body.theme-dark .topbar-user-name {
  color: #f3f9ff;
}

body.theme-dark .topbar-user .role-pill {
  background: #173653;
  color: #d7ebff;
}

body.theme-dark .profile-account-permissions {
  border-color: #355270;
  background: linear-gradient(180deg, #142a41 0%, #102338 100%);
}

body.theme-dark .profile-account-permissions strong {
  color: #e0eeff;
}

body.theme-dark .profile-account-status {
  border-color: #355270;
  background: #11273f;
  color: #d2e5ff;
}

body.theme-dark .profile-account-status[data-tone="success"] {
  border-color: #35645b;
  background: #102d29;
  color: #d4f4ed;
}

body.theme-dark .profile-account-status[data-tone="error"] {
  border-color: #6b4545;
  background: #331d21;
  color: #ffd8d8;
}

body.theme-dark .home-stat-card {
  border-color: #33506f;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 34px rgba(1, 8, 16, 0.34);
}

body.theme-dark .home-stat-card-ongoing {
  background: linear-gradient(135deg, #142b43 0%, #17314b 100%);
}

body.theme-dark .home-stat-card-completed {
  background: linear-gradient(135deg, #12333a 0%, #153a42 100%);
}

body.theme-dark .home-stat-card-quotes {
  background: linear-gradient(135deg, #3b2c1a 0%, #46311a 100%);
}

body.theme-dark .home-stat-kicker {
  border-color: #355270;
  background: rgba(16, 34, 54, 0.72);
  color: #d0e5ff;
}

body.theme-dark .home-stat-card h2 {
  color: #d9eafd;
}

body.theme-dark .home-stat-card p {
  color: #f4fbff;
}

body.theme-dark .home-stat-meta {
  color: #acc5df;
}

body.theme-dark .home-dashboard-widget {
  border-color: #31506f;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 36px rgba(1, 8, 16, 0.34);
}

body.theme-dark .home-widget-chat {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(92, 154, 222, 0.16) 0%, rgba(92, 154, 222, 0) 55%),
    linear-gradient(180deg, #102338 0%, #0f2236 100%);
}

body.theme-dark .home-widget-parts {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(83, 151, 219, 0.16) 0%, rgba(83, 151, 219, 0) 55%),
    linear-gradient(180deg, #102338 0%, #0f2236 100%);
}

body.theme-dark .home-widget-reminders {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(221, 157, 68, 0.16) 0%, rgba(221, 157, 68, 0) 55%),
    linear-gradient(180deg, #14263a 0%, #112234 100%);
}

body.theme-dark .home-widget-jobs {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(54, 176, 155, 0.16) 0%, rgba(54, 176, 155, 0) 55%),
    linear-gradient(180deg, #10263a 0%, #0f2233 100%);
}

body.theme-dark .home-widget-head h3 {
  color: #e0eeff;
}

body.theme-dark .home-widget-actions .ghost {
  border-color: #355270;
  background: rgba(18, 40, 63, 0.88);
  color: #d2e6ff;
}

body.theme-dark #homeChatUnreadCount,
body.theme-dark #homePartsAlertCount,
body.theme-dark #homeRemindersCount,
body.theme-dark #homeTodayJobsCount {
  border-color: #355270;
  background: rgba(18, 40, 63, 0.86);
  color: #d2e6ff;
  box-shadow: none;
}

body.theme-dark .home-dashboard-widget .activity-list > .empty {
  border-color: #355270;
  background: rgba(16, 34, 54, 0.72);
  color: #b6cde5;
}

body.theme-dark .home-notice-card {
  border-color: #355270;
  background: linear-gradient(180deg, rgba(18, 40, 63, 0.96) 0%, rgba(15, 34, 54, 0.96) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 32px rgba(1, 8, 16, 0.28);
}

body.theme-dark .home-notice-card.is-clickable:hover,
body.theme-dark .home-notice-card.is-clickable:focus-visible {
  border-color: #4a769f;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 36px rgba(1, 8, 16, 0.34);
}

body.theme-dark .home-notice-card[data-tone="chat"] {
  background: linear-gradient(180deg, #14304a 0%, #10253a 100%);
}

body.theme-dark .home-notice-card[data-tone="parts"] {
  background: linear-gradient(180deg, #122d47 0%, #10253a 100%);
}

body.theme-dark .home-notice-card[data-tone="critical"] {
  border-color: #7a4a4a;
  background: linear-gradient(180deg, #3a2024 0%, #30181c 100%);
}

body.theme-dark .home-notice-card[data-tone="reminder"] {
  background: linear-gradient(180deg, #372817 0%, #2d2114 100%);
}

body.theme-dark .home-notice-card[data-tone="jobs"],
body.theme-dark .home-notice-card[data-tone="success"] {
  background: linear-gradient(180deg, #143430 0%, #102a27 100%);
}

body.theme-dark .home-notice-eyebrow {
  color: #9db8d5;
}

body.theme-dark .home-notice-title {
  color: #ecf5ff;
}

body.theme-dark .home-notice-meta,
body.theme-dark .home-notice-body {
  color: #abc3dd;
}

body.theme-dark .home-notice-tag {
  border-color: #355270;
  background: rgba(19, 44, 69, 0.78);
  color: #d2e5ff;
}

body.theme-dark .home-notice-tag[data-tone="asset"] {
  background: rgba(20, 62, 55, 0.78);
  color: #d6f4ed;
}

body.theme-dark .message-thread-item {
  background: linear-gradient(180deg, #132a41 0%, #102338 100%);
  border-color: #31506f;
  box-shadow: 0 8px 18px rgba(1, 8, 16, 0.3);
}

body.theme-dark .message-thread-item.active {
  border-color: #4b79ab;
  box-shadow:
    inset 0 0 0 1px #4b79ab,
    0 8px 20px rgba(1, 8, 16, 0.42);
}

body.theme-dark .message-pin-pill {
  border-color: #355675;
  background: #14324e;
  color: #b9d9fb;
}

body.theme-dark .message-mute-pill {
  border-color: #40566d;
  background: #1a3045;
  color: #c0ccda;
}

body.theme-dark .message-unread-pill {
  border-color: #4a76a6;
  background: #173a5d;
  color: #ffffff;
}

body.theme-dark .message-thread-overview-card {
  border-color: #35516b;
  background: linear-gradient(180deg, #132a41 0%, #102338 100%);
  color: #e6f0fb;
  box-shadow: none;
}

body.theme-dark .message-thread-overview-card[data-tone="unread"] {
  background: linear-gradient(180deg, rgba(44, 118, 203, 0.22) 0%, #112639 100%);
}

body.theme-dark .message-thread-overview-card[data-tone="unread"] .message-thread-overview-value {
  color: #ffffff;
}

body.theme-dark .message-thread-overview-card[data-tone="ready"] {
  background: linear-gradient(180deg, rgba(57, 154, 113, 0.2) 0%, #112639 100%);
}

body.theme-dark .message-thread-overview-card[data-tone="chat"] {
  background: linear-gradient(180deg, rgba(20, 63, 115, 0.24) 0%, #112639 100%);
}

body.theme-dark .message-thread-overview-card[data-tone="new"] {
  background: linear-gradient(180deg, rgba(44, 118, 203, 0.22) 0%, #112639 100%);
}

body.theme-dark .message-thread-overview-value,
body.theme-dark .message-quick-start-head strong,
body.theme-dark .message-quick-start-copy strong {
  color: #f1f7ff;
}

body.theme-dark .message-thread-overview-sub,
body.theme-dark .message-quick-start-copy small {
  color: #9fb6cc;
}

body.theme-dark .message-quick-start {
  border-color: #35516b;
  background: rgba(16, 35, 56, 0.92);
  box-shadow: none;
}

body.theme-dark .message-quick-start-chip {
  border-color: #35516b;
  background: linear-gradient(180deg, #132a41 0%, #102338 100%);
  color: #f1f7ff;
  box-shadow: none;
}

body.theme-dark .message-quick-start-count,
body.theme-dark .message-thread-context-pill {
  background: #173a5d;
  color: #d4e9ff;
}

body.theme-dark .message-thread-context-pill.neutral {
  background: #1a3045;
  color: #c0ccda;
}

body.theme-dark .message-link-pill {
  border-color: #38608a;
  background: #173651;
  color: #c7ddf5;
}

body.theme-dark .message-link-supplier {
  border-color: #45586f;
  background: #1a2f43;
  color: #c7d2de;
}

body.theme-dark .message-thread-item.muted {
  border-color: #3b5068;
}

body.theme-dark .messages-layout {
  border-color: #314b63;
  background: linear-gradient(180deg, #102436 0%, #0d2031 100%);
  box-shadow: none;
}

body.theme-dark #messagesPage .message-threads-panel {
  border-right-color: #314b63;
  background: linear-gradient(180deg, #11273a 0%, #0e2132 100%);
}

body.theme-dark #messagesPage .message-conversation-panel {
  background:
    radial-gradient(circle at 20% 20%, rgba(80, 146, 211, 0.06) 0%, rgba(80, 146, 211, 0) 24%),
    linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
}

body.theme-dark .message-thread-item:hover {
  border-color: #38536c;
  background: rgba(18, 40, 58, 0.9);
}

body.theme-dark .message-thread-item.active {
  border-color: #486786;
  border-left-color: #7ab3ea;
  background: linear-gradient(180deg, #153148 0%, #122a3d 100%);
  box-shadow: none;
}

body.theme-dark:not(.mobile-chat-view) #messagesPage .message-thread-item.active {
  border-color: #31506f;
  border-left-color: transparent;
  background: linear-gradient(180deg, #132a41 0%, #102338 100%);
  box-shadow: 0 8px 18px rgba(1, 8, 16, 0.3);
}

body.theme-dark .message-thread-time,
body.theme-dark .message-thread-meta,
body.theme-dark #messagesPage .message-conversation-head .sub {
  color: #5f7893;
}

body.theme-dark .message-thread-title {
  color: #f1f7ff;
}

body.theme-dark .message-conversation-copy h3 {
  color: #143552;
}

body.theme-dark .message-thread-avatar.empty,
body.theme-dark .message-conversation-avatar.empty {
  background: linear-gradient(180deg, #23384b 0%, #1b2d3d 100%);
  color: #9cb6c9;
}

body.theme-dark .message-bubble {
  background: #ffffff;
  border-color: #d8e6f3;
  box-shadow: 0 10px 22px rgba(20, 58, 104, 0.08);
  color: #143552;
}

body.theme-dark .message-bubble.mine {
  background: linear-gradient(180deg, #2c76cb 0%, #2566b2 100%);
  border-color: #2c76cb;
}

body.theme-dark .message-conversation {
  background:
    radial-gradient(circle at 20% 20%, rgba(111, 179, 244, 0.04) 0%, rgba(111, 179, 244, 0) 24%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-color: #d8e6f3;
  color: #143552;
}

body.theme-dark .message-day-divider span {
  background: rgba(255, 255, 255, 0.92);
  border-color: #d8e6f3;
  color: #6b839d;
}

body.theme-dark .message-conversation-head {
  border-bottom-color: #d8e6f3;
  background: rgba(255, 255, 255, 0.92);
}

body.theme-dark #messagesPage .message-thread-filter {
  border-color: #31506f;
  background: #11273f;
}

body.theme-dark #messagesPage .message-unread-toggle {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark #messagesPage .message-compose-form > label {
  border-color: #d8e6f3;
  background: #f7fbff;
}

body.theme-dark #messagesPage .message-compose-form {
  border-color: #d8e6f3;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(17, 56, 97, 0.08);
  color: #143552;
}

body.theme-dark #messagesPage .message-compose-form textarea {
  background: #f7fbff;
  color: #143552;
  border-color: #d8e6f3;
}

body.theme-dark #messagesPage .message-compose-form input,
body.theme-dark #messagesPage .message-compose-form select {
  background: #f7fbff;
  color: #143552;
  border-color: #d8e6f3;
}

body.theme-dark .message-bubble small {
  color: #6b839d;
}

body.theme-dark #emailPage .email-platform-compose-panel,
body.theme-dark #emailPage .email-webmail-sidebar,
body.theme-dark #emailPage .email-webmail-list-panel,
body.theme-dark #emailPage #emailRecordPreviewPanel {
  border-color: #31506f;
  background: #102338;
}

body.theme-dark #emailPage .email-log-filter {
  border-color: #31506f;
  background: #11273f;
}

body.theme-dark #emailPage .email-folder-btn {
  border-color: #2e4c6a;
  background: #142b42;
  color: #d3e6ff;
}

body.theme-dark #emailPage .email-folder-btn.is-active {
  border-color: #4f78a3;
  background: #1a3958;
}

body.theme-dark #emailPage .email-thread-item {
  border-color: #2f4d6d;
  background: #12283f;
  color: #d6e7ff;
}

body.theme-dark #emailPage .email-thread-item.is-unread {
  border-color: #6ca6dd;
  background: #173654;
  box-shadow: inset 3px 0 0 #7db8ef;
}

body.theme-dark #emailPage .email-thread-item.is-flagged {
  border-color: #88703e;
}

body.theme-dark #emailPage .email-thread-item.is-active {
  border-color: #4f78a3;
  background: #194166;
}

body.theme-dark #emailPage .email-thread-item.is-active.is-unread {
  background: #204b73;
}

body.theme-dark #emailPage .email-thread-snippet {
  color: #a9c3df;
}

body.theme-dark #emailPage .email-thread-meta {
  color: #93abca;
}

body.theme-dark #emailPage .email-thread-pill {
  background: #18324a;
  color: #d3e6ff;
}

body.theme-dark #emailPage .email-thread-pill-unread {
  background: #1f4f78;
  color: #edf7ff;
}

body.theme-dark #emailPage .email-thread-pill-flagged {
  background: #6a5121;
  color: #fff0c8;
}

body.theme-dark #emailPage .email-record-folder-select {
  color: #a9c3df;
}

body.theme-dark #emailPage .email-record-preview-body {
  border-color: #31506f;
  background: #0f2236;
  color: #d6e7ff;
}

body.theme-dark #settings-email-platform .email-folder-settings-panel {
  border-top-color: #31506f;
}

body.theme-dark #settings-email-platform .email-folder-setting-card {
  border-color: #31506f;
  background: #102338;
}

body.theme-dark #settings-email-platform .email-folder-setting-meta {
  color: #a9c3df;
}

.app-shell {
  width: min(96vw, 1650px);
  margin: 0 auto;
  padding: 1.2rem;
}

.company-logo-wrap {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 1200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 0.3rem;
  transform: none;
  will-change: auto;
}

.company-logo {
  display: block;
  width: auto;
  height: 58px;
  max-width: 190px;
  object-fit: contain;
}

.hidden {
  display: none !important;
}

.pac-container {
  z-index: 5000 !important;
  border: 1px solid #c8dcf2;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

body.customer-address-autocomplete-hidden .pac-container {
  display: none !important;
}

.customer-address-autocomplete-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  z-index: 5001;
  background: #ffffff;
  border: 1px solid #c8dcf2;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  max-height: 220px;
  overflow: auto;
}

.customer-address-autocomplete-item {
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #e4edf7;
  color: #103a6a;
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.customer-address-autocomplete-item:last-child {
  border-bottom: 0;
}

.customer-address-autocomplete-item:hover,
.customer-address-autocomplete-item.active {
  background: #eaf3ff;
}

.login-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.login-panel.platform-auth-mode {
  background:
    radial-gradient(circle at 18% 20%, rgba(35, 91, 171, 0.2), transparent 48%),
    radial-gradient(circle at 82% 16%, rgba(16, 61, 128, 0.22), transparent 40%),
    linear-gradient(160deg, rgba(236, 245, 255, 0.9) 0%, rgba(225, 237, 252, 0.96) 100%);
}

.login-panel.customer-portal-auth-mode {
  background:
    radial-gradient(circle at 14% 22%, rgba(20, 122, 186, 0.16), transparent 48%),
    radial-gradient(circle at 84% 12%, rgba(17, 95, 164, 0.2), transparent 42%),
    linear-gradient(160deg, rgba(236, 249, 255, 0.92) 0%, rgba(224, 242, 254, 0.96) 100%);
}

.login-card {
  width: min(460px, 95vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.2rem;
  display: grid;
  gap: 0.8rem;
}

.login-panel.platform-auth-mode .login-card {
  width: min(520px, 95vw);
  border-color: color-mix(in srgb, var(--accent-2) 36%, var(--border) 64%);
  box-shadow: 0 22px 54px rgba(18, 54, 105, 0.18);
  background:
    radial-gradient(circle at top right, rgba(189, 220, 255, 0.28), transparent 48%),
    var(--panel);
}

.login-panel.customer-portal-auth-mode .login-card {
  width: min(520px, 95vw);
  border-color: #b4d9f5;
  box-shadow: 0 22px 54px rgba(17, 82, 140, 0.16);
  background:
    radial-gradient(circle at top right, rgba(180, 224, 255, 0.22), transparent 52%),
    var(--panel);
}

.login-card p {
  margin: 0;
  color: var(--muted);
}

.auth-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 86px;
  padding: 0.2rem 0 0.15rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, #ffffff 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 90%, #eef6ff 10%);
}

.auth-logo {
  display: block;
  width: auto;
  max-width: min(88%, 320px);
  max-height: 92px;
  object-fit: contain;
}

.auth-build-stamp {
  margin: 0;
  text-align: center;
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.logo-save-status {
  margin-top: 0.2rem;
  min-height: 1.1rem;
  font-weight: 600;
  color: #2a66c7;
}

.logo-save-status[data-tone="error"] {
  color: #b32626;
}

.logo-save-status[data-tone="warning"] {
  color: #b26d00;
}

.auth-brand-title {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--accent-2) 76%, #0f172a 24%);
}

.login-panel.platform-auth-mode .auth-brand-title {
  color: color-mix(in srgb, var(--accent-2) 86%, #0b325f 14%);
}

.login-panel.customer-portal-auth-mode .auth-brand-title {
  color: color-mix(in srgb, #1d6fb7 84%, #0b2a4a 16%);
}

.auth-mode-title {
  margin: 0.2rem 0 0;
  font-size: 1.15rem;
  color: var(--muted);
}

.login-panel.platform-auth-mode .auth-mode-title {
  color: color-mix(in srgb, var(--accent-2) 82%, #0f172a 18%);
  font-weight: 700;
}

.login-panel.customer-portal-auth-mode .auth-mode-title {
  color: color-mix(in srgb, #1c6eb2 78%, #0f172a 22%);
  font-weight: 700;
}

.signup-message {
  color: var(--accent-2);
  font-weight: 600;
}

.login-card .text-button {
  justify-self: start;
  width: fit-content;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.login-card .text-button:hover,
.login-card .text-button:active,
.login-card .text-button:focus-visible {
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
  outline: none;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: 0.7rem 1rem 0.7rem 13.5rem;
  margin-bottom: 1rem;
}

body.customer-portal-session .topbar {
  padding-left: 1rem;
}

body.customer-portal-session .topbar-actions > button,
body.customer-portal-session #topbarAccountSlot,
body.customer-portal-session #mobileQuickNav {
  display: none !important;
}

.customer-portal-page {
  display: grid;
  gap: 0.9rem;
}

.customer-portal-page .customer-portal-title-group {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.customer-portal-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.customer-portal-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: 126px;
  object-fit: contain;
}

.customer-portal-page .customer-portal-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-portal-page .panel {
  margin: 0;
}

.customer-portal-page .customer-portal-summary-panel .customer-portal-summary-wrap table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.customer-portal-summary-panel #customerPortalSummaryBody th {
  width: 220px;
  white-space: normal;
  vertical-align: top;
  color: #2b527f;
}

.customer-portal-summary-panel #customerPortalSummaryBody td {
  position: static;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
  color: var(--text);
}

.customer-portal-page .table-wrap {
  border: 1px solid #dbe8f6;
}

.customer-portal-page .table-wrap table {
  min-width: 680px;
}

.customer-portal-page .table-wrap a {
  color: var(--accent-2);
  font-weight: 700;
  text-decoration: none;
}

.customer-portal-page .table-wrap a:hover {
  text-decoration: underline;
}

body.theme-dark .login-panel.customer-portal-auth-mode {
  background:
    radial-gradient(circle at 14% 22%, rgba(36, 105, 168, 0.3), transparent 50%),
    radial-gradient(circle at 84% 12%, rgba(23, 70, 126, 0.34), transparent 44%),
    linear-gradient(160deg, rgba(10, 27, 46, 0.96) 0%, rgba(12, 33, 56, 0.96) 100%);
}

body.theme-dark .login-panel.customer-portal-auth-mode .login-card {
  border-color: #2d5377;
  box-shadow: 0 24px 58px rgba(6, 17, 31, 0.42);
  background:
    radial-gradient(circle at top right, rgba(69, 130, 190, 0.2), transparent 52%),
    #102237;
}

body.theme-dark .login-panel.customer-portal-auth-mode .auth-brand-title,
body.theme-dark .login-panel.customer-portal-auth-mode .auth-mode-title {
  color: #d3e8ff;
}

body.theme-dark .customer-portal-logo-wrap {
  border-color: #2d5377;
  background: #0f2740;
  box-shadow: 0 4px 12px rgba(6, 17, 31, 0.34);
}

body.theme-dark .customer-portal-summary-panel #customerPortalSummaryBody th {
  color: #a9c3df;
}

h1,
h2 {
  margin: 0;
}

h3 {
  margin: 0;
}

.sub {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.inline-count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #d6e8ff;
  color: #194f9b;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.role-pill {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #d6e8ff;
  color: #194f9b;
  font-size: 0.75rem;
  font-weight: 700;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#profilePageBtn {
  margin-top: 0.3rem;
}

#profilePage .report-bar-row {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

#profilePage .report-bar-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#profilePage .report-bar-value {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  display: block;
  text-align: left;
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  word-break: break-word;
}

#profilePage {
  display: grid;
  gap: 1rem;
}

#profilePage .profile-header-actions {
  align-items: center;
  justify-content: flex-end;
}

#profilePage #logoutBtn {
  min-width: 112px;
}

.profile-account-form {
  gap: 0.9rem 1rem;
}

.profile-account-form input[disabled] {
  opacity: 0.78;
  cursor: not-allowed;
}

.profile-account-permissions {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

.profile-account-permissions strong {
  color: #184a86;
}

.profile-account-permissions .sub {
  margin: 0;
}

.profile-account-actions {
  align-self: end;
  justify-content: flex-start;
}

.profile-account-status {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #f8fbff;
  color: #2b537f;
  font-weight: 700;
}

.profile-account-status[data-tone="success"] {
  border-color: #b9e2d9;
  background: #eefbf7;
  color: #1d6e60;
}

.profile-account-status[data-tone="error"] {
  border-color: #f0c5c5;
  background: #fff4f4;
  color: #a23131;
}

.profile-account-status[data-tone="info"] {
  border-color: #cfe0f2;
  background: #f8fbff;
  color: #2b537f;
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 0.35rem;
  border-radius: 999px;
  background: #d62828;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0 0.35rem;
}

.settings-toggle-btn {
  margin-left: auto;
}

.stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.stat-card,
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat-card {
  padding: 1rem;
}

.stat-card h2 {
  font-size: 0.95rem;
  color: var(--muted);
}

.stat-card p {
  font-size: 1.8rem;
  margin: 0.4rem 0 0;
  font-weight: 700;
}

#stockPage .stock-stats-grid {
  margin-bottom: 1rem;
  align-items: stretch;
}

#stockPage .stock-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 1rem 1.05rem 0.95rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

#stockPage .stock-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 24px;
  pointer-events: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

#stockPage .stock-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16);
}

#stockPage .stock-widget-head {
  margin: -1rem -1.05rem 0.95rem;
  padding: 0.95rem 1rem;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

#stockPage .stock-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

#stockPage .stock-widget-head h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

#stockPage .stock-widget-inline {
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

#stockPage .stock-stat-card p {
  margin: 0.1rem 0 0;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#stockPage .stock-widget-meta {
  margin-top: 0.32rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f6a87;
}

#stockPage .stock-widget-card-items {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

#stockPage .stock-widget-card-items .stock-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

#stockPage .stock-widget-card-items p {
  color: #0f4a82;
}

#stockPage .stock-widget-card-units {
  background: linear-gradient(180deg, #e8faf3 0%, #f2fcf8 100%);
}

#stockPage .stock-widget-card-units .stock-widget-head {
  background: linear-gradient(135deg, #2b9b85 0%, #1c7f6c 100%);
}

#stockPage .stock-widget-card-units p {
  color: #136b5a;
}

#stockPage .stock-widget-card-units .stock-widget-meta {
  color: #2d685f;
}

#stockPage .stock-widget-card-low {
  background: linear-gradient(180deg, #fff3e5 0%, #fff9f1 100%);
}

#stockPage .stock-widget-card-low .stock-widget-head {
  background: linear-gradient(135deg, #d98827 0%, #bc6414 100%);
}

#stockPage .stock-widget-card-low p {
  color: #95561c;
}

#stockPage .stock-widget-card-low .stock-widget-meta {
  color: #7e5e37;
}

#stockPage .stock-stat-card.is-active {
  transform: translateY(-3px);
  filter: saturate(1.05);
}

#stockPage .stock-widget-card-items.is-active::after {
  border-color: rgba(34, 108, 183, 0.52);
}

#stockPage .stock-widget-card-units.is-active::after {
  border-color: rgba(24, 135, 110, 0.56);
}

#stockPage .stock-widget-card-low.is-active::after {
  border-color: rgba(207, 123, 37, 0.58);
}

#stockPage .stock-stat-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
}

#stockPage .stock-stat-card:focus-visible::after {
  border-color: rgba(44, 118, 203, 0.58);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-stat-card {
  box-shadow: 0 16px 28px rgba(2, 8, 20, 0.28);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-stat-card:hover {
  box-shadow: 0 22px 36px rgba(2, 8, 20, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-items {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-items .stock-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-units {
  background: linear-gradient(180deg, #0f251f 0%, #10211d 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-units .stock-widget-head {
  background: linear-gradient(135deg, #227560 0%, #1f9779 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-low {
  background: linear-gradient(180deg, #2b2217 0%, #22180f 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-low .stock-widget-head {
  background: linear-gradient(135deg, #9a6213 0%, #c77718 100%);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-inline {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-items p {
  color: #d7ebff;
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-units p {
  color: #c6f7ea;
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-low p {
  color: #ffd9a6;
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-meta {
  color: #a9c1db;
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-units .stock-widget-meta {
  color: #97d1c6;
}

body.theme-dark:not(.mobile-demo-mode) #stockPage .stock-widget-card-low .stock-widget-meta {
  color: #d8b88b;
}

#stockPage .stock-inventory-tools {
  margin-left: auto;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

#stockPage .stock-inventory-tools input[type="search"] {
  min-width: min(46vw, 440px);
}

@media (max-width: 900px) {
  #stockPage .stock-inventory-tools input[type="search"] {
    min-width: 100%;
  }
}

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.panel {
  padding: 1rem;
  margin-bottom: 1rem;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 0.8rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.check-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.55rem 0.7rem;
}

.check-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}

button {
  border: none;
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

button:hover {
  background: var(--accent-2);
}

button.small {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

a.small {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  font-size: 0.8rem;
  text-decoration: none;
}

button.danger {
  background: var(--danger);
}

button.ghost {
  background: #fff;
  color: var(--accent);
  border: 1px solid #9fc3ee;
}

button.ghost:hover {
  background: #eaf3ff;
  color: var(--accent-2);
  border-color: #6fa3e3;
}

button.danger.ghost {
  color: var(--danger);
  border: 1px solid #e6bbbb;
}

button.danger.ghost:hover {
  background: #ffe9e9;
  color: #8a1919;
  border-color: #df9f9f;
}

.table-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.table-wrap {
  overflow-x: auto;
}

.page-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.report-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.report-pie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.report-pie-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(78, 130, 205, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(140, 199, 255, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 255, 0.98) 100%);
  box-shadow: 0 18px 38px rgba(43, 84, 139, 0.08);
}

.report-pie-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.report-pie-card-head h4 {
  margin: 0;
  font-size: 1rem;
}

.report-pie-card-meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.report-pie-card-body {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
}

.report-donut-shell {
  position: relative;
  width: min(220px, 100%);
  margin: 0 auto;
}

.report-donut {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.report-donut-track {
  fill: none;
  stroke: rgba(130, 164, 206, 0.16);
  stroke-width: 16;
}

.report-donut-segment {
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 160ms ease, stroke-width 160ms ease, filter 160ms ease;
}

.report-donut-segment:hover,
.report-donut-segment:focus,
.report-donut-segment.active {
  opacity: 1;
  stroke-width: 19;
  filter: drop-shadow(0 6px 10px rgba(46, 91, 160, 0.18));
  outline: none;
}

.report-donut-center {
  position: absolute;
  inset: 50%;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0.8rem;
  box-shadow: inset 0 0 0 1px rgba(120, 162, 214, 0.12);
}

.report-donut-center-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.report-donut-center-value {
  color: #11417d;
  font-size: 1.1rem;
  line-height: 1.15;
}

.report-donut-center-subtext {
  color: var(--muted);
  font-size: 0.72rem;
}

.report-pie-legend {
  display: grid;
  gap: 0.45rem;
}

.report-pie-legend-row {
  width: 100%;
  border: 1px solid rgba(92, 133, 188, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0.65rem 0.7rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  color: var(--text);
  box-shadow: none;
  transform: none;
}

.report-pie-legend-row:hover,
.report-pie-legend-row:focus,
.report-pie-legend-row.active {
  border-color: rgba(53, 115, 197, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(239, 247, 255, 1) 100%);
  box-shadow: 0 12px 24px rgba(43, 84, 139, 0.08);
  transform: none;
  outline: none;
}

.report-pie-legend-swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
}

.report-pie-legend-label {
  min-width: 0;
  font-weight: 700;
}

.report-pie-legend-value {
  color: #1e4e8f;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.report-bars {
  display: grid;
  gap: 0.5rem;
}

.report-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}

.report-bar-label {
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-bar-wrap {
  position: relative;
  border: 1px solid var(--border);
  background: #f7fbff;
  border-radius: 999px;
  min-height: 26px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.report-bar-fill {
  display: block;
  min-width: 10px;
  height: 100%;
  min-height: 26px;
  background: linear-gradient(90deg, #3b86df 0%, #67a8ee 100%);
}

.report-bar-value {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #0e3f7f;
  font-weight: 700;
  font-size: 0.78rem;
}

th {
  color: var(--muted);
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-ok {
  background: #d6e8ff;
  color: #194f9b;
}

.status-low {
  background: #ffe7c6;
  color: #925f00;
}

.status-mid {
  background: #fff3cd;
  color: #8a6500;
}

.status-out {
  background: #ffd6d6;
  color: #8f1b1b;
}

.home-alert-row {
  margin-bottom: 0;
  align-items: center;
}

.home-dashboard-filters > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.home-dashboard-filters[open] > summary {
  margin-bottom: 0.75rem;
}

#reportsPage {
  display: grid;
  gap: 0.85rem;
}

#reportsPage > .table-head {
  margin-bottom: 0.15rem;
}

#reportsPage .home-dashboard-filters {
  margin: 0;
}

#reportsPage .home-dashboard-filters .grid-form {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .report-pie-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .report-pie-card-body {
    grid-template-columns: 1fr;
  }
}

.activity-list {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.activity-list li {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: #f8fbff;
}

.home-stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  border-radius: 18px;
  border-color: #d4e5f7;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 36px rgba(36, 84, 140, 0.12);
}

.home-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.95;
}

.home-stat-card > * {
  position: relative;
  z-index: 1;
}

.home-stat-card-ongoing {
  background: linear-gradient(135deg, #f8fbff 0%, #e6f1ff 100%);
}

.home-stat-card-ongoing::before {
  background:
    radial-gradient(85% 90% at 90% 0%, rgba(69, 138, 226, 0.24) 0%, rgba(69, 138, 226, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(235, 245, 255, 0.05) 100%);
}

.home-stat-card-completed {
  background: linear-gradient(135deg, #f6fdff 0%, #ddf6f3 100%);
}

.home-stat-card-completed::before {
  background:
    radial-gradient(85% 90% at 92% 0%, rgba(39, 160, 147, 0.2) 0%, rgba(39, 160, 147, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(225, 245, 241, 0.04) 100%);
}

.home-stat-card-quotes {
  background: linear-gradient(135deg, #fff9f0 0%, #ffe2b8 100%);
}

.home-stat-card-quotes::before {
  background:
    radial-gradient(85% 90% at 90% 0%, rgba(239, 152, 50, 0.18) 0%, rgba(239, 152, 50, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 240, 212, 0.06) 100%);
}

.home-stat-card[data-state="busy"] {
  border-color: #82b7f1;
}

.home-stat-card[data-state="positive"] {
  border-color: #74d1c3;
}

.home-stat-card[data-state="attention"] {
  border-color: #f0ba68;
}

.home-stat-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.4rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid rgba(18, 79, 145, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #23548f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-stat-meta {
  display: block;
  margin-top: 0.65rem;
  color: #4f6782;
  font-size: 0.82rem;
  font-weight: 600;
}

.home-stat-card h2 {
  margin: 0;
  color: #18406f;
}

.home-stat-card p {
  margin-top: 0.55rem;
  font-size: 2.4rem;
  color: #0f3f78;
}

.home-dashboard-widget {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border-color: #d4e5f7;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 34px rgba(34, 79, 135, 0.1);
}

.home-dashboard-widget::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #74b1ee 0%, #2f79cf 100%);
}

.home-widget-chat {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(78, 152, 236, 0.13) 0%, rgba(78, 152, 236, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

.home-widget-parts {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(51, 133, 214, 0.12) 0%, rgba(51, 133, 214, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
}

.home-widget-reminders {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(239, 162, 55, 0.14) 0%, rgba(239, 162, 55, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
}

.home-widget-jobs {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(52, 168, 150, 0.14) 0%, rgba(52, 168, 150, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f4fbf9 100%);
}

.home-dashboard-widget[data-state="attention"]::before,
.home-dashboard-widget[data-state="warm"]::before {
  background: linear-gradient(90deg, #ffc972 0%, #f28c25 100%);
}

.home-dashboard-widget[data-state="critical"]::before {
  background: linear-gradient(90deg, #ff8a8a 0%, #de4747 100%);
}

.home-dashboard-widget[data-state="busy"]::before {
  background: linear-gradient(90deg, #7dbcf1 0%, #2c74cc 100%);
}

.home-dashboard-widget[data-state="positive"]::before,
.home-dashboard-widget[data-state="calm"]::before {
  background: linear-gradient(90deg, #70d0c2 0%, #239985 100%);
}

.home-widget-head {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 0.85rem;
}

.home-widget-head h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #143f73;
}

.home-widget-actions {
  margin-left: auto;
}

.home-widget-actions .ghost {
  border-color: #c7def4;
  background: rgba(255, 255, 255, 0.76);
  color: #1d538f;
}

.home-widget-actions .ghost:hover {
  border-color: #9fc5eb;
  background: rgba(255, 255, 255, 0.96);
}

#homeChatUnreadCount,
#homePartsAlertCount,
#homeRemindersCount,
#homeTodayJobsCount {
  border: 1px solid rgba(35, 93, 157, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #20538f;
  box-shadow: 0 6px 14px rgba(35, 82, 138, 0.08);
}

.home-dashboard-widget .activity-list {
  position: relative;
  z-index: 1;
  gap: 0.75rem;
}

.home-dashboard-widget .activity-list > .empty {
  border: 1px dashed #cfe1f2;
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.58);
  color: #5e7289;
  text-align: center;
}

.home-notice-card {
  position: relative;
  display: grid;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d8e7f6;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.96) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 28px rgba(32, 77, 130, 0.08);
  transition:
    transform var(--motion-med) ease,
    box-shadow var(--motion-med) ease,
    border-color var(--motion-med) ease,
    background var(--motion-med) ease;
}

.home-notice-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, #7cb5ef 0%, #2c76cb 100%);
}

.home-notice-card.is-clickable {
  cursor: pointer;
}

.home-notice-card.is-clickable:hover,
.home-notice-card.is-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: #9ac3ea;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 20px 34px rgba(36, 78, 129, 0.12);
  outline: none;
}

.home-notice-card[data-tone="chat"] {
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

.home-notice-card[data-tone="chat"]::before {
  background: linear-gradient(180deg, #6ab0ff 0%, #2f74cb 100%);
}

.home-notice-card[data-tone="parts"] {
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
}

.home-notice-card[data-tone="parts"]::before {
  background: linear-gradient(180deg, #5ea8ef 0%, #2d73ca 100%);
}

.home-notice-card[data-tone="critical"] {
  background: linear-gradient(180deg, #fff7f7 0%, #fff0ee 100%);
  border-color: #f0c0ba;
}

.home-notice-card[data-tone="critical"]::before {
  background: linear-gradient(180deg, #ff8c82 0%, #db4747 100%);
}

.home-notice-card[data-tone="reminder"] {
  background: linear-gradient(180deg, #fffaf2 0%, #fff3df 100%);
}

.home-notice-card[data-tone="reminder"]::before {
  background: linear-gradient(180deg, #f4b75a 0%, #dc8724 100%);
}

.home-notice-card[data-tone="jobs"] {
  background: linear-gradient(180deg, #f7fffd 0%, #ebfaf6 100%);
}

.home-notice-card[data-tone="jobs"]::before {
  background: linear-gradient(180deg, #48c4b0 0%, #208f7e 100%);
}

.home-notice-card[data-tone="success"] {
  background: linear-gradient(180deg, #f7fffd 0%, #ebfaf6 100%);
}

.home-notice-card[data-tone="success"]::before {
  background: linear-gradient(180deg, #54cab5 0%, #289783 100%);
}

.home-notice-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
}

.home-notice-head-main,
.home-notice-head-aside {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.home-notice-head-aside {
  justify-items: end;
}

.home-notice-eyebrow {
  color: #5b7aa0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-notice-title {
  color: #133f72;
  font-size: 1rem;
  line-height: 1.35;
}

.home-notice-meta {
  color: #58728f;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-notice-body {
  margin: 0;
  color: #4d637d;
  line-height: 1.45;
}

.home-notice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.home-notice-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.58rem;
  border: 1px solid rgba(38, 87, 138, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #254d77;
  font-size: 0.74rem;
  font-weight: 800;
}

.home-notice-tag[data-tone="accent"],
.home-notice-tag[data-tone="job"] {
  background: #e9f4ff;
  color: #1d5a98;
}

.home-notice-tag[data-tone="supplier"],
.home-notice-tag[data-tone="location"] {
  background: #edf6ff;
  color: #306091;
}

.home-notice-tag[data-tone="asset"] {
  background: #ecfaf5;
  color: #247864;
}

.home-notice-tag[data-tone="user"] {
  background: #eff5ff;
  color: #34568b;
}

.home-notice-actions {
  gap: 0.45rem;
}

.home-notice-actions .ghost {
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 1150px) {
  .home-stats-grid {
    grid-template-columns: 1fr;
  }

  .home-widget-head {
    align-items: flex-start;
  }

  .home-widget-actions {
    margin-left: 0;
  }

  .home-notice-head {
    grid-template-columns: 1fr;
  }

  .home-notice-head-aside {
    justify-items: start;
  }
}

.notice-panel {
  margin-top: 1rem;
}

.diary-stats {
  margin-top: 0.6rem;
}

.diary-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.diary-page > .table-head,
.diary-page > .diary-stats,
.diary-page > .diary-entries {
  grid-column: 1 / -1;
}

.diary-page > .panel,
.diary-page > details.panel {
  margin-bottom: 0;
}

.diary-daily-controls {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.diary-daily-controls input[type="date"] {
  max-width: 180px;
}

.diary-daily-controls input[type="month"] {
  max-width: 180px;
}

.table-head input[type="month"] {
  max-width: 180px;
}

.planner-title {
  margin: 0;
}

#homePlannerSection {
  border: 1px solid #b8d5f4;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0% 0%, #f3f8ff 0%, #ffffff 56%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 1px 0 #e8f1fb inset,
    0 10px 28px rgba(30, 84, 150, 0.08);
}

#homePlannerSection .table-head {
  align-items: end;
  gap: 0.75rem;
}

#homePlannerSection .table-head h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

#homePlannerSection .table-head label {
  min-width: 150px;
}

#homePlannerSection .sub.planner-title {
  display: inline-flex;
  margin-top: 0.15rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #cde2f8;
  border-radius: 999px;
  background: #edf5ff;
  color: #215391;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.home-planner-daily-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid #cfe3f8;
  border-radius: 12px;
  background: #f6faff;
}

.home-planner-daily-controls input[type="date"] {
  max-width: 180px;
}

.home-users-block {
  min-width: 180px;
  max-width: 210px;
}

#homePlannerSection .table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
}

#homePlannerSection #homePlannerTableWrap table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

#homePlannerSection #homePlannerTableWrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #edf6ff;
  color: #1c4f8f;
  border-bottom: 1px solid #cfe3f8;
}

#homePlannerSection #weeklyPlannerHeadRow th {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

#homePlannerSection #weeklyPlannerHeadRow th:first-child,
#homePlannerSection #weeklyPlannerBody td:first-child {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

#homePlannerSection #weeklyPlannerHeadRow th:not(:first-child),
#homePlannerSection #weeklyPlannerBody .planner-cell {
  width: auto;
  min-width: 0;
}

#homePlannerSection #weeklyPlannerBody tr:nth-child(even) td {
  background: #fbfdff;
}

#homePlannerSection #weeklyPlannerBody td:first-child {
  font-weight: 700;
  color: #1c4f8f;
  background: #f1f7ff;
  border-right: 1px solid #dce9f8;
  min-width: 140px;
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 0;
  min-height: 720px;
  align-items: stretch;
  border: 1px solid #d7e5f2;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
  box-shadow: 0 18px 40px rgba(17, 56, 97, 0.1);
}

#messagesPage .message-threads-panel,
#messagesPage .message-conversation-panel {
  margin: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#messagesPage .message-threads-panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 0.78rem;
  padding: 1rem;
  border-right: 1px solid #dbe8f5;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

#messagesPage .message-conversation-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  padding: 0;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(86, 165, 237, 0.08) 0%, rgba(86, 165, 237, 0) 46%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.message-thread-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.message-thread-overview-card {
  display: grid;
  gap: 0.22rem;
  padding: 0.82rem 0.85rem;
  border-radius: 20px;
  border: 1px solid #dbe7f4;
  background: #ffffff;
  color: #143552;
  text-align: left;
  box-shadow: 0 10px 24px rgba(17, 56, 97, 0.06);
}

.message-thread-overview-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(17, 56, 97, 0.1);
}

.message-thread-overview-card.active {
  border-color: #2c76cb;
  box-shadow: 0 14px 28px rgba(44, 118, 203, 0.14);
}

.message-thread-overview-card:disabled {
  opacity: 0.62;
  box-shadow: none;
  cursor: default;
}

.message-thread-overview-card[data-tone="unread"] {
  background: linear-gradient(180deg, rgba(44, 118, 203, 0.09) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.message-thread-overview-card[data-tone="unread"] .message-thread-overview-value {
  color: #ffffff;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="unread"] .message-thread-overview-value,
body:not(.mobile-chat-view) .message-unread-pill {
  color: #ffffff;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="unread"] .message-thread-overview-sub {
  color: #ffffff;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="ready"] .message-thread-overview-sub {
  color: #ffffff !important;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="unread"] .message-thread-overview-kicker,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="unread"] .message-thread-overview-value,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="unread"] .message-thread-overview-sub,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="ready"] .message-thread-overview-kicker,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="ready"] .message-thread-overview-value,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="ready"] .message-thread-overview-sub {
  color: #ffffff !important;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="chat"] .message-thread-overview-kicker,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="chat"] .message-thread-overview-value,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="chat"] .message-thread-overview-sub {
  color: #ffffff !important;
}

body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="new"] .message-thread-overview-kicker,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="new"] .message-thread-overview-value,
body:not(.mobile-chat-view) .message-thread-overview-card[data-tone="new"] .message-thread-overview-sub {
  color: #ffffff !important;
}

.message-thread-overview-card[data-tone="ready"] {
  background: linear-gradient(180deg, rgba(57, 154, 113, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.message-thread-overview-card[data-tone="chat"] {
  background: linear-gradient(180deg, rgba(20, 63, 115, 0.1) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.message-thread-overview-card[data-tone="new"] {
  background: linear-gradient(180deg, rgba(44, 118, 203, 0.09) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.message-thread-overview-kicker {
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2c76cb;
}

.message-thread-overview-value {
  font-size: 1.45rem;
  line-height: 1;
  color: #143f73;
}

.message-thread-overview-sub {
  color: #69839d;
  font-size: 0.74rem;
  line-height: 1.3;
}

.message-quick-start {
  display: grid;
  gap: 0.55rem;
  padding: 0.82rem 0.86rem;
  border: 1px solid #d5e5f5;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 22px rgba(17, 56, 97, 0.05);
}

.message-quick-start-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.message-quick-start-head strong {
  font-size: 0.92rem;
  color: #143552;
}

.message-quick-start-count {
  margin-left: auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2c76cb;
  font-size: 0.72rem;
  font-weight: 800;
}

.message-quick-start-scroller {
  display: flex;
  gap: 0.65rem;
  overflow: auto;
  padding-bottom: 0.1rem;
}

.message-quick-start-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 190px;
  padding: 0.7rem 0.75rem;
  border-radius: 18px;
  border: 1px solid #dbe7f4;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  color: #143552;
  box-shadow: 0 8px 20px rgba(17, 56, 97, 0.06);
}

.message-quick-start-chip:hover {
  border-color: #bfd5eb;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
}

.message-quick-start-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

.message-quick-start-copy strong,
.message-quick-start-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-quick-start-copy strong {
  color: #143552;
  font-size: 0.84rem;
}

.message-quick-start-copy small {
  color: #6d839a;
  font-size: 0.72rem;
}

#messagesPage .message-thread-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6faff 0%, #edf5ff 100%);
}

#messagesPage .message-thread-filter input[type="search"] {
  min-width: 0;
}

#messagesPage .message-unread-toggle {
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid #c7daef;
  border-radius: 999px;
  background: #fff;
  gap: 0.35rem;
  white-space: nowrap;
}

#messagesPage .message-thread-filter .small {
  min-height: 36px;
}

.message-thread-list {
  display: grid;
  gap: 0.48rem;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-right: 0.2rem;
}

.message-thread-item {
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 255, 0.96) 100%);
  color: var(--text);
  border: 1px solid #dbe7f4;
  border-left: 4px solid transparent;
  border-radius: 22px;
  display: block;
  padding: 0.84rem 0.88rem;
  box-shadow: 0 10px 24px rgba(17, 56, 97, 0.06);
}

.message-thread-item:hover {
  border-color: #c9dced;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 14px 28px rgba(17, 56, 97, 0.1);
}

.message-thread-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
}

.message-thread-avatar,
.message-conversation-avatar {
  --message-avatar-hue: 212;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background:
    linear-gradient(160deg, hsl(var(--message-avatar-hue) 85% 94%) 0%, #ffffff 100%);
  border: 1px solid hsl(var(--message-avatar-hue) 46% 84%);
  color: hsl(calc(var(--message-avatar-hue) - 18) 52% 30%);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(25, 87, 145, 0.12);
}

.message-thread-avatar.empty,
.message-conversation-avatar.empty {
  background: linear-gradient(180deg, #dbe8f5 0%, #c9dced 100%);
  color: #537193;
  box-shadow: none;
}

.message-thread-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.message-thread-top,
.message-thread-preview-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.message-thread-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.message-thread-context-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2c76cb;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.message-thread-context-pill.neutral {
  background: #f0f4f8;
  color: #58708a;
}

.message-thread-time {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: #6682a0;
}

.message-thread-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  flex: 0 0 auto;
}

.message-pin-pill,
.message-mute-pill,
.message-unread-pill {
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.14rem 0.4rem;
  line-height: 1;
}

.message-pin-pill {
  border: 1px solid #c9daf0;
  background: #eff6ff;
  color: #2d6299;
}

.message-mute-pill {
  border: 1px solid #d3d9e2;
  background: #f4f6f9;
  color: #455766;
}

.message-unread-pill {
  min-width: 1.35rem;
  justify-content: center;
  border: 1px solid #2d6fc0;
  background: #2563eb;
  color: #ffffff;
}

.message-thread-item.active {
  border-color: #c1d7ee;
  border-left-color: #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 16px 30px rgba(24, 81, 147, 0.14);
}

body:not(.mobile-chat-view) #messagesPage .message-thread-item.active {
  border-color: #9fc4e9;
  border-left-color: #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 100%);
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.16);
}

.message-thread-item.unread .message-thread-title {
  color: #124a86;
}

.message-thread-item.pinned {
  border-style: solid;
}

.message-thread-item.muted {
  border-color: #d2d9e3;
  box-shadow: 0 2px 8px rgba(20, 58, 104, 0.06);
}

.message-thread-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.94rem;
  font-weight: 800;
}

.message-thread-preview,
.message-thread-meta {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-preview {
  flex: 1 1 auto;
  font-size: 0.78rem;
}

.message-thread-meta {
  font-size: 0.72rem;
  color: #70889f;
}

.message-conversation-head {
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
  padding: 1rem 1.05rem 0.95rem;
  border-bottom: 1px solid #dbe7f4;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.message-conversation-contact {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  min-width: 0;
}

.message-conversation-avatar {
  width: 52px;
  height: 52px;
  border-radius: 20px;
}

.message-conversation-copy {
  min-width: 0;
}

.message-conversation-copy h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

#messagesPage .message-conversation-head .sub {
  margin: 0.18rem 0 0;
  color: #5f7893;
}

#messagesPage .message-conversation-head .inline-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

body:not(.mobile-chat-view) #messagesPage #messageClearThreadBtn {
  color: #ffffff !important;
  background: #c23535 !important;
  border-color: #a72626 !important;
}

body:not(.mobile-chat-view) #messagesPage #messageClearThreadBtn:hover {
  color: #ffffff !important;
  background: #a92626 !important;
  border-color: #8f1f1f !important;
}

.message-conversation {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(111, 179, 244, 0.05) 0%, rgba(111, 179, 244, 0) 24%),
    radial-gradient(circle at 80% 0%, rgba(138, 195, 247, 0.05) 0%, rgba(138, 195, 247, 0) 22%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  padding: 1.05rem 1.05rem 0.2rem;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 0.85rem;
}

.message-day-divider {
  display: flex;
  justify-content: center;
  padding: 0.08rem 0 0.02rem;
}

.message-day-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dde8f3;
  color: #6b839d;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(17, 56, 97, 0.05);
}

.message-row {
  display: flex;
  align-items: flex-end;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.theirs {
  justify-content: flex-start;
}

.message-bubble {
  position: relative;
  max-width: min(72%, 760px);
  border-radius: 24px 24px 24px 10px;
  border: 1px solid #d2e2f4;
  padding: 0.82rem 0.95rem 0.72rem;
  background: #fff;
  box-shadow: 0 10px 22px rgba(20, 58, 104, 0.08);
}

.message-bubble::after {
  display: none;
}

.message-bubble p {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.5;
}

.message-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-bottom: 0.4rem;
}

.message-link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #c7d8ed;
  background: #eef5ff;
  color: #1f4f84;
  padding: 0.14rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15;
}

button.message-link-pill {
  cursor: pointer;
}

.message-link-supplier {
  border-color: #ccd5df;
  background: #f3f5f8;
  color: #374a5d;
}

.message-bubble small {
  display: block;
  margin-top: 0.42rem;
  color: var(--muted);
  text-align: right;
  font-size: 0.72rem;
}

.message-bubble.mine {
  border-radius: 24px 24px 10px 24px;
  background: linear-gradient(180deg, #2c76cb 0%, #2566b2 100%);
  border-color: #2c76cb;
}

.message-bubble.mine p {
  color: #ffffff;
}

.message-bubble.mine small {
  color: rgba(255, 255, 255, 0.82);
}

.message-bubble.mine .message-link-pill {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.message-bubble.mine .message-link-supplier {
  background: rgba(255, 255, 255, 0.16);
}

.message-quick-replies {
  margin: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#messageMobileComposeToggleBtn {
  display: none;
}

#messagesPage .message-compose-form {
  margin: 0 1rem 1rem;
  padding: 0.88rem;
  border: 1px solid #d8e6f3;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  grid-template-columns: minmax(220px, 280px) minmax(220px, 1fr);
  align-items: end;
  gap: 0.6rem;
  box-shadow: 0 10px 24px rgba(17, 56, 97, 0.08);
}

#messagesPage .message-compose-form > label {
  margin: 0;
}

body:not(.mobile-chat-view) #messagesPage .message-compose-form .message-linked-job-label {
  display: none;
}

body:not(.mobile-chat-view) #messagesPage .message-compose-form .message-supplier-label {
  display: none;
}

body:not(.mobile-chat-view) #messagesPage .message-compose-form .message-recipient-label {
  grid-column: 1 / -1;
}

#messagesPage .message-compose-form .message-supplier-label,
#messagesPage .message-compose-form .message-body-label {
  grid-column: 1 / -1;
}

#messagesPage .message-compose-form textarea {
  min-height: 74px;
  max-height: 180px;
  resize: vertical;
  border-radius: 18px;
  background: #f7fbff;
}

#messagesPage .message-compose-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.12rem;
}

#messagesPage .message-compose-foot #messageBodyCount {
  margin-right: auto;
  font-weight: 700;
}

#messagesPage .message-compose-foot button[type="submit"] {
  min-height: 42px;
  padding-inline: 1rem;
  border-radius: 999px;
}

.email-webmail-head {
  align-items: center;
}

#emailPage #emailComposePanel {
  margin: 0 0 0.8rem;
}

#emailPage .email-webmail-layout {
  display: grid;
  grid-template-columns: minmax(200px, 230px) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
  height: min(74vh, 820px);
  min-height: 560px;
}

#emailPage .email-webmail-layout.is-preview-open {
  grid-template-columns: minmax(200px, 230px) minmax(320px, 0.95fr) minmax(360px, 1.05fr);
}

#emailPage .email-webmail-sidebar,
#emailPage .email-webmail-list-panel,
#emailPage .email-webmail-preview-panel {
  margin: 0;
  min-height: 0;
}

#emailPage .email-webmail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow: visible;
}

#emailPage .email-webmail-list-panel,
#emailPage .email-webmail-preview-panel {
  overflow: hidden;
}

#emailPage .email-folder-list {
  display: grid;
  gap: 0.35rem;
}

#emailPage .email-folder-search {
  display: grid;
  gap: 0.25rem;
  margin: 0.2rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

#emailPage .email-folder-search input {
  min-height: 38px;
}

#emailPage .email-folder-section-title {
  margin: 0.1rem 0 0.1rem;
  font-weight: 700;
}

#emailPage .email-folder-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  background: #f7fbff;
  color: #194367;
  font-weight: 600;
}

#emailPage .email-folder-btn.is-custom {
  border-left: 4px solid var(--email-folder-accent, #3b82f6);
}

#emailPage .email-folder-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

#emailPage .email-folder-accent-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--email-folder-accent, #3b82f6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

#emailPage .email-folder-btn .inline-count {
  font-size: 0.76rem;
}

#emailPage .email-folder-btn.is-active {
  border-color: #78a8da;
  background: #e7f2ff;
  color: #0f3f68;
}

#emailPage .email-log-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #f6faff 0%, #edf5ff 100%);
  overflow: visible;
}

#emailPage .email-log-filter > label {
  margin: 0;
}

#emailPage .email-log-filter > label:nth-of-type(1) {
  grid-column: 1 / -1;
}

#emailPage .email-log-filter button {
  min-height: 42px;
}

#emailPage .email-webmail-list-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
}

#emailPage .email-thread-list {
  display: grid;
  gap: 0.4rem;
  overflow: auto;
  padding-right: 0.2rem;
  min-height: 0;
}

#emailPage .email-thread-item {
  text-align: left;
  border: 1px solid #d2e5fa;
  border-radius: 12px;
  background: #f8fbff;
  color: #163e60;
  padding: 0.62rem 0.68rem;
  width: 100%;
  display: grid;
  gap: 0.2rem;
  box-shadow: none;
  transform: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}

#emailPage .email-thread-item:hover {
  border-color: #98bfe6;
  background: #eef6ff;
  transform: none;
  box-shadow: none;
}

#emailPage .email-thread-item.is-unread {
  border-color: #7caedc;
  background: #eef7ff;
  box-shadow: inset 3px 0 0 #4d93d8;
}

#emailPage .email-thread-item.is-flagged {
  border-color: #d8c287;
}

#emailPage .email-thread-item.is-active {
  border-color: #5b94cf;
  background: #e3f1ff;
}

#emailPage .email-thread-item.is-active.is-unread {
  background: #d9edff;
}

#emailPage .email-thread-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

#emailPage .email-thread-top strong {
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emailPage .email-thread-item.is-unread .email-thread-top strong,
#emailPage .email-thread-item.is-unread .email-thread-subject {
  color: #0b406a;
  font-weight: 800;
}

#emailPage .email-thread-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#emailPage .email-thread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: #deebf8;
  color: #325575;
}

#emailPage .email-thread-pill-unread {
  background: #d7ebff;
  color: #0f5f9c;
}

#emailPage .email-thread-pill-flagged {
  background: #fff0c8;
  color: #8d5d05;
}

#emailPage .email-thread-subject {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emailPage .email-thread-snippet {
  font-size: 0.82rem;
  color: #4c657d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emailPage .email-thread-meta {
  font-size: 0.76rem;
  color: #5e7690;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#emailPage .email-webmail-preview-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.15rem;
}

#emailPage #emailRecordPreviewCloseBtn {
  background: linear-gradient(135deg, #1b5db3 0%, #153f84 100%);
  border-color: #153f84;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(21, 63, 132, 0.24);
}

#emailPage #emailRecordPreviewCloseBtn:hover {
  background: linear-gradient(135deg, #1651a0 0%, #123671 100%);
  border-color: #123671;
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(18, 54, 113, 0.3);
}

#emailPage .email-record-folder-tools {
  align-items: end;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.1rem 0 0.3rem;
}

#emailPage .email-record-folder-select {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

#emailPage .email-record-folder-select select {
  min-width: 220px;
}

#emailPage .email-compose-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: end;
}

#emailPage .email-compose-form > label {
  margin: 0;
  position: relative;
}

#emailPage .email-compose-subject,
#emailPage .email-compose-body,
#emailPage .email-compose-attachments-toggle,
#emailPage .email-compose-attachments,
#emailPage .email-compose-actions {
  grid-column: 1 / -1;
}

#emailPage .email-compose-body textarea {
  min-height: 180px;
  max-height: 460px;
  resize: vertical;
}

#emailPage #emailComposeAttachmentIds {
  min-height: 130px;
}

#emailPage .email-compose-customer-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  z-index: 80;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(16, 42, 76, 0.18);
}

#emailPage .email-compose-customer-result {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf3fb;
  background: transparent;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.85rem;
}

#emailPage .email-compose-customer-result:last-child {
  border-bottom: 0;
}

#emailPage .email-compose-customer-result:hover,
#emailPage .email-compose-customer-result.active {
  background: #eef6ff;
}

#emailPage .email-record-preview-body {
  margin: 0.35rem 0 0;
  padding: 0.85rem;
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #f8fbff;
  min-height: 220px;
  height: 100%;
  max-height: none;
  overflow: auto;
  white-space: pre-wrap;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 0.85rem;
  line-height: 1.4;
}

#settings-email-platform .email-folder-settings-panel {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #d8e8f7;
}

#settings-email-platform .email-folder-settings-form {
  margin-top: 0;
}

#settings-email-platform .email-folder-settings-roles,
#settings-email-platform .email-folder-settings-users,
#settings-email-platform .email-folder-settings-actions {
  grid-column: 1 / -1;
}

#settings-email-platform .email-folder-role-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.35rem;
}

#settings-email-platform .email-folder-settings-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

#settings-email-platform .email-folder-setting-card {
  border: 1px solid #cfe2f7;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f8ff 100%);
  padding: 0.8rem;
}

#settings-email-platform .email-folder-setting-card .table-head {
  margin-bottom: 0.25rem;
}

#settings-email-platform .email-folder-setting-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

#settings-email-platform .email-folder-setting-title h4 {
  margin: 0;
}

#settings-email-platform .email-folder-setting-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

#settings-email-platform .email-folder-setting-meta {
  color: var(--muted);
  font-size: 0.84rem;
}

@media (max-width: 1400px) {
  #emailPage .email-webmail-layout {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: min(80vh, 900px);
  }

  #emailPage .email-webmail-layout.is-preview-open {
    grid-template-rows: minmax(250px, 1fr) minmax(250px, 1fr);
  }

  #emailPage .email-webmail-sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  #emailPage .email-webmail-layout.is-preview-open .email-webmail-sidebar {
    grid-row: 1 / span 2;
  }

  #emailPage .email-webmail-list-panel {
    grid-column: 2;
    grid-row: 1;
  }

  #emailPage .email-webmail-preview-panel {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 1200px) {
  #emailPage .email-compose-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-email-platform .email-folder-role-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-user-checklist {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0.3rem 0.4rem;
  display: grid;
  gap: 0.25rem;
  max-height: 120px;
  overflow-y: auto;
}

.home-user-option {
  font-size: 0.85rem;
  color: var(--text);
}

.home-user-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

#customersPage details.customer-collapse > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  list-style: none;
}

#customersPage details.customer-collapse > summary::-webkit-details-marker {
  display: none;
}

#customersPage details.customer-collapse > summary::before {
  content: ">";
  display: inline-block;
  margin-right: 0.45rem;
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

#customersPage details.customer-collapse[open] > summary::before {
  transform: rotate(90deg);
}

#customersPage details.customer-collapse[open] > summary {
  margin-bottom: 0.8rem;
}

#customersPage {
  display: grid;
  gap: 0.85rem;
}

#customersPage > .table-head {
  margin-bottom: 0.15rem;
}

#customerQuickSearchForm {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f8ff 100%);
}

#customerQuickSearchForm label {
  margin: 0;
  position: relative;
}

#customerQuickOpenBtn {
  white-space: nowrap;
  min-height: 42px;
}

#customersPage .customer-collapse {
  margin: 0;
  padding: 0.9rem;
  border: 1px solid #c6daf2;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 4px 14px rgba(17, 67, 130, 0.06);
}

#customersPage details.customer-collapse > summary {
  display: flex;
  align-items: center;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

#customersPage details.customer-collapse[open] > summary {
  color: #0f447f;
}

#customerForm,
#customerSecondaryAddressForm,
#customerReminderForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

#customerForm button,
#customerSecondaryAddressForm button,
#customerReminderForm button {
  align-self: end;
  min-height: 42px;
}

#customerSearchInput,
#customerSecondarySearch,
#customerQuickSearch {
  min-height: 42px;
}

.customer-quick-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  z-index: 80;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(18, 54, 105, 0.18);
}

.customer-quick-search-result {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf3fb;
  background: transparent;
  padding: 0.48rem 0.6rem;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

.customer-quick-search-result:last-child {
  border-bottom: 0;
}

.customer-quick-search-result:hover,
.customer-quick-search-result.active {
  background: #edf6ff;
}

#customersPage .table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
}

#customersPage table {
  min-width: 940px;
}

#customersPage thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf6ff;
  color: #1d518f;
  border-bottom: 1px solid #cfe2f7;
}

#customersPage tbody tr:nth-child(even) td {
  background: #fbfdff;
}

#customersPage td:last-child {
  white-space: nowrap;
}

#customersPage td:last-child .small,
#customersPage td:last-child button {
  margin-right: 0.3rem;
  margin-bottom: 0.25rem;
}

/* Saved Customers: fit table to container to avoid horizontal scrolling */
#savedCustomersSection .table-wrap {
  overflow-x: visible;
}

#savedCustomersSection table {
  min-width: 0 !important;
  table-layout: fixed;
}

#savedCustomersSection th,
#savedCustomersSection td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

#savedCustomersSection td:last-child {
  white-space: normal;
}

#savedCustomersSection td:last-child .small,
#savedCustomersSection td:last-child button {
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

#settingsPage {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
}

#settingsPage > .panel {
  margin: 0;
  min-width: 0;
}

#settingsFocusBackBtn,
#templateBuilderBackBtn {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(14, 45, 89, 0.24);
}

body.template-builder-fullscreen #settingsPage {
  width: 100%;
  max-width: none;
  padding-bottom: 4.5rem;
}

body.template-builder-fullscreen #settingsPage > :not(#settingsPanel):not(#templateBuilderBackBtn) {
  display: none !important;
}

body.template-builder-fullscreen #settingsPanel > :not(#templateBuilderSection) {
  display: none !important;
}

body.template-builder-fullscreen #templateBuilderSection {
  margin: 0;
  border: 1px solid #bcd7f5;
  border-radius: 14px;
  background:
    radial-gradient(110% 120% at 0% 0%, #f4f9ff 0%, #ffffff 62%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.template-builder-fullscreen #templateBuilderSection .template-dnd-layout {
  grid-template-columns: 320px minmax(0, 1fr);
}

body.template-builder-fullscreen #templateBuilderSection .template-builder-canvas {
  min-height: 56vh;
}

#userManagementPanel .user-management-collapse {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

#userManagementPanel .user-management-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.75rem;
  background: #edf6ff;
  color: #1d518f;
  font-weight: 700;
  border-bottom: 1px solid #cfe2f7;
}

#userManagementPanel .user-management-collapse > summary::-webkit-details-marker {
  display: none;
}

#userManagementPanel .user-management-collapse > :not(summary) {
  margin: 0.65rem 0.75rem;
}

#userManagementPanel .user-management-layout {
  display: grid;
  gap: 0.85rem;
}

#userManagementPanel .user-management-card {
  border: 1px solid #cfe2f7;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 251, 255, 0.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 16px rgba(17, 67, 130, 0.05);
  padding: 0.8rem;
}

#userManagementPanel .user-management-card > .table-head {
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e2edf9;
}

#userManagementPanel .user-management-card > .table-head h3 {
  margin: 0;
  font-size: 0.98rem;
  color: #184f90;
}

#userManagementPanel .user-management-card > .sub {
  margin: 0.55rem 0 0;
}

#userManagementPanel .user-management-split {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

#userManagementPanel .user-management-form {
  margin-top: 0.6rem;
  gap: 0.7rem;
  align-items: end;
}

#userManagementPanel .user-management-form label {
  color: #446181;
  font-size: 0.82rem;
  font-weight: 600;
}

#userManagementPanel .user-management-form input,
#userManagementPanel .user-management-form select,
#userManagementPanel .user-management-form textarea {
  min-height: 40px;
  border-color: #c9ddef;
  background: #ffffff;
}

#userManagementPanel .user-management-form textarea {
  min-height: 88px;
  resize: vertical;
}

#userManagementPanel .user-management-form button {
  min-height: 40px;
  white-space: nowrap;
}

#userManagementPanel .user-management-form .um-form-submit {
  justify-self: start;
}

#userManagementPanel .user-management-form-add {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

#userManagementPanel .user-management-table-wrap {
  margin-top: 0.6rem;
  border: 1px solid #d9e8f7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}

#userManagementPanel .user-management-table-wrap table {
  min-width: 560px;
}

#userManagementPanel #roleFeatureAccessBody input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

#userManagementPanel #userTableBody tr.is-selected td {
  background: #eaf3ff;
}

#userManagementPanel .user-management-user-link {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: #1a569b;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

#userManagementPanel .user-management-user-link:hover,
#userManagementPanel .user-management-user-link:focus-visible {
  color: #0f427f;
}

#userManagementPanel .user-management-hr-detail-head .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#userManagementPanel .user-management-user-select {
  grid-template-columns: minmax(260px, 420px);
}

#userManagementPanel .user-hr-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#userManagementPanel .user-hr-profile-grid .um-col-2 {
  grid-column: span 2;
}

#userManagementPanel .user-hr-profile-grid .um-col-3 {
  grid-column: 1 / -1;
}

#userManagementPanel .user-hr-profile-grid #userHrPlannerColor {
  min-height: 40px;
  padding: 0.2rem;
}

#userManagementPanel .user-management-inline-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

#userManagementPanel #userSkillForm.user-management-inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

#userManagementPanel .user-management-qualification-form,
#userManagementPanel .user-management-reminder-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#userManagementPanel .user-management-subgroup {
  border: 1px solid #cfe2f7;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 251, 255, 0.96) 100%);
  overflow: hidden;
}

#userManagementPanel .user-management-subgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.65rem 0.82rem;
  background: #edf6ff;
  color: #1b4f8f;
  font-weight: 700;
  border-bottom: 1px solid #d6e7fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#userManagementPanel .user-management-subgroup > summary::-webkit-details-marker {
  display: none;
}

#userManagementPanel .user-management-subgroup > summary::after {
  content: "Show";
  border: 1px solid #c3daf5;
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
  font-size: 0.72rem;
  color: #2f5d92;
  background: #f4f9ff;
}

#userManagementPanel .user-management-subgroup[open] > summary::after {
  content: "Hide";
}

#userManagementPanel .user-management-subgroup-content {
  display: grid;
  gap: 0.7rem;
  padding: 0.75rem;
}

#userManagementPanel .user-management-feature-access .user-management-subgroup-content > .sub {
  margin: 0;
}

#userManagementPanel .user-management-feature-access .user-management-table-wrap {
  margin-top: 0.2rem;
}

body.theme-dark #userManagementPanel .user-management-card,
body.theme-dark #userManagementPanel .user-management-subgroup {
  border-color: #2d4664;
  background:
    linear-gradient(180deg, rgba(17, 37, 60, 0.96) 0%, rgba(13, 29, 47, 0.94) 100%);
  box-shadow: none;
}

body.theme-dark #userManagementPanel .user-management-card > .table-head {
  border-bottom-color: #2d4664;
}

body.theme-dark #userManagementPanel .user-management-card > .table-head h3,
body.theme-dark #userManagementPanel .user-management-subgroup > summary {
  color: #d3e7ff;
}

body.theme-dark #userManagementPanel .user-management-form label {
  color: #b8d3ef;
}

body.theme-dark #userManagementPanel .user-management-form input,
body.theme-dark #userManagementPanel .user-management-form select,
body.theme-dark #userManagementPanel .user-management-form textarea {
  background: #0f2236;
  border-color: #2d4664;
  color: #eaf3ff;
}

body.theme-dark #userManagementPanel .user-management-table-wrap {
  border-color: #2d4664;
  background: rgba(16, 34, 55, 0.82);
}

body.theme-dark #userManagementPanel #userTableBody tr.is-selected td {
  background: rgba(50, 102, 166, 0.36);
}

body.theme-dark #userManagementPanel .user-management-user-link {
  color: #9cc6f5;
}

body.theme-dark #userManagementPanel .user-management-user-link:hover,
body.theme-dark #userManagementPanel .user-management-user-link:focus-visible {
  color: #d3e8ff;
}

body.theme-dark #userManagementPanel .user-management-subgroup > summary {
  background: #143252;
  border-bottom-color: #2d4664;
}

body.theme-dark #userManagementPanel .user-management-subgroup > summary::after {
  border-color: #38526f;
  color: #cde4ff;
  background: #173d62;
}

@media (max-width: 1500px) {
  #userManagementPanel .user-management-form-add {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #userManagementPanel .user-management-form-add .um-form-submit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1200px) {
  #userManagementPanel .user-management-split {
    grid-template-columns: 1fr;
  }

  #userManagementPanel .user-hr-profile-grid,
  #userManagementPanel .user-management-qualification-form,
  #userManagementPanel .user-management-reminder-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #userManagementPanel .user-management-inline-form {
    grid-template-columns: 1fr;
  }

  #userManagementPanel .user-management-user-select {
    grid-template-columns: minmax(0, 1fr);
  }
}

#settingsPanel {
  border: 1px solid #bcd7f5;
  border-radius: 16px;
  background:
    radial-gradient(125% 125% at 0% 0%, #f4f9ff 0%, #ffffff 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 1px 0 #e9f3ff inset,
    0 14px 30px rgba(17, 67, 130, 0.08);
  padding: 0.95rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}

#settingsPanel > .table-head h2 {
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

#settingsPanel > .table-head,
#settingsPanel > .sub {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
}

#settingsPanel .settings-workflow {
  grid-column: 1 / -1;
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#settingsPanel .settings-workflow-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c7def7;
  background: #f2f8ff;
  color: #1c4f8f;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
}

#settingsPanel .settings-topbar {
  grid-column: 1 / -1;
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 0.65rem;
  position: sticky;
  top: 0.6rem;
  z-index: 4;
  padding: 0.45rem;
  border: 1px solid #cde1f8;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 249, 255, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(17, 67, 130, 0.06);
}

#settingsPanel .settings-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.55rem;
  padding: 0.6rem;
  border: 1px solid #cde1f8;
  border-radius: 12px;
  background: #f7fbff;
}

#settingsPanel .settings-search-form label {
  margin: 0;
}

#settingsPanel .settings-search-form input {
  min-height: 42px;
}

#settingsPanel #settingsSearchClearBtn {
  min-height: 42px;
  white-space: nowrap;
}

#settingsPanel #settingsSearchEmpty {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
}

#settingsPanel .settings-quick-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid #cde1f8;
  border-radius: 12px;
  background: #f7fbff;
  align-content: start;
}

#settingsPanel .settings-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  border: 1px solid #b9d6f4;
  background: #fff;
  color: #1d518f;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#settingsPanel .settings-jump-link:hover {
  background: #eaf4ff;
  border-color: #8cb8e7;
  color: #11447f;
}

#settingsPanel > section.panel {
  margin-top: 0;
  grid-column: span 6;
  border: 1px solid #c8def5;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 6px 16px rgba(17, 67, 130, 0.05);
  display: grid;
  align-content: start;
  gap: 0.1rem;
  height: 100%;
}

#settingsPanel > section.panel > .table-head {
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #deebf9;
}

#settingsPanel .settings-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

#settingsPanel > section.panel > .table-head h3 {
  color: #184f90;
  font-size: 1rem;
}

#settingsPanel > section.panel .grid-form {
  margin-top: 0.65rem;
}

#settingsPanel > section.panel .grid-form + .table-wrap,
#settingsPanel > section.panel .table-wrap + .grid-form,
#settingsPanel > section.panel p.sub + .grid-form,
#settingsPanel > section.panel .table-head + .grid-form {
  margin-top: 0.55rem;
}

#settingsPanel > section.panel .table-head:not(:first-child) {
  margin-top: 0.85rem;
}

#settingsPanel .settings-subgroup {
  margin-top: 0.75rem;
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

#settingsPanel .settings-subgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.52rem 0.7rem;
  background: #eef6ff;
  color: #1a4f8d;
  font-size: 0.84rem;
  font-weight: 700;
  border-bottom: 1px solid #d7e8fa;
}

#settingsPanel .settings-subgroup > summary::-webkit-details-marker {
  display: none;
}

#settingsPanel .settings-subgroup-content {
  display: grid;
  gap: 0.65rem;
  padding: 0.1rem 0.55rem 0.55rem;
}

#settings-invoice-visibility .invoice-visibility-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}

#settings-invoice-visibility .invoice-visibility-grid .check-inline {
  margin: 0;
  min-height: 42px;
}

@media (max-width: 1320px) {
  #settings-invoice-visibility .invoice-visibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #settings-invoice-visibility .invoice-visibility-grid {
    grid-template-columns: 1fr;
  }
}

#settingsPanel .settings-subgroup-content > .table-head {
  margin-top: 0.45rem;
  padding-bottom: 0.35rem;
}

#settingsPanel > section.panel .table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #fff;
}

#settingsPanel > section.panel thead th {
  background: #edf6ff;
  color: #1d518f;
}

.settings-toggle-btn {
  min-width: 86px;
}

.settings-focus-btn {
  min-width: 110px;
}

body.settings-focus-mode #settingsPage {
  width: 100%;
  max-width: none;
  grid-template-columns: 1fr;
  padding-bottom: 4.5rem;
}

body.settings-focus-mode #settingsPanel {
  grid-column: 1 / -1;
  border-color: #9bc2ee;
  box-shadow: 0 20px 35px rgba(17, 67, 130, 0.1);
}

body.settings-focus-mode #settingsPanel > section.panel:not(.hidden) {
  min-height: calc(100vh - 210px);
}

body.settings-focus-mode #settingsPanel .settings-topbar {
  top: 0.35rem;
}

body.theme-dark #settingsPanel {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #settingsPanel .settings-topbar {
  background: linear-gradient(180deg, rgba(16, 34, 55, 0.96) 0%, rgba(13, 29, 47, 0.94) 100%);
  border-color: #2d4664;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(1, 8, 16, 0.22);
}

body.theme-dark #userManagementPanel .user-management-collapse {
  border-color: #2d4664;
  background: #102237;
}

body.theme-dark #userManagementPanel .user-management-collapse > summary {
  background: #143252;
  color: #d3e7ff;
  border-bottom-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-quick-nav {
  background: #102237;
  border-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-workflow-step {
  border-color: #315273;
  background: #12314f;
  color: #d3e7ff;
}

body.theme-dark #settingsPanel .settings-search-form {
  background: #102237;
  border-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-search-form input {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-jump-link {
  background: #0f2236;
  border-color: #2d4664;
  color: #c7dffb;
}

body.theme-dark #settingsPanel .settings-jump-link:hover {
  background: #143252;
  border-color: #3a5b80;
  color: #e3f0ff;
}

body.theme-dark #settingsPanel > section.panel {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #settingsPanel .settings-head-actions .settings-focus-btn,
body.theme-dark #settingsPanel .settings-head-actions .settings-toggle-btn {
  border-color: #2d4664;
  background: #143252;
  color: #d3e7ff;
}

body.theme-dark #settingsPanel > section.panel > .table-head {
  border-bottom-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-subgroup {
  border-color: #2d4664;
  background: #0f2236;
}

body.theme-dark .form-maker-panel {
  background: #102237;
  border-color: #2d4664;
}

body.theme-dark .form-maker-hero,
body.theme-dark .form-maker-section-card,
body.theme-dark .form-maker-library-card {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark .form-maker-hero .sub {
  color: #c7dffb;
}

body.theme-dark .form-maker-workflow-step {
  background: #122741;
  border-color: #2f4f77;
  color: #d3e7ff;
}

body.theme-dark .form-maker-tabbar,
body.theme-dark .form-maker-workflow {
  background: #10253b;
  border-color: #2f4f77;
}

body.theme-dark .form-maker-step-no {
  background: #2f6fb0;
}

body.theme-dark .form-maker-tab-btn {
  background: #143252;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark .form-maker-tab-btn.is-active {
  background: #2f6fb0;
  border-color: #2f6fb0;
  color: #ffffff;
}

body.theme-dark .form-maker-collapsible > summary {
  background: #143252;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark .form-maker-accordion > summary {
  background: #143252;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark .form-maker-template-meta {
  background: #0f2236;
  border-color: #315273;
}

body.theme-dark .form-maker-design-group {
  background: #112941;
  border-color: #315273;
}

body.theme-dark .form-maker-design-group legend,
body.theme-dark .form-maker-field-preset-strip > span {
  color: #d3e7ff;
}

body.theme-dark .form-maker-field-preset-strip {
  background: #0f2236;
  border-color: #315273;
}

body.theme-dark .form-maker-field-advanced {
  background: #0f2236;
  border-color: #315273;
}

body.theme-dark .form-maker-field-advanced > summary,
body.theme-dark .form-maker-inline-actions > summary {
  background: #143252;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark .form-maker-hf-preview-card {
  background: #112941;
  border-color: #315273;
}

body.theme-dark .form-maker-hf-preview-header,
body.theme-dark .form-maker-hf-preview-footer {
  border-color: #315273;
}

body.theme-dark .form-maker-hf-preview-body,
body.theme-dark .form-maker-hf-preview-disabled {
  background: #0f2236;
  color: #c7dffb;
  border-color: #315273;
}

body.theme-dark .form-maker-preview-doc-header,
body.theme-dark .form-maker-preview-doc-footer {
  border-color: #315273;
}

body.theme-dark .template-preview-paper .pdf-logo-strip img,
body.theme-dark .form-maker-hf-preview-card .pdf-logo-strip img {
  border-color: #355578;
  background: #10263c;
}

body.theme-dark .template-palette-search {
  background: #0f2236;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark #templateBuilderSection .template-palette-search {
  background: #0f2236;
  border-color: #315273;
  color: #d3e7ff;
}

body.theme-dark .template-palette-section {
  background: #10253b;
  border-color: #315273;
}

body.theme-dark #templateBuilderSection .template-palette-section {
  background: #10253b;
  border-color: #315273;
}

body.theme-dark .template-palette-section-title {
  color: #cbe6ff;
}

body.theme-dark .template-palette-chip {
  background: #173452;
  border-color: #3a5f87;
  color: #d7e9ff;
}

body.theme-dark #templateBuilderSection .template-palette-chip,
body.theme-dark #templateBuilderSection .template-palette-chip--block {
  background: #173452 !important;
  border-color: #3a5f87 !important;
  color: #d7e9ff !important;
}

body.theme-dark .template-palette-chip.token {
  background: #1b3f61;
  border-color: #4673a5;
  color: #d9eeff;
}

body.theme-dark #templateBuilderSection .template-palette-chip.token,
body.theme-dark #templateBuilderSection .template-palette-chip--token {
  background: #1b3f61 !important;
  border-color: #4673a5 !important;
  color: #d9eeff !important;
}

body.theme-dark .template-palette-chip:hover {
  background: #1f466c;
  border-color: #5b89bc;
}

body.theme-dark #templateBuilderSection .template-palette-chip:hover {
  background: #1f466c !important;
  border-color: #5b89bc !important;
}

body.theme-dark .form-maker-signature-box {
  background: #0f2236;
  border-color: #315273;
  color: #c7dffb;
}

body.theme-dark .form-maker-preview-card .template-preview-output {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark.form-maker-preview-fullscreen .form-maker-preview-panel {
  background: #102237;
  border-color: #2d4664;
  box-shadow: 0 18px 54px rgba(2, 8, 15, 0.68);
}

body.theme-dark .job-title-form-preview .template-preview-paper {
  border-color: #2d4664;
}

body.theme-dark #settingsPanel .settings-subgroup > summary {
  background: #143252;
  color: #d3e7ff;
  border-bottom-color: #2d4664;
}

body.theme-dark #settingsPanel > section.panel > .table-head h3 {
  color: #d3e7ff;
}

body.theme-dark #settingsPanel > section.panel .table-wrap {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark #settingsPanel > section.panel thead th {
  background: #143252;
  color: #d3e7ff;
}

#userManagementPanel {
  position: sticky;
  top: 0.85rem;
  align-self: start;
}

#settings-general,
#settings-company,
#settings-scheduling,
#settings-customer-meta,
#settings-assets,
#settings-messaging,
#settings-job-emails,
#settings-invoices,
#settings-nominal-codes {
  grid-column: span 6;
}

#jobEmailTemplateBuilderMount {
  margin-top: 0.85rem;
}

#jobEmailTemplateBuilderMount > #templateBuilderSection {
  margin: 0;
}

#settings-customer-source .job-email-signature-meta .sub {
  margin: 0;
}

#settings-customer-source .job-email-settings-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.35rem 0 0.7rem;
}

#settings-customer-source .job-email-settings-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.32rem 0.52rem;
  border: 1px solid #cbe0f6;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f9ff 0%, #eaf3ff 100%);
  color: #245587;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

#settings-customer-source .job-email-settings-form {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

#settings-customer-source .job-email-settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  align-items: start;
}

#settings-customer-source .job-email-settings-column {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

#settings-customer-source .job-email-settings-group {
  margin: 0;
  border: 1px solid #c9def5;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(24, 54, 94, 0.08);
}

#settings-customer-source .job-email-settings-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.62rem 0.82rem;
  background: linear-gradient(180deg, #eef6ff 0%, #e6f1ff 100%);
  color: #1a4f8d;
  font-weight: 800;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#settings-customer-source .job-email-settings-group > summary::-webkit-details-marker {
  display: none;
}

#settings-customer-source .job-email-settings-group > summary::after {
  content: ">";
  font-size: 0.9rem;
  color: #2a6eb1;
  transition: transform 0.16s ease;
}

#settings-customer-source .job-email-settings-group[open] > summary {
  background: linear-gradient(180deg, #dbeeff 0%, #d2e9ff 100%);
}

#settings-customer-source .job-email-settings-group[open] > summary::after {
  transform: rotate(90deg);
}

#settings-customer-source .job-email-settings-group-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.68rem;
  padding: 0.72rem;
}

#settings-customer-source .job-email-settings-group-body .invoice-span-2 {
  grid-column: 1 / -1;
}

#settings-customer-source .job-email-settings-group-body label {
  margin: 0;
}

.job-email-designer-tools {
  display: grid;
  gap: 0.55rem;
  border: 1px solid #c9def5;
  border-radius: 12px;
  background: #f6fbff;
  padding: 0.6rem 0.7rem;
}

.job-email-toolbar-row {
  display: grid;
  gap: 0.35rem;
}

.job-email-toolbar-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #225488;
}

.job-email-toolbar-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.42rem;
}

.job-email-toolbar-buttons .small {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-radius: 10px;
  border-color: #cfe0f2;
  background: #ffffff;
  color: #1f4f83;
  padding: 0.42rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.job-email-toolbar-buttons .small:hover {
  border-color: #a9c9e7;
  background: #f1f8ff;
}

.job-email-toolbar-buttons .small.is-active {
  border-color: #2f77be;
  background: linear-gradient(180deg, #3f8dd7 0%, #2c6fb1 100%);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(44, 111, 177, 0.24);
}

.job-email-signature-preview-wrap {
  border: 1px solid #c9def5;
  border-radius: 12px;
  background: #edf6ff;
  padding: 0.65rem 0.75rem;
}

.job-email-signature-preview-wrap > strong {
  display: block;
  color: #1d4f88;
}

.job-email-signature-preview {
  margin: 0.45rem 0 0.35rem;
  word-break: break-word;
  overflow-x: auto;
}

.job-email-signature-preview > * {
  max-width: 100%;
}

.job-email-signature-plain-preview {
  margin: 0.3rem 0 0;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px dashed #c0d7ef;
  background: #f8fbff;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #1f2937;
}

.job-email-live-preview-wrap {
  border: 1px solid #c9def5;
  border-radius: 12px;
  background: #edf6ff;
  padding: 0.65rem 0.75rem;
}

.job-email-live-preview-wrap > strong {
  display: block;
  color: #1d4f88;
}

.job-email-live-preview-inputs {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.45rem;
  grid-template-columns: 1fr;
}

.job-email-live-preview-body-label {
  grid-column: 1 / -1;
}

.job-email-live-preview {
  margin-top: 0.55rem;
}

.job-email-live-preview-card {
  border: 1px solid #c4daef;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.72rem 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.job-email-live-preview-meta {
  margin-bottom: 0.42rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #567595;
}

.job-email-live-preview-subject {
  margin-bottom: 0.62rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f355d;
}

.job-email-live-preview-body {
  font-size: 0.84rem;
  color: #1f2937;
}

.job-email-live-preview-body p {
  margin: 0;
}

@media (max-width: 1160px) {
  #settings-customer-source .job-email-settings-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-customer-source .job-email-settings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #settings-customer-source .job-email-settings-flow {
    grid-template-columns: 1fr;
  }
}

body.theme-dark #settings-customer-source .job-email-settings-group {
  border-color: #2f4f77;
  background: #10253a;
}

body.theme-dark #settings-customer-source .job-email-settings-flow span {
  border-color: #2f4f77;
  background: linear-gradient(180deg, #173452 0%, #14314d 100%);
  color: #cbe6ff;
}

body.theme-dark #settings-customer-source .job-email-settings-group > summary {
  background: linear-gradient(180deg, #18344f 0%, #17304a 100%);
  color: #c6e1ff;
}

body.theme-dark #settings-customer-source .job-email-settings-group > summary::after {
  color: #8bbff1;
}

body.theme-dark #settings-customer-source .job-email-settings-group[open] > summary {
  background: linear-gradient(180deg, #1c3f61 0%, #1b3959 100%);
}

body.theme-dark .job-email-signature-preview-wrap {
  border-color: #2f4f77;
  background: #17304a;
}

body.theme-dark .job-email-designer-tools {
  border-color: #2f4f77;
  background: #17304a;
}

body.theme-dark .job-email-toolbar-label {
  color: #b9d8ff;
}

body.theme-dark .job-email-toolbar-buttons .small {
  border-color: #36597f;
  background: #10253a;
  color: #d7ebff;
}

body.theme-dark .job-email-toolbar-buttons .small:hover {
  border-color: #4f79a8;
  background: #18334f;
}

body.theme-dark .job-email-toolbar-buttons .small.is-active {
  border-color: #5f98d0;
  background: linear-gradient(180deg, #2f76c3 0%, #205f9f 100%);
  color: #ffffff;
}

body.theme-dark .job-email-signature-preview-wrap > strong {
  color: #bfdbff;
}

body.theme-dark .job-email-signature-preview {
  color: #e7f2ff;
}

body.theme-dark .job-email-signature-plain-preview {
  border-color: #355a86;
  background: #10253a;
  color: #dfefff;
}

body.theme-dark .job-email-live-preview-wrap {
  border-color: #2f4f77;
  background: #17304a;
}

body.theme-dark .job-email-live-preview-wrap > strong {
  color: #bfdbff;
}

body.theme-dark .job-email-live-preview-card {
  border-color: #355a86;
  background: #10253a;
}

body.theme-dark .job-email-live-preview-meta {
  color: #9ec2e9;
}

body.theme-dark .job-email-live-preview-subject {
  color: #d5e9ff;
}

body.theme-dark .job-email-live-preview-body {
  color: #dfefff;
}

#settings-job-titles,
#settings-customer-source,
#settings-reminders,
#settings-email-platform,
#settings-quotes,
#settings-billing-controls,
#templateBuilderSection,
#formBuilderSection {
  grid-column: 1 / -1;
}

#settings-job-titles .job-title-template-description {
  grid-column: 1 / -1;
}

#settings-job-titles #jobTitleOptionTemplateDescription {
  min-height: 84px;
  resize: vertical;
}

#settings-job-titles .job-title-template-checklist {
  display: grid;
  gap: 0.45rem;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #f7fbff;
  padding: 0.5rem;
}

#settings-job-titles .job-title-template-checklist .job-title-template-choice {
  margin: 0;
}

body.theme-dark #settings-job-titles .job-title-template-checklist {
  border-color: #2d4664;
  background: #102237;
}

#settings-company .company-profile-span-2 {
  grid-column: 1 / -1;
}

#settings-company #companyCertificateFooter {
  min-height: 90px;
  resize: vertical;
}

#settings-company .company-document-designer {
  border: 1px solid #c9def5;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.5rem 0.75rem 0.8rem;
}

#settings-company .company-document-designer > summary {
  cursor: pointer;
  font-weight: 700;
  color: #1d4f88;
  list-style: none;
}

#settings-company .company-document-designer > summary::-webkit-details-marker {
  display: none;
}

#settings-company .company-document-designer > summary::after {
  content: ">";
  float: right;
  color: #2e6fb3;
  transition: transform 0.15s ease;
}

#settings-company .company-document-designer[open] > summary::after {
  transform: rotate(90deg);
}

#settings-company .company-document-designer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

#settings-company .company-document-designer-toggles {
  margin-bottom: 0.7rem;
}

#settings-company .company-document-logo-upload {
  margin-bottom: 0.7rem;
}

#settings-company .company-document-logo-upload > button {
  align-self: end;
}

#settings-company #companyDocLogoStatus {
  margin: 0.2rem 0 0.2rem;
  min-height: 1.1rem;
}

#settings-company #companyDocLogoStatus.tone-success {
  color: #0c7a44;
  font-weight: 600;
}

#settings-company #companyDocLogoStatus.tone-error {
  color: #b42318;
  font-weight: 600;
}

#settings-company #companyDocLogoStatus.tone-info {
  color: #315b89;
}

#settings-company .company-document-designer-fieldset {
  margin: 0.7rem 0 0;
  border: 1px solid #d5e5f7;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.7rem;
}

#settings-company .company-document-designer-fieldset.is-active {
  border-color: #2a6eb1;
  box-shadow: 0 0 0 2px rgba(42, 110, 177, 0.14);
}

#settings-company .company-document-designer-fieldset legend {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d4f88;
  padding: 0 0.3rem;
}

#settings-company .company-document-designer-preview {
  margin-top: 0.85rem;
  border: 1px solid #d6e6f8;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.7rem;
}

#settings-company .company-document-designer-preview .table-head {
  margin-bottom: 0.35rem;
}

#settings-company .company-document-designer-preview .table-head h4 {
  margin: 0;
  color: #1d4f88;
}

#settings-company .company-doc-designer-preview-canvas {
  border: 1px solid #d2e2f5;
  border-radius: 12px;
  background: linear-gradient(180deg, #f4f9ff 0%, #eef6ff 100%);
  padding: 0.72rem;
  overflow: visible;
}

#settings-company .company-doc-preview-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}

#settings-company .company-doc-preview-paper {
  border: 1px solid #c3d8f2;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem;
  width: min(100%, 600px);
  aspect-ratio: 210 / 297;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.55rem;
  box-shadow: 0 14px 30px rgba(16, 55, 102, 0.12);
  position: relative;
}

#settings-company .company-doc-preview-paper::before {
  content: attr(data-preview-paper-size);
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.7rem;
  color: #57789d;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#settings-company .company-doc-preview-header,
#settings-company .company-doc-preview-footer {
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  padding: 10px;
}

#settings-company .company-doc-preview-header.is-editing,
#settings-company .company-doc-preview-footer.is-editing {
  border-color: #2a6eb1;
  box-shadow: 0 0 0 2px rgba(42, 110, 177, 0.18);
}

#settings-company .company-doc-preview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

#settings-company .company-doc-preview-main-logo-row {
  margin: 0 0 0.4rem;
  display: flex;
}

#settings-company .company-doc-preview-main-logo-row-left {
  justify-content: flex-start;
}

#settings-company .company-doc-preview-main-logo-row-center {
  justify-content: center;
}

#settings-company .company-doc-preview-main-logo-row-right {
  justify-content: flex-end;
}

#settings-company .company-doc-preview-main-logo {
  max-height: 64px;
  max-width: 280px;
  object-fit: contain;
}

#settings-company .company-doc-preview-details,
#settings-company .company-doc-preview-notes {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
}

#settings-company .company-doc-preview-body {
  border: 1px dashed #c8dbf1;
  border-radius: 10px;
  background: #f9fbff;
  padding: 0.7rem;
  color: #4b5f78;
  font-size: 0.82rem;
  min-height: 100%;
  position: relative;
}

#settings-company .company-doc-preview-body-label {
  margin: 0 0 0.45rem;
  font-weight: 700;
  color: #3d628a;
}

#settings-company .company-doc-preview-body-lines {
  height: calc(100% - 1.4rem);
  border-radius: 8px;
  background-image: linear-gradient(to bottom, rgba(119, 152, 190, 0.35) 1px, transparent 1px);
  background-size: 100% 22px;
}

#settings-company .company-doc-preview-logo-canvas {
  margin-top: 0.45rem;
  position: relative;
  border: 1px dashed #bcd3eb;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fbff 0%, #eff6ff 100%);
}

#settings-company .company-doc-preview-logo-item {
  position: absolute;
  max-width: 220px;
  border: 1px solid #8eb6df;
  border-radius: 8px;
  background: #ffffff;
  padding: 3px 5px;
  box-shadow: 0 2px 7px rgba(27, 79, 132, 0.15);
  cursor: move;
  user-select: none;
  -webkit-user-drag: none;
}

#settings-company .company-doc-preview-logo-item:hover {
  border-color: #2b70b7;
  box-shadow: 0 0 0 2px rgba(43, 112, 183, 0.2);
}

body.theme-dark #settings-company .company-document-designer {
  border-color: #2f4f77;
  background: #10253a;
}

body.theme-dark #settings-company .company-document-designer > summary {
  color: #c6e1ff;
}

body.theme-dark #settings-company .company-document-designer > summary::after {
  color: #8bbff1;
}

body.theme-dark #settings-company .company-document-designer-fieldset {
  border-color: #355a86;
  background: #17304a;
}

body.theme-dark #settings-company #companyDocLogoStatus.tone-success {
  color: #6ee7a8;
}

body.theme-dark #settings-company #companyDocLogoStatus.tone-error {
  color: #fda29b;
}

body.theme-dark #settings-company #companyDocLogoStatus.tone-info {
  color: #9fc9f2;
}

body.theme-dark #settings-company .company-document-designer-fieldset.is-active {
  border-color: #6ea7dd;
  box-shadow: 0 0 0 2px rgba(110, 167, 221, 0.2);
}

body.theme-dark #settings-company .company-document-designer-fieldset legend {
  color: #bfdbff;
}

body.theme-dark #settings-company .company-document-designer-preview {
  border-color: #365983;
  background: #16314d;
}

body.theme-dark #settings-company .company-document-designer-preview .table-head h4 {
  color: #c6e1ff;
}

body.theme-dark #settings-company .company-doc-designer-preview-canvas {
  border-color: #365983;
  background: linear-gradient(180deg, #173654 0%, #15304a 100%);
}

body.theme-dark #settings-company .company-doc-preview-paper {
  border-color: #40658f;
  background: #0f2236;
  box-shadow: 0 14px 32px rgba(3, 12, 24, 0.5);
}

body.theme-dark #settings-company .company-doc-preview-paper::before {
  color: #9ac2e8;
}

body.theme-dark #settings-company .company-doc-preview-header,
body.theme-dark #settings-company .company-doc-preview-footer {
  border-color: #3d6088;
}

body.theme-dark #settings-company .company-doc-preview-header.is-editing,
body.theme-dark #settings-company .company-doc-preview-footer.is-editing {
  border-color: #6ea7dd;
  box-shadow: 0 0 0 2px rgba(110, 167, 221, 0.22);
}

body.theme-dark #settings-company .company-doc-preview-body {
  border-color: #3d6088;
  background: #10253a;
  color: #b5cbe4;
}

body.theme-dark #settings-company .company-doc-preview-body-label {
  color: #b5d1eb;
}

body.theme-dark #settings-company .company-doc-preview-body-lines {
  background-image: linear-gradient(to bottom, rgba(116, 158, 204, 0.35) 1px, transparent 1px);
}

body.theme-dark #settings-company .company-doc-preview-logo-canvas {
  border-color: #4f7cac;
  background: linear-gradient(180deg, #193753 0%, #173047 100%);
}

body.theme-dark #settings-company .company-doc-preview-logo-item {
  border-color: #5f8fbe;
  background: #0d2235;
  box-shadow: 0 2px 8px rgba(2, 10, 20, 0.45);
}

body.theme-dark #settings-company .company-doc-preview-logo-item:hover {
  border-color: #8dc1f1;
  box-shadow: 0 0 0 2px rgba(141, 193, 241, 0.24);
}

#settingsOverviewPanel {
  border: 1px solid #bcd7f5;
  border-radius: 18px;
  background:
    radial-gradient(130% 120% at 0% 0%, #f4f9ff 0%, #ffffff 62%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 1px 0 #e9f3ff inset,
    0 14px 30px rgba(17, 67, 130, 0.08);
}

#settingsOverviewPanel .settings-search-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid #cde1f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

#settingsOverviewPanel .settings-search-form label {
  margin: 0;
}

#settingsOverviewPanel #settingsSearchClearBtn {
  min-height: 42px;
  white-space: nowrap;
}

.settings-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.95rem;
  margin-top: 1rem;
}

.settings-module-card {
  min-width: 0;
  min-height: 210px;
  aspect-ratio: 1 / 1;
  padding: 1.05rem;
  border: 1px solid #c8def5;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.96) 0%, rgba(240, 247, 255, 0.88) 56%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0.68rem;
  text-align: left;
  color: #133b67;
  box-shadow: 0 12px 26px rgba(17, 67, 130, 0.08);
}

.settings-module-card:hover {
  border-color: #8dbce8;
  box-shadow: 0 18px 30px rgba(17, 67, 130, 0.14);
  transform: translateY(-2px);
}

.settings-module-card[data-tone="sky"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(222, 241, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.settings-module-card[data-tone="cobalt"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(225, 235, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

.settings-module-card[data-tone="teal"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(224, 248, 245, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #f6fffd 100%);
}

.settings-module-card[data-tone="emerald"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(231, 249, 236, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fff9 100%);
}

.settings-module-card[data-tone="amber"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 244, 222, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #fffaf1 100%);
}

.settings-module-card[data-tone="slate"] {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(238, 243, 250, 0.96) 0%, rgba(255, 255, 255, 0.92) 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.settings-module-title {
  font-size: 1rem;
  font-weight: 800;
  color: #154980;
  line-height: 1.25;
}

.settings-module-category {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 1.55rem;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #c8dcf3;
  background: rgba(255, 255, 255, 0.9);
  color: #2a5d93;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.settings-module-description {
  margin: 0;
  color: #5d7792;
  font-size: 0.85rem;
  line-height: 1.45;
}

.settings-module-open {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f63c8;
}

.settings-module-open::after {
  content: "->";
  margin-left: 0.34rem;
  font-size: 0.76rem;
}

#settingsPanel.settings-section-page {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden),
.settings-focus-panel-active {
  grid-column: 1 / -1 !important;
  margin: 0;
  min-height: calc(100vh - 210px);
  position: static !important;
  top: auto !important;
  align-self: stretch;
  border: 1px solid #cfdef0;
  border-radius: 22px;
  background:
    radial-gradient(150% 120% at 0% 0%, #f6faff 0%, #ffffff 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 24px rgba(17, 67, 130, 0.05);
  padding: 1.2rem 1.3rem 1.35rem;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden)::before,
.settings-focus-panel-active::before {
  content: attr(data-settings-category);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  margin-bottom: 0.8rem;
  padding: 0.16rem 0.58rem;
  border-radius: 999px;
  border: 1px solid #c9dcf4;
  background: #eff6ff;
  color: #24588d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head,
#settingsDataToolsPanel.settings-focus-panel-active > .table-head {
  margin: 0;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid #d9e8f8;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head h3,
#settingsDataToolsPanel.settings-focus-panel-active > .table-head h2 {
  font-size: 1.24rem;
  color: #154980;
  letter-spacing: 0.01em;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > p.sub:first-of-type,
#settingsDataToolsPanel.settings-focus-panel-active > p.sub:first-of-type {
  margin: 0.9rem 0 0;
  padding: 0 0 0.9rem;
  border: 0;
  border-bottom: 1px solid #dfe9f4;
  border-radius: 0;
  background: transparent;
  color: #5b7692;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .grid-form,
#settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-wrap,
#settingsPanel.settings-section-page > section.panel:not(.hidden) > .settings-subgroup,
#settingsDataToolsPanel.settings-focus-panel-active .page-folder-actions,
#userManagementPanel.settings-focus-panel-active .user-management-collapse {
  margin-top: 0.95rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .grid-form {
  gap: 0.8rem;
  padding-top: 0.1rem;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) button,
#settingsDataToolsPanel.settings-focus-panel-active button,
#userManagementPanel.settings-focus-panel-active button {
  min-height: 36px;
  padding: 0.42rem 0.78rem;
  border-radius: 10px;
  font-size: 0.82rem;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) button:hover,
#settingsDataToolsPanel.settings-focus-panel-active button:hover,
#userManagementPanel.settings-focus-panel-active button:hover {
  box-shadow: 0 9px 18px rgba(37, 99, 235, 0.22);
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) button.small,
#settingsDataToolsPanel.settings-focus-panel-active button.small,
#userManagementPanel.settings-focus-panel-active button.small {
  min-height: 32px;
  padding: 0.3rem 0.62rem;
  font-size: 0.76rem;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-wrap {
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe6f3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) > .settings-subgroup {
  padding: 1rem 0 0;
  overflow: visible;
  border-top: 1px solid #e2ebf6;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup > summary,
#userManagementPanel.settings-focus-panel-active .user-management-collapse > summary {
  padding: 0 0 0.7rem;
  background: transparent;
  color: #184f90;
  border: 0;
  border-bottom: 1px solid #e2ebf6;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content,
#userManagementPanel.settings-focus-panel-active .user-management-collapse > :not(summary) {
  padding: 0.95rem 0 0;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #e4eef9;
}

#settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head h3,
#settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head h4 {
  color: #1a4f8d;
}

#settingsDataToolsPanel.settings-focus-panel-active .page-folder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

#userManagementPanel.settings-focus-panel-active .user-management-collapse {
  overflow: visible;
}

#userManagementPanel.settings-focus-panel-active .user-management-collapse > :not(summary) {
  margin: 0;
}

.settings-inline-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.95rem;
  padding: 0.9rem 1rem;
  border: 1px dashed #c9dcf2;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(241, 247, 255, 0.98) 100%);
}

.settings-inline-callout .sub {
  margin: 0;
  flex: 1 1 320px;
}

.settings-pricebook-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.settings-pricebook-rule-panel {
  padding: 1rem;
  border: 1px solid #dbe6f3;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.settings-pricebook-rule-panel .table-head {
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e1ebf6;
}

.settings-pricebook-rule-panel .table-head h3 {
  color: #174d88;
}

@media (max-width: 980px) {
  .settings-pricebook-rule-grid {
    grid-template-columns: 1fr;
  }
}

body.settings-focus-mode #settingsOverviewPanel {
  display: none !important;
}

body.settings-focus-mode #settingsPanel,
body.settings-focus-mode #settingsDataToolsPanel,
body.settings-focus-mode #userManagementPanel {
  grid-column: 1 / -1;
}

body.settings-focus-mode #settingsPanel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.theme-dark #settingsOverviewPanel {
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(23, 51, 83, 0.96) 0%, rgba(16, 34, 55, 0.96) 62%),
    linear-gradient(180deg, #102237 0%, #0d1d30 100%);
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #settingsOverviewPanel .settings-search-form {
  background: #102237;
  border-color: #2d4664;
}

body.theme-dark .settings-inline-callout {
  border-color: #345272;
  background: linear-gradient(180deg, rgba(16, 34, 55, 0.92) 0%, rgba(13, 29, 48, 0.92) 100%);
}

body.theme-dark .settings-pricebook-rule-panel {
  border-color: #29435e;
  background: rgba(12, 28, 45, 0.78);
}

body.theme-dark .settings-module-card {
  border-color: #2d4664;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(22, 49, 79, 0.96) 0%, rgba(14, 31, 49, 0.94) 58%),
    linear-gradient(180deg, #102237 0%, #0d1d30 100%);
  box-shadow: none;
  color: #d3e7ff;
}

body.theme-dark .settings-module-card:hover {
  border-color: #4f7198;
  box-shadow: 0 14px 26px rgba(1, 8, 16, 0.24);
}

body.theme-dark .settings-module-title {
  color: #e3f0ff;
}

body.theme-dark .settings-module-description {
  color: #9fb8d4;
}

body.theme-dark .settings-module-category {
  border-color: #38526f;
  background: #143252;
  color: #d3e7ff;
}

body.theme-dark .settings-module-open {
  color: #8dc8ff;
}

body.theme-dark #settingsPanel.settings-section-page {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden),
body.theme-dark .settings-focus-panel-active {
  border-color: #2d4664;
  background:
    radial-gradient(150% 120% at 0% 0%, rgba(23, 51, 83, 0.92) 0%, rgba(16, 34, 55, 0.96) 62%),
    linear-gradient(180deg, #102237 0%, #0d1d30 100%);
  box-shadow: none;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden)::before,
body.theme-dark .settings-focus-panel-active::before {
  border-color: #38526f;
  background: #143252;
  color: #d3e7ff;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active > .table-head {
  border-bottom-color: #2d4664;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head h3,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active > .table-head h2 {
  color: #e3f0ff;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > p.sub:first-of-type,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active > p.sub:first-of-type,
body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .grid-form,
body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-wrap,
body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .settings-subgroup,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active .page-folder-actions,
body.theme-dark #userManagementPanel.settings-focus-panel-active .user-management-collapse {
  border-color: #2d4664;
  background: #102237;
  box-shadow: none;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > p.sub:first-of-type,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active > p.sub:first-of-type {
  border: 0;
  border-bottom: 1px solid #2d4664;
  background: transparent;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .grid-form,
body.theme-dark #settingsDataToolsPanel.settings-focus-panel-active .page-folder-actions,
body.theme-dark #userManagementPanel.settings-focus-panel-active .user-management-collapse {
  background: transparent;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-wrap {
  border-color: #2d4664;
  background: rgba(16, 34, 55, 0.8);
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) > .settings-subgroup {
  border-top-color: #2d4664;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup > summary,
body.theme-dark #userManagementPanel.settings-focus-panel-active .user-management-collapse > summary {
  background: transparent;
  color: #d3e7ff;
  border: 0;
  border-bottom: 1px solid #2d4664;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head {
  border-bottom-color: #2d4664;
}

body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head h3,
body.theme-dark #settingsPanel.settings-section-page > section.panel:not(.hidden) .settings-subgroup-content > .table-head h4 {
  color: #d3e7ff;
}

#settings-service-plans .inline-actions {
  position: relative;
  z-index: 2;
}

#settings-service-plans .inline-actions button {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

@media (max-width: 1500px) {
  #settingsPage {
    grid-template-columns: 1fr;
  }

  #userManagementPanel {
    position: static;
    top: auto;
  }
}

@media (max-width: 1280px) {
  .settings-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  #settingsPanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settingsPanel > .table-head,
  #settingsPanel > .sub,
  #settingsPanel .settings-workflow,
  #settingsPanel .settings-topbar,
  #settingsPanel #settingsSearchEmpty,
  #settingsPanel > section.panel,
  #settings-general,
  #settings-company,
  #settings-scheduling,
  #settings-customer-meta,
  #settings-assets,
  #settings-messaging,
  #settings-job-emails,
  #settings-customer-source,
  #settings-invoices,
  #settings-nominal-codes,
  #settings-job-titles,
  #settings-reminders,
  #settings-email-platform,
  #settings-quotes,
  #settings-billing-controls,
  #templateBuilderSection,
  #formBuilderSection {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #settingsOverviewPanel .settings-search-form {
    grid-template-columns: 1fr;
  }

  .settings-module-grid {
    grid-template-columns: 1fr;
  }

  .settings-module-card {
    aspect-ratio: auto;
    min-height: 180px;
  }
}

#invoicePage.invoice-page {
  border: 1px solid #bcd7f5;
  border-radius: 16px;
  background:
    radial-gradient(130% 130% at 0% 0%, #f4f9ff 0%, #ffffff 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 1px 0 #e9f3ff inset,
    0 16px 32px rgba(17, 67, 130, 0.08);
}

#invoicePage .invoice-head {
  margin-bottom: 0.9rem;
}

#invoicePage .invoice-head h2 {
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

#invoicePage .invoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

#invoicePage .invoice-composer,
#invoicePage .invoice-payment-panel,
#invoicePage .invoice-table-panel {
  margin: 0;
  border-radius: 14px;
}

#invoicePage .invoice-composer,
#invoicePage .invoice-payment-panel {
  border: 1px solid #c9def5;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
  box-shadow: 0 8px 20px rgba(23, 74, 136, 0.06);
}

#invoicePage .invoice-composer > .table-head h3,
#invoicePage .invoice-payment-panel > .table-head h3,
#invoicePage .invoice-table-panel > .table-head h3 {
  font-size: 1rem;
  color: #174f91;
}

#invoicePage .invoice-payment-panel {
  position: static;
  top: auto;
  align-self: stretch;
  order: 2;
}

#invoicePage .invoice-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

#invoicePage .invoice-payment-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

#invoicePage .invoice-form-grid label,
#invoicePage .invoice-payment-form label {
  font-size: 0.84rem;
  color: #376290;
  letter-spacing: 0.01em;
}

#invoicePage .invoice-form-grid input,
#invoicePage .invoice-form-grid select,
#invoicePage .invoice-payment-form input,
#invoicePage .invoice-payment-form select {
  min-height: 42px;
  border-color: #bfd7f1;
  background: #fff;
}

#invoicePage .invoice-form-grid input:focus,
#invoicePage .invoice-form-grid select:focus,
#invoicePage .invoice-payment-form input:focus,
#invoicePage .invoice-payment-form select:focus {
  outline: 2px solid #8fbeef;
  outline-offset: 1px;
}

#invoicePage .invoice-span-2 {
  grid-column: 1 / -1;
}

#invoicePage .invoice-inline-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

#invoicePage .invoice-breakdown {
  border: 1px solid #cde0f7;
  border-radius: 12px;
  padding: 0.65rem;
  background: #f7fbff;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

#invoicePage .invoice-breakdown legend {
  font-weight: 700;
  color: #1c4f8f;
  padding: 0 0.35rem;
}

#invoicePage .invoice-breakdown .check-inline {
  background: #ffffff;
  border-color: #bfd9f5;
  min-height: 42px;
}

#invoicePage .invoice-line-items {
  border: 1px solid #cde0f7;
  border-radius: 12px;
  background: #f7fbff;
  padding: 0.65rem;
}

#invoicePage .invoice-line-items h4 {
  margin: 0;
  color: #1c4f8f;
}

#invoicePage .invoice-line-items .table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #fff;
}

#invoicePage .invoice-line-items thead th {
  background: #edf6ff;
  color: #1d518f;
}

#invoicePage .invoice-line-items tbody tr:nth-child(even) td {
  background: #fbfdff;
}

#invoicePage .invoice-line-items tbody tr:hover td {
  background: #f2f8ff;
}

#invoicePage .invoice-line-items table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#invoicePage .invoice-line-items td input {
  width: 100%;
  min-width: 0;
}

#invoicePage .invoice-line-items td:first-child input {
  min-width: 0;
}

#invoicePage .invoice-line-items th:nth-child(1),
#invoicePage .invoice-line-items td:nth-child(1) {
  width: 44%;
}

#invoicePage .invoice-line-items th:nth-child(2),
#invoicePage .invoice-line-items td:nth-child(2),
#invoicePage .invoice-line-items th:nth-child(3),
#invoicePage .invoice-line-items td:nth-child(3),
#invoicePage .invoice-line-items th:nth-child(4),
#invoicePage .invoice-line-items td:nth-child(4),
#invoicePage .invoice-line-items th:nth-child(5),
#invoicePage .invoice-line-items td:nth-child(5) {
  width: 8%;
}

#invoicePage .invoice-line-items th:nth-child(6),
#invoicePage .invoice-line-items td:nth-child(6) {
  width: 10%;
}

#invoicePage .invoice-line-items th:nth-child(7),
#invoicePage .invoice-line-items td:nth-child(7) {
  width: 14%;
}

#invoicePage .invoice-line-items td:nth-child(7) button {
  white-space: nowrap;
}

#invoicePage .invoice-line-items th,
#invoicePage .invoice-line-items td {
  white-space: normal;
}

#invoicePage .invoice-parts-preview {
  margin-top: 0.75rem;
  border: 1px solid #d2e4f8;
  background: linear-gradient(180deg, #fdfefe 0%, #f7fbff 100%);
}

#invoicePage .invoice-parts-preview .activity-list {
  max-height: 210px;
  overflow: auto;
  margin-top: 0.55rem;
}

#invoicePage .invoice-table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
}

#invoicePage .invoice-table-panel > .table-head {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
  grid-template-areas: "title search viewall";
  align-items: center;
  gap: 0.6rem;
}

#invoicePage .invoice-table-panel > .table-head h3 {
  margin: 0;
  grid-area: title;
}

#invoicePage #invoiceViewAllBtn {
  grid-area: viewall;
  justify-self: end;
  white-space: nowrap;
}

#invoicePage #invoiceSearchInput {
  grid-area: search;
  justify-self: stretch;
  width: min(560px, 100%);
}

#invoicePage .invoice-table-wrap table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

@media (max-width: 1100px) {
  #invoicePage .invoice-table-panel > .table-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "search"
      "viewall";
  }

  #invoicePage #invoiceSearchInput {
    justify-self: stretch;
    width: 100%;
  }

  #invoicePage #invoiceViewAllBtn {
    justify-self: start;
  }
}

#invoicePage .invoice-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #edf6ff;
  color: #1d518f;
  border-bottom: 1px solid #cfe2f7;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.42rem 0.32rem;
}

#invoicePage .invoice-table-wrap tbody tr:nth-child(even) td {
  background: #fbfdff;
}

#invoicePage .invoice-table-wrap tbody tr:hover td {
  background: #f2f8ff;
}

#invoicePage .invoice-table-wrap td {
  vertical-align: middle;
  font-size: 0.76rem;
  line-height: 1.25;
  padding: 0.42rem 0.32rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

#invoicePage .invoice-table-wrap td:nth-child(2),
#invoicePage .invoice-table-wrap td:nth-child(13) {
  font-weight: 700;
  color: #1b548f;
}

#invoicePage .invoice-table-wrap td:last-child {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  white-space: nowrap;
}

#invoicePage .table-actions-dropdown,
#invoiceAllPage .table-actions-dropdown {
  position: relative;
  width: auto;
  display: inline-flex;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

#quotePage .table-actions-dropdown {
  position: relative;
  width: auto;
  display: inline-flex;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
}

#invoicePage .table-actions-trigger,
#invoiceAllPage .table-actions-trigger,
#quotePage .table-actions-trigger {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 1px solid #94b9df;
  background: radial-gradient(circle at 30% 24%, #ffffff 0%, #edf5ff 62%, #dfeeff 100%);
  color: #1a4f87;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  font-weight: 800;
  text-align: center;
  line-height: 1;
  box-shadow:
    0 2px 8px rgba(23, 79, 145, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#invoicePage .table-actions-trigger:hover,
#invoiceAllPage .table-actions-trigger:hover,
#quotePage .table-actions-trigger:hover,
#invoicePage .table-actions-trigger[aria-expanded="true"],
#invoiceAllPage .table-actions-trigger[aria-expanded="true"],
#quotePage .table-actions-trigger[aria-expanded="true"] {
  border-color: #6ea5dc;
  background: radial-gradient(circle at 30% 24%, #ffffff 0%, #dfecff 58%, #cedff8 100%);
  box-shadow:
    0 4px 12px rgba(23, 79, 145, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

#invoicePage .table-actions-trigger:focus-visible,
#invoiceAllPage .table-actions-trigger:focus-visible,
#quotePage .table-actions-trigger:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.2),
    0 4px 12px rgba(23, 79, 145, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#invoicePage .invoice-table-wrap tbody tr:hover .table-actions-dropdown,
#invoicePage .invoice-table-wrap tbody tr:focus-within .table-actions-dropdown,
#invoiceAllPage .invoice-table-wrap tbody tr:hover .table-actions-dropdown,
#invoiceAllPage .invoice-table-wrap tbody tr:focus-within .table-actions-dropdown {
  opacity: 1;
  pointer-events: auto;
}

#invoicePage .table-actions-stash,
#invoiceAllPage .table-actions-stash,
#quotePage .table-actions-stash {
  display: none;
}

#invoicePage .table-actions-view,
#invoiceAllPage .table-actions-view,
#quotePage .table-actions-view {
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid #b7d2f1;
  border-radius: 12px;
  background: linear-gradient(180deg, #eaf4ff 0%, #e0efff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

#invoicePage .table-actions-view .table-head,
#invoiceAllPage .table-actions-view .table-head,
#quotePage .table-actions-view .table-head {
  margin-bottom: 0.35rem;
}

#invoicePage .table-actions-view h4,
#invoiceAllPage .table-actions-view h4,
#quotePage .table-actions-view h4 {
  margin: 0;
  color: #174f91;
  font-size: 0.96rem;
}

#invoicePage .table-actions-view .sub,
#invoiceAllPage .table-actions-view .sub,
#quotePage .table-actions-view .sub {
  margin: 0 0 0.45rem;
}

#invoicePage .table-actions-view-body,
#invoiceAllPage .table-actions-view-body,
#quotePage .table-actions-view-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

body.theme-dark #invoicePage.invoice-page {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #invoicePage .invoice-breakdown {
  background: #11263b;
  border-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-composer,
body.theme-dark #invoicePage .invoice-payment-panel {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #invoicePage .invoice-composer > .table-head h3,
body.theme-dark #invoicePage .invoice-payment-panel > .table-head h3,
body.theme-dark #invoicePage .invoice-table-panel > .table-head h3 {
  color: #d3e7ff;
}

body.theme-dark #invoicePage .invoice-form-grid label,
body.theme-dark #invoicePage .invoice-payment-form label {
  color: #a9c5e6;
}

body.theme-dark #invoicePage .invoice-form-grid input,
body.theme-dark #invoicePage .invoice-form-grid select,
body.theme-dark #invoicePage .invoice-payment-form input,
body.theme-dark #invoicePage .invoice-payment-form select {
  border-color: #2d4664;
  background: #0f2236;
}

body.theme-dark #invoicePage .invoice-breakdown legend {
  color: #d3e7ff;
}

body.theme-dark #invoicePage .invoice-breakdown .check-inline {
  background: #0f2236;
  border-color: #2d4664;
}

/* Quotient-style quote workspace */
#quotePage.invoice-page {
  --quote-accent: #1d62a5;
  --quote-form-columns: 4;
  --proposal-header-bg: #f3f8ff;
  --proposal-card-bg: #ffffff;
  --proposal-text-color: #102a43;
  border: 1px solid #b7d3f4;
  border-radius: 16px;
  background:
    radial-gradient(130% 130% at 100% 0%, #f3f8ff 0%, #ffffff 56%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:
    0 1px 0 #e9f3ff inset,
    0 16px 32px rgba(17, 67, 130, 0.08);
}

#quotePage .invoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr);
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

#quotePage .invoice-composer {
  border: 1px solid #c9def5;
  background: linear-gradient(180deg, var(--proposal-header-bg) 0%, #f8fcff 100%);
  box-shadow: 0 8px 20px rgba(23, 74, 136, 0.06);
}

#quotePage .invoice-form-grid {
  grid-template-columns: repeat(var(--quote-form-columns), minmax(0, 1fr));
  gap: 0.7rem;
}

#quotePage .invoice-form-grid > label {
  position: relative;
}

#quotePage .quote-wizard-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

#quotePage .quote-wizard-bar button {
  border-radius: 10px;
  border: 1px solid #c9ddf4;
  background: #eef6ff;
  color: #1f4f84;
  font-weight: 700;
  min-height: 34px;
}

#quotePage .quote-wizard-bar button:hover {
  border-color: #a9c8ea;
  background: #e3f0ff;
}

#quotePage .quote-wizard-bar button.active {
  border-color: #1d62a5;
  background: linear-gradient(180deg, #2e78bd 0%, #1d62a5 100%);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(20, 71, 130, 0.25);
}

#quotePage .quote-wizard-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.35rem 0 0.2rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid #d7e8f9;
  border-radius: 10px;
  background: #f8fbff;
}

#quotePage #quoteWizardStepLabel {
  flex: 1;
  text-align: center;
  font-weight: 700;
  color: #2a5e95;
}

#quotePage #quoteHealthPanel {
  border: 1px solid #cfe3f8;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
}

#quotePage #quoteHealthPanel .table-head {
  align-items: center;
}

#quotePage #quoteHealthPanel .activity-list {
  margin-top: 0.5rem;
}

#quotePage #quoteHealthPanel .activity-list li {
  border-bottom: 1px dashed #d8e8f9;
  padding: 0.35rem 0;
}

#quotePage #quoteHealthPanel .activity-list li:last-child {
  border-bottom: 0;
}

#quotePage .quote-form-block {
  border: 1px solid #cfe2f7;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--proposal-card-bg) 0%, #f7fbff 100%);
  padding: 0.7rem 0.75rem 0.75rem;
  box-shadow: 0 6px 16px rgba(22, 71, 130, 0.08);
  color: var(--proposal-text-color);
}

#quotePage .quote-form-block .table-head {
  margin-bottom: 0.45rem;
}

#quotePage .quote-form-block .table-head h4 {
  margin: 0;
  color: #1d518f;
}

#quotePage .quote-form-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

#quotePage .quote-form-collapsible > summary::-webkit-details-marker {
  display: none;
}

#quotePage .quote-form-collapse-hint {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c8def5;
  background: #eef6ff;
  color: #245a90;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
}

#quotePage .quote-form-collapsible[open] .quote-form-collapse-hint {
  background: #dbeeff;
}

#quotePage .quote-form-collapsible[open] .quote-form-collapse-hint::after {
  content: "v";
  margin-left: 0.35rem;
  transform: rotate(180deg);
}

#quotePage .quote-form-collapsible:not([open]) .quote-form-collapse-hint::after {
  content: "v";
  margin-left: 0.35rem;
}

#quotePage .quote-form-block-grid {
  display: grid;
  gap: 0.6rem;
}

#quotePage .quote-form-block-grid-context {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#quotePage .quote-form-block-grid-commercial {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#quotePage .quote-form-block-grid > label {
  position: relative;
  border: 1px solid #d7e8f9;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.45rem 0.5rem;
}

#quotePage .quote-form-block-grid > .inline-actions {
  border: 1px solid #d7e8f9;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.45rem 0.5rem;
}

#quotePage .quote-field-span-2 {
  grid-column: span 2;
}

#quotePage .invoice-span-2 {
  grid-column: span 2;
}

#quotePage #quoteLineItemsSection.invoice-span-2,
#quotePage #quoteSubmitBtn.invoice-span-2 {
  grid-column: 1 / -1;
}

#quotePage .invoice-line-items {
  margin-top: 0.15rem;
}

#quotePage .quote-preview-panel {
  position: sticky;
  top: 90px;
  align-self: start;
  border: 1px solid #c9def5;
  background: linear-gradient(180deg, var(--proposal-header-bg) 0%, #f7fbff 100%);
  color: var(--proposal-text-color);
}

#quotePage .quote-preview-hero-wrap {
  margin: 0.45rem 0 0.55rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d0e3f7;
  background: #ffffff;
}

#quotePage .quote-preview-hero-image {
  display: block;
  width: 100%;
  max-height: 165px;
  object-fit: cover;
}

#quotePage .quote-customer-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow: auto;
  z-index: 90;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(18, 54, 105, 0.18);
}

#quotePage #quoteCustomerId {
  display: none;
}

#quotePage .quote-customer-result {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf3fb;
  background: transparent;
  padding: 0.48rem 0.6rem;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

#quotePage .quote-customer-result:last-child {
  border-bottom: 0;
}

#quotePage .quote-customer-result:hover,
#quotePage .quote-customer-result.active {
  background: #edf6ff;
}

#quotePage .quote-stagebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.15rem 0 0.75rem;
}

#quotePage .quote-stage-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d6e7f8;
  background: #f3f8ff;
  color: #5a7391;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.26rem 0.45rem;
}

#quotePage .quote-stage-chip.complete {
  border-color: #a8cee6;
  background: #e9f5ff;
  color: #216298;
}

#quotePage .quote-stage-chip.active {
  border-color: var(--quote-accent);
  background: var(--quote-accent);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(18, 74, 132, 0.25);
}

#quotePage .quote-preview-panel hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.65rem 0;
}

#quotePage .quote-preview-panel h3 {
  margin: 0.15rem 0 0.5rem;
  color: var(--quote-accent);
}

#quotePage .quote-quick-template-actions {
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}

#quotePage .quote-pack-actions {
  align-items: flex-end;
  flex-wrap: wrap;
}

#quotePage.quote-editor-mode #quoteStatsSection,
#quotePage.quote-editor-mode #quoteTableSection {
  display: none;
}

#quotePage.quote-editor-mode .invoice-layout {
  margin-top: 0.25rem;
}

#quotePage.quote-editor-mode .invoice-composer {
  min-height: calc(100vh - 240px);
}

#quotePage.quote-editor-mode .quote-preview-panel {
  max-height: calc(100vh - 240px);
  overflow: auto;
}

#quotePage .quote-line-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

#quotePage .quote-line-item-actions select {
  min-width: 170px;
}

#quotePage #quoteMarginGuardrail {
  margin-top: 0.4rem;
}

#quotePage .quote-guardrail-warning {
  color: #b91c1c;
  font-weight: 700;
}

#quotePage .quote-guardrail-ok {
  color: #166534;
  font-weight: 600;
}

#quotePage .quote-followup-due {
  color: #b91c1c;
  font-weight: 700;
}

#quotePage .quote-margin-pill {
  margin-top: 0.35rem;
}

#quotePage .quote-option-matrix-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

#quotePage .quote-option-tier-card {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #f6fbff;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#quotePage .quote-option-tier-card h5 {
  margin: 0;
  color: #1d518f;
}

#quotePage .quote-option-tier-card.is-active {
  border-color: #1d62a5;
  box-shadow: 0 0 0 2px rgba(29, 98, 165, 0.2);
}

#quotePage #quotePartActionsSection {
  margin-top: 0.75rem;
  border: 1px solid #d6e7f8;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #ffffff;
}

#quotePage #quoteCustomerDecisionSection {
  margin-top: 0.75rem;
  border: 1px solid #d6e7f8;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #ffffff;
}

#quotePage #quoteCommunicationsSection {
  margin-top: 0.75rem;
  border: 1px solid #d6e7f8;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #ffffff;
}

#quotePage #quoteCustomerDecisionSection label {
  margin-bottom: 0.5rem;
}

#quotePage #quoteCustomerDecisionSection .inline-actions {
  margin-top: 0.35rem;
}

#quotePage #quoteApprovalStatus,
#quotePage #quoteDepositStatus {
  font-weight: 600;
  color: #1a4f84;
}

#quotePage #quoteCommunicationsSection .inline-actions {
  margin-bottom: 0.45rem;
}

#quotePage #quotePartActionsSection .activity-list {
  max-height: 220px;
  overflow: auto;
}

#quotePage #quoteApprovalAuditSection .activity-list {
  max-height: 220px;
  overflow: auto;
}

#quotePage #quoteCommunicationsSection .table-wrap {
  max-height: 240px;
  overflow: auto;
}

#quotePage .inline-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 180px;
}

#quotePage .invoice-line-items thead th {
  background: #edf6ff;
  color: #1d518f;
}

#quotePage .invoice-line-items .table-wrap,
#quotePage .invoice-table-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
}

#quotePage .invoice-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #edf6ff;
  color: #1d518f;
}

#quotePage .quote-bottom-search {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

#quotePage .quote-bottom-search input[type="search"] {
  width: min(360px, 100%);
}

#quotePage .quote-followup-board-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

#quotePage .quote-followup-column {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #f8fcff;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 180px;
}

#quotePage .quote-followup-column h5 {
  margin: 0;
  color: #1b4f88;
}

#quotePage .quote-followup-card {
  width: 100%;
  border: 1px solid #d6e7f8;
  border-radius: 10px;
  background: #ffffff;
  color: #193a63;
  text-align: left;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

#quotePage .quote-followup-card strong {
  font-size: 0.86rem;
  color: #144473;
}

#quotePage .quote-followup-card small {
  color: #4b6683;
}

#quotePage .quote-followup-card:hover {
  border-color: #8cb9e2;
  background: #f2f9ff;
}

#quotePage .quote-followup-card.is-escalated {
  border-color: #dc2626;
  background: #fff4f4;
}

#quotePage .quote-followup-card.is-escalated strong,
#quotePage .quote-followup-card.is-escalated small {
  color: #8f1d1d;
}

#quotePage.quote-layout-preview-hidden .invoice-layout {
  grid-template-columns: minmax(0, 1fr);
}

#quotePage.quote-layout-preview-hidden .quote-preview-panel {
  display: none;
}

#quotePage.quote-layout-preview-below .invoice-layout {
  grid-template-columns: minmax(0, 1fr);
}

#quotePage.quote-layout-preview-below .quote-preview-panel {
  order: 2;
  position: static;
}

#quotePage.quote-layout-stacked .invoice-layout {
  grid-template-columns: minmax(0, 1fr);
}

#quotePage.quote-layout-compact .panel {
  padding: 0.72rem;
}

#quotePage.quote-layout-compact .table-head {
  margin-bottom: 0.45rem;
}

#quotePage.quote-layout-compact .sub {
  margin-top: 0.25rem;
  margin-bottom: 0.2rem;
}

#quotePage:not(.quote-optional-enabled) #quoteLineItemsSection th:nth-child(6),
#quotePage:not(.quote-optional-enabled) #quoteLineItemsSection td:nth-child(6),
#quotePage:not(.quote-optional-enabled) #quoteLineItemsSection th:nth-child(7),
#quotePage:not(.quote-optional-enabled) #quoteLineItemsSection td:nth-child(7) {
  display: none;
}

#quotePage:not(.quote-discount-enabled) #quoteLineItemsSection th:nth-child(4),
#quotePage:not(.quote-discount-enabled) #quoteLineItemsSection td:nth-child(4) {
  display: none;
}

#quotePage:not(.quote-markup-enabled) #quoteLineItemsSection th:nth-child(5),
#quotePage:not(.quote-markup-enabled) #quoteLineItemsSection td:nth-child(5) {
  display: none;
}

#quotePage .table-actions-dropdown {
  position: relative;
  width: auto;
  display: inline-flex;
  align-items: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

#quotePage .invoice-table-wrap tbody tr:hover .table-actions-dropdown,
#quotePage .invoice-table-wrap tbody tr:focus-within .table-actions-dropdown {
  opacity: 1;
  pointer-events: auto;
}

body.theme-dark #quotePage.invoice-page {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #quotePage .quote-preview-panel {
  border-color: #2d4664;
  background: #0f2236;
}

body.theme-dark #quotePage .invoice-composer {
  border-color: #2d4664;
  background: #102237;
  box-shadow: none;
}

body.theme-dark #quotePage .quote-form-block {
  border-color: #2d4664;
  background: #102237;
  box-shadow: none;
}

body.theme-dark #quotePage .quote-form-block .table-head h4 {
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-form-collapse-hint {
  border-color: #3a5d82;
  background: #15324f;
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-form-block-grid > label,
body.theme-dark #quotePage .quote-form-block-grid > .inline-actions {
  border-color: #34516f;
  background: #132b43;
}

body.theme-dark #quotePage .quote-wizard-bar button {
  border-color: #34516f;
  background: #132b43;
  color: #cde4ff;
}

body.theme-dark #quotePage .quote-wizard-bar button:hover {
  border-color: #4d6f95;
  background: #173552;
}

body.theme-dark #quotePage .quote-wizard-bar button.active {
  border-color: #5ca1e3;
  background: linear-gradient(180deg, #2d78bf 0%, #1e5f9d 100%);
  color: #ffffff;
}

body.theme-dark #quotePage .quote-wizard-controls {
  border-color: #34516f;
  background: #132b43;
}

body.theme-dark #quotePage #quoteWizardStepLabel {
  color: #cde4ff;
}

body.theme-dark #quotePage #quoteHealthPanel {
  border-color: #34516f;
  background: #132b43;
}

body.theme-dark #quotePage #quoteHealthPanel .activity-list li {
  border-bottom-color: #34516f;
}

body.theme-dark #quotePage .quote-stage-chip {
  border-color: #34516f;
  background: #132b43;
  color: #a6c8ee;
}

body.theme-dark #quotePage #quotePartActionsSection,
body.theme-dark #quotePage #quoteCustomerDecisionSection,
body.theme-dark #quotePage #quoteCommunicationsSection,
body.theme-dark #quotePage #quoteApprovalAuditSection {
  border-color: #34516f;
  background: #132b43;
}

body.theme-dark #quotePage #quoteApprovalStatus,
body.theme-dark #quotePage #quoteDepositStatus {
  color: #cfe8ff;
}

body.theme-dark #quotePage .quote-option-tier-card {
  border-color: #34516f;
  background: #132b43;
}

body.theme-dark #quotePage .quote-option-tier-card h5 {
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-option-tier-card.is-active {
  border-color: #4f7fb1;
  box-shadow: 0 0 0 2px rgba(79, 127, 177, 0.3);
}

body.theme-dark #quotePage .quote-guardrail-warning {
  color: #fda4af;
}

body.theme-dark #quotePage .quote-guardrail-ok {
  color: #86efac;
}

body.theme-dark #quotePage .quote-followup-due {
  color: #fda4af;
}

body.theme-dark #quotePage .quote-customer-results {
  background: #0f2236;
  border-color: #31506f;
}

body.theme-dark #quotePage .quote-customer-result {
  border-bottom-color: #2a415d;
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-customer-result:hover,
body.theme-dark #quotePage .quote-customer-result.active {
  background: #143252;
}

body.theme-dark #quotePage .quote-stage-chip.complete {
  border-color: #3f6f9f;
  background: #163655;
  color: #cfe8ff;
}

body.theme-dark #quotePage .quote-stage-chip.active {
  border-color: #4f9ae4;
  background: #2f7ac7;
  color: #ffffff;
}

body.theme-dark #quotePage .invoice-line-items .table-wrap,
body.theme-dark #quotePage .invoice-table-wrap {
  border-color: #2d4664;
  background: #0f2236;
}

body.theme-dark #quotePage .quote-bottom-search input[type="search"] {
  background: #0f2236;
  border-color: #2d4664;
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-followup-column {
  border-color: #2d4664;
  background: #11283f;
}

body.theme-dark #quotePage .quote-followup-column h5 {
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-followup-card {
  border-color: #34516f;
  background: #0f2236;
  color: #d3e7ff;
}

body.theme-dark #quotePage .quote-followup-card strong {
  color: #e0eeff;
}

body.theme-dark #quotePage .quote-followup-card small {
  color: #9fb5cd;
}

body.theme-dark #quotePage .quote-followup-card:hover {
  border-color: #4f7fb1;
  background: #173553;
}

body.theme-dark #quotePage .quote-followup-card.is-escalated {
  border-color: #f87171;
  background: #3a1c1f;
}

body.theme-dark #quotePage .quote-followup-card.is-escalated strong,
body.theme-dark #quotePage .quote-followup-card.is-escalated small {
  color: #fecaca;
}

body.theme-dark #quotePage .invoice-table-wrap thead th,
body.theme-dark #quotePage .invoice-line-items thead th {
  background: #143252;
  color: #d3e7ff;
}

body.theme-dark #invoicePage .invoice-line-items {
  background: #11263b;
  border-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-line-items h4 {
  color: #d3e7ff;
}

body.theme-dark #invoicePage .invoice-line-items .table-wrap {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-parts-preview {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-table-wrap {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-table-wrap thead th {
  background: #143252;
  color: #d3e7ff;
  border-bottom-color: #2d4664;
}

body.theme-dark #invoicePage .invoice-table-wrap tbody tr:nth-child(even) td {
  background: #12283f;
}

body.theme-dark #invoicePage .invoice-table-wrap tbody tr:hover td {
  background: #16304b;
}

body.theme-dark #invoicePage .invoice-table-wrap td:nth-child(2),
body.theme-dark #invoicePage .invoice-table-wrap td:nth-child(13) {
  color: #bfe0ff;
}

body.theme-dark #invoicePage .table-actions-trigger,
body.theme-dark #invoiceAllPage .table-actions-trigger,
body.theme-dark #quotePage .table-actions-trigger {
  border-color: #3a5f86;
  background: radial-gradient(circle at 30% 24%, #244364 0%, #1a3550 62%, #12293f 100%);
  color: #d9ecff;
  box-shadow:
    0 2px 8px rgba(1, 8, 16, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-dark #invoicePage .table-actions-trigger:hover,
body.theme-dark #invoiceAllPage .table-actions-trigger:hover,
body.theme-dark #quotePage .table-actions-trigger:hover,
body.theme-dark #invoicePage .table-actions-trigger[aria-expanded="true"],
body.theme-dark #invoiceAllPage .table-actions-trigger[aria-expanded="true"],
body.theme-dark #quotePage .table-actions-trigger[aria-expanded="true"] {
  border-color: #4a79ab;
  background: radial-gradient(circle at 30% 24%, #2f567f 0%, #23496d 60%, #183a5a 100%);
  box-shadow:
    0 4px 12px rgba(1, 8, 16, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.theme-dark #invoicePage .table-actions-view,
body.theme-dark #invoiceAllPage .table-actions-view,
body.theme-dark #quotePage .table-actions-view {
  border-color: #2d4664;
  background: #132842;
  box-shadow: 0 10px 24px rgba(1, 8, 16, 0.45);
}

@media (hover: none) {
  #invoicePage .table-actions-dropdown {
    opacity: 1;
    pointer-events: auto;
  }
}

#customerProfilePanel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  border: 1px solid #bfd8f4;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f9ff 100%);
}

#customerProfilePanel > .table-head,
#customerProfilePanel > .sub {
  grid-column: 1 / -1;
}

#customerProfilePanel > .customer-warning-banner {
  grid-column: 1 / -1;
}

#customersPage .customer-risk-row td {
  background: #fff6f6;
}

#customersPage .customer-name-stack {
  display: grid;
  gap: 0.35rem;
}

#customersPage .customer-account-stack {
  display: grid;
  gap: 0.35rem;
}

#customerAssetsPanel .customer-assets-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto;
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

#customerAssetsPanel .customer-assets-toolbar label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}

#customerAssetsPanel .customer-assets-toolbar input,
#customerAssetsPanel .customer-assets-toolbar select {
  min-height: 36px;
}

@media (max-width: 980px) {
  #customerAssetsPanel .customer-assets-toolbar {
    grid-template-columns: 1fr;
  }
}

.customer-service-plan-pill {
  background: #d8ecff;
  color: #0e4f9a;
  border: 1px solid #8bbaf0;
  font-weight: 800;
}

.customer-service-plan-pill::before {
  content: "!";
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: #0e4f9a;
  color: #ffffff;
  font-size: 0.66rem;
  line-height: 1;
  font-weight: 900;
}

#customerProfileSub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.customer-service-plan-profile-pill {
  font-size: 0.72rem;
}

.customer-warning-banner {
  position: relative;
  border: 2px solid #1a1a1a;
  border-radius: 10px;
  background: repeating-linear-gradient(
    -45deg,
    #ffffff 0px,
    #ffffff 14px,
    #d9182f 14px,
    #d9182f 28px
  );
  color: #000000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.78rem 0.92rem;
  box-shadow: 0 0 0 2px rgba(217, 24, 47, 0.2), 0 10px 18px rgba(18, 24, 33, 0.22);
}

.customer-warning-banner::before {
  content: "WARNING";
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
}

.customer-warning-main {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.22rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: #000000;
  color: #ffffff;
  font-weight: 900;
}

.customer-warning-detail {
  display: inline-block;
  margin-right: 0.6rem;
  margin-bottom: 0.22rem;
  color: #000000;
  font-weight: 900;
}

#customerProfilePanel > .panel {
  margin: 0;
}

#customerProfilePanel table {
  min-width: 0;
}

#customerProfilePanel td,
#customerProfilePanel th {
  white-space: normal;
}

#customerProfilePanel .customer-profile-communication-filter {
  display: grid;
  gap: 0.3rem;
  min-width: 220px;
  font-size: 0.82rem;
  color: var(--muted);
}

#customerProfilePanel .customer-profile-communication-filter select {
  min-width: 220px;
}

body.theme-dark #customerQuickSearchForm,
body.theme-dark #customersPage .customer-collapse,
body.theme-dark #customerProfilePanel {
  background: #102237;
  border-color: #2d4664;
  box-shadow: none;
}

body.theme-dark #customersPage .table-wrap {
  border-color: #2d4664;
  background: #0f2236;
}

body.theme-dark #customerAssetsPanel .customer-assets-toolbar label {
  color: #aac3dd;
}

body.theme-dark .customer-service-plan-pill {
  background: #17365a;
  color: #c6e2ff;
  border-color: #3d6fa8;
}

body.theme-dark .customer-service-plan-pill::before {
  background: #7cb2ef;
  color: #0f2236;
}

body.theme-dark #customersPage thead th {
  background: #143252;
  color: #d3e7ff;
  border-bottom-color: #2d4664;
}

body.theme-dark #customersPage tbody tr:nth-child(even) td {
  background: #12283f;
}

body.theme-dark .customer-quick-search-results {
  background: #0f2236;
  border-color: #2d4664;
}

body.theme-dark .customer-quick-search-result {
  border-bottom-color: #2a415d;
  color: #d3e7ff;
}

body.theme-dark .customer-quick-search-result:hover,
body.theme-dark .customer-quick-search-result.active {
  background: #143252;
}

body.theme-dark #customersPage .customer-risk-row td {
  background: #342126;
}

body.theme-dark .customer-warning-banner {
  border-color: #050505;
  background: repeating-linear-gradient(
    -45deg,
    #ffffff 0px,
    #ffffff 14px,
    #d9182f 14px,
    #d9182f 28px
  );
  color: #000000;
  box-shadow: 0 0 0 2px rgba(217, 24, 47, 0.24), 0 10px 18px rgba(0, 0, 0, 0.35);
}

body.theme-dark .customer-warning-banner::before {
  border-color: #050505;
  background: #050505;
  color: #ffffff;
}

.customer-asset-add-wrap {
  margin-bottom: 0.8rem;
}

.customer-asset-add-wrap > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
  list-style: none;
}

#jobBackendPage {
  border: 1px solid #bcd7f5;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, #f4f9ff 0%, #ffffff 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

#jobBackendPage > .table-head h2 {
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.job-backend-top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}

.job-backend-top-tabs .small {
  min-height: 34px;
  padding: 0.3rem 0.55rem;
}

.job-backend-section-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.65rem;
}

.job-backend-return-btn {
  white-space: nowrap;
}

.job-backend-top-tabs .ghost.active {
  border-color: #1f5f9f;
  background: #dcecff;
  color: #0f3c68;
  box-shadow: inset 0 0 0 1px rgba(31, 95, 159, 0.08);
}

.job-backend-form {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.8rem;
  border: 1px solid #cce0f6;
  border-radius: 14px;
  background: #f8fbff;
}

.job-backend-form > label {
  margin: 0;
  position: relative;
  padding: 0.65rem;
  border: 1px solid #d7e7f8;
  border-radius: 12px;
  background: #fff;
}

.job-backend-form > label:focus-within {
  border-color: #8db7ea;
  box-shadow: 0 0 0 2px #e6f1ff;
}

.job-backend-form .check-inline {
  min-height: 100%;
  border-color: #cfe2f7;
  background: #f5faff;
}

.job-backend-form #jobBackendNumber {
  font-weight: 700;
  color: #104787;
  background: #eef6ff;
}

.job-backend-form .copy-inline {
  border: 1px solid #d9e8f8;
  border-radius: 10px;
  padding: 0.3rem;
  background: #f8fbff;
}

.job-backend-form .copy-inline input {
  border: none;
  background: transparent;
  padding: 0.45rem 0.5rem;
}

.job-backend-form .copy-inline input:focus {
  outline: none;
}

.job-backend-customer-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  z-index: 90;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(18, 54, 105, 0.18);
}

.job-backend-customer-result {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edf3fb;
  background: transparent;
  padding: 0.48rem 0.6rem;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
}

.job-backend-customer-result:last-child {
  border-bottom: 0;
}

.job-backend-customer-result:hover,
.job-backend-customer-result.active {
  background: #edf6ff;
}

.job-backend-form #jobBackendCustomerAssetsSummary {
  min-height: 84px;
  resize: vertical;
  font-size: 0.86rem;
  line-height: 1.35;
  background: #f8fbff;
}

.job-backend-form > details.job-backend-price-book {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d7e7f8;
  border-radius: 12px;
  background: #fff;
}

.job-backend-form > details.job-backend-price-book > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #123f77;
}

.job-backend-form > details.job-backend-price-book > summary::-webkit-details-marker {
  display: none;
}

.job-backend-form > details.job-backend-price-book > summary small {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.78rem;
  text-align: right;
  color: #6482a6;
}

.job-backend-form > details.job-backend-price-book[open] {
  border-color: #8db7ea;
  box-shadow: 0 0 0 2px #e6f1ff;
}

.job-backend-price-book-body {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.7rem;
}

.job-backend-price-book-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
}

.job-backend-price-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.job-backend-price-book-filters {
  display: flex;
  flex: 1 1 560px;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 0.65rem;
}

.job-backend-price-book-filter,
.job-backend-price-book-search {
  display: grid;
  gap: 0.28rem;
}

.job-backend-price-book-filter {
  min-width: 150px;
  flex: 0 1 170px;
}

.job-backend-price-book-search {
  min-width: min(100%, 320px);
  flex: 1 1 280px;
}

.job-backend-price-book-filter span,
.job-backend-price-book-search span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #355b8f;
}

.job-backend-price-book-filter select,
.job-backend-price-book-search input {
  min-height: 38px;
}

.job-backend-price-book-price {
  color: #0f5296;
}

.job-backend-price-book-body td small {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.77rem;
  line-height: 1.35;
  color: #6c88a9;
}

.job-span-1 {
  grid-column: span 1;
}

.job-span-2 {
  grid-column: span 2;
}

.job-span-3 {
  grid-column: 1 / -1;
}

.job-backend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
  padding-top: 0.15rem;
}

.job-backend-actions button {
  min-width: 132px;
  min-height: 42px;
}

#jobBackendCostingPanel {
  border: 1px solid #c6dcf5;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(46, 141, 214, 0.12) 0%, rgba(46, 141, 214, 0) 48%),
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

.job-costing-chart-grid {
  margin-top: 0.75rem;
}

.job-costing-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.job-costing-summary-card {
  display: grid;
  gap: 0.22rem;
  min-height: 132px;
  padding: 0.85rem 0.95rem;
  border: 1px solid #d4e6f8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(26, 82, 140, 0.08);
}

.job-costing-summary-card[data-tone="revenue"] {
  background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
}

.job-costing-summary-card[data-tone="cost"] {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
}

.job-costing-summary-card[data-tone="overhead"] {
  background: linear-gradient(180deg, #ffffff 0%, #fff6ea 100%);
}

.job-costing-summary-card[data-tone="profit"] {
  background: linear-gradient(180deg, #ffffff 0%, #eefcf6 100%);
}

.job-costing-summary-card[data-tone="warn"] {
  background: linear-gradient(180deg, #ffffff 0%, #fff8ea 100%);
}

.job-costing-summary-card[data-tone="loss"] {
  background: linear-gradient(180deg, #ffffff 0%, #fff1f1 100%);
}

.job-costing-summary-label {
  color: #53708f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.job-costing-summary-value {
  color: #103f67;
  font-size: 1.45rem;
  line-height: 1.1;
}

.job-costing-summary-meta {
  color: #647e98;
  font-size: 0.78rem;
  line-height: 1.4;
}

.job-costing-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.job-costing-notes-field {
  grid-column: span 2;
}

.job-costing-notes-field textarea {
  min-height: 100px;
  resize: vertical;
}

.job-costing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
  align-items: start;
}

.job-costing-card {
  margin: 0;
  padding: 0.8rem;
  border: 1px solid #d5e6f8;
  border-radius: 12px;
  background: #fff;
}

.job-costing-card td strong,
.job-costing-card td small {
  display: block;
}

.job-costing-card td small {
  color: var(--muted);
}

.job-costing-card input,
.job-costing-card select {
  min-width: 92px;
}

.job-costing-card .table-wrap {
  margin-top: 0.55rem;
}

#jobBackendCostingTargetPill[data-tone="good"],
#jobBackendCostingMarginPill[data-tone="good"] {
  border-color: #bde4d3;
  background: #eefbf6;
  color: #1c7560;
}

#jobBackendCostingTargetPill[data-tone="warn"],
#jobBackendCostingMarginPill[data-tone="warn"] {
  border-color: #f0d7ad;
  background: #fff7e8;
  color: #9f6921;
}

#jobBackendCostingTargetPill[data-tone="loss"],
#jobBackendCostingMarginPill[data-tone="loss"] {
  border-color: #efc4c4;
  background: #fff1f1;
  color: #a83d3d;
}

#jobBackendPlannerEventPanel {
  border: 1px solid #c6dcf5;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(70, 144, 224, 0.12) 0%, rgba(70, 144, 224, 0) 50%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.job-planner-event-card {
  display: grid;
  gap: 0.7rem;
  padding: 0.95rem 1rem;
  border: 1px solid #d7e7f8;
  border-left: 6px solid #4e94df;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(29, 79, 133, 0.08);
}

.job-planner-event-card.planner-status-ongoing {
  border-left-color: #d18a2a;
}

.job-planner-event-card.planner-status-completed {
  border-left-color: #23956a;
}

.job-planner-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.job-planner-event-top strong {
  color: #123f69;
  font-size: 1rem;
}

.job-planner-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.job-planner-event-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.26rem 0.58rem;
  border: 1px solid #d7e6f4;
  border-radius: 999px;
  background: #f6fbff;
  color: #275380;
  font-size: 0.76rem;
  font-weight: 700;
}

.job-planner-event-actions {
  justify-content: flex-start;
}

#jobBackendCommunicationsPanel {
  border: 1px solid #c6dcf5;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.job-communications-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

#jobEmailPanel.hidden + .job-communications-card {
  grid-column: 1 / -1;
}

.job-communications-card {
  margin: 0;
  padding: 0.85rem;
  border: 1px solid #d5e6f8;
  border-radius: 12px;
  background: #fff;
}

.job-email-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: end;
}

.job-email-form > label {
  margin: 0;
}

.job-email-form-subject,
.job-email-form-body,
.job-email-form-attachments-toggle,
.job-email-form-attachments,
.job-email-form-actions {
  grid-column: 1 / -1;
}

.job-email-form-body textarea {
  min-height: 180px;
  resize: vertical;
}

.job-email-form-actions {
  padding-top: 0.1rem;
}

.job-email-log-wrap,
.job-communication-trail-wrap {
  margin-top: 0.7rem;
  max-height: 420px;
  overflow: auto;
}

#jobEmailPanel.hidden + .job-communications-card .job-communication-trail-wrap {
  max-height: 560px;
}

@media (min-width: 1201px) {
  #jobBackendCommunicationsPanel .job-communication-trail-wrap table {
    min-width: 980px;
  }

  #jobBackendCommunicationsPanel .job-email-log-wrap table {
    min-width: 700px;
  }
}

.job-communication-summary {
  display: grid;
  gap: 0.16rem;
}

.job-communication-summary strong,
.job-communication-summary small {
  display: block;
}

.job-communication-summary strong {
  color: var(--text);
}

.job-communication-summary small {
  color: var(--muted);
}

#jobBackendAttachmentsPanel {
  border: 1px solid #c6dcf5;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}

#jobBackendAttachmentsPanel .table-head {
  margin-bottom: 0.45rem;
}

.job-backend-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.35rem;
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #f2f8ff;
}

.job-backend-tabbar button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.job-backend-subsection {
  margin-top: 0.7rem;
  padding: 0.75rem;
  border: 1px solid #d5e6f8;
  border-radius: 12px;
  background: #fff;
}

.job-backend-subsection .grid-form {
  margin-top: 0;
}

.job-engineer-forms {
  display: grid;
  gap: 0.75rem;
}

.job-backend-certificate-asset-picker {
  margin: 0 0 0.7rem;
  display: grid;
  gap: 0.35rem;
}

.job-backend-certificate-asset-picker label {
  max-width: 520px;
}

.job-backend-certificate-asset-picker .sub {
  margin: 0;
}

.job-engineer-form-card {
  border: 1px solid #d7e8fb;
  border-radius: 12px;
  background: #fff;
  padding: 0.75rem;
}

.job-engineer-form-card h4 {
  margin: 0 0 0.35rem;
}

.job-engineer-form-card .sub {
  margin-bottom: 0.55rem;
}

.job-engineer-forms-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.6rem;
}

.job-engineer-field {
  display: grid;
  gap: 0.3rem;
  grid-column: span 12;
}

.job-engineer-field.field-width-quarter { grid-column: span 3; }
.job-engineer-field.field-width-one-third { grid-column: span 4; }
.job-engineer-field.field-width-half { grid-column: span 6; }
.job-engineer-field.field-width-two-third { grid-column: span 8; }
.job-engineer-field.field-width-three-quarter { grid-column: span 9; }
.job-engineer-field.field-width-full { grid-column: span 12; }

.job-engineer-photo-control {
  display: grid;
  gap: 0.4rem;
}

.job-engineer-photo-control input[type="file"] {
  max-width: 100%;
}

.job-engineer-photo-preview {
  max-width: min(100%, 260px);
  max-height: 180px;
  border: 1px solid #c6ddf5;
  border-radius: 10px;
  background: #ffffff;
  object-fit: cover;
}

body.theme-dark #jobBackendPage {
  border-color: #2e4866;
  background: #0f2338;
}

body.theme-dark .job-backend-form {
  border-color: #2f4968;
  background: #11273f;
}

body.theme-dark #jobBackendPlannerEventPanel {
  border-color: #2f4968;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(69, 143, 224, 0.2) 0%, rgba(69, 143, 224, 0) 50%),
    linear-gradient(180deg, #11273f 0%, #102338 100%);
}

body.theme-dark #jobBackendCostingPanel {
  border-color: #2f4968;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(69, 143, 224, 0.18) 0%, rgba(69, 143, 224, 0) 48%),
    linear-gradient(180deg, #11273f 0%, #102338 100%);
}

body.theme-dark .job-planner-event-card {
  border-color: #31506f;
  background: #0f2236;
  box-shadow: none;
}

body.theme-dark .job-planner-event-top strong {
  color: #d4e8ff;
}

body.theme-dark .job-planner-event-pill {
  border-color: #31506f;
  background: #17314f;
  color: #d4e8ff;
}

body.theme-dark #jobBackendCommunicationsPanel,
body.theme-dark .job-communications-card {
  border-color: #2f4968;
  background: #11273f;
}

body.theme-dark .job-backend-form > label {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark .job-backend-customer-results {
  background: #0f2236;
  border-color: #31506f;
}

body.theme-dark .job-backend-customer-result {
  border-bottom-color: #2a415d;
  color: #d3e7ff;
}

body.theme-dark .job-backend-customer-result:hover,
body.theme-dark .job-backend-customer-result.active {
  background: #143252;
}

body.theme-dark .job-engineer-photo-preview {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark .job-backend-form > details.job-backend-price-book {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark .job-backend-form > details.job-backend-price-book > summary {
  color: #d4e8ff;
}

body.theme-dark .job-backend-price-book-filter span,
body.theme-dark .job-backend-form > details.job-backend-price-book > summary small,
body.theme-dark .job-backend-price-book-search span,
body.theme-dark .job-backend-price-book-body td small {
  color: #97b7d8;
}

body.theme-dark .job-backend-form > details.job-backend-price-book[open] {
  border-color: #458fe0;
  box-shadow: 0 0 0 2px rgba(69, 143, 224, 0.18);
}

body.theme-dark .job-backend-price-book-price {
  color: #87c2ff;
}

body.theme-dark .job-backend-form #jobBackendNumber {
  background: #17314f;
  color: #d4e9ff;
}

body.theme-dark .job-backend-form .copy-inline {
  border-color: #31506f;
  background: #102338;
}

body.theme-dark .job-backend-tabbar,
body.theme-dark #jobBackendAttachmentsPanel,
body.theme-dark .job-backend-subsection {
  border-color: #2f4968;
  background: #11273f;
}

body.theme-dark .job-communication-summary strong {
  color: #d4e8ff;
}

body.theme-dark .job-communication-summary small {
  color: #9cb7d5;
}

body.theme-dark .job-engineer-form-card {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark .job-backend-certificate-asset-picker .sub {
  color: #9cb7d5;
}

body.theme-dark .job-costing-summary-card,
body.theme-dark .job-costing-card {
  border-color: #31506f;
  background: #0f2236;
  box-shadow: none;
}

body.theme-dark .job-costing-summary-card[data-tone="revenue"] {
  background: linear-gradient(180deg, #0f2236 0%, #112b44 100%);
}

body.theme-dark .job-costing-summary-card[data-tone="cost"] {
  background: linear-gradient(180deg, #0f2236 0%, #142538 100%);
}

body.theme-dark .job-costing-summary-card[data-tone="overhead"] {
  background: linear-gradient(180deg, #0f2236 0%, #2d2518 100%);
}

body.theme-dark .job-costing-summary-card[data-tone="profit"] {
  background: linear-gradient(180deg, #0f2236 0%, #102d23 100%);
}

body.theme-dark .job-costing-summary-card[data-tone="warn"] {
  background: linear-gradient(180deg, #0f2236 0%, #312515 100%);
}

body.theme-dark .job-costing-summary-card[data-tone="loss"] {
  background: linear-gradient(180deg, #0f2236 0%, #311b1b 100%);
}

body.theme-dark .job-costing-summary-label,
body.theme-dark .job-costing-summary-meta {
  color: #99b8d8;
}

body.theme-dark .job-costing-summary-value {
  color: #d4e8ff;
}

body.theme-dark #jobBackendCostingTargetPill[data-tone="good"],
body.theme-dark #jobBackendCostingMarginPill[data-tone="good"] {
  border-color: #2f7a63;
  background: #143126;
  color: #8dd8ba;
}

body.theme-dark #jobBackendCostingTargetPill[data-tone="warn"],
body.theme-dark #jobBackendCostingMarginPill[data-tone="warn"] {
  border-color: #7f612a;
  background: #332712;
  color: #efc673;
}

body.theme-dark #jobBackendCostingTargetPill[data-tone="loss"],
body.theme-dark #jobBackendCostingMarginPill[data-tone="loss"] {
  border-color: #874646;
  background: #351818;
  color: #f0aaaa;
}

@media (max-width: 1200px) {
  .job-costing-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-costing-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-costing-notes-field {
    grid-column: 1 / -1;
  }

  .job-costing-grid {
    grid-template-columns: 1fr;
  }
}

body.theme-dark .job-backend-top-tabs .ghost {
  border-color: #31506f;
  background: #102338;
  color: #cfe3fb;
}

body.theme-dark .job-backend-top-tabs .ghost.active {
  border-color: #6ea8de;
  background: #17314b;
  color: #eff7ff;
}

.copy-inline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.copy-inline input {
  flex: 1;
}

.copy-inline button {
  flex-shrink: 0;
}

.customer-type-checklist {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

@media (max-width: 1200px) {
  #customerForm,
  #customerSecondaryAddressForm,
  #customerReminderForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-backend-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .job-backend-top-tabs {
    justify-content: flex-start;
  }

  .job-communications-grid {
    grid-template-columns: 1fr;
  }
}

.home-daily-planner-table {
  width: 100%;
  table-layout: fixed;
  min-width: 760px;
}

.home-daily-planner-table tbody tr {
  height: 44px;
}

.home-daily-planner-table .planner-cell {
  padding: 0;
}

.home-daily-wrap {
  overflow-y: auto;
}

.home-daily-time-cell {
  font-weight: 700;
  color: var(--muted);
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  white-space: nowrap;
}

#homeDailyPlanner .home-daily-planner-table thead th:first-child {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

#homeDailyPlanner .home-daily-planner-table thead th:not(:first-child),
#homeDailyPlanner .home-daily-planner-table .planner-cell {
  width: auto;
  min-width: 0;
}

.diary-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diary-form label:last-of-type {
  grid-column: span 2;
}

.diary-form button {
  align-self: end;
}

.diary-entries {
  margin-top: 1rem;
}

.diary-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.diary-column {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7fbff;
  padding: 0.7rem;
}

.diary-column h3 {
  margin-bottom: 0.5rem;
  color: var(--muted);
}

.diary-list {
  display: grid;
  gap: 0.7rem;
}

.diary-time-grid {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-y: auto;
  max-height: 792px;
  background: #fff;
  position: relative;
}

.diary-time-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  border-top: 1px solid var(--border);
}

.diary-time-row:first-child {
  border-top: none;
}

.diary-time-label {
  background: #f6faff;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
  border-right: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 1;
}

.diary-time-lane {
  padding: 0.35rem 0.45rem;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.diary-time-lane-occupied {
  padding: 0;
  border-left: 4px solid #2b7ed6;
  background: linear-gradient(90deg, #d9ebff 0%, #eef6ff 100%);
}

.diary-time-lane-occupied-start {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.diary-time-lane-occupied-end {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.diary-slot-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f3f9ff;
  padding: 0.4rem;
  display: grid;
  gap: 0.35rem;
}

.time-blocked {
  display: inline-block;
  border: 1px dashed #b7d2ef;
  border-radius: 8px;
  background: #eef6ff;
  color: #4d78ac;
  font-size: 0.72rem;
  padding: 0.18rem 0.35rem;
}

.time-occupied-slot {
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.time-occupied-fill {
  display: block;
  width: 100%;
  min-height: 100%;
}

.diary-time-event-marker {
  width: calc(100% - 0.6rem);
  margin: 0.3rem;
  border: 1px solid #7eb0e7;
  border-radius: 8px;
  background: #ffffffde;
  color: #0f3f80;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: left;
  padding: 0.24rem 0.3rem 0.24rem 0.45rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.diary-time-event-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-time-event-resize {
  flex: 0 0 auto;
  border: 1px solid #a8c8ef;
  border-radius: 6px;
  background: #e8f3ff;
  color: #194f9b;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.28rem;
  cursor: ns-resize;
  user-select: none;
}

.job-resize-handle {
  border: 1px solid #a8c8ef;
  border-radius: 8px;
  background: #e8f3ff;
  color: #194f9b;
  font-size: 0.72rem;
  padding: 0.2rem 0.4rem;
  cursor: ns-resize;
}

.diary-time-header .diary-time-label,
.diary-time-header .diary-time-lane {
  font-weight: 700;
  color: #194f9b;
  background: #eaf4ff;
}

.diary-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem;
  display: grid;
  gap: 0.45rem;
}

.diary-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.diary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.planner-cell {
  min-width: 180px;
  vertical-align: top;
}

#homePlannerSection .planner-cell {
  min-height: 96px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.planner-jobs {
  display: grid;
  gap: 0.35rem;
}

#homePlannerSection .planner-jobs {
  gap: 0.45rem;
  padding: 0.12rem 0;
}

.home-daily-planner-table .planner-jobs {
  min-height: 44px;
  height: 100%;
}

.planner-time-lane-occupied {
  min-height: 100%;
  padding: 0;
  gap: 0;
  border-left: 4px solid #2b7ed6;
  background: linear-gradient(90deg, #d9ebff 0%, #eef6ff 100%);
}

.planner-time-lane-occupied-start {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.planner-time-lane-occupied-end {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.planner-time-occupied-fill {
  display: block;
  width: 100%;
  min-height: 44px;
  height: 100%;
}

.planner-time-event-marker {
  width: 100%;
  margin: 0;
  min-height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #0f3f80;
  font-weight: 700;
  font-size: 0.78rem;
  text-align: left;
  padding: 0.2rem 0.35rem 0.2rem 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.28rem;
}

.planner-time-event-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-time-event-resize {
  flex: 0 0 auto;
  border: 1px solid #a8c8ef;
  border-radius: 6px;
  background: #e8f3ff;
  color: #194f9b;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.18rem 0.25rem;
  cursor: ns-resize;
  user-select: none;
}

.planner-create-select {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #e6f0ff;
}

.planner-status-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.2rem 0 0.45rem;
}

.planner-status-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #2a4f79;
  padding: 0.18rem 0.45rem;
  border: 1px solid #c9ddf4;
  border-radius: 999px;
  background: #f4f9ff;
}

.planner-status-swatch {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.planner-status-current {
  --planner-accent: #2a63c3;
  --planner-bg: #edf4ff;
  --planner-border: #c4d9f5;
  --planner-text: #184a8a;
}

.planner-status-ongoing {
  --planner-accent: #cc8a18;
  --planner-bg: #fff5e6;
  --planner-border: #f2d5a3;
  --planner-text: #7a4b05;
}

.planner-status-completed {
  --planner-accent: #2f9965;
  --planner-bg: #e9f8f0;
  --planner-border: #bfe6d1;
  --planner-text: #145439;
}

.planner-status-swatch.planner-status-current {
  background: #2a63c3;
  border-color: #1d4f9e;
}

.planner-status-swatch.planner-status-ongoing {
  background: #cc8a18;
  border-color: #9f6406;
}

.planner-status-swatch.planner-status-completed {
  background: #2f9965;
  border-color: #1f6f48;
}

.planner-job {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f3f9ff;
  color: var(--text);
  padding: 0.35rem 0.45rem;
  font-size: 0.8rem;
  cursor: pointer;
}

#homePlannerSection .planner-job {
  border: 1px solid #bdd6f3;
  border-left: 4px solid #2f7fd8;
  border-radius: 10px;
  background: linear-gradient(180deg, #f2f8ff 0%, #e8f2ff 100%);
  box-shadow: 0 2px 8px rgba(47, 127, 216, 0.12);
  color: #123f77;
  padding: 0.42rem 0.5rem 0.42rem 0.55rem;
}

#homePlannerSection .planner-job.planner-status-current,
.planner-job.planner-status-current,
#homePlannerSection .monthly-job-chip.planner-status-current,
.monthly-job-chip.planner-status-current,
.planner-time-event-marker.planner-status-current,
.planner-time-lane-occupied.planner-status-current,
.planner-time-occupied-fill.planner-status-current {
  border-color: var(--planner-border);
  border-left-color: var(--planner-accent);
  background: linear-gradient(180deg, var(--planner-bg) 0%, #ffffff 100%);
  color: var(--planner-text);
}

#homePlannerSection .planner-job.planner-status-ongoing,
.planner-job.planner-status-ongoing,
#homePlannerSection .monthly-job-chip.planner-status-ongoing,
.monthly-job-chip.planner-status-ongoing,
.planner-time-event-marker.planner-status-ongoing,
.planner-time-lane-occupied.planner-status-ongoing,
.planner-time-occupied-fill.planner-status-ongoing {
  border-color: var(--planner-border);
  border-left-color: var(--planner-accent);
  background: linear-gradient(180deg, var(--planner-bg) 0%, #fffdf9 100%);
  color: var(--planner-text);
}

#homePlannerSection .planner-job.planner-status-completed,
.planner-job.planner-status-completed,
#homePlannerSection .monthly-job-chip.planner-status-completed,
.monthly-job-chip.planner-status-completed,
.planner-time-event-marker.planner-status-completed,
.planner-time-lane-occupied.planner-status-completed,
.planner-time-occupied-fill.planner-status-completed {
  border-color: var(--planner-border);
  border-left-color: var(--planner-accent);
  background: linear-gradient(180deg, var(--planner-bg) 0%, #ffffff 100%);
  color: var(--planner-text);
}

#homePlannerSection .planner-job:hover {
  background: linear-gradient(180deg, #eaf4ff 0%, #dfecff 100%);
  border-color: #a7c9ef;
}

#homePlannerSection .planner-job-label {
  font-weight: 700;
}

.planner-job-resizable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.planner-job-label {
  cursor: pointer;
}

.dragging-job {
  opacity: 0.6;
}

.drop-target {
  background: #e6f2ff;
  box-shadow: inset 0 0 0 2px #2f7fd8;
}

.monthly-planner {
  margin-top: 0.6rem;
}

#homePlannerSection .monthly-weekday {
  border: 1px solid #cfe3f8;
  border-radius: 8px;
  background: #eef6ff;
  color: #1e5696;
  padding: 0.18rem 0.2rem;
}

#homePlannerSection .monthly-day-cell {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 0.42rem;
}

#homePlannerSection .monthly-day-number {
  color: #2b5f9c;
}

#homePlannerSection .monthly-job-chip {
  border: 1px solid #bfd8f4;
  border-left: 4px solid #2f7fd8;
  border-radius: 8px;
  background: #eef6ff;
  color: #123f77;
  padding: 0.22rem 0.26rem 0.22rem 0.34rem;
}

#homePlannerSection .monthly-job-chip:hover {
  background: #e4f0ff;
}

#homeDailyPlanner .home-daily-wrap {
  border: 1px solid #cfe2f7;
  border-radius: 12px;
  background: #fff;
  max-height: 74vh;
}

#homeDailyPlanner .home-daily-planner-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #edf6ff;
  color: #1c4f8f;
  border-bottom: 1px solid #cfe3f8;
}

#homeDailyPlanner .home-daily-time-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f2f8ff;
  border-right: 1px solid #dce9f8;
  color: #1f578f;
}

#homeDailyPlanner .home-daily-planner-table tbody tr:nth-child(even) td {
  background: #fbfdff;
}

.monthly-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.monthly-weekday {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}

.monthly-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

.diary-planner-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.diary-planner-day-cell {
  aspect-ratio: 1 / 1;
  min-height: 140px;
}

.diary-planner-day-jobs {
  overflow-y: auto;
  min-height: 0;
}

.monthly-day-cell {
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 0.35rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
}

.monthly-day-blank {
  background: transparent;
  border: 1px dashed #dbe8f8;
}

.monthly-day-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.monthly-day-jobs {
  display: grid;
  gap: 0.2rem;
}

.monthly-job-chip {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f3f9ff;
  padding: 0.16rem 0.2rem 0.16rem 0.3rem;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.2;
}

/* Planner refresh: clearer layout, stronger status colors, better readability */
#homePlannerSection {
  border: 1px solid #b9d4db;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, #f2f8fa 0%, #ffffff 55%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
  box-shadow:
    0 1px 0 #e9f1f4 inset,
    0 14px 28px rgba(20, 73, 94, 0.08);
}

#homePlannerSection .table-head {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(2, minmax(140px, 180px));
  gap: 0.65rem;
  align-items: end;
}

#homePlannerSection .table-head label {
  min-width: 0;
}

#homePlannerSection .table-head label select,
#homePlannerSection .table-head label input {
  border-color: #b8d5de;
  background: #fbfeff;
}

#homePlannerSection .sub.planner-title {
  margin-top: 0.4rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid #bdd7df;
  background: #ebf5f8;
  color: #1c576b;
  font-size: 0.8rem;
}

.home-planner-daily-controls {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  margin: 0.35rem 0 0.6rem;
  padding: 0.7rem;
  border: 1px solid #c7dde4;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fcfd 0%, #f2f9fb 100%);
}

.home-planner-daily-controls.users-hidden {
  grid-template-columns: minmax(220px, 280px);
}

.home-planner-optimise-bar {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #c7dde4;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fcfd 0%, #f2f9fb 100%);
}

.home-planner-optimise-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-planner-optimise-bar .sub {
  margin: 0;
  color: #1f5a6d;
  font-weight: 700;
}

.home-planner-daily-controls > label {
  margin: 0;
  padding: 0.55rem;
  border: 1px solid #c8dde5;
  border-radius: 12px;
  background: #ffffff;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  font-weight: 700;
  color: #1f5a6d;
}

.home-planner-daily-controls input[type="date"] {
  max-width: 100%;
  min-height: 40px;
  border-color: #b8d5de;
  background: #fbfeff;
}

.home-users-block {
  min-width: 0;
  max-width: none;
  padding: 0.55rem;
  border: 1px solid #c8dde5;
  border-radius: 12px;
  background: #ffffff;
}

.home-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.home-users-block .sub {
  margin: 0 0 0.45rem;
  font-weight: 700;
  color: #1f5a6d;
}

.home-users-toggle {
  min-height: 34px;
  padding-inline: 0.75rem;
  border-radius: 999px;
  border-color: #b9d7e5;
  background: linear-gradient(180deg, #ffffff 0%, #eef7fb 100%);
  color: #1a5874;
  font-weight: 800;
}

.home-users-toggle.is-active {
  border-color: #8abed6;
  background: linear-gradient(180deg, #eef8fc 0%, #e0f1f8 100%);
}

.home-user-checklist {
  border-color: #c9dde4;
  background: #fafdff;
  border-radius: 10px;
  padding: 0.45rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem 0.45rem;
  max-height: 180px;
}

.home-user-option {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid #d6e7ee;
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.8rem;
}

.home-user-option input[type="checkbox"] {
  margin: 0;
  accent-color: #1e7ca1;
}

.home-user-actions {
  justify-content: flex-end;
  margin-top: 0.45rem;
}

#homePlannerSection .table-wrap {
  border: 1px solid #c7dce4;
  border-radius: 14px;
  background: #fff;
}

#homePlannerSection #homePlannerTableWrap thead th {
  background: #eaf4f7;
  color: #1d5a6f;
  border-bottom: 1px solid #c5dde5;
}

#homePlannerSection #weeklyPlannerBody td:first-child {
  color: #1d5a6f;
  background: #eef7fa;
  border-right: 1px solid #d5e6ec;
}

#homePlannerSection .planner-cell {
  min-height: 112px;
  padding: 0.2rem 0.16rem;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcfd 100%);
}

.planner-status-key-item {
  border: 1px solid #c5dde4;
  background: #f1f8fa;
  color: #22596b;
}

.planner-status-current {
  --planner-accent: #2a63c3;
  --planner-bg: #edf4ff;
  --planner-border: #c4d9f5;
  --planner-text: #184a8a;
}

.planner-status-ongoing {
  --planner-accent: #c97b14;
  --planner-bg: #fff4e5;
  --planner-border: #f0d2a4;
  --planner-text: #7f4f0f;
}

.planner-status-completed {
  --planner-accent: #19825f;
  --planner-bg: #e7f7f0;
  --planner-border: #bde4d2;
  --planner-text: #15533e;
}

#homePlannerSection .planner-job {
  border-width: 1px;
  border-left-width: 5px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(22, 82, 104, 0.12);
  padding: 0.5rem 0.55rem 0.5rem 0.62rem;
}

.planner-job {
  border-radius: 10px;
  padding: 0.4rem 0.46rem;
}

.planner-job-label {
  font-size: 0.79rem;
}

#homePlannerSection .monthly-weekday {
  border: 1px solid #c7dde4;
  background: #edf5f8;
  color: #215a6c;
}

.monthly-grid {
  gap: 0.5rem;
}

#homePlannerSection .monthly-day-cell,
.diary-planner-day-cell {
  border: 1px solid #c8dde5;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
}

.diary-planner-day-cell {
  min-height: 170px;
}

#homePlannerSection .monthly-day-number,
.monthly-day-number {
  color: #21596d;
  font-size: 0.78rem;
}

#homePlannerSection .monthly-job-chip,
.monthly-job-chip {
  border-radius: 9px;
  border-left-width: 4px;
  padding: 0.24rem 0.3rem 0.24rem 0.4rem;
}

#homeDailyPlanner .home-daily-wrap,
.diary-time-grid {
  border: 1px solid #c4dbe4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 #ecf4f7;
}

.diary-time-row {
  min-height: 68px;
  border-top: 1px solid #d9e8ee;
}

.diary-time-label {
  background: #eef6f9;
  color: #1f5a6d;
  border-right: 1px solid #d4e5ec;
}

.planner-time-lane-occupied {
  border-left-width: 5px;
}

.planner-time-event-marker {
  min-height: 42px;
  border-radius: 0;
  padding-left: 0.48rem;
}

body.theme-dark #homePlannerSection {
  border-color: #315162;
  background:
    radial-gradient(120% 120% at 0% 0%, #122736 0%, #102237 55%),
    linear-gradient(180deg, #102237 0%, #0f2133 100%);
  box-shadow: none;
}

body.theme-dark #homePlannerSection .table-head label select,
body.theme-dark #homePlannerSection .table-head label input {
  border-color: #35566b;
  background: #112839;
  color: #d7e9f2;
}

body.theme-dark #homePlannerSection .sub.planner-title {
  border-color: #365667;
  background: #163244;
  color: #cde3ed;
}

body.theme-dark .home-planner-daily-controls {
  border-color: #35566b;
  background: #112839;
}

body.theme-dark .home-planner-optimise-bar {
  border-color: #35566b;
  background: #112839;
}

body.theme-dark .home-planner-daily-controls > label,
body.theme-dark .home-users-block {
  border-color: #35566b;
  background: #0f2233;
  color: #cce3ee;
}

body.theme-dark .home-users-block .sub,
body.theme-dark .home-planner-optimise-bar .sub {
  color: #cce3ee;
}

body.theme-dark .home-users-toggle {
  border-color: #41667d;
  background: linear-gradient(180deg, #173246 0%, #112839 100%);
  color: #d4e9f5;
}

body.theme-dark .home-users-toggle.is-active {
  border-color: #79b3d0;
  background: linear-gradient(180deg, #1b3a4e 0%, #153245 100%);
}

body.theme-dark .home-user-checklist {
  border-color: #35566b;
  background: #112839;
}

body.theme-dark .home-user-option {
  border-color: #35566b;
  background: #143145;
  color: #d3e7f2;
}

body.theme-dark #homePlannerSection .table-wrap,
body.theme-dark .diary-time-grid,
body.theme-dark #homeDailyPlanner .home-daily-wrap {
  border-color: #35566b;
  background: #0f2233;
}

body.theme-dark #homePlannerSection #homePlannerTableWrap thead th {
  background: #173548;
  color: #d1e7f2;
  border-bottom-color: #35566b;
}

body.theme-dark #homePlannerSection #weeklyPlannerBody td:first-child,
body.theme-dark .diary-time-label {
  background: #143145;
  color: #cce3ee;
  border-right-color: #35566b;
}

body.theme-dark #homePlannerSection .planner-cell,
body.theme-dark #homePlannerSection .monthly-day-cell,
body.theme-dark .diary-planner-day-cell {
  background: linear-gradient(180deg, #102638 0%, #0f2233 100%);
  border-color: #35566b;
}

body.theme-dark .planner-status-key-item {
  border-color: #35566b;
  background: #143246;
  color: #cce3ee;
}

/* Larger + lighter hover states for planner items */
#homePlannerSection .planner-job,
.planner-job,
.monthly-job-chip,
.planner-time-event-marker {
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

#homePlannerSection .planner-job:hover,
.planner-job:hover,
.monthly-job-chip:hover,
.planner-time-event-marker:hover {
  background: #ffffff;
  border-color: #bcdbe7;
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 8px 18px rgba(24, 84, 108, 0.16);
}

#homePlannerSection .planner-job:hover .planner-job-label,
.planner-job:hover .planner-job-label {
  font-size: 0.86rem;
}

.monthly-job-chip:hover {
  font-size: 0.76rem;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.planner-time-event-marker:hover {
  min-height: 50px;
}

body.theme-dark #homePlannerSection .planner-job:hover,
body.theme-dark .planner-job:hover,
body.theme-dark .monthly-job-chip:hover,
body.theme-dark .planner-time-event-marker:hover {
  background: linear-gradient(180deg, #1c3a4d 0%, #21455a 100%);
  border-color: #4a7187;
  box-shadow: 0 10px 22px rgba(2, 10, 18, 0.55);
}

.asset-image-thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f5f9ff;
}

#jobBackendAssetForm {
  margin: 0 0 0.6rem;
  padding: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7fbff;
}

#jobBackendAssetForm .inline-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

#jobBackendAssetForm #jobBackendAssetSaveBtn {
  grid-column: 1 / -1;
}

#jobBackendAssetForm #jobBackendAssetScanHint {
  grid-column: 1 / -1;
  margin: 0;
}

#jobBackendPropertyAssetsList .job-asset-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem;
}

#jobBackendPropertyAssetsList .job-asset-card .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}

#jobBackendPropertyAssetsList .job-asset-card .table-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

#jobBackendPropertyAssetsList .job-asset-card .asset-image-thumb {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.template-preview-output {
  margin-top: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.8rem;
}

.template-preview-paper {
  border: 1px dashed #b7d2ef;
  border-radius: 8px;
  background: #fff;
  padding: 0.8rem;
  min-height: 120px;
  width: 100%;
  margin: 0 auto;
}

.template-preview-paper.template-preview-paper-portrait {
  max-width: 760px;
}

.template-preview-paper.template-preview-paper-landscape {
  max-width: 1100px;
}

.template-preview-paper h4 {
  margin: 0 0 0.55rem;
  color: #164887;
}

.template-dnd-layout {
  grid-column: span 2;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 280px minmax(0, 1fr);
}

.template-dnd-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.7rem;
}

.template-dnd-panel h4 {
  margin: 0 0 0.5rem;
  color: #164887;
}

.template-palette-search {
  width: 100%;
  margin: 0.15rem 0 0.55rem;
  border: 1px solid #c7dbf2;
  border-radius: 10px;
  background: #ffffff;
  color: #163e6c;
}

#templateBuilderSection .template-palette-search {
  border-color: #c7dbf2;
  background: #ffffff;
  color: #163e6c;
}

.template-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.template-tool-btn {
  border: 1px solid #a7c6ea;
  background: #eef6ff;
  color: #1b4d91;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.template-tool-btn:hover {
  background: #e2f0ff;
  border-color: #91b8e5;
}

.template-palette {
  display: grid;
  gap: 0.62rem;
}

.template-palette-section {
  border: 1px solid #d7e7f7;
  border-radius: 10px;
  background: #f8fbff;
  padding: 0.5rem;
}

#templateBuilderSection .template-palette-section {
  border-color: #d7e7f7;
  background: #f8fbff;
}

.template-palette-section-title {
  margin: 0 0 0.42rem;
  color: #1b4f85;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.template-palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.template-palette-empty {
  margin: 0;
}

.template-palette-chip {
  border: 1px solid #c7dcf3;
  border-radius: 999px;
  background: #ffffff;
  color: #1f4f83;
  padding: 0.3rem 0.58rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: grab;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

#templateBuilderSection .template-palette-chip,
#templateBuilderSection .template-palette-chip--block {
  border: 1px solid #c7dcf3 !important;
  background: #ffffff !important;
  color: #1f4f83 !important;
}

.template-palette-chip.token {
  background: #f3f9ff;
  border-color: #bddaf3;
  color: #245a87;
}

#templateBuilderSection .template-palette-chip.token,
#templateBuilderSection .template-palette-chip--token {
  background: #f3f9ff !important;
  border-color: #bddaf3 !important;
  color: #245a87 !important;
}

.template-palette-chip:hover {
  background: #eaf4ff;
  border-color: #a7c9eb;
  transform: translateY(-1px);
}

#templateBuilderSection .template-palette-chip:hover {
  background: #eaf4ff !important;
  border-color: #a7c9eb !important;
}

.template-builder-canvas {
  min-height: 260px;
  border: 1px dashed #9dc2ef;
  border-radius: 10px;
  background: #fff;
  padding: 0.7rem;
  overflow: auto;
  color: var(--template-text-color, #1f2937);
  font-family: var(--template-font-family, Arial, sans-serif);
  font-size: var(--template-font-size, 14px);
  line-height: var(--template-line-height, 1.45);
}

.template-builder-canvas:focus {
  outline: 2px solid #8fb8ea;
  outline-offset: 2px;
}

.form-maker-layout {
  margin-top: 1rem;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.form-maker-subhead {
  margin: 0 0 0.45rem;
}

.form-maker-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 0.35rem;
  border: 1px solid #bed5f1;
  border-radius: 14px;
  padding: 0.72rem 0.9rem;
  background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 72%, #eaf3ff 100%);
}

.form-maker-hero .sub {
  margin: 0;
  color: #2a4d78;
}

.form-maker-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form-maker-tabbar {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.3rem;
  border: 1px solid #d8e7f7;
  border-radius: 12px;
  background: #f7fbff;
}

.form-maker-tab-panel {
  margin-top: 0.82rem;
}

.form-maker-tab-btn {
  border: 1px solid #c7dcf5;
  background: #edf5ff;
  color: #20528a;
  border-radius: 999px;
  padding: 0.42rem 0.86rem;
  font-weight: 700;
  line-height: 1;
}

.form-maker-tab-btn.is-active {
  border-color: #0f4d94;
  background: #0f4d94;
  color: #ffffff;
}

.form-maker-workflow {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.55rem;
  border: 1px solid #d9e8f8;
  border-radius: 12px;
  background: #f8fbff;
}

.form-maker-workflow-step {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #d9e8f8;
  border-radius: 12px;
  background: #ffffff;
  color: #204a78;
  padding: 0.5rem 0.6rem;
  font-size: 0.83rem;
  font-weight: 700;
}

.form-maker-step-no {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #0d4f95;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex: 0 0 auto;
}

.form-maker-section-card {
  border: 1px solid #d7e6f7;
  border-radius: 14px;
  background: #ffffff;
  padding: 0.76rem 0.82rem;
  box-shadow: 0 6px 18px rgba(24, 54, 92, 0.06);
}

.form-maker-library-card {
  margin-top: 0.9rem;
  border-style: dashed;
}

.form-maker-collapsible {
  padding-top: 0;
}

.form-maker-collapsible > summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0.72rem 0.78rem;
  border-radius: 11px;
  border: 1px solid #d6e6f7;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  color: #15477f;
  font-weight: 700;
}

.form-maker-collapsible > summary::-webkit-details-marker {
  display: none;
}

.form-maker-collapsible[open] > summary {
  margin-bottom: 0.72rem;
}

.form-maker-field-preset-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  padding: 0.55rem;
  border: 1px solid #d3e3f5;
  border-radius: 10px;
  background: #f7fbff;
}

.form-maker-field-preset-strip > span {
  font-weight: 700;
  color: #244b78;
}

.form-maker-panel {
  border: 1px solid #d8e8f9;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
  padding: 0.82rem;
}

.form-maker-editor-panel {
  display: contents;
}

#formMakerTemplateAnchor {
  grid-column: 1 / span 7;
}

.form-maker-editor-panel .form-maker-section-card {
  background: #ffffff;
  border-color: #d6e5f6;
}

.form-maker-editor-panel .table-head h4 {
  margin: 0;
}

.form-maker-preview-panel {
  position: sticky;
  top: 86px;
  align-self: start;
  grid-column: 8 / -1;
  display: grid;
  gap: 0.8rem;
}

.form-maker-preview-panel-standalone {
  position: static;
  top: auto;
  align-self: stretch;
  grid-column: 1 / -1;
}

.form-maker-preview-panel-standalone #formMakerPreviewAnchor,
.form-maker-preview-panel-standalone #formMakerTemplatesAnchor {
  min-height: calc(100vh - 275px);
}

.form-maker-preview-panel-standalone #formMakerPreview {
  min-height: calc(100vh - 360px);
}

#formMakerFieldsAnchor {
  grid-column: 1 / -1;
}

#formBuilderSection.form-maker-preview-tab-active .form-maker-workflow,
#formBuilderSection.form-maker-preview-tab-active #formMakerLibraryAnchor,
#formBuilderSection.form-maker-preview-tab-active #formMakerTemplateAnchor,
#formBuilderSection.form-maker-preview-tab-active #formMakerFieldsAnchor,
#formBuilderSection.form-maker-preview-tab-active #formMakerTemplatesAnchor {
  display: none !important;
}

#formBuilderSection.form-maker-preview-tab-active .form-maker-hero-actions {
  display: none;
}

#formBuilderSection.form-maker-templates-tab-active .form-maker-workflow,
#formBuilderSection.form-maker-templates-tab-active #formMakerLibraryAnchor,
#formBuilderSection.form-maker-templates-tab-active #formMakerTemplateAnchor,
#formBuilderSection.form-maker-templates-tab-active #formMakerFieldsAnchor,
#formBuilderSection.form-maker-templates-tab-active #formMakerPreviewAnchor {
  display: none !important;
}

#formBuilderSection.form-maker-templates-tab-active .form-maker-hero-actions {
  display: none;
}

#formBuilderSection.form-maker-templates-tab-active .form-maker-layout {
  grid-template-columns: 1fr;
}

#formBuilderSection.form-maker-templates-tab-active .form-maker-preview-panel {
  position: static;
  top: auto;
  grid-column: 1 / -1;
}

#formBuilderSection.form-maker-templates-tab-active #formMakerTemplatesAnchor {
  display: block !important;
  min-height: calc(100vh - 265px);
}

#formBuilderSection.form-maker-templates-tab-active #formMakerTemplatesAnchor .table-wrap {
  max-height: none;
  min-height: calc(100vh - 345px);
}

#formBuilderSection.form-maker-preview-tab-active .form-maker-layout {
  grid-template-columns: 1fr;
}

#formBuilderSection.form-maker-preview-tab-active .form-maker-preview-panel {
  position: static;
  top: auto;
  grid-column: 1 / -1;
}

#formBuilderSection.form-maker-preview-tab-active #formMakerPreviewAnchor {
  min-height: calc(100vh - 265px);
}

#formBuilderSection.form-maker-preview-tab-active #formMakerPreview {
  min-height: calc(100vh - 335px);
}

#formBuilderSection.form-maker-preview-tab-active .form-maker-preview-card .template-preview-paper {
  width: min(100%, 1600px);
}

.form-maker-preview-card .template-preview-output {
  min-height: 72vh;
  max-height: none;
  overflow: auto;
  border: 1px solid #d7e6f7;
  border-radius: 12px;
  background: #fbfdff;
  padding: 0.65rem;
}

.form-maker-preview-card .template-preview-paper {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.form-maker-preview-card .template-preview-paper.template-preview-paper-landscape {
  min-height: min(860px, 92vh);
}

.form-maker-preview-card .template-preview-paper.template-preview-paper-portrait {
  width: min(100%, 980px);
  min-height: min(1180px, 92vh);
}

/* Desktop preview stays full-page; phone-size remains only in mobile preview mode */
#formMakerPreview .template-preview-paper:not(.form-maker-preview-mobile-paper),
#formMakerPreview .template-preview-paper.template-preview-paper-landscape:not(.form-maker-preview-mobile-paper),
#formMakerPreview .template-preview-paper.template-preview-paper-portrait:not(.form-maker-preview-mobile-paper) {
  width: min(100%, 1480px) !important;
  min-height: min(1180px, 92vh) !important;
  height: auto !important;
  max-width: none !important;
}

.form-maker-preview-shell.form-maker-preview-mobile-paper {
  width: 80mm !important;
  height: 160mm !important;
  min-height: 160mm !important;
  max-height: 160mm !important;
  margin: 0 auto;
  border-radius: 24px;
  border: 7px solid #0f294b;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  box-shadow: 0 18px 34px rgba(10, 31, 58, 0.2);
  overflow: auto;
}

.form-maker-preview-shell.form-maker-preview-mobile-paper .form-maker-preview-grid {
  grid-template-columns: 1fr;
}

.form-maker-preview-shell.form-maker-preview-mobile-paper .template-preview-paper,
.form-maker-preview-shell.form-maker-preview-mobile-paper .template-preview-paper.template-preview-paper-landscape,
.form-maker-preview-shell.form-maker-preview-mobile-paper .template-preview-paper.template-preview-paper-portrait {
  width: 100%;
  min-height: auto;
}

.form-maker-preview-shell.form-maker-preview-mobile-paper .form-maker-preview-field {
  grid-column: 1 / -1 !important;
  border-radius: 12px;
  padding: 0.8rem;
}

.form-maker-preview-shell.form-maker-preview-mobile-paper input,
.form-maker-preview-shell.form-maker-preview-mobile-paper textarea,
.form-maker-preview-shell.form-maker-preview-mobile-paper select {
  min-height: 40px;
  font-size: 14px;
}

#formMakerTemplatesAnchor .table-wrap {
  max-height: 280px;
  overflow: auto;
}

.form-maker-logo-form {
  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.1fr) auto;
  align-items: end;
}

.form-maker-logo-form > button {
  align-self: end;
  min-height: 38px;
}

.settings-shared-logo-library {
  margin-top: 0.7rem;
}

.form-maker-template-backup-bar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  gap: 0.6rem;
  align-items: end;
  margin: 0.25rem 0 0.65rem;
}

@media (max-width: 900px) {
  .form-maker-template-backup-bar {
    grid-template-columns: 1fr;
  }
}

#formBuilderSection .form-maker-template-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.8rem;
}

.form-maker-save-status {
  margin: -0.2rem 0 0.1rem;
  font-weight: 700;
}

.form-maker-save-status.is-muted {
  color: #64748b;
}

.form-maker-save-status.is-success {
  color: #0f766e;
}

.form-maker-save-status.is-error {
  color: #b91c1c;
}

.form-maker-span-2 {
  grid-column: 1 / -1;
}

.form-maker-template-meta {
  margin-top: 0.12rem;
  border: 1px solid #dbe8f7;
  border-radius: 12px;
  background: #f9fcff;
  padding: 0.72rem;
}

.form-maker-accordion {
  padding-top: 0;
}

.form-maker-accordion > summary {
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 0.72rem 0.72rem;
  border-radius: 10px;
  border: 1px solid #d4e3f5;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  color: #15477f;
  font-weight: 700;
}

.form-maker-accordion > summary::-webkit-details-marker {
  display: none;
}

.form-maker-accordion[open] > summary {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 0.65rem;
}

.form-maker-template-meta > h4 {
  margin: 0;
}

.form-maker-template-meta-grid {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#formBuilderSection .form-maker-template-meta-grid label.form-maker-span-2 {
  grid-column: 1 / -1;
}

#formBuilderSection .form-maker-template-meta-grid textarea {
  min-height: 72px;
}

.form-maker-template-meta-grid select[multiple] {
  min-height: 94px;
}

.form-maker-template-meta-grid input[type="color"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #bcd2ea;
  border-radius: 8px;
  background: #fff;
  padding: 2px;
}

.form-maker-template-basics-grid .form-maker-toggle-label {
  align-self: end;
}

.form-maker-design-split {
  margin-top: 0.6rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.form-maker-design-group {
  margin: 0;
  border: 1px solid #d4e3f5;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem;
}

.form-maker-design-group legend {
  padding: 0 0.35rem;
  font-weight: 700;
  color: #15477f;
}

.form-maker-design-group.is-disabled {
  opacity: 0.55;
}

.form-maker-design-actions {
  margin-top: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.form-maker-visibility-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-maker-visibility-grid .check-inline {
  justify-content: space-between;
  gap: 0.5rem;
}

.form-maker-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.1rem;
}

.form-maker-field-advanced {
  border: 1px dashed #c8ddf3;
  border-radius: 11px;
  background: #f7fbff;
  padding: 0.5rem 0.55rem 0.62rem;
}

.form-maker-field-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.42rem 0.5rem;
  border: 1px solid #d6e7f8;
  border-radius: 9px;
  background: #ffffff;
  font-weight: 700;
  color: #184a7f;
}

.form-maker-field-advanced > summary::-webkit-details-marker {
  display: none;
}

.form-maker-field-advanced[open] > summary {
  margin-bottom: 0.62rem;
}

#formBuilderSection .form-maker-field-advanced {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#formBuilderSection .form-maker-field-advanced > summary {
  grid-column: 1 / -1;
}

#formBuilderSection .form-maker-field-advanced label.form-maker-span-2,
#formBuilderSection .form-maker-field-advanced label.form-maker-span-3 {
  grid-column: 1 / -1;
}

.form-maker-inline-actions {
  position: relative;
}

.form-maker-inline-actions > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid #cfdef2;
  border-radius: 9px;
  background: #f5faff;
  color: #245483;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.48rem 0.72rem;
}

.form-maker-inline-actions > summary::-webkit-details-marker {
  display: none;
}

.form-maker-inline-actions[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-maker-inline-actions button {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-maker-preview-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.form-maker-preview-doc-header,
.form-maker-preview-doc-footer {
  margin-top: 0.7rem;
  border: 1px solid #d4e3f4;
  border-radius: 10px;
  display: grid;
  gap: 0.35rem;
}

.form-maker-preview-doc-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.form-maker-preview-doc-text {
  margin: 0;
  line-height: 1.45;
  font-size: 0.86rem;
}

.template-preview-paper .pdf-logo-strip,
.form-maker-hf-preview-card .pdf-logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.template-preview-paper .pdf-logo-strip img,
.form-maker-hf-preview-card .pdf-logo-strip img {
  max-width: 210px;
  width: auto;
  object-fit: contain;
  border: 1px solid #d6e4f4;
  border-radius: 8px;
  background: #ffffff;
  padding: 3px 5px;
}

.form-maker-preview-field {
  display: grid;
  gap: 0.3rem;
  grid-column: span 12;
}

.form-maker-preview-field.field-width-quarter { grid-column: span 3; }
.form-maker-preview-field.field-width-one-third { grid-column: span 4; }
.form-maker-preview-field.field-width-half { grid-column: span 6; }
.form-maker-preview-field.field-width-two-third { grid-column: span 8; }
.form-maker-preview-field.field-width-three-quarter { grid-column: span 9; }
.form-maker-preview-field.field-width-full { grid-column: span 12; }

.form-maker-signature-box {
  min-height: 52px;
  border: 1px dashed #9dc2ef;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f7ea6;
  font-size: 0.82rem;
}

.form-maker-live-header-footer .sub {
  margin-top: 0.25rem;
}

.form-maker-header-footer-live-preview {
  margin-top: 0.6rem;
}

.form-maker-hf-preview-card {
  border: 1px solid #d2e4f6;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.form-maker-hf-preview-header,
.form-maker-hf-preview-footer {
  border-bottom: 1px solid #d2e4f6;
  display: grid;
  gap: 0.3rem;
}

.form-maker-hf-preview-footer {
  border-top: 1px solid #d2e4f6;
  border-bottom: 0;
}

.form-maker-hf-preview-disabled {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px dashed #d0dfef;
  background: #f8fbff;
  color: #607b9e;
  font-weight: 600;
}

.form-maker-hf-preview-body {
  padding: 0.8rem;
  color: #607b9e;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.form-maker-hf-preview-text {
  display: grid;
  gap: 0.2rem;
}

.form-maker-hf-preview-text small {
  opacity: 0.9;
}

.form-maker-hf-preview-logos {
  font-weight: 600;
  opacity: 0.95;
}

.form-maker-hf-preview-header.align-left,
.form-maker-hf-preview-footer.align-left {
  text-align: left;
}

.form-maker-hf-preview-header.align-center,
.form-maker-hf-preview-footer.align-center {
  text-align: center;
}

.form-maker-hf-preview-header.align-right,
.form-maker-hf-preview-footer.align-right {
  text-align: right;
}

#formBuilderSection .form-maker-field-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.82rem;
}

#formBuilderSection .form-maker-field-form label.invoice-span-2 {
  grid-column: 1 / -1;
}

#formBuilderSection .form-maker-field-form label.form-maker-span-2 {
  grid-column: 1 / -1;
}

#formBuilderSection .form-maker-field-form label.form-maker-span-3,
#formBuilderSection .form-maker-field-form .form-maker-span-3 {
  grid-column: 1 / -1;
}

#formBuilderSection .form-maker-editor-panel .table-wrap {
  max-height: 300px;
  overflow: auto;
}

#formBuilderSection .form-maker-preview-panel .table-head {
  margin-bottom: 0.45rem;
}

body.form-maker-preview-fullscreen {
  overflow: hidden;
}

body.form-maker-preview-fullscreen .form-maker-layout {
  overflow: visible;
}

body.form-maker-preview-fullscreen .form-maker-preview-panel {
  position: fixed;
  inset: 72px 16px 14px 16px;
  z-index: 1200;
  border: 1px solid #c6dbf4;
  border-radius: 14px;
  background: #f6fbff;
  padding: 0.9rem;
  box-shadow: 0 18px 54px rgba(14, 47, 90, 0.28);
}

body.form-maker-preview-fullscreen #formMakerTemplatesAnchor {
  display: none;
}

body.form-maker-preview-fullscreen #formMakerPreviewAnchor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.form-maker-preview-fullscreen #formMakerPreview {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body.form-maker-preview-fullscreen .form-maker-preview-card .template-preview-paper {
  width: min(100%, 1480px);
  min-height: calc(100vh - 220px);
}

@media (max-width: 1500px) {
  #formMakerTemplateAnchor,
  .form-maker-preview-panel,
  #formMakerFieldsAnchor {
    grid-column: 1 / -1;
  }

  .form-maker-design-split {
    grid-template-columns: 1fr;
  }

  .form-maker-visibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-maker-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #formBuilderSection .form-maker-template-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-maker-template-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #formBuilderSection .form-maker-field-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .form-maker-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-maker-layout {
    grid-template-columns: 1fr;
  }

  .form-maker-preview-panel {
    position: static;
  }

  #formBuilderSection .form-maker-template-form,
  #formBuilderSection .form-maker-field-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-maker-template-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-maker-preview-card .template-preview-output {
    max-height: none;
    min-height: 56vh;
  }

  #formBuilderSection.form-maker-preview-tab-active #formMakerPreviewAnchor,
  #formBuilderSection.form-maker-preview-tab-active #formMakerPreview {
    min-height: 62vh;
  }

  #formBuilderSection.form-maker-templates-tab-active #formMakerTemplatesAnchor,
  #formBuilderSection.form-maker-templates-tab-active #formMakerTemplatesAnchor .table-wrap {
    min-height: 62vh;
  }
}

@media (max-width: 760px) {
  .form-maker-workflow {
    grid-template-columns: 1fr;
  }

  #formBuilderSection .form-maker-template-form,
  #formBuilderSection .form-maker-field-form,
  .form-maker-template-meta-grid {
    grid-template-columns: 1fr;
  }

  #formBuilderSection .form-maker-field-advanced {
    grid-template-columns: 1fr;
  }

  #formBuilderSection .form-maker-field-form label.invoice-span-2,
  #formBuilderSection .form-maker-field-form label.form-maker-span-2 {
    grid-column: 1 / -1;
  }
}

.job-title-form-preview {
  margin-top: 0.6rem;
}

.job-title-form-preview .template-preview-paper {
  border: 1px solid #d7e8fb;
}

.role-select {
  min-width: 120px;
}

.empty {
  color: var(--muted);
}

@media (max-width: 900px) {
  .company-logo {
    height: 48px;
    max-width: 150px;
  }

  .stats-grid,
  .layout,
  .grid-form {
    grid-template-columns: 1fr;
  }

  .topbar,
  .table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .form-maker-layout {
    grid-template-columns: 1fr;
  }

  .form-maker-template-meta-grid {
    grid-template-columns: 1fr;
  }

  .form-maker-preview-grid {
    grid-template-columns: 1fr;
  }

  .form-maker-preview-field {
    grid-column: span 1 !important;
  }

  .topbar {
    min-height: auto;
    padding: 0;
  }

  .diary-page {
    grid-template-columns: 1fr;
  }

  .messages-layout {
    grid-template-columns: 1fr;
  }

  .message-thread-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-thread-overview-card:last-child {
    grid-column: 1 / -1;
  }

  .message-quick-start-chip {
    min-width: 160px;
  }

  #emailPage .email-webmail-layout {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
  }

  #emailPage .email-compose-form {
    grid-template-columns: 1fr;
  }

  #emailPage .email-thread-list {
    max-height: 40vh;
  }

  #emailPage .email-webmail-sidebar,
  #emailPage .email-webmail-list-panel,
  #emailPage .email-webmail-preview-panel {
    min-height: auto;
    overflow: visible;
  }

  #emailPage .email-log-filter {
    grid-template-columns: 1fr;
  }

  #messagesPage .message-compose-form {
    grid-template-columns: 1fr;
  }

  #messagesPage .message-compose-form .message-body-label {
    grid-column: auto;
  }

  #messagesPage .message-compose-foot {
    grid-column: auto;
  }

  #quotePage .quote-wizard-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #quotePage .quote-wizard-controls {
    flex-wrap: wrap;
  }

  #quotePage #quoteWizardStepLabel {
    order: 3;
    width: 100%;
    text-align: left;
  }

  .message-conversation {
    max-height: 48vh;
  }

  .diary-form {
    grid-template-columns: 1fr;
  }

  .diary-form label:last-of-type {
    grid-column: auto;
  }

  .diary-board {
    grid-template-columns: 1fr;
  }

  .report-toggle-grid {
    grid-template-columns: 1fr;
  }

  .report-bar-row {
    grid-template-columns: 1fr;
  }

  .diary-planner-day-cell {
    min-height: 110px;
  }

  #homePlannerSection .table-head {
    grid-template-columns: 1fr;
  }

  .home-planner-daily-controls {
    grid-template-columns: 1fr;
  }

  .home-user-checklist {
    grid-template-columns: 1fr;
  }

  #customerQuickSearchForm {
    grid-template-columns: 1fr;
  }

  #customersPage table {
    min-width: 760px;
  }

  #customerProfilePanel {
    grid-template-columns: 1fr;
  }

  #invoicePage .invoice-layout {
    grid-template-columns: 1fr;
  }

  #invoicePage .invoice-payment-panel {
    position: static;
    top: auto;
  }

  #quotePage .invoice-layout {
    grid-template-columns: 1fr;
  }

  #quotePage .quote-preview-panel {
    position: static;
    top: auto;
  }

  #quotePage .quote-stagebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #quotePage .invoice-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #quotePage .quote-form-block-grid-context,
  #quotePage .quote-form-block-grid-commercial {
    grid-template-columns: 1fr;
  }

  #quotePage .quote-field-span-2 {
    grid-column: auto;
  }

  #quotePage .quote-option-matrix-cards {
    grid-template-columns: 1fr;
  }

  #quotePage .invoice-span-2 {
    grid-column: 1 / -1;
  }

  #settingsPanel .settings-topbar {
    grid-template-columns: 1fr;
    position: static;
    top: auto;
  }

  #settingsPanel .settings-quick-nav {
    padding: 0.5rem;
  }

  #settingsPanel .settings-search-form {
    grid-template-columns: 1fr;
  }

  #settingsPanel .settings-jump-link {
    flex: 1 1 calc(50% - 0.45rem);
  }

  #invoicePage .invoice-breakdown {
    grid-template-columns: 1fr;
  }

  #invoicePage .invoice-inline-input {
    grid-template-columns: 1fr;
  }

  #invoicePage .invoice-form-grid,
  #invoicePage .invoice-payment-form {
    grid-template-columns: 1fr;
  }

  .job-backend-form {
    grid-template-columns: 1fr;
  }

  .job-span-1,
  .job-span-2,
  .job-span-3 {
    grid-column: 1 / -1;
  }

  .job-backend-actions {
    justify-content: stretch;
  }

  .job-backend-actions button {
    width: 100%;
  }

  .job-planner-event-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .job-engineer-forms-grid {
    grid-template-columns: 1fr;
  }

  .job-engineer-field {
    grid-column: 1 / -1 !important;
  }

  #homePlannerSection {
    padding: 0.75rem;
  }

  #homePlannerSection .table-head label {
    min-width: 0;
  }

  #homePlannerSection #weeklyPlannerBody td:first-child {
    min-width: 110px;
  }

  #homeDailyPlanner .home-daily-wrap {
    max-height: 68vh;
  }
}

/* Pass 3: Density, Typography, Motion */
:root {
  --density-form-y: 0.58rem;
  --density-form-x: 0.72rem;
  --density-cell-y: 0.5rem;
  --density-cell-x: 0.48rem;
  --motion-fast: 140ms;
  --motion-med: 220ms;
  --motion-slow: 320ms;
}

body {
  font-feature-settings: "ss01" 1, "cv02" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input,
select,
textarea {
  padding: var(--density-form-y) var(--density-form-x);
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

button {
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    filter var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

th,
td {
  padding: var(--density-cell-y) var(--density-cell-x);
}

th {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

td {
  font-size: 0.865rem;
  line-height: 1.42;
}

.panel,
.table-wrap,
.stat-card,
#invoicePage .invoice-composer,
#invoicePage .invoice-payment-panel,
#invoicePage .invoice-table-panel,
#quotePage .invoice-composer,
#quotePage .quote-preview-panel,
#homePlannerSection {
  transition:
    box-shadow var(--motion-med) ease,
    border-color var(--motion-med) ease,
    background-color var(--motion-med) ease,
    transform var(--motion-med) ease;
}

.panel:hover,
.stat-card:hover {
  transform: translateY(-1px);
}

.table-actions-dropdown,
#invoicePage .table-actions-dropdown,
#invoiceAllPage .table-actions-dropdown,
#quotePage .table-actions-dropdown {
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
}

#invoicePage .table-actions-trigger,
#invoiceAllPage .table-actions-trigger,
#quotePage .table-actions-trigger {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

#invoicePage .table-actions-trigger[aria-expanded="true"],
#invoiceAllPage .table-actions-trigger[aria-expanded="true"],
#quotePage .table-actions-trigger[aria-expanded="true"] {
  transform: translateY(-1px);
}

#invoicePage .table-actions-view,
#invoiceAllPage .table-actions-view,
#quotePage .table-actions-view {
  animation: menu-in var(--motion-fast) ease;
}

details.settings-subgroup > summary,
#userManagementPanel .user-management-collapse > summary,
#customersPage details.customer-collapse > summary {
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

details.settings-subgroup > summary:hover,
#userManagementPanel .user-management-collapse > summary:hover,
#customersPage details.customer-collapse > summary:hover {
  background: color-mix(in srgb, #e8f2ff 82%, var(--panel) 18%);
}

#quotePage .quote-stage-chip {
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

#quotePage .quote-stage-chip:hover {
  transform: translateY(-1px);
}

.planner-job,
.planner-time-event-marker,
.monthly-job-chip {
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.planner-job:hover,
.planner-time-event-marker:hover,
.monthly-job-chip:hover {
  transform: translateY(-1px);
}

.message-thread-item,
.message-bubble {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.message-thread-item:hover {
  transform: translateY(-1px);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  :root {
    --density-form-y: 0.56rem;
    --density-form-x: 0.66rem;
    --density-cell-y: 0.44rem;
    --density-cell-x: 0.4rem;
  }

  th {
    font-size: 0.72rem;
  }

  td {
    font-size: 0.84rem;
  }
}

/* Header logo in-flow (not floating) */
body:not(.mobile-demo-mode) .topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 90px;
  padding: 0.84rem 1rem 0.84rem 0.88rem;
  margin-bottom: 1rem;
  border-radius: 24px;
  background:
    radial-gradient(125% 145% at 0% 0%, rgba(94, 166, 245, 0.18) 0%, rgba(94, 166, 245, 0) 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 246, 255, 0.94) 100%);
  border: 1px solid #bfd4eb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 40px rgba(24, 54, 92, 0.12);
}

body:not(.mobile-demo-mode) .topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(76, 132, 206, 0) 0%, rgba(76, 132, 206, 0.22) 20%, rgba(76, 132, 206, 0.22) 80%, rgba(76, 132, 206, 0) 100%);
}

.back-icon-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 9px;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body:not(.mobile-demo-mode) .company-logo-wrap {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.34rem;
  margin: 0;
  border: 1px solid rgba(75, 129, 196, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 24px rgba(24, 54, 92, 0.1);
}

body:not(.mobile-demo-mode) .company-logo {
  height: 56px;
  max-width: 220px;
}

.mobile-page-top-logo {
  display: none;
}

body:not(.mobile-demo-mode) .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  padding: 0.28rem 0.3rem 0.28rem 0.5rem;
  border: 1px solid #cbdcf0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(24, 54, 92, 0.08);
}

body:not(.mobile-demo-mode) .topbar-user-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

body:not(.mobile-demo-mode) .topbar-user-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(218, 235, 255, 0.78);
  color: #3d6596;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:not(.mobile-demo-mode) .topbar-user-name {
  display: inline-block;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #153d70;
  font-size: 0.88rem;
  line-height: 1.1;
}

body:not(.mobile-demo-mode) .topbar-user .role-pill {
  margin-left: 0;
  padding: 0.18rem 0.42rem;
  font-size: 0.64rem;
}

body:not(.mobile-demo-mode) .topbar-profile-btn {
  min-height: 34px;
  padding: 0.36rem 0.62rem;
  margin-top: 0;
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 700;
}

body:not(.mobile-demo-mode) .topbar-account-slot,
body:not(.mobile-demo-mode) .home-header-account-slot,
body:not(.mobile-demo-mode) .page-header-account-slot {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

body:not(.mobile-demo-mode) .topbar-actions {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0.44rem;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: stretch;
  padding: 0.36rem;
  border: 1px solid #cbdcf0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(24, 54, 92, 0.08);
}

body:not(.mobile-demo-mode) .topbar-account-slot {
  flex: 0 0 auto;
  margin-left: 0.15rem;
}

body:not(.mobile-demo-mode) .home-header-account-slot,
body:not(.mobile-demo-mode) .page-header-account-slot {
  margin-left: auto;
}

body:not(.mobile-demo-mode) .page-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body:not(.mobile-demo-mode) .topbar-nav-btn,
body:not(.mobile-demo-mode) .topbar-utility-btn {
  min-height: 40px;
  padding: 0.48rem 0.8rem;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  transform: none;
}

body:not(.mobile-demo-mode) .topbar-nav-btn {
  flex: 1 1 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  background: rgba(245, 249, 255, 0.94);
}

body:not(.mobile-demo-mode) .topbar-nav-btn:hover,
body:not(.mobile-demo-mode) .topbar-utility-btn:hover,
body:not(.mobile-demo-mode) .topbar-profile-btn:hover {
  transform: translateY(-1px);
  border-color: #a8c6e6;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 22px rgba(24, 54, 92, 0.08);
  filter: none;
}

body:not(.mobile-demo-mode) .topbar-nav-btn.active,
body:not(.mobile-demo-mode) .topbar-nav-btn[aria-current="page"],
body:not(.mobile-demo-mode) .topbar-profile-btn.active,
body:not(.mobile-demo-mode) .topbar-profile-btn[aria-current="page"] {
  border-color: #7eaee1;
  background: linear-gradient(135deg, #2784d8 0%, #235fc2 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(37, 99, 194, 0.24);
}

body:not(.mobile-demo-mode) .topbar-nav-btn.active .nav-count,
body:not(.mobile-demo-mode) .topbar-nav-btn[aria-current="page"] .nav-count {
  background: #d62828;
  color: #ffffff;
}

body:not(.mobile-demo-mode) #mobileDemoToggleBtn.topbar-utility-btn {
  margin-left: auto;
}

body:not(.mobile-demo-mode) .topbar-utility-btn {
  padding-inline: 0.72rem;
  border-style: dashed;
  background: rgba(247, 250, 255, 0.92);
}

body:not(.mobile-demo-mode) #logoutBtn.topbar-utility-btn {
  border-style: solid;
}

body:not(.mobile-demo-mode) .topbar .nav-count {
  min-width: 19px;
  height: 19px;
  margin-left: 0.32rem;
  font-size: 0.68rem;
}

@media (max-width: 900px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .company-logo-wrap {
    justify-self: start;
  }
}

@media (max-width: 1480px) {
  body:not(.mobile-demo-mode) .topbar {
    grid-template-columns: 1fr;
  }
}

/* Mobile demo frame preview */
body.mobile-demo-mode {
  --bg: #eef4ff;
  --panel: #ffffff;
  --text: #0f2340;
  --muted: #56729a;
  --accent: #2463eb;
  --accent-2: #1d4ed8;
  --border: #cddaf3;
  --shadow: 0 16px 34px rgba(29, 78, 216, 0.16);
  --mobile-bottom-nav-space: calc(4.9rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.75rem;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

body.mobile-demo-mode .app-shell {
  width: min(100%, 430px);
  max-width: 430px;
  height: calc(100dvh - 1.5rem);
  min-height: 700px;
  padding: 0.5rem 0.5rem calc(var(--mobile-bottom-nav-space) + 0.45rem);
  border-radius: 22px;
  border: 1px solid #c7d6f3;
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, #f4f8ff 0%, #edf3ff 100%);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

body.mobile-demo-mode .topbar {
  position: sticky;
  top: 0.15rem;
  z-index: 30;
  margin-bottom: 0.4rem;
  min-height: 58px;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border: 1px solid #cfddf5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

body.mobile-demo-mode .back-icon-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 8px;
  font-size: 0.96rem;
  padding: 0;
}

body.mobile-demo-mode .company-logo-wrap {
  display: none !important;
}

body.mobile-demo-mode .company-logo {
  height: 36px;
  max-width: 112px;
}

body.mobile-demo-mode .topbar-user {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  align-items: center;
}

body.mobile-demo-mode .topbar-user-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  font-size: 0.72rem;
  line-height: 1.15;
  white-space: nowrap;
  color: #1b3f74;
}

body.mobile-demo-mode .topbar-user-kicker {
  display: none;
}

body.mobile-demo-mode .topbar-user-line strong {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-demo-mode #profilePageBtn {
  margin-top: 0;
  min-height: 28px;
  font-size: 0.62rem;
  padding: 0.16rem 0.32rem;
  justify-self: start;
}

body.mobile-demo-mode #profilePage {
  margin: 0;
  height: calc(100% - 108px);
  overflow: auto;
  padding: 0.5rem 0.5rem calc(var(--mobile-bottom-nav-space) + 0.35rem);
  display: grid;
  gap: 0.35rem;
}

body.mobile-demo-mode #profilePage .panel {
  padding: 0.44rem;
}

body.mobile-demo-mode #profilePage .table-head h2,
body.mobile-demo-mode #profilePage .table-head h3 {
  font-size: 0.78rem;
}

body.mobile-demo-mode #profilePage .report-bar-row {
  grid-template-columns: 1fr;
  gap: 0.14rem;
}

body.mobile-demo-mode .profile-account-form {
  grid-template-columns: 1fr;
}

body.mobile-demo-mode .profile-account-permissions,
body.mobile-demo-mode .profile-account-status {
  padding: 0.55rem 0.6rem;
}

body.mobile-demo-mode .profile-account-actions {
  gap: 0.35rem;
}

body.mobile-demo-mode #profilePage .report-bar-label,
body.mobile-demo-mode #profilePage .report-bar-value {
  font-size: 0.64rem;
}

body.mobile-demo-mode #profilePage .report-bar-value {
  text-align: left;
}

body.mobile-demo-mode .topbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  align-items: center;
  gap: 0.26rem;
}

body.mobile-demo-mode .topbar-actions .topbar-user {
  grid-column: 1 / -1;
  justify-content: space-between;
  width: 100%;
}

body.mobile-demo-mode .topbar-actions button {
  min-height: 32px;
  min-width: 62px;
  padding: 0.3rem 0.45rem;
  font-size: 0.68rem;
  border-radius: 8px;
  line-height: 1;
  font-weight: 700;
}

body.mobile-demo-mode .topbar-actions #homePageBtn,
body.mobile-demo-mode .topbar-actions #customersPageBtn,
body.mobile-demo-mode .topbar-actions #jobBackendPageBtn,
body.mobile-demo-mode .topbar-actions #stockPageBtn,
body.mobile-demo-mode .topbar-actions #quotePageBtn,
body.mobile-demo-mode .topbar-actions #invoicePageBtn,
body.mobile-demo-mode .topbar-actions #emailPageBtn,
body.mobile-demo-mode .topbar-actions #filesPageBtn,
body.mobile-demo-mode .topbar-actions #reportsPageBtn,
body.mobile-demo-mode .topbar-actions #messagesPageBtn,
body.mobile-demo-mode .topbar-actions #settingsPageBtn {
  display: none;
}

body.mobile-demo-mode .topbar-actions #mobileDemoToggleBtn,
body.mobile-demo-mode .topbar-actions #logoutBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.mobile-demo-mode .layout,
body.mobile-demo-mode .stats-grid,
body.mobile-demo-mode .messages-layout {
  grid-template-columns: 1fr;
}

body.mobile-chat-view {
  overflow: hidden;
}

body.mobile-chat-view .app-shell {
  overflow: hidden;
}

body.mobile-chat-view #messagesPage {
  margin: 0;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0.38rem 0.38rem calc(var(--mobile-bottom-nav-space) + 4rem);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.22rem;
}

body.mobile-chat-view #messagesPage > .table-head {
  margin: 0;
  padding-bottom: 0.24rem;
}

body.mobile-chat-view #messagesPage > .table-head h2,
body.mobile-chat-view #messagesPage .messages-layout > .panel .table-head h3 {
  font-size: 0.78rem;
}

body.mobile-chat-view #messageMobileComposeToggleBtn {
  display: inline-flex;
  position: fixed;
  left: 50%;
  bottom: calc(var(--mobile-bottom-nav-space) + 0.35rem);
  transform: translateX(-50%);
  z-index: 45;
  min-height: 42px;
  min-width: 146px;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

body.mobile-chat-view #messageThreadSummary,
body.mobile-chat-view #messageConversationMeta,
body.mobile-chat-view #messageConversationActions {
  display: none;
}

body.mobile-chat-view #messageThreadOverview,
body.mobile-chat-view #messageQuickStart {
  display: none !important;
}

body.mobile-chat-view #messagesPage .messages-layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0.22rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.mobile-chat-view #messagesPage[data-mobile-chat-mode="thread"] .messages-layout {
  grid-template-rows: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

body.mobile-chat-view #messagesPage .messages-layout > .panel {
  margin: 0;
  padding: 0.24rem;
  min-height: 0;
  overflow: hidden;
}

body.mobile-chat-view .message-thread-avatar,
body.mobile-chat-view .message-conversation-avatar {
  display: none;
}

body.mobile-chat-view .message-thread-main {
  grid-template-columns: 1fr;
  gap: 0.18rem;
}

body.mobile-chat-view .message-conversation-contact {
  display: block;
}

body.mobile-chat-view #messagesPage[data-mobile-chat-mode="compose"] .message-conversation-panel {
  grid-template-rows: auto;
}

body.mobile-chat-view #messagesPage .messages-layout > .panel .table-head {
  margin: 0 0 0.2rem;
}

body.mobile-chat-view #messageThreadFilterForm {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.28rem;
  gap: 0.22rem;
}

body.mobile-chat-view #messageThreadFilterForm .message-unread-toggle {
  padding: 0.16rem 0.3rem;
  font-size: 0.64rem;
}

body.mobile-chat-view #messageThreadFilterForm #messageClearSearchBtn {
  display: none;
}

body.mobile-chat-view #messageThreadList,
body.mobile-chat-view #messageConversation {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

body.mobile-chat-view #messageQuickReplies {
  display: none;
}

body.mobile-chat-view #messageQuickReplies button {
  width: 100%;
  min-height: 0;
  padding: 0.28rem 0.36rem;
  font-size: 0.68rem;
  line-height: 1.18;
  white-space: normal;
  text-align: left;
}

body.mobile-chat-view #messageComposeForm {
  margin-top: 0;
  gap: 0.22rem;
  grid-template-columns: 1fr;
}

body.mobile-chat-view #messagesPage .message-compose-form .message-supplier-label,
body.mobile-chat-view #messagesPage .message-compose-form .message-body-label {
  grid-column: auto;
}

body.mobile-chat-view #messagesPage .message-compose-foot {
  grid-column: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.3rem;
}

body.mobile-chat-view #messagesPage .message-compose-foot .sub:nth-child(2) {
  display: none;
}

body.mobile-chat-view #messagesPage #messageBodyCount {
  margin-right: 0;
  font-size: 0.58rem;
}

body.mobile-chat-view #messageComposeForm textarea {
  resize: none;
  min-height: 42px;
  max-height: 42px;
  padding: 0.34rem 0.42rem;
  font-size: 0.68rem;
}

body.mobile-chat-view #messageComposeForm select,
body.mobile-chat-view #messageComposeForm input[type="text"],
body.mobile-chat-view #messageComposeForm button {
  min-height: 30px;
  font-size: 0.66rem;
  padding: 0.22rem 0.35rem;
}

body.mobile-chat-view .message-thread-item {
  padding: 0.28rem 0.34rem;
  font-size: 0.66rem;
  gap: 0.18rem;
}

body.mobile-chat-view .message-conversation {
  margin-top: 0.18rem;
  min-height: 0;
  max-height: none;
  padding: 0.32rem;
  gap: 0.24rem;
  width: 100%;
  min-width: 0;
}

body.mobile-chat-view .message-bubble {
  max-width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.66rem;
}

body.mobile-chat-view .message-link-row {
  gap: 0.2rem;
  margin-bottom: 0.24rem;
}

body.mobile-chat-view .message-link-pill {
  font-size: 0.56rem;
  padding: 0.1rem 0.36rem;
}

body.mobile-chat-view .message-bubble small {
  margin-top: 0.24rem;
  font-size: 0.58rem;
}

body.mobile-chat-compose-open #messageComposeForm textarea {
  min-height: 136px;
  max-height: 220px;
}

body.mobile-chat-view #messagesPage .message-conversation-panel.hidden {
  display: none !important;
}

body.mobile-chat-view #messagesPage .message-threads-panel.hidden {
  display: none !important;
}

body.mobile-chat-compose-open #messageConversation,
body.mobile-chat-compose-open #messageQuickReplies,
body.mobile-chat-compose-open .message-conversation-head {
  display: none !important;
}

body.mobile-demo-mode #homePage {
  margin-bottom: 0;
  height: calc(100% - 108px);
  overflow: auto;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.42rem;
  padding: 0.62rem 0.62rem calc(var(--mobile-bottom-nav-space) + 0.32rem);
}

body.mobile-demo-mode .mobile-page-top-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.02rem 0 0.2rem;
}

body.mobile-demo-mode .mobile-page-top-logo-img {
  max-height: 48px;
  max-width: min(72%, 210px);
  width: auto;
  object-fit: contain;
}

body.mobile-demo-mode .grid-form,
body.mobile-demo-mode #settingsPanel .settings-topbar,
body.mobile-demo-mode #settingsPanel .settings-search-form {
  grid-template-columns: 1fr;
}

body.mobile-demo-mode .panel,
body.mobile-demo-mode .stat-card {
  border-radius: 12px;
}

body.mobile-demo-mode #mobileEngineerQuickActions {
  border: 1px solid #c9d9f5;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

body.mobile-demo-mode #mobileEngineerQuickActions .inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

body.mobile-demo-mode #homePlannerSection,
body.mobile-demo-mode #homeWidgetFiltersWrap,
body.mobile-demo-mode #homeChatSection,
body.mobile-demo-mode #homePartsSection,
body.mobile-demo-mode #homeRemindersSection {
  display: none !important;
}

body.mobile-demo-mode #homeStatsSection {
  margin: 0;
  gap: 0.45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mobile-demo-mode #homeStatsSection .stat-card {
  padding: 0.6rem 0.45rem;
}

body.mobile-demo-mode #homeStatsSection .stat-card h2 {
  font-size: 0.7rem;
}

body.mobile-demo-mode #homeStatsSection .stat-card p {
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

body.mobile-demo-mode #homeTodayJobsSection {
  display: block;
  margin: 0;
  border: 1px solid #c7d6f3;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  overflow: hidden;
}

body.mobile-demo-mode #homeTodayJobsSection .table-head {
  margin: 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #dbe6f8;
}

body.mobile-demo-mode #homeTodayJobsSection .table-head h3 {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

body.mobile-demo-mode #homeTodayJobsSection .activity-list {
  margin-top: 0.5rem;
  max-height: calc(100dvh - 285px);
  overflow: auto;
  padding-right: 0.2rem;
}

body.mobile-demo-mode #homeTodayJobsSection .activity-list li {
  border: 1px solid #d7e3f8;
  border-radius: 11px;
  background: #f8fbff;
  padding: 0.54rem 0.58rem;
}

body.mobile-demo-mode #homeTodayJobsSection .activity-list li.allocated-job-card {
  cursor: pointer;
}

body.mobile-demo-mode #homeTodayJobsSection .activity-list li.allocated-job-card:focus {
  outline: 2px solid #2d64df;
  outline-offset: 1px;
}

body.mobile-demo-mode #homeTodayJobsSection .home-alert-row span:first-child {
  font-size: 0.76rem;
  color: #133568;
  font-weight: 700;
}

body.mobile-demo-mode #homeTodayJobsSection .sub {
  margin-top: 0.28rem;
  font-size: 0.74rem;
}

body.mobile-demo-mode #homeTodayJobsSection .inline-actions {
  margin-top: 0.35rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.34rem;
}

body.mobile-demo-mode #homeTodayJobsSection .inline-actions .small.ghost {
  min-height: 34px;
  font-size: 0.72rem;
}

body.mobile-demo-mode #homeTodayJobsSection .inline-actions .small {
  min-height: 34px;
  font-size: 0.72rem;
}

body.mobile-demo-mode #stockPage {
  margin: 0;
  height: calc(100% - 108px);
  overflow: auto;
  display: grid;
  gap: 0.36rem;
  padding: 0.5rem 0.5rem calc(var(--mobile-bottom-nav-space) + 0.32rem);
}

body.mobile-demo-mode #remindersPage,
body.mobile-demo-mode #reportsPage,
body.mobile-demo-mode #customersPage,
body.mobile-demo-mode #invoicePage,
body.mobile-demo-mode #invoiceAllPage,
body.mobile-demo-mode #quotePage,
body.mobile-demo-mode #emailPage,
body.mobile-demo-mode #settingsPage,
body.mobile-demo-mode #completedJobsPage,
body.mobile-demo-mode #ongoingJobsPage,
body.mobile-demo-mode #draftQuotesPage {
  margin-bottom: 0;
  padding-bottom: calc(var(--mobile-bottom-nav-space) + 0.35rem);
}

body.mobile-demo-mode #stockPage .stats-grid {
  margin: 0;
  gap: 0.36rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mobile-demo-mode #stockPage .stat-card {
  padding: 0.45rem 0.35rem;
  border-radius: 14px;
}

body.mobile-demo-mode #stockPage .stock-widget-head {
  margin: -0.45rem -0.35rem 0.3rem;
  padding: 0.38rem 0.42rem;
  border-radius: 14px 14px 11px 11px;
  min-height: 0;
}

body.mobile-demo-mode #stockPage .stock-widget-head h3 {
  font-size: 0.6rem;
  line-height: 1.15;
  gap: 0.2rem;
}

body.mobile-demo-mode #stockPage .stock-widget-inline {
  padding: 0.05rem 0.28rem;
  font-size: 0.52rem;
}

body.mobile-demo-mode #stockPage .stat-card p {
  margin-top: 0.16rem;
  font-size: 0.95rem;
}

body.mobile-demo-mode #stockPage .stock-widget-meta {
  margin-top: 0.1rem;
  font-size: 0.56rem;
}

body.mobile-demo-mode #stockPage .layout {
  gap: 0.36rem;
}

body.mobile-demo-mode #stockPage .panel {
  padding: 0.45rem;
}

body.mobile-demo-mode #stockPage .panel h2 {
  font-size: 0.8rem;
}

body.mobile-demo-mode #stockPage .grid-form {
  gap: 0.34rem;
}

body.mobile-demo-mode #stockPage .grid-form label {
  font-size: 0.64rem;
}

body.mobile-demo-mode #stockPage .grid-form input,
body.mobile-demo-mode #stockPage .grid-form select,
body.mobile-demo-mode #stockPage .grid-form button {
  min-height: 30px;
  font-size: 0.66rem;
  padding: 0.24rem 0.34rem;
}

body.mobile-demo-mode #stockPage .table-head {
  gap: 0.28rem;
}

body.mobile-demo-mode #stockPage .table-head input {
  min-height: 30px;
  font-size: 0.66rem;
  padding: 0.22rem 0.34rem;
}

body.mobile-demo-mode #stockPage .table-wrap {
  max-width: 100%;
  overflow-x: hidden;
}

body.mobile-demo-mode #stockPage table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body.mobile-demo-mode #stockPage th,
body.mobile-demo-mode #stockPage td {
  font-size: 0.62rem;
  padding: 0.2rem 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-demo-mode #stockPage th:nth-child(4),
body.mobile-demo-mode #stockPage td:nth-child(4),
body.mobile-demo-mode #stockPage th:nth-child(6),
body.mobile-demo-mode #stockPage td:nth-child(6) {
  display: none;
}

body.mobile-demo-mode #stockPage td:last-child {
  white-space: normal;
}

body.mobile-demo-mode #stockPage td:last-child .small {
  min-height: 24px;
  font-size: 0.58rem;
  padding: 0.14rem 0.24rem;
  width: 100%;
  margin-bottom: 0.12rem;
}

body.mobile-demo-mode #stockPage td:last-child .small:last-child {
  margin-bottom: 0;
}

body.mobile-demo-mode #stockPage #activityList {
  margin-top: 0.34rem;
  max-height: 160px;
  overflow: auto;
}

body.mobile-demo-mode .mobile-quick-nav {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.62rem);
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(var(--mobile-nav-visible-count, 5), minmax(0, 1fr));
  gap: 0.18rem;
  width: min(calc(100vw - 2.5rem), 414px);
  margin: 0;
  padding: 0.28rem;
  border: 1px solid #bdd1f3;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
}

body.mobile-demo-mode .mobile-quick-nav button {
  min-height: 40px;
  padding: 0.2rem 0.3rem;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.05;
  text-align: center;
  word-break: break-word;
  background: #ecf3ff;
  border: 1px solid #d4e2f9;
  color: #274a7f;
}

body.mobile-demo-mode .mobile-quick-nav button.active {
  background: linear-gradient(180deg, #2563eb 0%, #1e4fd6 100%);
  border-color: #1b49c8;
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

body.mobile-demo-mode #jobBackendPage {
  border: 1px solid #c7d6f3;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

body.mobile-demo-mode #jobBackendPage > .table-head h2 {
  font-size: 1rem;
}

body.mobile-engineer-job-view #jobBackendPage {
  margin: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-bottom: calc(var(--mobile-bottom-nav-space) + 0.7rem);
}

body.mobile-engineer-job-view #jobBackendPage > .table-head {
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #d7e4fa;
}

body.mobile-engineer-job-view #jobBackendPage > .table-head h2 {
  font-size: 0.9rem;
}

body.mobile-engineer-job-view .topbar {
  min-height: 42px;
  padding: 0.36rem 0.48rem;
  margin-bottom: 0.25rem;
}

body.mobile-engineer-job-view .topbar > div:first-child {
  display: none;
}

body.mobile-engineer-job-view .topbar-actions {
  gap: 0.16rem;
}

body.mobile-demo-mode .job-backend-top-tabs {
  justify-content: flex-start;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

body.mobile-demo-mode .job-backend-top-tabs .small {
  min-height: 32px;
  padding: 0.3rem 0.5rem;
  font-size: 0.7rem;
}

body.mobile-demo-mode .job-backend-form {
  grid-template-columns: 1fr;
  padding: 0.55rem;
  gap: 0.5rem;
  border-radius: 12px;
  margin-bottom: 0.45rem;
}

body.mobile-demo-mode .job-backend-form > label {
  padding: 0.46rem 0.5rem;
}

body.mobile-demo-mode .job-backend-form > details.job-backend-price-book {
  padding: 0.5rem 0.55rem;
}

body.mobile-demo-mode .job-backend-form > details.job-backend-price-book > summary {
  flex-direction: column;
  align-items: flex-start;
}

body.mobile-demo-mode .job-backend-form > details.job-backend-price-book > summary small {
  text-align: left;
}

body.mobile-demo-mode .job-backend-price-book-toolbar {
  align-items: stretch;
}

body.mobile-demo-mode .job-backend-price-book-filters,
body.mobile-demo-mode .job-backend-price-book-search {
  min-width: 0;
}

body.mobile-engineer-job-view .job-backend-form {
  padding: 0.45rem;
  gap: 0.4rem;
}

body.mobile-engineer-job-view .job-backend-price-book,
body.mobile-engineer-job-full-view .job-backend-price-book {
  display: none !important;
}

body.mobile-engineer-job-view .job-backend-form .job-span-1,
body.mobile-engineer-job-view .job-backend-form .job-span-2,
body.mobile-engineer-job-view .job-backend-form .job-span-3 {
  grid-column: 1 / -1;
}

body.mobile-engineer-job-view .job-backend-form #jobBackendCustomerAssetsSummary {
  min-height: 72px;
  font-size: 0.8rem;
}

body.mobile-demo-mode .job-backend-actions {
  justify-content: stretch;
}

body.mobile-demo-mode .job-backend-actions button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
}

body.mobile-engineer-job-view #jobBackendAttachmentsPanel,
body.mobile-engineer-job-view #jobBackendEngineerFormsPanel {
  margin-top: 0.36rem;
  padding: 0.48rem;
  margin-bottom: 0.38rem;
}

body.mobile-engineer-job-view .job-engineer-form-card {
  padding: 0.48rem;
  border-radius: 10px;
}

body.mobile-engineer-job-view .job-engineer-forms-grid {
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

body.mobile-engineer-job-view .job-engineer-field {
  grid-column: 1 / -1 !important;
}

body.mobile-engineer-job-view .job-backend-top-tabs {
  display: none;
}

body.mobile-engineer-job-view #jobBackendAttachmentsPanel .table-head,
body.mobile-engineer-job-view #jobBackendEngineerFormsPanel .table-head {
  margin-bottom: 0.35rem;
}

body.mobile-engineer-job-full-view #jobBackendPage {
  position: relative;
  margin: 0;
  height: calc(100dvh - 178px);
  min-height: 0;
  max-height: calc(100dvh - 178px);
  overflow: hidden;
  padding: 0.34rem 0.34rem 5rem;
}

body.mobile-engineer-job-full-view .app-shell {
  overflow: hidden;
}

body.mobile-engineer-job-full-view #jobBackendPage > .table-head {
  margin-bottom: 0.35rem;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid #d7e4fa;
}

body.mobile-engineer-job-full-view #jobBackendPage > .table-head h2 {
  font-size: 0.86rem;
}

body.mobile-engineer-job-full-view .topbar {
  min-height: 42px;
  padding: 0.34rem 0.46rem;
  margin-bottom: 0.25rem;
}

body.mobile-engineer-job-full-view .topbar-actions {
  gap: 0.16rem;
}

body.mobile-engineer-job-full-view #jobBackendMobileMenuWrap {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  color: #264976;
  background: #eef4ff;
  border: 1px solid #d4e1f8;
  border-radius: 8px;
  padding: 0.14rem 0.22rem;
}

body.mobile-engineer-job-full-view #jobBackendMobileMenuSelect {
  min-height: 26px;
  padding: 0.14rem 0.22rem;
  font-size: 0.64rem;
  border-radius: 7px;
  border: 1px solid #c8d9f5;
  background: #fff;
}

body.mobile-engineer-job-full-view .job-backend-top-tabs {
  display: none;
}

body.mobile-engineer-job-full-view .job-backend-top-tabs .small {
  min-height: 30px;
  padding: 0.25rem 0.42rem;
  font-size: 0.68rem;
}

body.mobile-engineer-job-full-view .job-backend-form {
  grid-template-columns: 1fr;
  padding: 0.3rem;
  gap: 0.24rem;
  border-radius: 11px;
  overflow: hidden;
  max-height: calc(100dvh - 290px);
}

body.mobile-engineer-job-full-view .job-backend-form .job-span-1,
body.mobile-engineer-job-full-view .job-backend-form .job-span-2,
body.mobile-engineer-job-full-view .job-backend-form .job-span-3 {
  grid-column: 1 / -1;
}

body.mobile-engineer-job-full-view .job-backend-form > label {
  padding: 0.3rem 0.34rem;
  font-size: 0.72rem;
}

body.mobile-engineer-job-full-view .job-backend-form input,
body.mobile-engineer-job-full-view .job-backend-form select,
body.mobile-engineer-job-full-view .job-backend-form textarea {
  min-height: 32px;
  font-size: 0.77rem;
}

body.mobile-engineer-job-full-view .job-backend-form #jobBackendCustomerAssetsSummary {
  min-height: 44px;
  max-height: 44px;
  font-size: 0.74rem;
  overflow: hidden;
  resize: none;
}

body.mobile-engineer-job-full-view .job-backend-form .copy-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.24rem;
  align-items: center;
  padding: 0.2rem;
}

body.mobile-engineer-job-full-view .job-backend-form .copy-inline input {
  min-width: 0;
  padding: 0.3rem 0.34rem;
  font-size: 0.78rem;
}

body.mobile-engineer-job-full-view #jobBackendCopyPhoneBtn {
  order: -1;
  justify-self: start;
  min-height: 28px;
  min-width: 52px;
  padding: 0.18rem 0.34rem;
  font-size: 0.66rem;
  line-height: 1;
}

body.mobile-engineer-job-full-view #jobBackendAttachmentsPanel,
body.mobile-engineer-job-full-view #jobBackendPropertyAssetsPanel,
body.mobile-engineer-job-full-view #jobBackendPropertyHistoryPanel,
body.mobile-engineer-job-full-view #jobBackendEngineerFormsPanel,
body.mobile-engineer-job-full-view #jobBackendRecentJobsSection {
  margin-top: 0.22rem;
  margin-bottom: 0.26rem;
  padding: 0.28rem;
  overflow-x: hidden;
  max-height: calc(100dvh - 300px);
  overflow-y: auto;
}

body.mobile-engineer-job-full-view #jobBackendAssetForm {
  grid-template-columns: 1fr 1fr;
  gap: 0.24rem;
  margin-bottom: 0.3rem;
  padding: 0.32rem;
}

body.mobile-engineer-job-full-view #jobBackendAssetForm label {
  margin: 0;
  font-size: 0.62rem;
}

body.mobile-engineer-job-full-view #jobBackendAssetForm input,
body.mobile-engineer-job-full-view #jobBackendAssetForm select,
body.mobile-engineer-job-full-view #jobBackendAssetForm textarea {
  min-height: 28px;
  font-size: 0.66rem;
}

body.mobile-engineer-job-full-view #jobBackendAssetForm .inline-actions {
  gap: 0.22rem;
}

body.mobile-engineer-job-full-view #jobBackendAssetForm .small,
body.mobile-engineer-job-full-view #jobBackendAssetForm button[type="submit"] {
  min-height: 30px;
  font-size: 0.62rem;
  padding: 0.18rem 0.28rem;
}

body.mobile-engineer-job-full-view #jobBackendPropertyAssetsList .job-asset-card {
  padding: 0.34rem;
}

body.mobile-engineer-job-full-view #jobBackendPropertyAssetsList .job-asset-card .sub {
  margin-top: 0;
  margin-bottom: 0.2rem;
  font-size: 0.6rem;
}

body.mobile-engineer-job-full-view .job-backend-tabbar {
  display: none;
}

body.mobile-engineer-job-full-view .job-backend-tabbar button {
  min-height: 28px;
  font-size: 0.62rem;
  padding: 0.16rem 0.24rem;
}

body.mobile-engineer-job-full-view .job-backend-actions {
  display: none;
}

body.mobile-engineer-job-full-view #jobBackendPage .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

body.mobile-engineer-job-full-view #jobBackendPage table {
  width: 100%;
  table-layout: fixed;
}

body.mobile-engineer-job-full-view #jobBackendPage th,
body.mobile-engineer-job-full-view #jobBackendPage td {
  font-size: 0.62rem;
  padding: 0.2rem 0.18rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mobile-engineer-job-full-view #jobBackendEngineerActionsPanel {
  position: static;
  z-index: 36;
  margin: 0 0 0.26rem;
  padding: 0.3rem;
  border-radius: 10px;
  border: 1px solid #c9dbf6;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
  box-shadow: 0 8px 18px rgba(27, 73, 200, 0.14);
}

body.mobile-engineer-job-full-view #jobBackendEngineerActionsPanel .table-head {
  margin-bottom: 0.24rem;
}

body.mobile-engineer-job-full-view #jobBackendEngineerActionsPanel h3 {
  font-size: 0.74rem;
}

body.mobile-engineer-job-full-view #jobBackendEngineerActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.24rem;
}

body.mobile-engineer-job-full-view #jobBackendEngineerActions .small {
  min-height: 36px;
  width: 100%;
  font-size: 0.68rem;
  padding: 0.2rem 0.24rem;
}

body.mobile-demo-mode .job-backend-tabbar {
  gap: 0.3rem;
  padding: 0.3rem;
}

body.mobile-demo-mode .job-backend-tabbar button {
  min-height: 34px;
  font-size: 0.72rem;
  padding: 0.28rem 0.45rem;
}

/* Home planner quick-book refresh */
#homePlannerSection {
  overflow: visible;
}

#homePlannerSection .table-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(150px, 170px));
  gap: 0.75rem;
  align-items: end;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(66, 129, 173, 0.12);
}

#homePlannerSection .table-head h3 {
  font-size: 1.12rem;
  color: #133f69;
}

#homePlannerSection .table-head label {
  min-width: 0;
  margin: 0;
  padding: 0.62rem 0.72rem;
  border: 1px solid #c9deed;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(241, 248, 255, 0.92) 100%);
  box-shadow: 0 10px 22px rgba(35, 79, 135, 0.08);
}

#homePlannerSection .table-head label select,
#homePlannerSection .table-head label input {
  margin-top: 0.38rem;
}

.home-planner-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1rem;
  margin-top: 0.9rem;
  align-items: start;
}

.home-planner-shell.quick-book-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.home-planner-booking-rail {
  position: sticky;
  top: 1rem;
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border: 1px solid #c2d9ea;
  border-radius: 20px;
  background:
    radial-gradient(135% 120% at 0% 0%, rgba(88, 161, 231, 0.16) 0%, rgba(88, 161, 231, 0) 52%),
    linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 18px 36px rgba(34, 80, 132, 0.12);
}

.home-planner-booking-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.home-planner-booking-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.home-planner-booking-kicker {
  margin: 0 0 0.24rem;
  color: #28639a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-planner-booking-head h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #123f69;
  font-size: 1.05rem;
}

.home-planner-search {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  color: #184b79;
  font-weight: 700;
}

.home-planner-search input {
  min-height: 42px;
  border: 1px solid #bfd7e8;
  border-radius: 14px;
  background: #fbfdff;
}

.home-planner-quick-selection {
  display: grid;
  gap: 0.5rem;
}

.home-planner-selection-card {
  display: grid;
  gap: 0.48rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid #8ec0eb;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 16px 28px rgba(39, 98, 158, 0.12);
}

.home-planner-selection-card .sub {
  margin: 0;
}

.home-planner-selection-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.home-planner-selection-top strong {
  color: #123f69;
}

.home-planner-quick-list {
  display: grid;
  gap: 0.65rem;
  max-height: 720px;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.home-planner-quick-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.78rem 0.82rem;
  border: 1px solid #d2e3f2;
  border-left: 5px solid #5e9ee4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  box-shadow: 0 10px 22px rgba(32, 77, 127, 0.08);
  cursor: pointer;
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.home-planner-quick-card:hover,
.home-planner-quick-card.is-active {
  border-color: #97c1e8;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
  box-shadow: 0 16px 28px rgba(34, 86, 142, 0.14);
  transform: translateY(-1px);
}

.home-planner-quick-card.is-active {
  border-left-color: #2873cf;
}

.home-planner-quick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.home-planner-quick-head strong {
  display: block;
  color: #123f69;
  line-height: 1.3;
}

.home-planner-quick-customer {
  display: block;
  margin-top: 0.16rem;
  color: #55718f;
  font-size: 0.8rem;
  font-weight: 600;
}

.home-planner-quick-meta {
  display: grid;
  gap: 0.22rem;
  color: #395a7d;
  font-size: 0.79rem;
  font-weight: 600;
}

.home-planner-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.home-planner-board {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 0.8rem;
}

.home-planner-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.9rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #c6dced;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(61, 146, 226, 0.12) 0%, rgba(61, 146, 226, 0) 48%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.home-planner-board-head-main {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  overflow: hidden;
}

.home-planner-board-tools {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  max-width: 100%;
  justify-self: start;
  align-self: start;
}

.home-planner-quick-toggle,
.home-planner-van-toggle {
  min-height: 34px;
  padding-inline: 0.68rem;
  border-radius: 999px;
  border-color: #b8d8ea;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
  color: #17578d;
  font-weight: 800;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(29, 92, 148, 0.12);
}

.home-users-toggle {
  min-height: 34px;
  padding-inline: 0.68rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

.home-planner-board-tools > button {
  flex: 0 0 auto;
}

.home-planner-quick-toggle:hover,
.home-planner-van-toggle:hover {
  border-color: #8fc0e8;
  background: linear-gradient(180deg, #ffffff 0%, #e4f1ff 100%);
}

.home-planner-quick-toggle.is-active,
.home-planner-van-toggle.is-active {
  border-color: #5e9ee4;
  background: linear-gradient(180deg, #eef6ff 0%, #dcecff 100%);
  color: #0f4678;
}

.planner-booked-entry-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.planner-booked-entry-row > .planner-job,
.planner-booked-entry-row > .monthly-job-chip,
.planner-booked-entry-row > .planner-time-event-marker {
  flex: 1 1 auto;
  min-width: 0;
}

.planner-quick-book-back-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 58px;
  min-height: 100%;
  padding-inline: 0.55rem;
  border-radius: 10px;
  border-color: #9bc6e8;
  background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);
  color: #165486;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(29, 92, 148, 0.12);
}

.planner-quick-book-back-btn:hover {
  border-color: #7db4e2;
  background: linear-gradient(180deg, #ffffff 0%, #e5f1ff 100%);
}

.planner-booked-entry-row-daily .planner-quick-book-back-btn {
  min-width: 62px;
}

.home-planner-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.home-planner-hint {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.42rem 0.72rem;
  border: 1px solid #d1e2f1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #22517e;
  font-size: 0.76rem;
  font-weight: 700;
}

.home-planner-helper-copy {
  margin: 0;
  color: #55718f;
}

.home-planner-user-head,
.home-planner-day-head,
.home-planner-row-user {
  display: grid;
  gap: 0.12rem;
}

.home-planner-user-head strong,
.home-planner-day-head strong,
.home-planner-row-user strong {
  color: #123f69;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-planner-user-head span,
.home-planner-day-head span,
.home-planner-row-user span {
  color: #5b7590;
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-planner-day-count {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0.22rem 0 0;
  padding: 0.2rem 0.48rem;
  border: 1px solid #d3e2ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #235380;
  font-size: 0.7rem;
  font-weight: 700;
}

#homePlannerSection .planner-cell,
#homePlannerSection .monthly-day-cell {
  position: relative;
}

#homePlannerSection.planner-booking-active .planner-slot-bookable {
  cursor: pointer;
}

#homePlannerSection.planner-booking-active .planner-slot-bookable::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(44, 115, 194, 0.26);
  border-radius: 12px;
  background: rgba(91, 160, 230, 0.03);
  pointer-events: none;
  transition:
    opacity var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

#homePlannerSection.planner-booking-active .planner-slot-bookable:hover::before,
#homePlannerSection.planner-booking-active .planner-slot-bookable:focus::before {
  border-style: solid;
  border-color: rgba(38, 112, 198, 0.56);
  background: rgba(88, 162, 236, 0.12);
  transform: scale(0.995);
}

#homePlannerSection.planner-booking-active .planner-slot-bookable .empty {
  color: #2262a3;
  font-weight: 700;
}

#homePlannerSection .planner-job,
#homePlannerSection .planner-time-event-marker,
#homePlannerSection .monthly-job-chip {
  box-shadow: 0 10px 18px rgba(23, 75, 123, 0.12);
}

#homePlannerSection .planner-job:hover,
#homePlannerSection .planner-time-event-marker:hover,
#homePlannerSection .monthly-job-chip:hover {
  box-shadow: 0 16px 26px rgba(23, 75, 123, 0.16);
}

#homePlannerSection .planner-time-event-marker {
  min-height: 52px;
  border-radius: 14px;
  padding: 0.52rem 0.58rem 0.52rem 0.68rem;
}

#homePlannerSection .planner-job-label,
#homePlannerSection .planner-time-event-text {
  font-weight: 700;
}

#homePlannerSection .planner-time-occupied-fill {
  border-radius: 10px;
}

body.theme-dark .home-planner-booking-rail {
  border-color: #34586f;
  background:
    radial-gradient(135% 120% at 0% 0%, rgba(55, 135, 208, 0.22) 0%, rgba(55, 135, 208, 0) 52%),
    linear-gradient(180deg, #0f2233 0%, #112839 100%);
  box-shadow: none;
}

body.theme-dark .home-planner-booking-kicker,
body.theme-dark .home-planner-booking-head h4,
body.theme-dark .home-planner-selection-top strong,
body.theme-dark .home-planner-quick-head strong,
body.theme-dark .home-planner-user-head strong,
body.theme-dark .home-planner-day-head strong,
body.theme-dark .home-planner-row-user strong,
body.theme-dark #homePlannerSection .table-head h3 {
  color: #d5eaf6;
}

body.theme-dark .home-planner-search,
body.theme-dark .home-planner-helper-copy,
body.theme-dark .home-planner-quick-customer,
body.theme-dark .home-planner-quick-meta,
body.theme-dark .home-planner-user-head span,
body.theme-dark .home-planner-day-head span,
body.theme-dark .home-planner-row-user span {
  color: #aecdde;
}

body.theme-dark .home-planner-search input,
body.theme-dark #homePlannerSection .table-head label,
body.theme-dark .home-planner-board-head,
body.theme-dark .home-planner-selection-card,
body.theme-dark .home-planner-quick-card {
  border-color: #355a70;
  background: linear-gradient(180deg, #13283a 0%, #112334 100%);
  color: #d7ebf6;
  box-shadow: none;
}

body.theme-dark .home-planner-quick-card:hover,
body.theme-dark .home-planner-quick-card.is-active {
  border-color: #4d7c9d;
  border-left-color: #79b3e8;
  background: linear-gradient(180deg, #163247 0%, #143145 100%);
  box-shadow: none;
}

body.theme-dark .home-planner-quick-toggle,
body.theme-dark .home-planner-van-toggle {
  border-color: #3c6480;
  background: linear-gradient(180deg, #173246 0%, #112839 100%);
  color: #d4e9f5;
  box-shadow: none;
}

body.theme-dark .home-planner-quick-toggle:hover,
body.theme-dark .home-planner-quick-toggle.is-active,
body.theme-dark .home-planner-van-toggle:hover,
body.theme-dark .home-planner-van-toggle.is-active {
  border-color: #77add8;
  background: linear-gradient(180deg, #1b3b53 0%, #153247 100%);
  color: #e3f3fb;
}

body.theme-dark .planner-quick-book-back-btn {
  border-color: #4d7898;
  background: linear-gradient(180deg, #173246 0%, #112839 100%);
  color: #d8ebf6;
  box-shadow: none;
}

body.theme-dark .planner-quick-book-back-btn:hover {
  border-color: #77add8;
  background: linear-gradient(180deg, #1d3b52 0%, #163247 100%);
}

body.theme-dark #homePlannerSection .table-head label select,
body.theme-dark #homePlannerSection .table-head label input {
  background: #0f2233;
  color: #d7ebf6;
}

body.theme-dark .home-planner-hint,
body.theme-dark .home-planner-day-count {
  border-color: #365a70;
  background: rgba(20, 49, 69, 0.78);
  color: #cfe6f3;
}

body.theme-dark #homePlannerSection.planner-booking-active .planner-slot-bookable::before {
  border-color: rgba(132, 190, 235, 0.28);
  background: rgba(58, 130, 197, 0.08);
}

body.theme-dark #homePlannerSection.planner-booking-active .planner-slot-bookable:hover::before,
body.theme-dark #homePlannerSection.planner-booking-active .planner-slot-bookable:focus::before {
  border-color: rgba(151, 207, 249, 0.56);
  background: rgba(72, 149, 223, 0.16);
}

@media (max-width: 1480px) {
  .home-planner-shell {
    grid-template-columns: 290px minmax(0, 1fr);
  }
}

.files-page {
  display: grid;
  gap: 0.9rem;
}

.files-api-banner {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid #efc4c4;
  border-radius: 10px;
  background: #fff1f1;
  color: #8f2e2e;
  font-weight: 600;
}

.files-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-areas:
    "sidebar browser"
    "detail detail";
  gap: 0.9rem;
  align-items: start;
}

.files-layout.is-detail-hidden {
  grid-template-areas: "sidebar browser";
}

.files-sidebar,
.files-browser,
.files-detail {
  border: 1px solid #cfe0f5;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.files-sidebar {
  grid-area: sidebar;
}

.files-browser {
  grid-area: browser;
}

.files-detail {
  grid-area: detail;
}

.files-dropzone {
  padding: 0.95rem 1rem;
  border: 2px dashed #b9d2f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6fbff 0%, #eef6ff 100%);
  color: #31588b;
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.files-dropzone.is-dragging {
  border-color: #2563eb;
  background: linear-gradient(135deg, #eef5ff 0%, #dfeeff 100%);
  transform: translateY(-1px);
}

.files-dropzone.is-disabled {
  opacity: 0.7;
  border-style: solid;
}

.files-folder-list {
  display: grid;
  gap: 0.35rem;
}

.files-folder-btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 40px;
  padding-left: calc(0.72rem + (var(--files-folder-depth, 0) * 0.9rem));
  border-left: 3px solid var(--files-folder-accent, #2563eb);
  background: #f7fbff;
}

.files-folder-btn.is-root {
  margin-bottom: 0.45rem;
}

.files-folder-btn.is-active {
  background: linear-gradient(180deg, #eaf3ff 0%, #deecff 100%);
  border-color: #2563eb;
  color: #104787;
}

.files-quick-folder-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #d8e7f8;
}

.files-browser-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 170px 170px auto;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.files-browser-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #d7e7f8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f9ff 100%);
}

.files-browser-location {
  display: grid;
  gap: 0.18rem;
}

.files-browser-location strong {
  color: #134784;
  font-size: 1rem;
}

.files-browser-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#filesTableBody td strong {
  display: block;
}

#filesTableBody td small {
  display: block;
  margin-top: 0.16rem;
  color: #6885a7;
}

#filesTableBody tr {
  cursor: pointer;
}

#filesTableBody tr.is-active td {
  background: #edf5ff;
}

.files-preview {
  margin-bottom: 0.85rem;
  border: 1px solid #d8e6f7;
  border-radius: 14px;
  overflow: hidden;
  background: #f5faff;
}

.files-preview img,
.files-preview iframe {
  display: block;
  width: 100%;
  max-height: 320px;
  border: 0;
  object-fit: contain;
  background: #fff;
}

.files-preview pre {
  margin: 0;
  padding: 0.9rem;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #1f3654;
}

.files-generic-preview {
  display: grid;
  gap: 0.18rem;
  padding: 0.95rem;
}

.files-generic-preview small {
  color: #6885a7;
}

.files-access-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #d7e6f7;
  border-radius: 12px;
  background: #f9fbff;
}

.files-access-panel h4 {
  margin: 0 0 0.45rem;
}

.files-access-list {
  display: grid;
  gap: 0.35rem;
  max-height: 220px;
  overflow: auto;
}

.files-share-panel,
.files-version-panel {
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem;
  border: 1px solid #d7e6f7;
  border-radius: 12px;
  background: #f9fbff;
}

.files-share-panel .table-head,
.files-version-panel .table-head {
  margin: 0;
}

.files-share-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.55rem;
  align-items: center;
}

.files-share-row input[readonly] {
  background: #fff;
}

.files-version-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.files-version-panel .table-wrap {
  margin-top: 0;
}

.files-detail-actions {
  gap: 0.45rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.files-detail-actions > button {
  padding: 0.4rem 0.62rem;
  font-size: 0.78rem;
  line-height: 1.1;
  border-radius: 10px;
  min-height: 34px;
}

.job-backend-shared-files-panel {
  margin-bottom: 0.85rem;
}

#customerProfileFilesBody td strong,
#jobBackendSharedFilesBody td strong {
  display: block;
}

#customerProfileFilesBody td small,
#jobBackendSharedFilesBody td small {
  display: block;
  margin-top: 0.16rem;
  color: #6885a7;
}

.files-folder-settings-list {
  display: grid;
  gap: 0.7rem;
}

.files-folder-settings-card {
  padding: 0.8rem;
  border: 1px solid #d7e7f8;
  border-left: 4px solid var(--files-folder-accent, #2563eb);
  border-radius: 14px;
  background: #fff;
}

.files-folder-settings-card .table-head {
  margin-bottom: 0.35rem;
}

.files-folder-settings-card .table-head small {
  display: block;
  margin-top: 0.18rem;
  color: #6885a7;
}

body.theme-dark .files-sidebar,
body.theme-dark .files-browser,
body.theme-dark .files-detail {
  border-color: #31506f;
  background: linear-gradient(180deg, #11273f 0%, #0f2236 100%);
}

body.theme-dark .files-api-banner {
  border-color: #6f3e4d;
  background: #3d202a;
  color: #ffd8df;
}

body.theme-dark .files-dropzone {
  border-color: #31506f;
  background: linear-gradient(135deg, #102338 0%, #15304b 100%);
  color: #c8def8;
}

body.theme-dark .files-folder-btn {
  background: #102338;
  color: #c8def8;
}

body.theme-dark .files-folder-btn.is-active {
  background: linear-gradient(180deg, #17314f 0%, #1a385a 100%);
  color: #f3f8ff;
}

body.theme-dark .files-quick-folder-form {
  border-color: #31506f;
}

body.theme-dark #filesTableBody td small,
body.theme-dark .files-generic-preview small,
body.theme-dark .files-folder-settings-card .table-head small {
  color: #97b7d8;
}

body.theme-dark #filesTableBody tr.is-active td {
  background: #17314f;
}

body.theme-dark .files-preview,
body.theme-dark .files-access-panel,
body.theme-dark .files-share-panel,
body.theme-dark .files-version-panel,
body.theme-dark .files-folder-settings-card {
  border-color: #31506f;
  background: #0f2236;
}

body.theme-dark .files-browser-context {
  border-color: #31506f;
  background: linear-gradient(180deg, #12283f 0%, #0f2236 100%);
}

body.theme-dark .files-browser-location strong {
  color: #d7ebff;
}

body.theme-dark .files-preview pre {
  color: #d4e8ff;
  background: #0f2236;
}

body.theme-dark #customerProfileFilesBody td small,
body.theme-dark #jobBackendSharedFilesBody td small {
  color: #97b7d8;
}

@media (max-width: 1180px) {
  .files-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "sidebar browser"
      "detail detail";
  }

  .files-layout.is-detail-hidden {
    grid-template-areas: "sidebar browser";
  }

  .files-detail {
    grid-column: 1 / -1;
  }

  .files-browser-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #homePlannerSection .table-head {
    grid-template-columns: 1fr;
  }

  .home-planner-shell {
    grid-template-columns: 1fr;
  }

  .home-planner-booking-rail {
    position: static;
  }

  .home-planner-board-tools {
    justify-content: flex-start;
    justify-self: start;
    flex-wrap: wrap;
  }

  .home-planner-quick-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .home-planner-board-head {
    grid-template-columns: 1fr;
  }

  .home-planner-hints {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .files-layout,
  .files-browser-toolbar,
  .files-access-panel,
  .files-share-row,
  .files-version-upload {
    grid-template-columns: 1fr;
  }

  .files-layout {
    grid-template-areas:
      "sidebar"
      "browser"
      "detail";
  }

  .files-layout.is-detail-hidden {
    grid-template-areas:
      "sidebar"
      "browser";
  }

  .files-browser-context {
    align-items: flex-start;
  }

  .home-planner-quick-list {
    grid-template-columns: 1fr;
  }
}

/* Home Page Block Colour Refresh */
body:not(.mobile-demo-mode):not(.theme-dark) #homePage {
  border-radius: 30px;
  border-color: #c7d8ee;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 246, 255, 0.98) 100%);
  box-shadow: 0 24px 56px rgba(24, 54, 94, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage > .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid #d4e5f7;
  border-radius: 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(78, 152, 236, 0.13) 0%, rgba(78, 152, 236, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 34px rgba(34, 79, 135, 0.1);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage > .table-head h2 {
  margin: 0;
  color: #143f73;
  letter-spacing: 0.02em;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage > .table-head .home-header-account-slot {
  margin-left: auto;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeWidgetFiltersWrap {
  margin-top: 0.2rem;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #dbeafe 0%, #eaf3ff 100%);
  box-shadow: 0 14px 28px rgba(46, 105, 168, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeWidgetFiltersWrap > summary {
  padding: 0.9rem 1rem;
  color: #15456f;
  font-weight: 800;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeWidgetFiltersWrap[open] {
  background: linear-gradient(135deg, #d7eaff 0%, #f3f8ff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeWidgetToggles {
  padding: 0 1rem 1rem;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stats-grid {
  gap: 1.15rem;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card {
  position: relative;
  min-height: 188px;
  padding: 1.15rem 1.2rem;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  color: #ffffff;
  box-shadow: 0 22px 38px rgba(23, 67, 120, 0.2);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card::before {
  opacity: 1;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -18% auto;
  width: 170px;
  height: 170px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 78%);
  transform: rotate(14deg);
  pointer-events: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 46px rgba(23, 67, 120, 0.24);
  filter: saturate(1.05);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-ongoing {
  background: linear-gradient(135deg, #3597f2 0%, #2559d8 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-completed {
  background: linear-gradient(135deg, #33c59e 0%, #15846d 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-quotes {
  background: linear-gradient(135deg, #ffbc4c 0%, #f08222 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card h2,
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card p,
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-meta {
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card p {
  margin-top: 0.7rem;
  font-size: 2.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-kicker {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(8, 24, 45, 0.16);
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-dashboard-widget {
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-dashboard-widget::before {
  display: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-head {
  margin: -1.1rem -1.1rem 1rem;
  padding: 1rem 1.05rem;
  border-radius: 24px 24px 18px 18px;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-head h3 {
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-actions .ghost {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-actions .ghost:hover {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.22);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-chat {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-chat .home-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-parts {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-parts .home-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-reminders {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-reminders .home-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-jobs {
  background: linear-gradient(180deg, #e8faf3 0%, #f6fcf9 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-jobs .home-widget-head {
  background: linear-gradient(135deg, #33b897 0%, #1d836c 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeChatUnreadCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homePartsAlertCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homeRemindersCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homeTodayJobsCount {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-notice-card {
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 252, 255, 0.98) 100%);
  box-shadow: 0 14px 24px rgba(27, 62, 104, 0.08);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-notice-card::before {
  inset: 0 0 auto 0;
  width: 100%;
  height: 7px;
  border-radius: 18px 18px 0 0;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-notice-card:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .home-notice-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 32px rgba(27, 62, 104, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-notice-tag {
  border: 0;
  border-radius: 10px;
  padding: 0.35rem 0.62rem;
  background: #e7f0ff;
  color: #184d86;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection {
  border: 0;
  border-radius: 28px;
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
  box-shadow: 0 24px 46px rgba(24, 54, 94, 0.14);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection > .table-head {
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 176px));
  padding: 1rem 1.05rem;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
  box-shadow: 0 16px 30px rgba(26, 78, 131, 0.18);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection > .table-head h3 {
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection > .table-head label {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: #eff7ff;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection > .table-head label select,
body:not(.mobile-demo-mode):not(.theme-dark) #homePlannerSection > .table-head label input {
  background: #ffffff;
  color: #16395f;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-booking-rail {
  border: 0;
  background: linear-gradient(180deg, #1a598f 0%, #143d66 100%);
  box-shadow: 0 20px 38px rgba(24, 54, 94, 0.2);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-booking-kicker,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-booking-head h4,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-search,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-helper-copy {
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-booking-rail .sub {
  color: rgba(234, 245, 255, 0.82);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-search input {
  border: 0;
  background: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-selection-card,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-card,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head,
body:not(.mobile-demo-mode):not(.theme-dark) .home-users-block,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-optimise-bar,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-daily-controls > label {
  border: 0;
  box-shadow: 0 12px 22px rgba(24, 54, 94, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head {
  background: linear-gradient(135deg, #1c588e 0%, #2e82c6 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head .planner-title,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head strong,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head span {
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-toggle,
body:not(.mobile-demo-mode):not(.theme-dark) .home-users-toggle,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-van-toggle {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-toggle:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-toggle.is-active,
body:not(.mobile-demo-mode):not(.theme-dark) .home-users-toggle:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .home-users-toggle.is-active,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-van-toggle:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-van-toggle.is-active {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-quick-card.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #e0efff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .planner-quick-book-back-btn {
  border: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e6f2ff 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homePage {
  border-color: #223a54;
  background: linear-gradient(180deg, #122033 0%, #0f1a2b 100%);
  box-shadow: 0 28px 56px rgba(2, 8, 20, 0.44);
}

body.theme-dark:not(.mobile-demo-mode) #homePage > .table-head {
  border: 1px solid #31506f;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(92, 154, 222, 0.16) 0%, rgba(92, 154, 222, 0) 55%),
    linear-gradient(180deg, #102338 0%, #0f2236 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 36px rgba(1, 8, 16, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #homePage > .table-head h2 {
  color: #e0eeff;
}

body.theme-dark:not(.mobile-demo-mode) #homeWidgetFiltersWrap {
  border: 0;
  background: linear-gradient(135deg, #13263a 0%, #102031 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homeWidgetFiltersWrap > summary {
  color: #d8ecff;
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-card {
  border: 0;
  color: #ffffff;
  box-shadow: 0 20px 36px rgba(2, 8, 20, 0.28);
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-card-ongoing {
  background: linear-gradient(135deg, #1d4f8e 0%, #2144bf 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-card-completed {
  background: linear-gradient(135deg, #19725e 0%, #125f51 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-card-quotes {
  background: linear-gradient(135deg, #9a6213 0%, #c77718 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-card h2,
body.theme-dark:not(.mobile-demo-mode) .home-stat-card p,
body.theme-dark:not(.mobile-demo-mode) .home-stat-meta,
body.theme-dark:not(.mobile-demo-mode) .home-stat-kicker {
  color: #ffffff;
}

body.theme-dark:not(.mobile-demo-mode) .home-stat-kicker {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
}

body.theme-dark:not(.mobile-demo-mode) .home-dashboard-widget {
  border: 0;
  box-shadow: 0 18px 30px rgba(2, 8, 20, 0.2);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-chat {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-chat .home-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-parts {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-parts .home-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-reminders {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-reminders .home-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-jobs {
  background: linear-gradient(180deg, #0f251f 0%, #10211d 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-jobs .home-widget-head {
  background: linear-gradient(135deg, #227560 0%, #1f9779 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-head h3,
body.theme-dark:not(.mobile-demo-mode) .home-widget-actions .ghost,
body.theme-dark:not(.mobile-demo-mode) #homeChatUnreadCount,
body.theme-dark:not(.mobile-demo-mode) #homePartsAlertCount,
body.theme-dark:not(.mobile-demo-mode) #homeRemindersCount,
body.theme-dark:not(.mobile-demo-mode) #homeTodayJobsCount {
  color: #ffffff;
}

body.theme-dark:not(.mobile-demo-mode) .home-widget-actions .ghost,
body.theme-dark:not(.mobile-demo-mode) #homeChatUnreadCount,
body.theme-dark:not(.mobile-demo-mode) #homePartsAlertCount,
body.theme-dark:not(.mobile-demo-mode) #homeRemindersCount,
body.theme-dark:not(.mobile-demo-mode) #homeTodayJobsCount {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
}

body.theme-dark:not(.mobile-demo-mode) .home-notice-card {
  border: 0;
  background: linear-gradient(180deg, #17273a 0%, #132436 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-notice-title,
body.theme-dark:not(.mobile-demo-mode) .home-notice-meta,
body.theme-dark:not(.mobile-demo-mode) .home-notice-body,
body.theme-dark:not(.mobile-demo-mode) .home-notice-eyebrow {
  color: #d3e8fb;
}

body.theme-dark:not(.mobile-demo-mode) .home-notice-tag {
  border: 0;
  background: #203852;
  color: #d7ebff;
}

body.theme-dark:not(.mobile-demo-mode) #homePlannerSection {
  border: 0;
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
  box-shadow: 0 24px 46px rgba(2, 8, 20, 0.36);
}

body.theme-dark:not(.mobile-demo-mode) #homePlannerSection > .table-head,
body.theme-dark:not(.mobile-demo-mode) .home-planner-booking-rail,
body.theme-dark:not(.mobile-demo-mode) .home-planner-board-head {
  border: 0;
  box-shadow: none;
}

body.theme-dark:not(.mobile-demo-mode) #homePlannerSection > .table-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-planner-booking-rail {
  background: linear-gradient(180deg, #123049 0%, #0f2538 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-planner-board-head {
  background: linear-gradient(135deg, #184064 0%, #276ca9 100%);
}

body.theme-dark:not(.mobile-demo-mode) .home-planner-quick-toggle,
body.theme-dark:not(.mobile-demo-mode) .home-users-toggle,
body.theme-dark:not(.mobile-demo-mode) .home-planner-van-toggle {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #e8f4ff;
}

body.theme-dark:not(.mobile-demo-mode) .home-planner-selection-card,
body.theme-dark:not(.mobile-demo-mode) .home-planner-quick-card {
  border: 0;
  background: linear-gradient(180deg, #173048 0%, #12283e 100%);
  box-shadow: none;
}

@media (max-width: 1180px) {
  body:not(.mobile-demo-mode):not(.theme-dark) #homePage > .table-head,
  body.theme-dark:not(.mobile-demo-mode) #homePage > .table-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Program Wide Theme Refresh */
body:not(.mobile-demo-mode) {
  --ui-block-shadow: 0 20px 44px rgba(19, 46, 82, 0.12);
  --ui-block-shadow-soft: 0 14px 28px rgba(19, 46, 82, 0.09);
  --ui-block-text: #12273e;
  --ui-block-muted: #5a6f88;
  --ui-block-border: #d4e0ef;
}

body:not(.mobile-demo-mode) .topbar {
  border: 0;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 24px 46px rgba(18, 52, 90, 0.12);
}

body:not(.mobile-demo-mode) .topbar-nav-btn,
body:not(.mobile-demo-mode) .topbar-utility-btn,
body:not(.mobile-demo-mode) .topbar-profile-btn {
  border: 1px solid #d5e3f2;
  background: #f5f9fe;
  color: #18476f;
  box-shadow: none;
}

body:not(.mobile-demo-mode) .topbar-nav-btn:hover,
body:not(.mobile-demo-mode) .topbar-utility-btn:hover,
body:not(.mobile-demo-mode) .topbar-profile-btn:hover {
  background: #eaf3fd;
  color: #123d63;
  box-shadow: none;
}

body:not(.mobile-demo-mode) .topbar-nav-btn.active,
body:not(.mobile-demo-mode) .topbar-nav-btn[aria-current="page"],
body:not(.mobile-demo-mode) .topbar-profile-btn.active,
body:not(.mobile-demo-mode) .topbar-profile-btn[aria-current="page"] {
  background: #dfeeff;
  color: #16476f;
  border-color: #c6dcf5;
}

body:not(.mobile-demo-mode) .topbar-user {
  border-color: #d5e3f2;
  background: #f7fbff;
  color: #163c61;
}

body:not(.mobile-demo-mode) .topbar-user-kicker,
body:not(.mobile-demo-mode) .topbar-user-name {
  color: #163c61;
}

body:not(.mobile-demo-mode) .topbar-user .role-pill {
  border-color: #cddff2;
  background: #eaf4ff;
  color: #194b78;
}

body:not(.mobile-demo-mode) .topbar .nav-count {
  border-color: #b71c1c;
  background: #d62828;
  color: #ffffff;
}

body:not(.mobile-demo-mode) button {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #16538b 0%, #2f88d5 100%);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(25, 81, 134, 0.22);
}

body:not(.mobile-demo-mode) button:hover {
  box-shadow: 0 16px 28px rgba(25, 81, 134, 0.28);
}

body:not(.mobile-demo-mode) button.ghost {
  border: 1px solid #bfd3e6;
  background: linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
  color: #174b79;
  box-shadow: none;
}

body:not(.mobile-demo-mode) button.ghost:hover {
  border-color: #9fc0e1;
  background: linear-gradient(180deg, #ffffff 0%, #e4f0ff 100%);
}

body:not(.mobile-demo-mode) button.danger {
  background: linear-gradient(135deg, #cf3f3f 0%, #e25656 100%);
}

body:not(.mobile-demo-mode) input,
body:not(.mobile-demo-mode) select,
body:not(.mobile-demo-mode) textarea {
  border-color: #c5d7e8;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body:not(.mobile-demo-mode) label,
body:not(.mobile-demo-mode) .check-inline span {
  color: #1b3c60;
  font-weight: 700;
}

body:not(.mobile-demo-mode) details > summary {
  border-radius: 16px;
  background: linear-gradient(180deg, #f6faff 0%, #edf5ff 100%);
  color: #15446d;
}

body:not(.mobile-demo-mode) .activity-list li {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: var(--ui-block-shadow-soft);
}

body:not(.mobile-demo-mode) .table-wrap {
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: inset 0 0 0 1px rgba(194, 212, 232, 0.88);
}

body:not(.mobile-demo-mode) thead th {
  background: #e8f1fb;
  color: #21486f;
  border-bottom-color: #cddced;
}

body:not(.mobile-demo-mode) tbody tr:hover td {
  background: #edf5ff;
}

body:not(.mobile-demo-mode) .status-pill,
body:not(.mobile-demo-mode) .inline-count,
body:not(.mobile-demo-mode) .role-pill {
  border-width: 0;
  border-radius: 999px;
  box-shadow: none;
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) {
  --page-accent: #2c76cb;
  --page-accent-strong: #143f73;
  --page-surface: #f4f9ff;
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) {
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--page-accent) 20%, #d9e5f2 80%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-surface) 88%, #ffffff 12%) 0%, #ffffff 100%);
  box-shadow: var(--ui-block-shadow);
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child,
body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #d4e5f7;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(78, 152, 236, 0.13) 0%, rgba(78, 152, 236, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 34px rgba(34, 79, 135, 0.1);
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child h2,
body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child h3,
body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child h2,
body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child h3 {
  color: #143f73;
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child .sub,
body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child .sub {
  color: #2a5c90;
}

body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel,
body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .stat-card,
body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) details.panel,
body:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .customer-collapse,
body:not(.mobile-demo-mode) #settingsPage .settings-module-card {
  border: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--page-surface) 18%, #ffffff 82%) 100%);
  box-shadow: var(--ui-block-shadow-soft);
}

body:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel > .table-head:first-child,
body:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) details.panel > summary:first-child {
  padding: 0.9rem 0.95rem;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--page-accent) 12%, #ffffff 88%);
}

body:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel > .table-head:first-child h3,
body:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel > .table-head:first-child h4,
body:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) details.panel > summary:first-child {
  color: #173d63;
}

body.theme-dark:not(.mobile-demo-mode) {
  --ui-block-shadow: 0 22px 44px rgba(2, 8, 20, 0.42);
  --ui-block-shadow-soft: 0 14px 28px rgba(2, 8, 20, 0.28);
}

body.theme-dark:not(.mobile-demo-mode) .topbar {
  border: 0;
  background: linear-gradient(135deg, #0f2740 0%, #18476d 60%, #23608d 100%);
  box-shadow: 0 26px 46px rgba(2, 8, 20, 0.44);
}

body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-utility-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-user {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #edf6ff;
}

body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn.active,
body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn[aria-current="page"],
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn.active,
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn[aria-current="page"] {
  background: #e8f3ff;
  color: #163b60;
}

body.theme-dark:not(.mobile-demo-mode) button.ghost {
  border-color: #35516d;
  background: linear-gradient(180deg, #16283c 0%, #122235 100%);
  color: #dcecff;
}

body.theme-dark:not(.mobile-demo-mode) input,
body.theme-dark:not(.mobile-demo-mode) select,
body.theme-dark:not(.mobile-demo-mode) textarea {
  border-color: #2c4560;
  background: linear-gradient(180deg, #122032 0%, #101c2c 100%);
  color: #e5f0ff;
  box-shadow: none;
}

body.theme-dark:not(.mobile-demo-mode) details > summary,
body.theme-dark:not(.mobile-demo-mode) .activity-list li,
body.theme-dark:not(.mobile-demo-mode) .table-wrap {
  border-color: #28405b;
  background: linear-gradient(180deg, #132337 0%, #102032 100%);
}

body.theme-dark:not(.mobile-demo-mode) thead th {
  background: #17324b;
  color: #cfe4f8;
  border-bottom-color: #28405b;
}

body.theme-dark:not(.mobile-demo-mode) tbody tr:hover td {
  background: #17314a;
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) {
  border-color: #223a55;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-surface) 14%, #0f1a2b 86%) 0%, #10192a 100%);
  box-shadow: var(--ui-block-shadow);
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child,
body.theme-dark:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child {
  border: 1px solid #31506f;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(92, 154, 222, 0.16) 0%, rgba(92, 154, 222, 0) 55%),
    linear-gradient(180deg, #102338 0%, #0f2236 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 36px rgba(1, 8, 16, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child h2,
body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child h3,
body.theme-dark:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child h2,
body.theme-dark:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child h3 {
  color: #e0eeff;
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage
  ) > .table-head:first-child .sub,
body.theme-dark:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child .sub {
  color: #abc3dd;
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel,
body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .stat-card,
body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) details.panel,
body.theme-dark:not(.mobile-demo-mode) :is(
    #homePage,
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .customer-collapse,
body.theme-dark:not(.mobile-demo-mode) #settingsPage .settings-module-card {
  border: 0;
  background: linear-gradient(180deg, #142437 0%, #112030 100%);
  box-shadow: var(--ui-block-shadow-soft);
}

body.theme-dark:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) .panel > .table-head:first-child,
body.theme-dark:not(.mobile-demo-mode) :is(
    #completedJobsPage,
    #ongoingJobsPage,
    #draftQuotesPage,
    #profilePage,
    #remindersPage,
    #reportsPage,
    #customersPage,
    #diaryPage,
    #invoicePage,
    #invoiceAllPage,
    #quotePage,
    #messagesPage,
    #emailPage,
    #jobBackendPage,
    #filesPage,
    #settingsPage
  ) details.panel > summary:first-child {
  border: 0;
  background: color-mix(in srgb, var(--page-accent) 18%, #13263a 82%);
  color: #d8ecff;
}

@media (max-width: 1180px) {
  body:not(.mobile-demo-mode) :is(
      #homePage,
      #completedJobsPage,
      #ongoingJobsPage,
      #draftQuotesPage,
      #profilePage,
      #remindersPage,
      #reportsPage,
      #customersPage,
      #diaryPage,
      #invoicePage,
      #invoiceAllPage,
      #quotePage,
      #messagesPage,
      #emailPage,
      #jobBackendPage,
      #filesPage
    ) > .table-head:first-child {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Home widget card tune */
body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget {
  border: 1px solid rgba(41, 92, 151, 0.1);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(112, 170, 238, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 255, 0.98) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 20px 38px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 26px 46px rgba(24, 54, 94, 0.16);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget[data-state="critical"] {
  border-color: rgba(211, 90, 90, 0.22);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget[data-state="attention"],
body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget[data-state="warm"] {
  border-color: rgba(221, 143, 39, 0.2);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget[data-state="positive"],
body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget[data-state="calm"] {
  border-color: rgba(37, 138, 112, 0.18);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-widget-head {
  margin: -1.1rem -1.1rem 0.95rem;
  padding: 1.05rem 1.1rem;
  border-radius: 26px 26px 20px 20px;
  position: relative;
  overflow: hidden;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -14% -48% auto;
  width: 160px;
  height: 160px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(12deg);
  pointer-events: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-widget-head h3 {
  position: relative;
  z-index: 1;
  gap: 0.55rem;
  font-size: 1.02rem;
  line-height: 1.2;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-widget-actions {
  position: relative;
  z-index: 1;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-widget-actions .ghost {
  min-height: 35px;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-weight: 800;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage :is(
    #homeChatUnreadCount,
    #homePartsAlertCount,
    #homeRemindersCount,
    #homeTodayJobsCount
  ) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-weight: 800;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget .activity-list {
  margin-top: 0.1rem;
  gap: 0.8rem;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-dashboard-widget .activity-list > .empty {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed rgba(66, 122, 188, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  font-weight: 700;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-card {
  border: 1px solid rgba(53, 108, 176, 0.09);
  border-radius: 20px;
  padding: 1rem 1.05rem 1.02rem;
  background:
    radial-gradient(circle at top right, rgba(116, 177, 238, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(247, 251, 255, 0.98) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 16px 26px rgba(27, 62, 104, 0.08);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-card::before {
  inset: 0 auto 0 0;
  width: 6px;
  height: auto;
  border-radius: 20px 0 0 20px;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-card:hover,
body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(68, 126, 194, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 22px 34px rgba(27, 62, 104, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-eyebrow {
  color: #55789f;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-title {
  color: #143e70;
  font-size: 0.98rem;
  line-height: 1.32;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-meta,
body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-body {
  color: #5a718b;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-tag {
  border: 1px solid rgba(48, 98, 158, 0.08);
  background: rgba(235, 244, 255, 0.92);
  color: #285485;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-actions .ghost {
  min-height: 34px;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border-color: #c7dcf2;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  color: #1d528c;
  font-weight: 700;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homePage .home-notice-actions .ghost:hover {
  border-color: #a8caea;
  background: linear-gradient(180deg, #ffffff 0%, #e7f1ff 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-dashboard-widget {
  border: 1px solid rgba(92, 132, 186, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(73, 122, 190, 0.18), transparent 38%),
    linear-gradient(180deg, #14263a 0%, #112133 100%);
  box-shadow: 0 20px 34px rgba(2, 8, 20, 0.26);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-dashboard-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 42px rgba(2, 8, 20, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-widget-head {
  margin: -1.1rem -1.1rem 0.95rem;
  padding: 1.05rem 1.1rem;
  border-radius: 26px 26px 20px 20px;
  position: relative;
  overflow: hidden;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -14% -48% auto;
  width: 160px;
  height: 160px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  transform: rotate(12deg);
  pointer-events: none;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-widget-head h3,
body.theme-dark:not(.mobile-demo-mode) #homePage .home-widget-actions {
  position: relative;
  z-index: 1;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-widget-actions .ghost {
  min-height: 35px;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-weight: 800;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-dashboard-widget .activity-list {
  margin-top: 0.1rem;
  gap: 0.8rem;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-dashboard-widget .activity-list > .empty {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed rgba(92, 132, 186, 0.18);
  border-radius: 18px;
  background: rgba(18, 34, 52, 0.7);
  color: #c8dbef;
  font-weight: 700;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-card {
  border: 1px solid rgba(86, 125, 177, 0.14);
  border-radius: 20px;
  padding: 1rem 1.05rem 1.02rem;
  background:
    radial-gradient(circle at top right, rgba(72, 121, 189, 0.16), transparent 34%),
    linear-gradient(180deg, #182a3f 0%, #142538 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 26px rgba(2, 8, 20, 0.2);
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-card::before {
  inset: 0 auto 0 0;
  width: 6px;
  height: auto;
  border-radius: 20px 0 0 20px;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-card:hover,
body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(110, 152, 206, 0.24);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 34px rgba(2, 8, 20, 0.28);
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-tag {
  border: 1px solid rgba(95, 136, 189, 0.12);
  background: rgba(29, 55, 83, 0.86);
  color: #d8ebff;
}

body.theme-dark:not(.mobile-demo-mode) #homePage .home-notice-actions .ghost {
  min-height: 34px;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-weight: 700;
}

/* Home live workload card tune */
body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard {
  border: 1px solid rgba(82, 129, 186, 0.16);
  background:
    radial-gradient(circle at top right, rgba(123, 176, 232, 0.2), transparent 42%),
    linear-gradient(155deg, #f9fbff 0%, #eef5ff 56%, #e8f0fd 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 18px 30px rgba(34, 79, 135, 0.1);
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(76, 141, 214, 0.16) 0%, rgba(76, 141, 214, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(234, 243, 255, 0.08) 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard::after {
  width: 148px;
  height: 148px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 74%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 22px 34px rgba(34, 79, 135, 0.14);
  filter: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard h2,
body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard p,
body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard .home-stat-meta {
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard p {
  color: #1f5f99;
  letter-spacing: -0.02em;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard .home-stat-meta {
  color: #587290;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard .home-stat-kicker {
  border-color: rgba(59, 104, 162, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: #2d5f96;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeOngoingJobsCard[data-state="busy"] {
  border-color: rgba(69, 122, 187, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard {
  border: 1px solid rgba(88, 129, 182, 0.22);
  background:
    radial-gradient(circle at top right, rgba(74, 121, 188, 0.22), transparent 42%),
    linear-gradient(155deg, #16273b 0%, #17304a 56%, #14273d 100%);
  box-shadow: 0 18px 30px rgba(2, 8, 20, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(91, 152, 220, 0.16) 0%, rgba(91, 152, 220, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(20, 40, 61, 0) 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard:hover {
  box-shadow: 0 22px 34px rgba(2, 8, 20, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard h2,
body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard p,
body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard .home-stat-meta,
body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard .home-stat-kicker {
  color: #e5f2ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard p {
  color: #9fd0ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard .home-stat-meta {
  color: #b9cfe6;
}

body.theme-dark:not(.mobile-demo-mode) #homeOngoingJobsCard .home-stat-kicker {
  border-color: rgba(167, 203, 243, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

/* Home finished today card tune */
body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard {
  border: 1px solid rgba(82, 129, 186, 0.16);
  background:
    radial-gradient(circle at top right, rgba(123, 176, 232, 0.2), transparent 42%),
    linear-gradient(155deg, #f9fbff 0%, #eef5ff 56%, #e8f0fd 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 18px 30px rgba(34, 79, 135, 0.1);
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(76, 141, 214, 0.16) 0%, rgba(76, 141, 214, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(234, 243, 255, 0.08) 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard::after {
  width: 148px;
  height: 148px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 74%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 22px 34px rgba(34, 79, 135, 0.14);
  filter: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard h2,
body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard p,
body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard .home-stat-meta {
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard p {
  color: #1f5f99;
  letter-spacing: -0.02em;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard .home-stat-meta {
  color: #587290;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard .home-stat-kicker {
  border-color: rgba(59, 104, 162, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: #2d5f96;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeCompletedJobsCard[data-state="positive"] {
  border-color: rgba(69, 122, 187, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard {
  border: 1px solid rgba(88, 129, 182, 0.22);
  background:
    radial-gradient(circle at top right, rgba(74, 121, 188, 0.22), transparent 42%),
    linear-gradient(155deg, #16273b 0%, #17304a 56%, #14273d 100%);
  box-shadow: 0 18px 30px rgba(2, 8, 20, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(91, 152, 220, 0.16) 0%, rgba(91, 152, 220, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(20, 40, 61, 0) 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard:hover {
  box-shadow: 0 22px 34px rgba(2, 8, 20, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard h2,
body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard p,
body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard .home-stat-meta,
body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard .home-stat-kicker {
  color: #e5f2ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard p {
  color: #9fd0ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard .home-stat-meta {
  color: #b9cfe6;
}

body.theme-dark:not(.mobile-demo-mode) #homeCompletedJobsCard .home-stat-kicker {
  border-color: rgba(167, 203, 243, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

/* Home work pipeline card tune */
body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard {
  border: 1px solid rgba(82, 129, 186, 0.16);
  background:
    radial-gradient(circle at top right, rgba(123, 176, 232, 0.2), transparent 42%),
    linear-gradient(155deg, #f9fbff 0%, #eef5ff 56%, #e8f0fd 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 18px 30px rgba(34, 79, 135, 0.1);
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(76, 141, 214, 0.16) 0%, rgba(76, 141, 214, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(234, 243, 255, 0.08) 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard::after {
  width: 148px;
  height: 148px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 74%);
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 22px 34px rgba(34, 79, 135, 0.14);
  filter: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard h2,
body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard p,
body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard .home-stat-meta {
  color: #173f67;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard p {
  color: #1f5f99;
  letter-spacing: -0.02em;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard .home-stat-meta {
  color: #587290;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard .home-stat-kicker {
  border-color: rgba(59, 104, 162, 0.1);
  background: rgba(255, 255, 255, 0.82);
  color: #2d5f96;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeDraftQuotesCard[data-state="attention"] {
  border-color: rgba(69, 122, 187, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard {
  border: 1px solid rgba(88, 129, 182, 0.22);
  background:
    radial-gradient(circle at top right, rgba(74, 121, 188, 0.22), transparent 42%),
    linear-gradient(155deg, #16273b 0%, #17304a 56%, #14273d 100%);
  box-shadow: 0 18px 30px rgba(2, 8, 20, 0.26);
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard::before {
  background:
    radial-gradient(88% 94% at 92% 2%, rgba(91, 152, 220, 0.16) 0%, rgba(91, 152, 220, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(20, 40, 61, 0) 100%);
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard:hover {
  box-shadow: 0 22px 34px rgba(2, 8, 20, 0.34);
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard h2,
body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard p,
body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard .home-stat-meta,
body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard .home-stat-kicker {
  color: #e5f2ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard p {
  color: #9fd0ff;
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard .home-stat-meta {
  color: #b9cfe6;
}

body.theme-dark:not(.mobile-demo-mode) #homeDraftQuotesCard .home-stat-kicker {
  border-color: rgba(167, 203, 243, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

/* Solid planner time block for current bookings */
.planner-time-event-marker.planner-status-current,
.planner-time-lane-occupied.planner-status-current,
.planner-time-occupied-fill.planner-status-current {
  border-color: var(--planner-accent);
  border-left-color: var(--planner-accent);
  background: var(--planner-accent);
  color: #ffffff;
}

.planner-time-event-marker.planner-status-current .planner-time-event-text {
  color: #ffffff;
}

.planner-time-event-marker.planner-status-current .planner-time-event-resize {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

#homePlannerSection .planner-time-event-marker.planner-status-current:hover,
.planner-time-event-marker.planner-status-current:hover,
body.theme-dark #homePlannerSection .planner-time-event-marker.planner-status-current:hover,
body.theme-dark .planner-time-event-marker.planner-status-current:hover {
  background: var(--planner-accent);
  border-color: var(--planner-accent);
  box-shadow: 0 10px 22px rgba(34, 84, 154, 0.24);
}

#userManagementPanel input[type="color"] {
  width: 100%;
  min-height: 42px;
  padding: 0.18rem;
  border-radius: 12px;
  cursor: pointer;
}

.planner-job.planner-user-colorized,
.monthly-job-chip.planner-user-colorized,
.diary-time-event-marker.planner-user-colorized,
.planner-time-event-marker.planner-user-colorized,
.time-occupied-fill.planner-user-colorized,
.planner-time-occupied-fill.planner-user-colorized,
.diary-time-lane-occupied.planner-user-colorized,
.planner-time-lane-occupied.planner-user-colorized {
  background: var(--planner-user-bg) !important;
  color: var(--planner-user-text) !important;
  border-color: var(--planner-user-border) !important;
  border-left-color: var(--planner-user-accent) !important;
}

.planner-job.planner-user-colorized .planner-job-label,
.monthly-job-chip.planner-user-colorized .planner-time-event-text,
.diary-time-event-marker.planner-user-colorized .diary-time-event-text,
.planner-time-event-marker.planner-user-colorized .planner-time-event-text {
  color: var(--planner-user-text) !important;
}

.planner-job.planner-user-colorized .planner-time-event-resize,
.monthly-job-chip.planner-user-colorized .planner-time-event-resize,
.diary-time-event-marker.planner-user-colorized .diary-time-event-resize,
.planner-time-event-marker.planner-user-colorized .planner-time-event-resize {
  border-color: var(--planner-user-grip-border) !important;
  background: var(--planner-user-grip-bg) !important;
  color: var(--planner-user-text) !important;
}

.diary-time-event-marker.planner-user-colorized,
.planner-time-event-marker.planner-user-colorized {
  box-shadow: none !important;
}

#homePlannerSection .planner-job.planner-user-colorized:hover,
.planner-job.planner-user-colorized:hover,
#homePlannerSection .monthly-job-chip.planner-user-colorized:hover,
.monthly-job-chip.planner-user-colorized:hover,
#homePlannerSection .planner-time-event-marker.planner-user-colorized:hover,
.planner-time-event-marker.planner-user-colorized:hover,
.diary-time-event-marker.planner-user-colorized:hover {
  background: var(--planner-user-bg) !important;
  color: var(--planner-user-text) !important;
  border-color: var(--planner-user-border) !important;
  border-left-color: var(--planner-user-accent) !important;
  box-shadow: 0 10px 22px rgba(var(--planner-user-shadow-rgb), 0.24) !important;
  filter: none !important;
}

body.theme-dark #homePlannerSection .planner-job.planner-user-colorized:hover,
body.theme-dark .planner-job.planner-user-colorized:hover,
body.theme-dark #homePlannerSection .monthly-job-chip.planner-user-colorized:hover,
body.theme-dark .monthly-job-chip.planner-user-colorized:hover,
body.theme-dark #homePlannerSection .planner-time-event-marker.planner-user-colorized:hover,
body.theme-dark .planner-time-event-marker.planner-user-colorized:hover,
body.theme-dark .diary-time-event-marker.planner-user-colorized:hover {
  background: var(--planner-user-bg) !important;
  color: var(--planner-user-text) !important;
  border-color: var(--planner-user-border) !important;
  border-left-color: var(--planner-user-accent) !important;
  box-shadow: 0 10px 22px rgba(var(--planner-user-shadow-rgb), 0.3) !important;
}
.purchasing-page {
  display: grid;
  gap: 1.15rem;
}

.purchasing-head {
  align-items: flex-start;
}

.purchasing-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.purchasing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.purchasing-workspace {
  grid-column: 1 / -1;
}

.purchasing-orders-panel {
  grid-column: 1 / -1;
}

.purchasing-secondary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.purchasing-secondary-grid > :nth-child(1) {
  grid-column: 1 / -1;
}

.purchasing-secondary-grid > :nth-child(2) {
  grid-column: 1 / -1;
}

.purchasing-secondary-grid > :nth-child(3) {
  grid-column: 1 / -1;
}

.purchasing-secondary-grid > :nth-child(4) {
  grid-column: 1 / -1;
}

.purchasing-filter-form {
  margin-bottom: 0.9rem;
}

.purchasing-page .grid-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.purchasing-page #purchaseOrderForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.purchasing-page #purchaseOrderLineForm {
  grid-template-columns: 1.2fr 1.8fr repeat(4, minmax(0, 1fr));
}

.purchasing-page #supplierInvoiceForm {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.purchasing-page .purchasing-filter-form {
  grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
}

.purchasing-page .invoice-span-2 {
  grid-column: 1 / -1;
}

.purchasing-page .panel {
  border: 1px solid rgba(41, 88, 156, 0.12);
  box-shadow: 0 18px 36px rgba(18, 49, 94, 0.06);
}

.purchasing-page .table-head {
  background: linear-gradient(135deg, rgba(33, 110, 197, 0.08), rgba(18, 79, 153, 0.03));
  border-radius: 14px 14px 0 0;
}

.purchasing-page .table-wrap {
  margin-top: 0.75rem;
}

.purchasing-orders-panel .table-wrap,
.purchasing-secondary-grid .table-wrap {
  max-height: 28rem;
  overflow: auto;
}

.purchasing-workspace .table-wrap {
  max-height: 19rem;
  overflow: auto;
}

.purchasing-page .table-wrap table {
  min-width: 1080px;
}

.purchasing-page .table-head {
  gap: 0.8rem;
}

.purchasing-page .table-head h3 {
  white-space: nowrap;
}

.purchasing-page .table-actions {
  white-space: nowrap;
}

.purchasing-page .table-actions button {
  margin: 0 0.2rem 0.2rem 0;
}

.purchasing-flow-panel .table-head {
  margin-bottom: 0.55rem;
}

.purchasing-flow-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.purchasing-flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cfe1f4;
  border-radius: 10px;
  background: #f6faff;
  color: #365777;
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
}

.purchasing-flow-step.is-active {
  border-color: #2d74c0;
  background: linear-gradient(180deg, #2f7ccb 0%, #2a67ab 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(34, 95, 165, 0.24);
}

.purchasing-card {
  border: 1px solid #d4e4f4;
  border-radius: 12px;
  background: #fbfdff;
  margin: 0.4rem 0 0.8rem;
  overflow: hidden;
}

.purchasing-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.62rem 0.75rem;
  background: linear-gradient(180deg, #f5f9ff 0%, #edf4fd 100%);
  border-bottom: 1px solid #d7e7f7;
}

.purchasing-card > summary::-webkit-details-marker {
  display: none;
}

.purchasing-card[open] > summary {
  background: linear-gradient(180deg, #edf5ff 0%, #e4effc 100%);
}

.purchasing-card > form {
  padding: 0.7rem 0.75rem 0.75rem;
}

.purchasing-actions-inline {
  gap: 0.45rem;
  align-items: center;
}

.purchasing-actions-inline button {
  min-height: 32px;
  padding: 0.3rem 0.72rem;
}

.purchasing-page .table-wrap .small {
  min-height: 28px;
  padding: 0.2rem 0.58rem;
  font-size: 0.72rem;
}

.purchasing-pie-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.dark-mode .purchasing-page .panel {
  border-color: rgba(108, 164, 238, 0.16);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

body.dark-mode .purchasing-page .table-head {
  background: linear-gradient(135deg, rgba(58, 125, 217, 0.18), rgba(18, 39, 78, 0.18));
}

body.theme-dark .purchasing-flow-step {
  border-color: #35516d;
  background: #132b42;
  color: #d3e6fb;
}

body.theme-dark .purchasing-flow-step.is-active {
  border-color: #5d8fbe;
  background: linear-gradient(180deg, #3a78b7 0%, #2a5d8f 100%);
  color: #fff;
}

body.theme-dark .purchasing-card {
  border-color: #34516f;
  background: #102338;
}

body.theme-dark .purchasing-card > summary {
  background: linear-gradient(180deg, #153048 0%, #122b40 100%);
  border-bottom-color: #34516f;
}

body.theme-dark .purchasing-card[open] > summary {
  background: linear-gradient(180deg, #19354f 0%, #153149 100%);
}

@media (max-width: 1200px) {
  .purchasing-stats-grid,
  .purchasing-pie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purchasing-workspace,
  .purchasing-orders-panel,
  .purchasing-secondary-grid > :nth-child(1),
  .purchasing-secondary-grid > :nth-child(2),
  .purchasing-secondary-grid > :nth-child(3),
  .purchasing-secondary-grid > :nth-child(4) {
    grid-column: span 1;
  }

  .purchasing-page .grid-form,
  .purchasing-page #purchaseOrderForm,
  .purchasing-page #purchaseOrderLineForm,
  .purchasing-page #supplierInvoiceForm,
  .purchasing-page .purchasing-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchasing-flow-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .purchasing-stats-grid,
  .purchasing-pie-grid {
    grid-template-columns: 1fr;
  }

  .purchasing-page .grid-form,
  .purchasing-page #purchaseOrderForm,
  .purchasing-page #purchaseOrderLineForm,
  .purchasing-page #supplierInvoiceForm,
  .purchasing-page .purchasing-filter-form {
    grid-template-columns: 1fr;
  }

  .purchasing-page .table-wrap table {
    min-width: 0;
  }

  .purchasing-flow-bar {
    grid-template-columns: 1fr;
  }
}

/* Desktop Theme Synced To iOS EngineerTheme */
body:not(.mobile-demo-mode):not(.theme-dark) {
  --bg: #f4f9ff;
  --panel: #ffffff;
  --text: #173d63;
  --muted: #2a5c90;
  --accent: #2c76cb;
  --accent-2: #2a74b5;
  --danger: #c74038;
  --border: #d4e5f7;
  --warning: #e0871f;
  --shadow: 0 16px 34px rgba(20, 63, 115, 0.12);
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar {
  border: 1px solid #bdd8f0;
  background: #f5faff;
  box-shadow: 0 18px 36px rgba(20, 63, 115, 0.12);
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-actions {
  border: 1px solid #d4e5f7;
  background: #eaf4fd;
  border-radius: 16px;
  padding: 0.45rem 0.55rem;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-nav-btn,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-utility-btn,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-profile-btn {
  border: 1px solid #bdd8f0;
  background: #f5faff;
  color: #3e86cf;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-nav-btn:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-utility-btn:hover,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-profile-btn:hover {
  border-color: #a8caea;
  background: #dcecff;
  color: #143f73;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-nav-btn.active,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-nav-btn[aria-current="page"],
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-profile-btn.active,
body:not(.mobile-demo-mode):not(.theme-dark) .topbar-profile-btn[aria-current="page"] {
  border-color: #2c76cb;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
  color: #ffffff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-user {
  border-color: #bdd8f0;
  background: #f5faff;
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-user-kicker {
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-user-name {
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) .topbar-user .role-pill {
  border: 1px solid #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) button {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
  box-shadow: 0 10px 24px rgba(44, 118, 203, 0.28);
}

body:not(.mobile-demo-mode):not(.theme-dark) button:hover {
  background: linear-gradient(135deg, #286ab8 0%, #245f9b 100%);
  box-shadow: 0 14px 28px rgba(44, 118, 203, 0.34);
}

body:not(.mobile-demo-mode):not(.theme-dark) button.ghost {
  border-color: #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
  box-shadow: none;
}

body:not(.mobile-demo-mode):not(.theme-dark) button.ghost:hover {
  border-color: #a8caea;
  background: #dcecff;
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) button.danger {
  background: linear-gradient(135deg, #c74038 0%, #b3362f 100%);
  box-shadow: 0 10px 24px rgba(199, 64, 56, 0.25);
}

body:not(.mobile-demo-mode):not(.theme-dark) input,
body:not(.mobile-demo-mode):not(.theme-dark) select,
body:not(.mobile-demo-mode):not(.theme-dark) textarea {
  border-color: #d4e5f7;
  background: #f5faff;
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) input:focus,
body:not(.mobile-demo-mode):not(.theme-dark) select:focus,
body:not(.mobile-demo-mode):not(.theme-dark) textarea:focus {
  border-color: #2c76cb;
  box-shadow: 0 0 0 3px rgba(44, 118, 203, 0.2);
}

body:not(.mobile-demo-mode):not(.theme-dark) .panel,
body:not(.mobile-demo-mode):not(.theme-dark) .stat-card,
body:not(.mobile-demo-mode):not(.theme-dark) details.panel {
  border-color: #d4e5f7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(20, 63, 115, 0.1);
}

body:not(.mobile-demo-mode):not(.theme-dark) .table-wrap {
  border-radius: 16px;
  border: 1px solid #d4e5f7;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(234, 244, 253, 0.75);
}

body:not(.mobile-demo-mode):not(.theme-dark) thead th {
  background: #e8f1fb;
  color: #173d63;
  border-bottom-color: #d4e5f7;
}

body:not(.mobile-demo-mode):not(.theme-dark) tbody tr:hover td {
  background: #f4f9ff;
}

body:not(.mobile-demo-mode):not(.theme-dark) .status-pill,
body:not(.mobile-demo-mode):not(.theme-dark) .inline-count,
body:not(.mobile-demo-mode):not(.theme-dark) .role-pill {
  border: 1px solid #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card {
  border-color: #d4e5f7;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 32px rgba(20, 63, 115, 0.11);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-ongoing {
  background: linear-gradient(135deg, #ffffff 0%, #eef5fe 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-completed {
  background: linear-gradient(135deg, #ffffff 0%, #edf6ff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-quotes {
  background: linear-gradient(135deg, #ffffff 0%, #eaf4fd 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-ongoing::before,
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-completed::before,
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card-quotes::before {
  background:
    radial-gradient(85% 90% at 90% 0%, rgba(44, 118, 203, 0.16) 0%, rgba(44, 118, 203, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(244, 249, 255, 0.08) 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card[data-state="busy"],
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card[data-state="positive"],
body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card[data-state="attention"] {
  border-color: #bdd8f0;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-kicker {
  border: 1px solid #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card h2 {
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-card p {
  color: #143f73;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-stat-meta {
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-dashboard-widget {
  border-color: #d4e5f7;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 30px rgba(20, 63, 115, 0.1);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-dashboard-widget::before {
  background: linear-gradient(90deg, #3e86cf 0%, #2c76cb 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-chat,
body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-parts,
body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-reminders,
body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-jobs {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(44, 118, 203, 0.1) 0%, rgba(44, 118, 203, 0) 55%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-head h3 {
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-actions .ghost {
  border-color: #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-widget-actions .ghost:hover {
  border-color: #a8caea;
  background: #dcecff;
  color: #173d63;
}

body:not(.mobile-demo-mode):not(.theme-dark) #homeChatUnreadCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homePartsAlertCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homeRemindersCount,
body:not(.mobile-demo-mode):not(.theme-dark) #homeTodayJobsCount {
  border: 1px solid #bdd8f0;
  background: #eaf4fd;
  color: #2a5c90;
}

/* Force iOS palette on desktop even when dark mode is enabled */
body.theme-dark:not(.mobile-demo-mode) {
  --bg: #f4f9ff !important;
  --panel: #ffffff !important;
  --text: #173d63 !important;
  --muted: #2a5c90 !important;
  --accent: #2c76cb !important;
  --accent-2: #2a74b5 !important;
  --danger: #c74038 !important;
  --border: #d4e5f7 !important;
  --warning: #e0871f !important;
  --shadow: 0 16px 34px rgba(20, 63, 115, 0.12) !important;
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) .topbar {
  border: 1px solid #bdd8f0 !important;
  background: #f5faff !important;
  box-shadow: 0 18px 36px rgba(20, 63, 115, 0.12) !important;
}

body.theme-dark:not(.mobile-demo-mode) .topbar-actions {
  border: 1px solid #d4e5f7 !important;
  background: #eaf4fd !important;
}

body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-utility-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn,
body.theme-dark:not(.mobile-demo-mode) .topbar-user {
  border: 1px solid #bdd8f0 !important;
  background: #f5faff !important;
  color: #173d63 !important;
}

body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn.active,
body.theme-dark:not(.mobile-demo-mode) .topbar-nav-btn[aria-current="page"],
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn.active,
body.theme-dark:not(.mobile-demo-mode) .topbar-profile-btn[aria-current="page"] {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  color: #ffffff !important;
}

body.theme-dark:not(.mobile-demo-mode) button {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(44, 118, 203, 0.28) !important;
}

body.theme-dark:not(.mobile-demo-mode) button.ghost {
  border: 1px solid #bdd8f0 !important;
  background: #eaf4fd !important;
  color: #2a5c90 !important;
  box-shadow: none !important;
}

body.theme-dark:not(.mobile-demo-mode) button.danger {
  background: linear-gradient(135deg, #c74038 0%, #b3362f 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) input,
body.theme-dark:not(.mobile-demo-mode) select,
body.theme-dark:not(.mobile-demo-mode) textarea {
  border-color: #d4e5f7 !important;
  background: #f5faff !important;
  color: #173d63 !important;
}

body.theme-dark:not(.mobile-demo-mode) .panel,
body.theme-dark:not(.mobile-demo-mode) .stat-card,
body.theme-dark:not(.mobile-demo-mode) details.panel {
  border-color: #d4e5f7 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 12px 28px rgba(20, 63, 115, 0.1) !important;
}

body.theme-dark:not(.mobile-demo-mode) .table-wrap {
  border: 1px solid #d4e5f7 !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(234, 244, 253, 0.75) !important;
}

body.theme-dark:not(.mobile-demo-mode) thead th {
  background: #e8f1fb !important;
  color: #173d63 !important;
  border-bottom-color: #d4e5f7 !important;
}

body.theme-dark:not(.mobile-demo-mode) tbody tr:hover td {
  background: #f4f9ff !important;
}

/* Desktop home: make Chat/Parts/Reminders Notifications titles white */
body:not(.mobile-demo-mode) #homePage :is(#homeChatSection, #homePartsSection, #homeRemindersSection) .home-widget-head h3 {
  color: #ffffff !important;
}

/* Home widgets: align styling with stock widget theme */
body:not(.mobile-demo-mode) #homePage .home-dashboard-widget {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

body:not(.mobile-demo-mode) #homePage .home-dashboard-widget::before {
  display: none !important;
}

body:not(.mobile-demo-mode) #homePage .home-dashboard-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16) !important;
}

body:not(.mobile-demo-mode) #homePage .home-widget-head {
  margin: -1.1rem -1.1rem 1rem !important;
  padding: 0.95rem 1rem !important;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

body:not(.mobile-demo-mode) #homePage .home-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

body:not(.mobile-demo-mode) #homePage .home-widget-head h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

body:not(.mobile-demo-mode) #homePage .home-widget-actions {
  position: relative;
  z-index: 1;
}

body:not(.mobile-demo-mode) #homePage .home-widget-actions .ghost {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #homePage .home-widget-actions .ghost:hover {
  border-color: rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

body:not(.mobile-demo-mode) #homePage :is(
    #homeChatUnreadCount,
    #homePartsAlertCount,
    #homeRemindersCount,
    #homeTodayJobsCount
  ) {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body:not(.mobile-demo-mode) #homePage #homeChatSection {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homeChatSection .home-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homePartsSection {
  background: linear-gradient(180deg, #e8faf3 0%, #f2fcf8 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homePartsSection .home-widget-head {
  background: linear-gradient(135deg, #2b9b85 0%, #1c7f6c 100%) !important;
}

/* Desktop home page header (below nav): light blue */
body:not(.mobile-demo-mode) #homePage > .table-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #homePage > .table-head h2 {
  color: #ffffff !important;
}

/* Desktop customers page header (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #customersPage > .table-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 24px;
  overflow: hidden;
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

body:not(.mobile-demo-mode) #customersPage > .table-head::after {
  content: "";
  position: absolute;
  inset: auto -12% -48% auto;
  width: 180px;
  height: 180px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

body:not(.mobile-demo-mode) #customersPage > .table-head:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 40px rgba(44, 118, 203, 0.28) !important;
}

body:not(.mobile-demo-mode) #customersPage > .table-head h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

/* Desktop jobs page header (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #jobBackendPage > .table-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #jobBackendPage > .table-head h2 {
  color: #ffffff !important;
}

/* Desktop quote + invoice page headers (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #quotePage > .invoice-head,
body:not(.mobile-demo-mode) #invoicePage > .invoice-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #quotePage > .invoice-head h2,
body:not(.mobile-demo-mode) #invoicePage > .invoice-head h2 {
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #quotePage > .invoice-head .sub,
body:not(.mobile-demo-mode) #invoicePage > .invoice-head .sub {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Desktop email page header: match Invoice header color */
body:not(.mobile-demo-mode) #emailPage > .email-webmail-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #emailPage > .email-webmail-head h2 {
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #emailPage > .email-webmail-head .inline-count {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #emailPage > .email-webmail-head #emailComposeToggleBtn {
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body:not(.mobile-demo-mode) #emailPage > .email-webmail-head #emailComposeToggleBtn:hover {
  border-color: rgba(255, 255, 255, 0.38) !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

/* Desktop reports + chat page headers (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #reportsPage > .table-head,
body:not(.mobile-demo-mode) #messagesPage > .table-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #reportsPage > .table-head h2,
body:not(.mobile-demo-mode) #messagesPage > .table-head h2 {
  color: #ffffff !important;
}

/* Desktop stock page header (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #stockPage > .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 24px;
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #stockPage > .table-head h2 {
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

/* Desktop files page header (below nav): match Invoice header color */
body:not(.mobile-demo-mode) #filesPage > .files-page-head {
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #filesPage > .files-page-head h2 {
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

/* Desktop purchasing page header (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #purchasingPage > .purchasing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 24px;
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #purchasingPage > .purchasing-head h2 {
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #purchasingPage > .purchasing-head .sub {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Desktop settings page headers (below nav): match Parts Notifications color */
body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child,
body:not(.mobile-demo-mode) #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head,
body:not(.mobile-demo-mode) #settingsDataToolsPanel.settings-focus-panel-active > .table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.05rem 1.2rem;
  border-radius: 24px;
  border-color: #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
}

body:not(.mobile-demo-mode) #settingsPage > .panel > .table-head:first-child h2,
body:not(.mobile-demo-mode) #settingsPanel.settings-section-page > section.panel:not(.hidden) > .table-head h3,
body:not(.mobile-demo-mode) #settingsDataToolsPanel.settings-focus-panel-active > .table-head h2 {
  margin: 0;
  letter-spacing: 0.02em;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #homePage #homeRemindersSection {
  background: linear-gradient(180deg, #fff3e5 0%, #fff9f1 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homeRemindersSection .home-widget-head {
  background: linear-gradient(135deg, #d98827 0%, #bc6414 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homeTodayJobsSection {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%) !important;
}

body:not(.mobile-demo-mode) #homePage #homeTodayJobsSection .home-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%) !important;
}

/* Purchasing widgets: align with stock/home widget theme */
body:not(.mobile-demo-mode) #purchasingPage .purchasing-stats-grid {
  align-items: stretch;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  user-select: none;
  padding: 1rem 1.05rem 0.95rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-head {
  margin: -1rem -1.05rem 0.95rem !important;
  padding: 0.95rem 1rem !important;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-head h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Desktop chat readability: remove dark conversation background and improve incoming text contrast */
body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .messages-layout {
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%) !important;
  border-color: #d7e5f2 !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-conversation-panel {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(86, 165, 237, 0.08) 0%, rgba(86, 165, 237, 0) 46%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-conversation {
  background:
    radial-gradient(circle at 20% 20%, rgba(111, 179, 244, 0.05) 0%, rgba(111, 179, 244, 0) 24%),
    radial-gradient(circle at 80% 0%, rgba(138, 195, 247, 0.05) 0%, rgba(138, 195, 247, 0) 22%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color: #143552 !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-bubble.theirs {
  background: #ffffff !important;
  border-color: #d2e2f4 !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-bubble.theirs p {
  color: #143552 !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-bubble.theirs small {
  color: #5f7893 !important;
}

/* Desktop chat thread widget redesign: better visibility and interaction */
body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-threads-panel {
  gap: 0.72rem;
  border-right-color: #d5e4f2 !important;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(98, 162, 235, 0.14) 0%, rgba(98, 162, 235, 0) 42%),
    linear-gradient(180deg, #f9fcff 0%, #f0f6fd 100%) !important;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-threads-panel .table-head {
  margin: -1rem -1rem 0;
  padding: 0.9rem 1rem 0.78rem;
  border-bottom: 1px solid #dbe8f4;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(8px);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage #messageThreadSummary {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: #edf4ff;
  border: 1px solid #caddf3;
  color: #2a679d;
  font-weight: 700;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter {
  gap: 0.48rem;
  padding: 0.62rem;
  border-color: #caddf2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 9px 22px rgba(18, 58, 101, 0.08);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter input[type="search"] {
  min-height: 40px;
  padding: 0.52rem 0.68rem;
  border: 1px solid #cadef3;
  border-radius: 12px;
  background: #f8fbff;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter input[type="search"]:focus-visible {
  outline: 2px solid rgba(44, 118, 203, 0.34);
  outline-offset: 1px;
  border-color: #77a9de;
  background: #ffffff;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-unread-toggle {
  min-height: 40px;
  padding: 0.28rem 0.56rem;
  border-color: #cadef3;
  background: #f8fbff;
  color: #234a70;
  font-size: 0.76rem;
  font-weight: 700;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter .small {
  min-height: 40px;
  padding: 0.3rem 0.78rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-list {
  gap: 0.56rem;
  padding: 0.06rem 0.2rem 0.24rem 0.04rem;
  overscroll-behavior: contain;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-list > .sub {
  margin: 0;
  padding: 0.88rem 0.86rem;
  border-radius: 14px;
  border: 1px dashed #cadcf0;
  background: rgba(255, 255, 255, 0.78);
  color: #4f6f90;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #cfe0f1;
  border-radius: 18px;
  border-left: 1px solid #cfe0f1;
  padding: 0.86rem 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f6fafe 100%);
  box-shadow: 0 10px 22px rgba(18, 56, 97, 0.08);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 7px;
  width: 4px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.16s ease;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item:hover {
  border-color: #bfd6ec;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 14px 26px rgba(18, 56, 97, 0.12);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item:focus-visible {
  outline: 2px solid rgba(44, 118, 203, 0.36);
  outline-offset: 2px;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.active {
  border-color: #86b3e0;
  border-left-color: #86b3e0;
  background: linear-gradient(180deg, #ffffff 0%, #eaf3ff 100%);
  box-shadow: 0 16px 28px rgba(22, 74, 132, 0.14);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.active::before {
  background: linear-gradient(180deg, #2f7dce 0%, #155090 100%);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread {
  border-color: #7dabda;
  border-left-color: #7dabda;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread::before {
  background: linear-gradient(180deg, #2563eb 0%, #1f4fa7 100%);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread .message-thread-title {
  color: #0f4174;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-main {
  gap: 0.74rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-copy {
  gap: 0.24rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-top {
  align-items: flex-start;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-title {
  font-size: 0.92rem;
  color: #143552;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-time {
  font-size: 0.69rem;
  color: #5d7b99;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-preview-row {
  align-items: flex-start;
  gap: 0.36rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-preview {
  color: #4f6f90;
  font-size: 0.76rem;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.34;
  max-height: 2.7em;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread .message-thread-preview {
  color: #1f4f82;
  font-weight: 600;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-badges {
  margin-left: auto;
  align-self: flex-start;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-meta {
  color: #6d88a4;
  font-size: 0.69rem;
  font-weight: 700;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-context-pill {
  padding: 0.2rem 0.52rem;
  font-size: 0.6rem;
  font-weight: 800;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-pin-pill,
body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-mute-pill,
body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-unread-pill {
  padding: 0.16rem 0.42rem;
  font-size: 0.6rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-unread-pill {
  min-width: 1.4rem;
  background: #1f63d9;
  border-color: #1f59bc;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-threads-panel {
  border-right-color: #314a63 !important;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(72, 118, 168, 0.26) 0%, rgba(72, 118, 168, 0) 42%),
    linear-gradient(180deg, #102436 0%, #0e1f2f 100%) !important;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-threads-panel .table-head {
  border-bottom-color: #29445f;
  background: rgba(12, 32, 48, 0.76);
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage #messageThreadSummary {
  border-color: #2f4c68;
  background: #142d42;
  color: #d7eaff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter {
  border-color: #2f4c68;
  background: rgba(15, 34, 51, 0.88);
  box-shadow: 0 10px 22px rgba(2, 9, 16, 0.3);
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter input[type="search"] {
  border-color: #365673;
  background: #132d42;
  color: #e6f2ff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter input[type="search"]:focus-visible {
  border-color: #5e8ebf;
  background: #16344d;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-unread-toggle {
  border-color: #365673;
  background: #132d42;
  color: #d5e8fb;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-list > .sub {
  border-color: #32506c;
  background: rgba(16, 35, 56, 0.82);
  color: #adc3d7;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item {
  border-color: #2f4c67;
  background: linear-gradient(180deg, #132a41 0%, #102338 100%);
  box-shadow: 0 10px 20px rgba(2, 8, 16, 0.3);
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item:hover {
  border-color: #406283;
  background: linear-gradient(180deg, #163149 0%, #12283c 100%);
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.active {
  border-color: #4d76a1;
  border-left-color: #4d76a1;
  background: linear-gradient(180deg, #19374f 0%, #142c41 100%);
  box-shadow: 0 14px 24px rgba(2, 8, 16, 0.36);
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread {
  border-color: #5e87b2;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-title {
  color: #edf5ff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-time,
body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-meta {
  color: #a4bdd6;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-preview {
  color: #c4d7ea;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item.unread .message-thread-preview {
  color: #e5f2ff;
}

/* Desktop chat conversations widget refresh */
body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-threads-panel {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-filter {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.56rem;
  padding: 0.72rem;
  border-radius: 16px;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.48rem;
  align-items: center;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-search-row .small {
  min-height: 40px;
  padding: 0.34rem 0.9rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.38rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.42rem;
  min-height: 34px;
  padding: 0.28rem 0.52rem;
  border: 1px solid #cadef3;
  border-radius: 11px;
  background: #f7fbff;
  color: #275079;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn:hover {
  border-color: #a8c9e8;
  background: #edf5ff;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn:focus-visible {
  outline: 2px solid rgba(43, 118, 203, 0.32);
  outline-offset: 1px;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn.is-active {
  border-color: #3d82d0;
  background: linear-gradient(180deg, #2f78c8 0%, #2362ac 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(22, 74, 132, 0.2);
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.1rem 0.32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1c4f84;
  font-size: 0.65rem;
  line-height: 1;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn.is-active .message-thread-mode-count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-list {
  gap: 0.6rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-item {
  padding: 0.86rem 0.94rem 0.8rem;
  border-radius: 16px;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-title {
  font-size: 0.95rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-preview {
  font-size: 0.77rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.14rem;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn {
  min-height: 24px;
  padding: 0.12rem 0.46rem;
  border: 1px solid #cadef3;
  border-radius: 8px;
  background: #ffffff;
  color: #275079;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn:hover {
  border-color: #9ebfe0;
  background: #edf5ff;
}

body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn.active {
  border-color: #3b7ecb;
  background: #2c74c5;
  color: #ffffff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn {
  border-color: #345571;
  background: #142f45;
  color: #d7e8fb;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn:hover {
  border-color: #486f93;
  background: #193750;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn.is-active {
  border-color: #5f8fbe;
  background: linear-gradient(180deg, #3a72a5 0%, #2b5d8a 100%);
  color: #ffffff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-count {
  background: rgba(8, 22, 36, 0.54);
  color: #cfe3f7;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-btn.is-active .message-thread-mode-count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn {
  border-color: #355673;
  background: #132d43;
  color: #d2e6fa;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn:hover {
  border-color: #4f7598;
  background: #18354d;
}

body.theme-dark:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-action-btn.active {
  border-color: #5f8fbe;
  background: #2f5f8b;
  color: #ffffff;
}

@media (max-width: 1340px) {
  body:not(.mobile-chat-view):not(.mobile-demo-mode) #messagesPage .message-thread-mode-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-inline {
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-stat-card p {
  margin: 0.1rem 0 0;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-meta {
  margin-top: 0.32rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f6a87;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open .purchasing-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open p {
  color: #0f4a82;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting {
  background: linear-gradient(180deg, #e8faf3 0%, #f2fcf8 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting .purchasing-widget-head {
  background: linear-gradient(135deg, #2b9b85 0%, #1c7f6c 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting p {
  color: #136b5a;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting .purchasing-widget-meta {
  color: #2d685f;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice {
  background: linear-gradient(180deg, #fff3e5 0%, #fff9f1 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice .purchasing-widget-head {
  background: linear-gradient(135deg, #d98827 0%, #bc6414 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice p {
  color: #95561c;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice .purchasing-widget-meta {
  color: #7e5e37;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low {
  background: linear-gradient(180deg, #e7f2ff 0%, #f5faff 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low .purchasing-widget-head {
  background: linear-gradient(135deg, #235f95 0%, #1a4c78 100%);
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low p {
  color: #133f6d;
}

body:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low .purchasing-widget-meta {
  color: #4f6a87;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-stat-card {
  box-shadow: 0 16px 28px rgba(2, 8, 20, 0.28) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-stat-card:hover {
  box-shadow: 0 22px 36px rgba(2, 8, 20, 0.34) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open .purchasing-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting {
  background: linear-gradient(180deg, #0f251f 0%, #10211d 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting .purchasing-widget-head {
  background: linear-gradient(135deg, #227560 0%, #1f9779 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice {
  background: linear-gradient(180deg, #2b2217 0%, #22180f 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice .purchasing-widget-head {
  background: linear-gradient(135deg, #9a6213 0%, #c77718 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low {
  background: linear-gradient(180deg, #122438 0%, #0f1f30 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low .purchasing-widget-head {
  background: linear-gradient(135deg, #1d4f7f 0%, #1f659f 100%) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-inline {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-open p {
  color: #d7ebff !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting p {
  color: #c6f7ea !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice p {
  color: #ffd9a6 !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-low p {
  color: #d7ebff !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-meta {
  color: #a9c1db !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-awaiting .purchasing-widget-meta {
  color: #97d1c6 !important;
}

body.theme-dark:not(.mobile-demo-mode) #purchasingPage .purchasing-widget-card-invoice .purchasing-widget-meta {
  color: #d8b88b !important;
}

/* Quote line items: fit page width without horizontal scrolling on desktop */
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection .table-wrap {
  overflow-x: hidden;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th,
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  padding: 0.36rem 0.28rem;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th {
  font-size: 0.68rem;
  line-height: 1.18;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td {
  font-size: 0.74rem;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td input,
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td select,
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td textarea {
  width: 100%;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.34rem 0.42rem;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection .invoice-inline-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.26rem;
  align-items: stretch;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td .status-pill {
  font-size: 0.62rem;
  line-height: 1.15;
  padding: 0.18rem 0.34rem;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(1),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(1) {
  width: 31%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(2),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(2) {
  width: 5%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(3),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(3) {
  width: 6%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(4),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(4),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(5),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(5) {
  width: 7%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(6),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(6),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(7),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(7) {
  width: 4%;
  text-align: center;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(8),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(8) {
  width: 8%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(9),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(9) {
  width: 8%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(10),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(10) {
  width: 14%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection th:nth-child(11),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(11) {
  width: 6%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td:nth-child(11) .small {
  min-height: 28px;
  padding: 0.24rem 0.34rem;
  font-size: 0.66rem;
  width: 100%;
}

/* Invoice line items: fit page width without horizontal scrolling on desktop */
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection .table-wrap {
  overflow-x: hidden !important;
  max-width: 100%;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection table {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th,
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  padding: 0.36rem 0.28rem;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th {
  font-size: 0.68rem;
  line-height: 1.18;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td {
  font-size: 0.74rem;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td input,
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td select,
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td textarea {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  font-size: 0.72rem;
  padding: 0.34rem 0.42rem;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection .invoice-inline-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.26rem;
  align-items: stretch;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(1),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(1) {
  width: 48%;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(2),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(2),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(3),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(3),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(4),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(4),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(5),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(5) {
  width: 8%;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(6),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(6) {
  width: 12%;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection th:nth-child(7),
body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(7) {
  width: 8%;
}

body:not(.mobile-demo-mode) #invoicePage #invoiceLineItemsSection td:nth-child(7) .small {
  min-height: 28px;
  padding: 0.24rem 0.34rem;
  font-size: 0.66rem;
  width: 100%;
}

/* Reinforce quote line-items overflow handling */
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection .table-wrap {
  overflow-x: hidden !important;
  max-width: 100%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection table {
  min-width: 0 !important;
  max-width: 100%;
}

body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td :is(input, select, textarea, button, .status-pill),
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td .sub,
body:not(.mobile-demo-mode) #quotePage #quoteLineItemsSection td .asset-image-thumb {
  max-width: 100%;
}

/* Job editor action accents */
#jobBackendCreateInvoiceBtn {
  border-color: #0d5fa5 !important;
  background: linear-gradient(135deg, #1f7dcf 0%, #1568b1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(21, 104, 177, 0.28) !important;
}

#jobBackendCreateInvoiceBtn:hover {
  border-color: #0b4f8a !important;
  background: linear-gradient(135deg, #1a70bb 0%, #125a97 100%) !important;
  color: #ffffff !important;
}

#jobBackendFreeOfChargeBtn {
  border-color: #b36a0d !important;
  background: linear-gradient(135deg, #d9922f 0%, #c77a16 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(183, 109, 16, 0.24) !important;
}

#jobBackendFreeOfChargeBtn:hover {
  border-color: #995a09 !important;
  background: linear-gradient(135deg, #c7811f 0%, #af6910 100%) !important;
  color: #ffffff !important;
}

#jobBackendCreateInvoiceBtn:disabled,
#jobBackendFreeOfChargeBtn:disabled {
  opacity: 0.58 !important;
  box-shadow: none !important;
}

#jobBackendPlannerEventStatus.status-past {
  border-color: #d93a3a !important;
  background: #ffe4e4 !important;
  color: #b91c1c !important;
}

/* Platform page: interactive workspace refresh */
#platformPage {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  background:
    radial-gradient(130% 140% at -10% -20%, rgba(31, 124, 207, 0.12) 0%, transparent 64%),
    radial-gradient(120% 130% at 110% -18%, rgba(42, 102, 199, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

#platformPage > .table-head {
  align-items: center;
  margin-bottom: 0.15rem;
}

#platformPage > .sub {
  margin-top: -0.2rem;
  margin-bottom: 0.1rem;
}

#platformPage > section.panel {
  scroll-margin-top: 90px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border) 88%);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

#platformPage > section.panel > .table-head {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, #ffffff 16%);
  padding-bottom: 0.45rem;
  margin-bottom: 0.7rem;
}

#platformPage > section.platform-collapsible:not(.is-open) > .table-head {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0.2rem;
}

#platformPage > section.platform-collapsible:not(.is-open) > :not(.table-head) {
  display: none !important;
}

#platformPage > section.panel > .table-head h3 {
  letter-spacing: 0.01em;
}

#platformPage .platform-head-actions {
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
}

#platformPage .platform-collapse-toggle {
  min-height: 30px;
  padding: 0.26rem 0.62rem;
  border-radius: 999px;
  font-size: 0.74rem;
}

#platformPage .grid-form {
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border) 90%);
  border-radius: 14px;
  background: linear-gradient(180deg, #fefeff 0%, #f7faff 100%);
}

#platformPage .table-wrap {
  border-radius: 12px;
}

#platformPage .platform-hero-panel {
  display: grid;
  gap: 0.85rem;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(31, 124, 207, 0.1) 0%, transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(42, 102, 199, 0.08) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}

.platform-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
}

#platformPage .platform-kpi-card {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  border-radius: 14px;
  background: linear-gradient(160deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow: 0 10px 20px rgba(23, 56, 96, 0.12);
  padding: 0.78rem 0.82rem;
  min-height: 108px;
  color: #15375f;
}

#platformPage .platform-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(24, 61, 105, 0.18);
}

#platformPage .platform-kpi-card[data-tone="customers"] {
  background: linear-gradient(160deg, #f2f9ff 0%, #e2f1ff 100%);
}

#platformPage .platform-kpi-card[data-tone="plans"] {
  background: linear-gradient(160deg, #f4f6ff 0%, #e8ecff 100%);
}

#platformPage .platform-kpi-card[data-tone="billing"] {
  background: linear-gradient(160deg, #f7f9ff 0%, #eaf1ff 100%);
}

#platformPage .platform-kpi-card[data-tone="updates"] {
  background: linear-gradient(160deg, #f3faff 0%, #e1f4ff 100%);
}

#platformPage .platform-kpi-label {
  font-size: 0.77rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4b6383;
  font-weight: 800;
}

#platformPage .platform-kpi-card strong {
  font-size: 1.22rem;
  line-height: 1.15;
  color: #123a64;
  font-weight: 850;
}

#platformPage .platform-kpi-card small {
  font-size: 0.76rem;
  color: #506b8e;
  font-weight: 700;
}

#platformPage .platform-jump-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  border-top: 1px dashed color-mix(in srgb, var(--border) 82%, #ffffff 18%);
  padding-top: 0.62rem;
}

#platformPage .platform-jump-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4f6481;
  margin-right: 0.25rem;
}

#platformPage .platform-jump-btn {
  min-height: 30px;
  padding: 0.28rem 0.62rem;
  font-size: 0.74rem;
  border-radius: 999px;
}

#platformPage .platform-section-focus {
  animation: platformSectionPulse 1.15s ease;
}

@keyframes platformSectionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 124, 207, 0.36);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(31, 124, 207, 0);
  }
}

body.theme-dark #platformPage {
  border-color: #2a4363;
  background:
    radial-gradient(130% 140% at -10% -20%, rgba(56, 189, 248, 0.1) 0%, transparent 66%),
    radial-gradient(120% 130% at 110% -18%, rgba(59, 130, 246, 0.08) 0%, transparent 66%),
    linear-gradient(180deg, #0f1a2d 0%, #101c31 100%);
}

body.theme-dark #platformPage > section.panel {
  border-color: #2a3f5a;
  background: linear-gradient(180deg, #101c31 0%, #0f1a2d 100%);
}

body.theme-dark #platformPage > section.panel > .table-head {
  border-bottom-color: #2a3f5a;
}

body.theme-dark #platformPage .grid-form {
  background: linear-gradient(180deg, #0f1a2d 0%, #0f1d33 100%);
  border-color: #304765;
}

body.theme-dark #platformPage .platform-kpi-card {
  border-color: #365171;
  color: #dbeafe;
  background: linear-gradient(160deg, #142742 0%, #13243d 100%);
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.38);
}

body.theme-dark #platformPage .platform-kpi-card strong {
  color: #ebf4ff;
}

body.theme-dark #platformPage .platform-kpi-label,
body.theme-dark #platformPage .platform-kpi-card small,
body.theme-dark #platformPage .platform-jump-label {
  color: #a8bdd8;
}

@media (max-width: 1200px) {
  .platform-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #platformPage {
    border-radius: 14px;
    padding: 0.8rem;
  }

  .platform-kpi-grid {
    grid-template-columns: 1fr;
  }

  #platformPage .platform-kpi-card {
    min-height: 94px;
  }
}

/* Keep auth mode links as plain text (no blue button background) */
body:not(.mobile-demo-mode) .login-card button.text-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body:not(.mobile-demo-mode) .login-card button.text-button:hover,
body:not(.mobile-demo-mode) .login-card button.text-button:active,
body:not(.mobile-demo-mode) .login-card button.text-button:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  color: var(--accent-2) !important;
}

/* Planner status key labels: force readable text in planner header */
body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head .planner-status-key-item {
  color: #1a4f82 !important;
}

body:not(.mobile-demo-mode):not(.theme-dark) .home-planner-board-head .planner-status-key-item span:not(.planner-status-swatch) {
  color: #1a4f82 !important;
}

/* Chat widget: click header bar to expand/collapse */
#homeChatHead {
  cursor: pointer;
}

#homeChatHead .home-widget-actions button {
  cursor: pointer;
}

#homePartsHead,
#homeRemindersHead {
  cursor: pointer;
}

#homePartsHead .home-widget-actions button,
#homeRemindersHead .home-widget-actions button {
  cursor: pointer;
}

/* Force-fit planner to viewport when Quick Book is open on desktop */
@media (min-width: 1181px) {
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-board {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homePlannerTableWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homePlannerTableWrap table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #weeklyPlannerHeadRow th,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #weeklyPlannerBody .planner-cell {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #weeklyPlannerHeadRow th:first-child,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #weeklyPlannerBody td:first-child {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    overflow: hidden !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-row-user,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-day-head {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-row-user strong,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-row-user span,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-day-head strong,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-day-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-day-head strong,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-user-head strong,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-row-user strong {
    font-size: 0.72rem;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-day-head span,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-user-head span,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .home-planner-row-user span {
    font-size: 0.63rem;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .planner-job {
    padding: 0.28rem 0.34rem 0.28rem 0.38rem;
    font-size: 0.72rem;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) .planner-job-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Daily planner: compact to fit when Quick Book is open */
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-daily-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-daily-planner-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-daily-time-cell,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-daily-planner-table thead th:first-child {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-daily-planner-table .planner-cell {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-planner-user-head {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-planner-user-head strong,
  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-planner-user-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-planner-user-head strong {
    font-size: 0.7rem;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .home-planner-user-head span {
    display: none;
  }

  #homePlannerSection .home-planner-shell:not(.quick-book-collapsed) #homeDailyPlanner .planner-time-event-marker {
    font-size: 0.7rem;
    padding: 0.16rem 0.24rem 0.16rem 0.28rem;
  }

  /* Keep equal user-lane spacing in normal planner view (Quick Book collapsed) */
  #homePlannerSection .home-planner-shell.quick-book-collapsed #homePlannerTableWrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #homePlannerTableWrap table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #weeklyPlannerHeadRow th,
  #homePlannerSection .home-planner-shell.quick-book-collapsed #weeklyPlannerBody .planner-cell {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #weeklyPlannerHeadRow th:first-child,
  #homePlannerSection .home-planner-shell.quick-book-collapsed #weeklyPlannerBody td:first-child {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    overflow: hidden !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #homeDailyPlanner .home-daily-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #homeDailyPlanner .home-daily-planner-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #homeDailyPlanner .home-daily-time-cell,
  #homePlannerSection .home-planner-shell.quick-book-collapsed #homeDailyPlanner .home-daily-planner-table thead th:first-child {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #homePlannerSection .home-planner-shell.quick-book-collapsed #homeDailyPlanner .home-daily-planner-table .planner-cell {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Van tracking */
.van-tracking-page {
  display: grid;
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid #bfd8f4;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(94, 162, 231, 0.16) 0%, rgba(94, 162, 231, 0) 46%),
    linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
}

.van-tracking-page > .table-head {
  margin: -0.85rem -0.85rem 0;
  padding: 0.95rem 1rem;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
  box-shadow: 0 12px 26px rgba(23, 66, 108, 0.18);
}

.van-tracking-page > .table-head h2,
.van-tracking-page > .table-head .inline-actions button {
  color: #ffffff;
}

.van-tracking-page > .table-head .ghost {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
}

.van-tracking-page > .table-head .ghost:hover {
  background: rgba(255, 255, 255, 0.24);
}

#vanTrackingStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 38px;
  padding: 0.38rem 0.7rem;
  border: 1px solid #c5dcf4;
  border-radius: 999px;
  background: #f5faff;
  color: #26537f;
  font-weight: 700;
}

#vanTrackingStatus::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #7ea5cc;
  box-shadow: 0 0 0 4px rgba(126, 165, 204, 0.2);
}

#vanTrackingStatus[data-state="ok"]::before {
  background: #23956a;
  box-shadow: 0 0 0 4px rgba(35, 149, 106, 0.2);
}

#vanTrackingStatus[data-state="loading"]::before {
  background: #2d74bc;
  box-shadow: 0 0 0 4px rgba(45, 116, 188, 0.2);
}

#vanTrackingStatus[data-state="error"]::before {
  background: #b94a4a;
  box-shadow: 0 0 0 4px rgba(185, 74, 74, 0.2);
}

.van-tracking-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.van-tracking-quick-filters .small {
  min-height: 34px;
  border-radius: 999px;
  border-color: #c4dbf4;
  background: #f3f9ff;
  color: #275c92;
  font-weight: 700;
}

.van-tracking-quick-filters .small:hover {
  border-color: #9ec5ea;
  background: #e9f3ff;
}

.van-tracking-quick-filters .small.is-active {
  border-color: #2f76c3;
  background: linear-gradient(180deg, #2f76c3 0%, #205f9f 100%);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(32, 95, 159, 0.24);
}

.van-tracking-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: stretch;
}

#vanTrackingPage .stock-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 1rem 1.05rem 0.95rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

#vanTrackingPage .stock-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 24px;
  pointer-events: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

#vanTrackingPage .stock-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16);
}

#vanTrackingPage .stock-widget-head {
  margin: -1rem -1.05rem 0.95rem;
  padding: 0.95rem 1rem;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

#vanTrackingPage .stock-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

#vanTrackingPage .stock-widget-head h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

#vanTrackingPage .stock-widget-inline {
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

#vanTrackingPage .stock-stat-card p {
  margin: 0.1rem 0 0;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#vanTrackingPage .stock-widget-meta {
  margin-top: 0.32rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f6a87;
}

#vanTrackingPage .van-tracking-widget-card-active {
  background: linear-gradient(180deg, #e1edff 0%, #eef5ff 22%, #f8fbff 100%);
}

#vanTrackingPage .van-tracking-widget-card-active .stock-widget-head {
  background: linear-gradient(135deg, #143f6a 0%, #2a74b5 100%);
}

#vanTrackingPage .van-tracking-widget-card-active p {
  color: #0f4a82;
}

#vanTrackingPage .van-tracking-widget-card-moving {
  background: linear-gradient(180deg, #e8faf3 0%, #f2fcf8 100%);
}

#vanTrackingPage .van-tracking-widget-card-moving .stock-widget-head {
  background: linear-gradient(135deg, #2b9b85 0%, #1c7f6c 100%);
}

#vanTrackingPage .van-tracking-widget-card-moving p {
  color: #136b5a;
}

#vanTrackingPage .van-tracking-widget-card-moving .stock-widget-meta {
  color: #2d685f;
}

#vanTrackingPage .van-tracking-widget-card-offline {
  background: linear-gradient(180deg, #fff3e5 0%, #fff9f1 100%);
}

#vanTrackingPage .van-tracking-widget-card-offline .stock-widget-head {
  background: linear-gradient(135deg, #d98827 0%, #bc6414 100%);
}

#vanTrackingPage .van-tracking-widget-card-offline p {
  color: #95561c;
}

#vanTrackingPage .van-tracking-widget-card-offline .stock-widget-meta {
  color: #7e5e37;
}

#vanTrackingPage .van-tracking-widget-card-alerts {
  background: linear-gradient(180deg, #fff3f3 0%, #fff8f8 100%);
}

#vanTrackingPage .van-tracking-widget-card-alerts .stock-widget-head {
  background: linear-gradient(135deg, #c95a5a 0%, #a53f3f 100%);
}

#vanTrackingPage .van-tracking-widget-card-alerts p {
  color: #8f3b3b;
}

#vanTrackingPage .van-tracking-widget-card-alerts .stock-widget-meta {
  color: #805454;
}

#vanTrackingPage .stock-stat-card.is-focus {
  transform: translateY(-3px);
  filter: saturate(1.05);
}

#vanTrackingPage .van-tracking-widget-card-active.is-focus::after {
  border-color: rgba(34, 108, 183, 0.52);
}

#vanTrackingPage .van-tracking-widget-card-moving.is-focus::after {
  border-color: rgba(24, 135, 110, 0.56);
}

#vanTrackingPage .van-tracking-widget-card-offline.is-focus::after {
  border-color: rgba(207, 123, 37, 0.58);
}

#vanTrackingPage .van-tracking-widget-card-alerts.is-focus::after {
  border-color: rgba(185, 74, 74, 0.58);
}

#vanTrackingPage .stock-stat-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
}

#vanTrackingPage .stock-stat-card:focus-visible::after {
  border-color: rgba(44, 118, 203, 0.58);
}

.van-tracking-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
}

.van-tracking-filter-form {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0.5rem;
}

.van-tracking-filter-form .check-inline {
  align-self: end;
  min-height: 40px;
}

.van-tracking-map-panel {
  gap: 0.75rem;
  border: 1px solid #c6dcf5;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.van-tracking-map-controls {
  align-items: end;
  gap: 0.5rem;
}

.van-tracking-map-controls label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.74rem;
  color: #5f7893;
}

.van-tracking-map-frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid #cfe2f4;
  border-radius: 16px;
  background: #edf4fc;
}

#vanTrackingMapMeta {
  padding: 0.45rem 0.62rem;
  border: 1px solid #d2e4f6;
  border-radius: 10px;
  background: #f7fbff;
}

#vanTrackingMapMeta[data-status="moving"] {
  border-color: #b8dfc7;
  background: #effaf3;
  color: #246348;
}

#vanTrackingMapMeta[data-status="offline"],
#vanTrackingMapMeta[data-status="inactive"] {
  border-color: #e6c4c4;
  background: #fef4f4;
  color: #8b4141;
}

#vanTrackingMapMeta[data-status="idling"] {
  border-color: #edd8b6;
  background: #fff8ed;
  color: #8a6328;
}

.van-tracking-map-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.van-tracking-map-locations .small {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.van-tracking-map-locations .small.is-active {
  border-color: #2f76c3;
  background: #2f76c3;
  color: #ffffff;
}

.van-tracking-events-filters {
  display: flex;
  align-items: end;
  gap: 0.55rem;
}

.van-tracking-events-filters label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.74rem;
  color: #5f7893;
}

#vanTrackingDeviceTableBody td strong {
  display: block;
}

#vanTrackingDeviceTableBody td small {
  color: #6f869f;
  font-size: 0.69rem;
}

#vanTrackingDeviceTableBody tr {
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
  cursor: pointer;
}

#vanTrackingDeviceTableBody tr:hover td {
  background: #edf5ff;
}

#vanTrackingDeviceTableBody tr.is-map-selected td {
  background: #ecf6ff;
}

#vanTrackingDeviceTableBody tr.is-event-selected td {
  box-shadow: inset 3px 0 0 #2f76c3;
}

#vanTrackingDeviceTableBody tr.is-map-selected.is-event-selected td {
  background: #e4f1ff;
}

#vanTrackingEventTableBody tr:hover td {
  background: #f2f8ff;
}

body.theme-dark #vanTrackingPage .stock-stat-card {
  box-shadow: 0 16px 28px rgba(2, 8, 20, 0.28);
}

body.theme-dark #vanTrackingPage .stock-stat-card:hover {
  box-shadow: 0 22px 36px rgba(2, 8, 20, 0.34);
}

body.theme-dark #vanTrackingPage .stock-widget-inline {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-active {
  background: linear-gradient(180deg, #102235 0%, #0f1c2c 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-active .stock-widget-head {
  background: linear-gradient(135deg, #17314d 0%, #24639b 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-active p {
  color: #d7ebff;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-active .stock-widget-meta {
  color: #a9c1db;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-moving {
  background: linear-gradient(180deg, #0f251f 0%, #10211d 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-moving .stock-widget-head {
  background: linear-gradient(135deg, #227560 0%, #1f9779 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-moving p {
  color: #c6f7ea;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-moving .stock-widget-meta {
  color: #97d1c6;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-offline {
  background: linear-gradient(180deg, #2b2217 0%, #22180f 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-offline .stock-widget-head {
  background: linear-gradient(135deg, #9a6213 0%, #c77718 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-offline p {
  color: #ffd9a6;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-offline .stock-widget-meta {
  color: #d8b88b;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-alerts {
  background: linear-gradient(180deg, #2b1b1b 0%, #241616 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-alerts .stock-widget-head {
  background: linear-gradient(135deg, #944242 0%, #bb5757 100%);
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-alerts p {
  color: #ffd1d1;
}

body.theme-dark #vanTrackingPage .van-tracking-widget-card-alerts .stock-widget-meta {
  color: #d8a8a8;
}

body.theme-dark .van-tracking-map-frame {
  border-color: #35526f;
  background: #10263a;
}

body.theme-dark .van-tracking-map-controls label {
  color: #aecdde;
}

body.theme-dark .van-tracking-page {
  border-color: #2f4968;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(71, 143, 223, 0.24) 0%, rgba(71, 143, 223, 0) 46%),
    linear-gradient(180deg, #102338 0%, #0f2236 100%);
}

body.theme-dark .van-tracking-page > .table-head {
  background: linear-gradient(135deg, #163958 0%, #245f96 100%);
}

body.theme-dark #vanTrackingStatus {
  border-color: #35526f;
  background: #132b42;
  color: #d7eaff;
}

body.theme-dark .van-tracking-quick-filters .small {
  border-color: #35526f;
  background: #132d42;
  color: #d7eaff;
}

body.theme-dark .van-tracking-quick-filters .small:hover {
  border-color: #4a7093;
  background: #173751;
}

body.theme-dark .van-tracking-quick-filters .small.is-active {
  border-color: #6ca5dd;
  background: linear-gradient(180deg, #2f5f8b 0%, #264f73 100%);
}

body.theme-dark .van-tracking-map-panel {
  border-color: #2f4968;
  background: #11273f;
}

body.theme-dark #vanTrackingMapMeta {
  border-color: #35526f;
  background: #132b42;
  color: #d7eaff;
}

body.theme-dark #vanTrackingMapMeta[data-status="moving"] {
  border-color: #376a55;
  background: #142f29;
  color: #cff3df;
}

body.theme-dark #vanTrackingMapMeta[data-status="offline"],
body.theme-dark #vanTrackingMapMeta[data-status="inactive"] {
  border-color: #6f4a4a;
  background: #321f1f;
  color: #ffd6d6;
}

body.theme-dark #vanTrackingMapMeta[data-status="idling"] {
  border-color: #6a573c;
  background: #2d241a;
  color: #f8e1bf;
}

body.theme-dark .van-tracking-map-locations .small.is-active {
  border-color: #6ca5dd;
  background: #2f5f8b;
  color: #ffffff;
}

body.theme-dark #vanTrackingDeviceTableBody tr:hover td {
  background: #163149;
}

body.theme-dark #vanTrackingDeviceTableBody tr.is-map-selected td {
  background: #14344d;
}

body.theme-dark #vanTrackingDeviceTableBody tr.is-event-selected td {
  box-shadow: inset 3px 0 0 #6ca5dd;
}

body.theme-dark #vanTrackingDeviceTableBody tr.is-map-selected.is-event-selected td {
  background: #173a55;
}

body.theme-dark #vanTrackingEventTableBody tr:hover td {
  background: #133149;
}

@media (max-width: 980px) {
  .van-tracking-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .van-tracking-map-controls {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .van-tracking-map-frame {
    min-height: 340px;
  }
}

/* Planner fit: keep job info constrained to each user's lane width */
#homePlannerSection #weeklyPlannerBody .planner-cell,
#homeDailyPlanner .home-daily-planner-table .planner-cell {
  overflow: hidden;
}

#homePlannerSection #weeklyPlannerBody .planner-jobs,
#homeDailyPlanner .home-daily-planner-table .planner-jobs {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#homePlannerSection #weeklyPlannerBody .planner-booked-entry-row,
#homeDailyPlanner .planner-booked-entry-row-daily {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: stretch;
}

#homePlannerSection #weeklyPlannerBody .planner-booked-entry-row > .planner-job,
#homeDailyPlanner .planner-booked-entry-row-daily > .planner-time-event-marker {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
}

#homePlannerSection #weeklyPlannerBody .planner-job,
#homeDailyPlanner .planner-time-event-marker {
  max-width: 100%;
  overflow: hidden;
}

#homePlannerSection #weeklyPlannerBody .planner-job-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  word-break: break-word;
}

#homeDailyPlanner .planner-time-event-marker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.28rem;
}

#homeDailyPlanner .planner-time-event-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homePlannerSection .planner-booked-entry-row .planner-quick-book-back-btn,
#homeDailyPlanner .planner-booked-entry-row .planner-quick-book-back-btn {
  min-width: 44px;
  padding-inline: 0.38rem;
  font-size: 0.66rem;
}

/* Final override: Customers header should match Stock interactive style */
body:not(.mobile-demo-mode) #customersPage > .table-head.customers-stock-head {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  padding: 1.05rem 1.2rem !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  border: 1px solid #2c76cb !important;
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%) !important;
  box-shadow: 0 18px 34px rgba(44, 118, 203, 0.25) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

body:not(.mobile-demo-mode) #customersPage > .table-head.customers-stock-head::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -12% -48% auto !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 34px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)) !important;
  transform: rotate(14deg) !important;
  pointer-events: none !important;
}

body:not(.mobile-demo-mode) #customersPage > .table-head.customers-stock-head:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 24px 40px rgba(44, 118, 203, 0.28) !important;
}

body:not(.mobile-demo-mode) #customersPage > .table-head.customers-stock-head h2 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.42rem !important;
  letter-spacing: 0.02em !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

body:not(.mobile-demo-mode) #customersPage > .table-head.customers-stock-head .customers-head-inline {
  margin-left: 0.2rem !important;
}

#customersPage .customer-stats-grid {
  margin-bottom: 1rem;
  align-items: stretch;
}

#customersPage .stock-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 1rem 1.05rem 0.95rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

#customersPage .stock-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 24px;
  pointer-events: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

#customersPage .stock-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16);
}

#customersPage .stock-widget-head {
  margin: -1rem -1.05rem 0.95rem;
  padding: 0.95rem 1rem;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

#customersPage .stock-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

#customersPage .stock-widget-head h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

#customersPage .stock-widget-inline {
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

#customersPage .stock-stat-card p {
  margin: 0.1rem 0 0;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#customersPage .stock-widget-meta {
  margin-top: auto;
  color: #4b5f7d;
  font-size: 0.79rem;
  font-weight: 600;
}

#customersPage .customer-widget-card-total {
  background: linear-gradient(180deg, #f4f8ff 0%, #e8f0ff 100%);
}

#customersPage .customer-widget-card-total .stock-widget-head {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
}

#customersPage .customer-widget-card-portal {
  background: linear-gradient(180deg, #eefaf7 0%, #e0f3ee 100%);
}

#customersPage .customer-widget-card-portal .stock-widget-head {
  background: linear-gradient(135deg, #1f9b7a 0%, #167761 100%);
}

#customersPage .customer-widget-card-reminders {
  background: linear-gradient(180deg, #fff6ea 0%, #ffebd1 100%);
}

#customersPage .customer-widget-card-reminders .stock-widget-head {
  background: linear-gradient(135deg, #d47b1f 0%, #ad5f11 100%);
}

#customersPage .stock-stat-card.is-active::after {
  border-color: rgba(26, 77, 138, 0.42);
  box-shadow: inset 0 0 0 1px rgba(26, 77, 138, 0.16);
}

#jobBackendPage .jobs-stats-grid,
#invoicePage .invoice-stats-grid,
#quotePage .quote-stats-grid {
  margin-bottom: 1rem;
  align-items: stretch;
}

#jobBackendPage .stock-stat-card,
#invoicePage .stock-stat-card,
#quotePage .stock-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  padding: 1rem 1.05rem 0.95rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(24, 54, 94, 0.12);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

#jobBackendPage .stock-stat-card::after,
#invoicePage .stock-stat-card::after,
#quotePage .stock-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 24px;
  pointer-events: none;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

#jobBackendPage .stock-stat-card:hover,
#invoicePage .stock-stat-card:hover,
#quotePage .stock-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px rgba(24, 54, 94, 0.16);
}

#jobBackendPage .stock-widget-head,
#invoicePage .stock-widget-head,
#quotePage .stock-widget-head {
  margin: -1rem -1.05rem 0.95rem;
  padding: 0.95rem 1rem;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  align-items: center;
}

#jobBackendPage .stock-widget-head::after,
#invoicePage .stock-widget-head::after,
#quotePage .stock-widget-head::after {
  content: "";
  position: absolute;
  inset: auto -16% -52% auto;
  width: 150px;
  height: 150px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(14deg);
  pointer-events: none;
}

#jobBackendPage .stock-widget-head h3,
#invoicePage .stock-widget-head h3,
#quotePage .stock-widget-head h3 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

#jobBackendPage .stock-widget-inline,
#invoicePage .stock-widget-inline,
#quotePage .stock-widget-inline {
  margin-left: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

#jobBackendPage .stock-stat-card p,
#invoicePage .stock-stat-card p,
#quotePage .stock-stat-card p {
  margin: 0.1rem 0 0;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#jobBackendPage .stock-widget-meta,
#invoicePage .stock-widget-meta,
#quotePage .stock-widget-meta {
  margin-top: auto;
  color: #4b5f7d;
  font-size: 0.79rem;
  font-weight: 600;
}

#jobBackendPage .jobs-widget-card-current {
  background: linear-gradient(180deg, #f4f8ff 0%, #e8f0ff 100%);
}
#jobBackendPage .jobs-widget-card-current .stock-widget-head {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
}
#jobBackendPage .jobs-widget-card-ongoing {
  background: linear-gradient(180deg, #eefaf7 0%, #e0f3ee 100%);
}
#jobBackendPage .jobs-widget-card-ongoing .stock-widget-head {
  background: linear-gradient(135deg, #1f9b7a 0%, #167761 100%);
}
#jobBackendPage .jobs-widget-card-completed {
  background: linear-gradient(180deg, #fff6ea 0%, #ffebd1 100%);
}
#jobBackendPage .jobs-widget-card-completed .stock-widget-head {
  background: linear-gradient(135deg, #d47b1f 0%, #ad5f11 100%);
}

#quotePage .quote-widget-card-draft {
  background: linear-gradient(180deg, #f4f8ff 0%, #e8f0ff 100%);
}
#quotePage .quote-widget-card-draft .stock-widget-head {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
}
#quotePage .quote-widget-card-sent {
  background: linear-gradient(180deg, #eefaf7 0%, #e0f3ee 100%);
}
#quotePage .quote-widget-card-sent .stock-widget-head {
  background: linear-gradient(135deg, #1f9b7a 0%, #167761 100%);
}
#quotePage .quote-widget-card-accepted {
  background: linear-gradient(180deg, #fff6ea 0%, #ffebd1 100%);
}
#quotePage .quote-widget-card-accepted .stock-widget-head {
  background: linear-gradient(135deg, #d47b1f 0%, #ad5f11 100%);
}

#invoicePage .invoice-widget-card-total {
  background: linear-gradient(180deg, #f4f8ff 0%, #e8f0ff 100%);
}
#invoicePage .invoice-widget-card-total .stock-widget-head {
  background: linear-gradient(135deg, #2c76cb 0%, #2a74b5 100%);
}
#invoicePage .invoice-widget-card-outstanding {
  background: linear-gradient(180deg, #fff6ea 0%, #ffebd1 100%);
}
#invoicePage .invoice-widget-card-outstanding .stock-widget-head {
  background: linear-gradient(135deg, #d47b1f 0%, #ad5f11 100%);
}
#invoicePage .invoice-widget-card-paid {
  background: linear-gradient(180deg, #eefaf7 0%, #e0f3ee 100%);
}
#invoicePage .invoice-widget-card-paid .stock-widget-head {
  background: linear-gradient(135deg, #1f9b7a 0%, #167761 100%);
}

#jobBackendPage .stock-stat-card.is-active::after,
#invoicePage .stock-stat-card.is-active::after,
#quotePage .stock-stat-card.is-active::after {
  border-color: rgba(26, 77, 138, 0.42);
  box-shadow: inset 0 0 0 1px rgba(26, 77, 138, 0.16);
}

#quotePage .quote-list-filters {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.55rem;
}

#quotePage .quote-list-filters label {
  display: grid;
  gap: 0.28rem;
  font-size: 0.77rem;
  font-weight: 700;
  color: #1f3f63;
}

#quotePage .quote-list-filters select {
  min-width: 8.4rem;
}

.quote-advanced-field {
  transition: opacity 0.18s ease;
}

#quotePage #quoteTaskChecklistSection .table-head .inline-actions {
  flex-wrap: nowrap;
  gap: 0.45rem;
}

#quotePage #quoteTaskChecklistSection #quoteTaskInput {
  min-width: 14rem;
}

.job-quote-handover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.job-quote-handover-card {
  border: 1px solid #d2e1f2;
  border-radius: 12px;
  background: #f8fbff;
  padding: 0.7rem;
}

.job-quote-handover-card h4 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

@media (max-width: 960px) {
  #quotePage .quote-list-filters {
    width: 100%;
    margin-left: 0;
  }

  #quotePage .quote-list-filters label {
    flex: 1 1 10rem;
  }

  #quotePage .quote-list-filters select {
    min-width: 0;
    width: 100%;
  }

  #quotePage #quoteTaskChecklistSection .table-head .inline-actions {
    flex-wrap: wrap;
  }

  #quotePage #quoteTaskChecklistSection #quoteTaskInput {
    min-width: 0;
    width: 100%;
  }

  .job-quote-handover-grid {
    grid-template-columns: 1fr;
  }
}

body.mobile-demo-mode #jobBackendQuoteHandoverPanel {
  margin-top: 0.4rem;
  padding: 0.52rem;
  border-radius: 12px;
}

body.mobile-demo-mode #jobBackendQuoteHandoverPanel .table-head h3 {
  font-size: 0.9rem;
}

body.mobile-demo-mode #jobBackendQuoteHandoverPanel .sub {
  font-size: 0.73rem;
  line-height: 1.25;
}

body.mobile-demo-mode #jobBackendQuoteHandoverPanel .activity-list li {
  font-size: 0.74rem;
  padding: 0.26rem 0.24rem;
}

body.mobile-demo-mode #quotePage .table-head .inline-actions {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}