@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

/* TradeFlow CRM Demo - Stylesheet */

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

:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-soft: #eff6ff;
    --primary-edge: #93bbfd;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --dark: #1e293b;
    --light: #ffffff;
    --border: #e2e8f0;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --bg: #f8fafc;
    --bg-2: #ffffff;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-2: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-3: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.05);
    --ease: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-ui: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Sora', 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
    --anim-fast: 150ms;
    --anim-med: 250ms;
    --anim-slow: 400ms;
}

body {
    font-family: var(--font-ui);
    background: #f1f5f9;
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Keep page changes calm and cheap: content appears immediately and only
   small interaction states use transitions. */
body.fp-page,
body.fp-page .site-header,
body.fp-page .welcome,
body.fp-page .stat-card,
body.fp-page .big-actions-grid,
body.fp-page .big-actions-grid .dash-btn {
    animation: none !important;
}

body.fp-page .app-shell * {
    animation: none !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 240px at 10% -5%, rgba(219, 234, 254, 0.5), transparent 70%),
        radial-gradient(500px 200px at 90% -5%, rgba(224, 232, 254, 0.4), transparent 70%);
    z-index: -1;
}

h1,
h2,
h3,
h4,
.dash-label,
.nav-link,
.btn {
    font-family: var(--font-display);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(30, 136, 229, 0.28);
    outline-offset: 2px;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top Header */
.site-header {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-dark);
    padding: 12px 24px;
    overflow: visible;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    position: sticky;
    top: 10px;
    z-index: 100;
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border-radius: 16px;
    margin: 8px 12px 0;
    animation: reveal-up var(--anim-med) ease-out;
    transition: transform var(--anim-med) ease-out, opacity var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out;
    will-change: transform, opacity;
}

body.menu-collapsed .site-header {
    transform: translateY(calc(-1 * (var(--header-height, 96px) + 16px)));
    opacity: 0;
    pointer-events: none;
}

.floating-menu-toggle {
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    background: var(--primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
}

body.menu-collapsed .floating-menu-toggle {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-menu-toggle:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    transform: translateY(0) scale(1.05);
}

.floating-menu-panel {
    position: fixed;
    right: 14px;
    top: 66px;
    z-index: 1000;
    width: min(290px, calc(100vw - 24px));
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
}

body.floating-menu-open .floating-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    transition: background var(--anim-fast) ease-out;
}

.floating-menu-link:hover,
.floating-menu-link.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #8ec5ff 50%, transparent 100%);
}

.site-brand {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #98c8f7;
    background: linear-gradient(180deg, #f5fbff, #dceeff);
    color: #0b3b68;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(30, 136, 229, 0.18);
    transition: transform var(--ease), box-shadow var(--ease), filter var(--ease);
}

.nav-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(30, 136, 229, 0.24);
    filter: saturate(1.05);
}

.nav-menu {
    list-style: none;
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.nav-menu::-webkit-scrollbar {
    display: none;
}

.nav-menu li {
    margin-bottom: 0;
}

.site-brand h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.company-logo-wrap {
    margin: 0;
    width: auto;
    max-width: 200px;
    min-height: 0;
    max-height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.company-logo {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 48px;
    object-fit: contain;
    object-position: left center;
    image-rendering: auto;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    padding: 2px;
}

.version {
    font-size: 11px;
    opacity: 1;
    color: var(--text-muted);
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 8px;
}

.brand-user-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 10px;
    text-decoration: none;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--anim-fast) ease-out;
}

.brand-user-mini:hover {
    background: #e2e8f0;
    color: var(--text-dark);
}

.btn-logout-mini {
    padding: 5px 10px;
    min-height: 28px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease), opacity var(--ease), filter var(--ease);
    font-size: 14px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.nav-link:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.nav-link.active {
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-weight: 700;
}

.nav-link::before {
    content: "";
    position: absolute;
    inset: auto 10px 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ease);
}

.nav-link.active::before {
    transform: scaleX(1);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.user-name {
    font-size: 13px;
    margin-bottom: 3px;
}

.user-role {
    font-size: 11px;
    opacity: 0.8;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
    min-width: 0;
}

.header-actions > * {
    min-width: 0;
}

.topbar {
    background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    padding: 20px 30px;
    border-bottom: 1px solid #dce9f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 16px rgba(18, 70, 122, 0.06);
}

.topbar h1 {
    font-size: 24px;
    color: var(--page-title);
    letter-spacing: -0.01em;
    font-family: var(--font-display);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-company {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: #eff6ff;
    border: 1px solid #cfe4fb;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-company:hover {
    background: #e2f0ff;
    border-color: #b9d7f8;
    color: #214d79;
}

.btn-logout {
    padding: 8px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-logout:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--success);
    color: white;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    text-decoration: none;
    border: none;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    font-size: 13px;
}

.btn-new:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    filter: brightness(1.08);
}

.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 18px 30px 30px;
    animation: page-fade-in var(--anim-med) ease-out;
}

/* Page Layout */
.page-header {
    margin-bottom: 24px;
}

.page-header h2 {
    font-size: 26px;
    margin-bottom: 6px;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-description {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Large action buttons on Dashboard (replacement for sidebar menu) */
.big-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dash-btn {
    background: var(--primary);
    border: none;
    padding: 20px 16px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2);
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    min-height: 120px;
    position: relative;
    overflow: hidden;
}

.big-actions-grid .dash-btn:nth-child(1) { animation: reveal-up var(--anim-med) ease-out 0ms both; }
.big-actions-grid .dash-btn:nth-child(2) { animation: reveal-up var(--anim-med) ease-out 40ms both; }
.big-actions-grid .dash-btn:nth-child(3) { animation: reveal-up var(--anim-med) ease-out 80ms both; }
.big-actions-grid .dash-btn:nth-child(4) { animation: reveal-up var(--anim-med) ease-out 120ms both; }
.big-actions-grid .dash-btn:nth-child(5) { animation: reveal-up var(--anim-med) ease-out 160ms both; }
.big-actions-grid .dash-btn:nth-child(6) { animation: reveal-up var(--anim-med) ease-out 200ms both; }

.dash-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    transform: translateX(-105%);
    transition: transform var(--ease);
}

.dash-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.dash-btn:hover::before {
    transform: translateX(0%);
}

.dash-icon { font-size: 30px; margin-bottom: 8px; }
.dash-label { font-weight: 800; font-size: 16px; text-align: center; }

.big-actions-grid .dash-btn {
    animation: none;
}

.stat-card {
    background: #ffffff;
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--anim-fast) ease-out;
    animation: reveal-up var(--anim-med) ease-out both;
}

.stat-card:hover {
    box-shadow: var(--shadow-2);
}

.stat-card h3 {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-weight: 600;
}

.stat-card .value {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.stat-card.success .value {
    color: var(--success);
}

.stat-card.warning .value {
    color: var(--warning);
}

/* Tables */
.table-container {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    margin-bottom: 24px;
    animation: reveal-up var(--anim-med) ease-out both;
    font-family: var(--font-ui);
}

.table-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--table-head-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

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

table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

table tbody tr:nth-child(even) {
    background-color: #fcfeff;
}

table th {
    background-color: #f8fafc;
    padding: 12px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-dark);
    vertical-align: middle;
}

table tbody tr:hover {
    background-color: #f8fafc;
}

table tbody tr:last-child td {
    border-bottom: none;
}

.table-container table,
.todo-table,
.dashboard-schedule-list,
.schedule-item {
    font-family: var(--font-ui);
}

.table-container tbody tr,
.todo-table tbody tr,
.dashboard-schedule-item,
.schedule-item {
    border-color: var(--border);
    background: var(--card, #fff);
    box-shadow: var(--shadow-1);
}

.table-container tbody tr,
.todo-table tbody tr,
.dashboard-schedule-item {
    transition: background var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out;
}

.table-container tbody tr:hover,
.todo-table tbody tr:hover,
.dashboard-schedule-item:hover,
.schedule-item:hover {
    background: var(--bg, #f8fafc);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: var(--shadow-2);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.badge-primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-success {
    background: #dcfce7;
    color: #15803d;
}

.badge-warning {
    background: #fef3c7;
    color: #b45309;
}

.badge-danger {
    background: #fee2e2;
    color: #dc2626;
}

.badge-info {
    background: #cffafe;
    color: #0e7490;
}

.badge-secondary {
    background: #f1f5f9;
    color: #475569;
}

.badge-dark {
    background: #1e293b;
    color: #f8fafc;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-1);
    min-height: 44px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-1);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background: #f1f5f9;
    color: var(--text-dark);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: #e2e8f0;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
}

/* Cards */
.card {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    transition: box-shadow var(--anim-fast) ease-out;
    animation: reveal-up var(--anim-med) ease-out both;
}

.card:hover {
    box-shadow: var(--shadow-3);
}

.card-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.card-header h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.card-title {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    font-weight: 600;
}

.card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #ffffff;
    color: var(--text-dark);
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: #94a3b8;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    background: #ffffff;
}

/* Alerts */
.alert {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 4px solid;
    animation: reveal-up var(--anim-med) ease-out both;
    font-size: 14px;
    line-height: 1.5;
}

.alert-info {
    background: #eff6ff;
    border-color: var(--primary);
    color: #1e40af;
}

.alert-success {
    background: #f0fdf4;
    border-color: var(--success);
    color: #166534;
}

.alert-warning {
    background: #fffbeb;
    border-color: var(--warning);
    color: #92400e;
}

.alert-danger {
    background: #fef2f2;
    border-color: var(--danger);
    color: #991b1b;
}

/* Links */
a.action-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--ease);
}

a.action-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ---------- Theme Options (Settings > Branding) ---------- */
.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    background: var(--bg-2);
    position: relative;
}

.theme-option:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    transform: translateY(-1px);
}

.theme-option.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary);
}

.theme-swatch {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.theme-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.theme-info strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.theme-info span {
    font-size: 11px;
    color: var(--text-muted);
}

.theme-check {
    flex-shrink: 0;
}

/* Prominent New Job button styling (used in topbar) */
.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--success);
    color: white;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    text-decoration: none;
    font-size: 13px;
    border: none;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
}

.header-actions .btn-new {
    padding: 8px 14px;
    font-size: 12px;
    gap: 6px;
    white-space: nowrap;
}

.btn-new:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Make nav links easier to read */
.nav-link {
    font-weight: 500;
}

.nav-link.active {
    background: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 700;
}

/* Details Row */
.details-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.detail-item label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
}

.detail-item p {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 500;
}

/* Schedule timeline + dashboard schedule readability */
.schedule-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-item {
    display: grid;
    grid-template-columns: 130px 1fr auto auto;
    gap: 16px;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-1);
    transition: box-shadow var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out;
    position: relative;
}

.schedule-item:hover {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-2);
}

.schedule-item.dragging {
    opacity: 0.96;
    border-color: #1e88e5;
    box-shadow: 0 12px 26px rgba(30, 136, 229, 0.26);
    z-index: 12;
}

.schedule-item.drop-target {
    border-color: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18);
}

.schedule-item-time {
    border-right: 1px dashed #c8def5;
    padding-right: 12px;
}

.schedule-time-main {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    color: #0b3f75;
    font-weight: 700;
}

.schedule-time-date {
    font-size: 14px;
    margin-top: 6px;
    color: #4b6a87;
}

.schedule-item-title {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.25;
    color: #0d355f;
}

.schedule-item-meta {
    margin-top: 4px;
    font-size: 15px;
    color: #264c74;
    font-weight: 600;
}

.schedule-item-address {
    margin-top: 6px;
    font-size: 14px;
    color: #3c6187;
    line-height: 1.35;
}

.schedule-item-status {
    justify-self: center;
}

.schedule-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.schedule-drop-slot {
    height: 8px;
    border-radius: 999px;
    margin: -2px 6px;
    border: 1px dashed transparent;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease), background-color var(--ease), border-color var(--ease), height var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.schedule-drop-slot span {
    font-size: 11px;
    color: #2f6da5;
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #cde3fb;
    display: none;
}

.schedule-timeline.drag-active .schedule-drop-slot {
    opacity: 1;
    pointer-events: auto;
    border-color: #b7d6f6;
    background: #eef6ff;
}

.schedule-timeline.drag-active .schedule-drop-slot span {
    display: inline-flex;
}

.schedule-drop-slot.drop-target {
    height: 28px;
    border-color: #1e88e5;
    background: #dff0ff;
    box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.15);
}

.dashboard-schedule-list {
    padding: 4px;
}

.dashboard-schedule-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-schedule-item {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    background: #ffffff;
    /* These rows are links to the day view, not draggable - a grab cursor
       promised a reorder that no code ever implemented. */
    cursor: pointer;
    transition: border-color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out;
}

.dashboard-schedule-item.dragging {
    opacity: 0.55;
}

.dashboard-schedule-item.drop-target {
    border-color: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.18);
}

/* Two-line rows: when + who on line one, what + where on line two. Every
   child truncates with an ellipsis so a long name or address can never push a
   row onto a third line. */
.dashboard-schedule-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    width: 100%;
    min-width: 0;
}

.dashboard-schedule-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: #123a66;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-schedule-when {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--primary);
}

.dashboard-schedule-who {
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-schedule-sub {
    font-size: 12.5px;
    color: var(--muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-schedule-empty {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--muted, #64748b);
}

/* Schedule jobs tabs */
.schedule-tabs {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
    gap: 14px;
    max-width: 100%;
}

.schedule-tab-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

.schedule-tab-btn {
    text-align: left;
    border: 1px solid var(--border);
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: background-color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, opacity var(--anim-fast) ease-out, filter var(--anim-fast) ease-out;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.schedule-tab-btn:hover {
    border-color: #94a3b8;
    box-shadow: var(--shadow-1);
}

.schedule-tab-btn.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--primary-soft);
}

.schedule-tab-time {
    font-family: var(--font-display);
    font-size: 16px;
    color: #0f4a87;
}

.schedule-tab-customer {
    font-size: 14px;
    color: #436280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-tab-panels {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow-1);
    padding: 16px;
    min-width: 0;
}

.schedule-tab-panel {
    display: none;
}

.schedule-tab-panel.is-active {
    display: block;
}

.schedule-tab-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.schedule-tab-panel-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: #0f3f6f;
}

.schedule-tab-panel-time {
    margin-top: 4px;
    font-size: 14px;
    color: #517191;
}

.schedule-tab-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.schedule-tab-span-all {
    grid-column: 1 / -1;
}

.schedule-tab-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6783a0;
    margin-bottom: 4px;
}

.schedule-tab-value {
    font-size: 16px;
    color: #153e68;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.schedule-tab-panel-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dot-jobs,
.dot-personal {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-jobs { background: #22b0ff; }
.dot-personal { background: #ff55b0; }

.status-pending,
.status-overdue { background: rgba(255, 182, 55, 0.18); color: #ffd56f; }
.status-in_progress,
.status-issued,
.status-sent,
.status-confirmed { background: rgba(70, 162, 255, 0.18); color: #7bc8ff; }
.status-completed,
.status-paid,
.status-closed { background: rgba(66, 207, 155, 0.18); color: #78f0c3; }

.tone-repair { border-left-color: #ff5b8f; }
.tone-service { border-left-color: #2ec1ff; }
.tone-cp12 { border-left-color: #8f6aff; }
.tone-install { border-left-color: #ffbe3f; }
.tone-default { border-left-color: #5f89c9; }

.legend-repair { background: #ff5b8f; }
.legend-service { background: #2ec1ff; }
.legend-cp12 { background: #8f6aff; }
.legend-install { background: #ffbe3f; }
.legend-personal { background: #ff55b0; }

.personal-unavailable { border-left-color: #ff9e45; }
.personal-cash { border-left-color: #f4b43a; }
.personal-date { border-left-color: #ff5bab; }
.personal-insurance { border-left-color: #57a2ff; }
.personal-other { border-left-color: #b580ff; }

@media (max-width: 900px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "actions actions"
            "nav nav";
        align-items: center;
    }

    .site-brand {
        grid-area: brand;
    }

    .nav-menu {
        grid-area: nav;
        display: flex;
        width: 100%;
        margin-top: 2px;
        gap: 8px;
        justify-content: flex-start;
    }

    .nav-menu li {
        width: auto;
        flex: 0 0 auto;
    }

    .nav-menu .nav-link {
        width: auto;
    }

    .header-actions {
        grid-area: actions;
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
    }

    .header-actions .btn-new {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        text-align: center;
    }

    .brand-user-mini {
        max-width: 110px;
    }
}

/* Login Page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
}

.login-box {
    background: rgba(255, 255, 255, 0.97);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.05) inset;
    width: 100%;
    max-width: 420px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    animation: pop-in var(--anim-slow) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes page-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes rise-in {
    from {
        opacity: 0.92;
    }
    to {
        opacity: 1;
    }
}

/* Keep all interface transitions short and simple for snappier feel. */
a,
button,
.btn,
.nav-link,
.dash-btn,
.card,
.stat-card,
.schedule-item,
.schedule-tab-btn,
.dashboard-schedule-item,
.form-group input,
.form-group select,
.form-group textarea {
    transition-duration: var(--anim-fast) !important;
    transition-timing-function: ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

.login-box h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.login-box p {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.5;
}

.login-box .btn-primary {
    width: 100%;
    padding: 13px;
    font-size: 15px;
}

/* Phone-first responsive layout */
@media (max-width: 768px) {
    .site-header {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 12px 14px;
        align-items: stretch;
        margin: 6px 8px 0;
        top: 6px;
    }

    .site-brand {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px 8px;
    }

    .site-brand h2 {
        font-size: 16px;
        letter-spacing: -0.02em;
    }

    .version {
        display: none;
    }

    .brand-user-mini {
        max-width: 80px;
        font-size: 10px;
        padding: 4px 8px;
        background: #f1f5f9;
        border: 1px solid var(--border);
    }

    .btn-logout-mini {
        font-size: 10px;
        padding: 4px 8px;
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
        box-shadow: none;
    }

    .company-logo-wrap {
        max-width: 110px;
        max-height: 42px;
    }

    .company-logo {
        max-width: 100%;
        max-height: 38px;
    }

    .nav-menu {
        width: 100%;
        justify-content: flex-start;
        gap: 5px;
        padding: 2px 0 0;
        padding-right: 28px;
        overflow-x: auto;
        scroll-snap-type: none;
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .nav-menu li {
        flex: 0 0 auto;
        scroll-snap-align: none;
    }

    .nav-link {
        padding: 8px 11px;
        font-size: 12px;
        border-radius: 10px;
        box-shadow: none;
        min-height: 34px;
        background: transparent;
        color: var(--text-muted);
    }

    .nav-link.active {
        background: var(--primary-soft);
        color: var(--primary-dark);
        font-weight: 700;
    }

    .header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 8px;
        grid-template-columns: 1fr;
    }

    .header-actions > * {
        min-width: 0;
    }

    .user-company {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 14px;
        white-space: normal;
        text-align: center;
    }

    .header-actions .btn-new,
    .header-actions .btn-logout {
        width: 100%;
        justify-content: center;
        padding: 12px 14px;
    }

    .header-actions .user-company {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }

    .brand-user-mini {
        max-width: 90px;
        font-size: 10px;
        padding: 4px 7px;
        background: #f1f5f9;
        border: 1px solid var(--border);
    }

    .btn-logout-mini {
        min-height: 26px;
        font-size: 10px;
        padding: 4px 8px;
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
        box-shadow: none;
    }

    .main-content {
        min-width: 0;
    }

    .topbar {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .topbar h1 {
        font-size: 19px;
        line-height: 1.2;
    }

    .page-content {
        padding: 10px 14px 14px;
    }

    .page-header {
        margin-bottom: 18px;
    }

    .page-header h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    .page-description {
        font-size: 13px;
        line-height: 1.5;
        max-width: 50ch;
    }

    .dashboard-grid,
    .details-row,
    .big-actions-grid {
        grid-template-columns: 1fr;
    }

    .big-actions-grid {
        gap: 12px;
        margin-bottom: 18px;
    }

    .dash-btn {
        min-height: 90px;
        padding: 14px 12px;
        border-radius: 14px;
    }

    .dash-icon {
        font-size: 24px;
    }

    .dash-label {
        font-size: 14px;
        font-weight: 700;
    }

    .card,
    .table-container {
        border-radius: 14px;
    }

    .card {
        padding: 18px;
    }

    .table-header {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .table-container {
        overflow: visible;
    }

    .table-container table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-container thead {
        display: none;
    }

    .table-container tbody {
        display: grid;
        gap: 6px;
        padding: 10px;
    }

    .table-container tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--shadow-1);
        padding: 8px 10px;
    }

    .table-container tbody td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        align-items: start;
        padding: 6px 0;
        border-bottom: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
        font-size: 13px;
    }

    .table-container tbody td:last-child {
        border-bottom: none;
    }

    .table-container tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .table-container tbody td[colspan] {
        display: block;
        grid-column: 1 / -1;
        border-bottom: none;
        padding: 8px 0;
    }

    .table-container tbody td[colspan]::before {
        content: none;
    }

    .table-container tbody td form {
        display: inline;
    }

    .table-container tbody td .badge {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 999px;
    }

    table th,
    table td {
        padding: 10px 12px;
        font-size: 13px;
        vertical-align: top;
    }

    .btn-group {
        flex-direction: column;
        gap: 8px;
    }

    .btn,
    .btn-sm,
    a.action-link {
        min-height: 44px;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 14px;
    }

    .btn-sm {
        padding: 9px 14px;
        font-size: 12px;
    }

    .schedule-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }

    .schedule-tabs {
        grid-template-columns: 1fr;
    }

    .schedule-tab-list {
        max-height: 260px;
    }

    .schedule-tab-panel-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .schedule-item-time {
        border-right: none;
        border-bottom: 1px dashed #c8def5;
        padding-right: 0;
        padding-bottom: 8px;
    }

    .schedule-time-main {
        font-size: 22px;
    }

    .schedule-item-title {
        font-size: 15px;
    }

    .schedule-item-meta,
    .schedule-item-address {
        font-size: 13px;
    }

    .schedule-item-actions {
        align-items: stretch;
    }

    .dashboard-schedule-item {
        border-radius: 10px;
    }

    .dashboard-schedule-row {
        padding: 10px 12px;
    }

    .dashboard-schedule-line {
        font-size: 13px;
        color: var(--text-dark);
    }

    .dashboard-schedule-sub {
        font-size: 12px;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-group label {
        font-size: 13px;
        font-weight: 600;
    }

    input[type="text"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
        padding: 11px 14px;
        border-radius: 10px;
        border: 1.5px solid var(--border);
    }

    form[style*="display:flex"] {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100%;
        min-width: 0;
    }

    form[style*="display:flex"] > input[type="search"],
    form[style*="display:flex"] > input[type="text"],
    form[style*="display:flex"] > input[type="number"],
    form[style*="display:flex"] > select,
    form[style*="display:flex"] > textarea {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    form[style*="display:flex"] > .btn,
    form[style*="display:flex"] > button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    div[style*="display:flex"] > form[style*="display:flex"] + a.btn,
    div[style*="display:flex"] > a.btn {
        flex: 1 1 100%;
        width: 100%;
    }

    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .jobs-compact-form .jobs-compact-grid {
        grid-template-columns: 1fr !important;
    }

    .jobs-compact-form .form-group {
        grid-column: auto !important;
    }

    .jobs-compact-form .form-group > div[style*="display:flex"] {
        flex-wrap: wrap;
    }

    .jobs-compact-form .form-group > div[style*="display:flex"] > * {
        width: 100%;
    }

    textarea {
        min-height: 120px;
    }

    .quick-actions-mobile {
        display: flex;
        gap: 10px;
        margin: 12px 0 16px;
    }

    a.action-link {
        padding: 11px 14px;
        font-size: 14px;
    }

    /* Show floating menu toggle on phone from page load (not just on scroll) */
    .floating-menu-toggle {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        background: var(--primary);
        border: none;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
}

@media (max-width: 420px) {
    .site-header {
        padding: 10px 10px 12px;
        margin: 5px 6px 0;
        top: 5px;
    }

    .floating-menu-toggle {
        right: 10px;
        top: 6px;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 8px;
        background: var(--primary);
        border: none;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    .site-brand {
        gap: 6px;
    }

    .site-brand h2 {
        font-size: 16px;
    }

    .version {
        display: none;
    }

    .brand-user-mini {
        max-width: 65px;
        font-size: 9px;
        padding: 3px 6px;
        background: #f1f5f9;
        border: 1px solid var(--border);
    }

    .floating-menu-panel {
        right: 10px;
        top: 62px;
        width: calc(100vw - 20px);
    }

    .site-brand h2 {
        font-size: 17px;
    }

    .nav-link {
        padding: 7px 10px;
        font-size: 11px;
        background: transparent;
        color: var(--text-muted);
    }

    .nav-link.active {
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

    .nav-menu {
        gap: 5px;
        padding-right: 32px;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 10px 12px;
    }

    .topbar h1 {
        font-size: 17px;
    }

    .page-content {
        padding: 8px 12px 12px;
    }

    .page-header h2 {
        font-size: 20px;
    }

    .btn-new {
        padding: 11px 14px;
        font-size: 13px;
    }

    .dash-btn {
        min-height: 80px;
        padding: 12px 10px;
        border-radius: 12px;
    }

    .dash-label {
        font-size: 13px;
        font-weight: 700;
    }

    .card {
        padding: 16px;
    }

    .table-header h3 {
        font-size: 14px;
        font-weight: 700;
    }

    .table-container tbody {
        padding: 8px;
        gap: 8px;
    }

    .table-container tbody tr {
        grid-template-columns: 1fr;
        padding: 10px 12px;
    }

    .table-container tbody td {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 4px 0;
        font-size: 13px;
    }

    .table-container tbody td::before {
        font-size: 10px;
        color: var(--text-muted);
        letter-spacing: 0.04em;
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .topbar {
        display: none;
    }

    .page-content {
        padding: 0;
    }

    .btn,
    .btn-logout {
        display: none;
    }
}

/* ============================================================
   AURORA · Futuristic theme v4.0
   Pure look & feel — no content or data is changed.
   Appended after the base sheet so every rule below wins.
   ============================================================ */

/* ---------- Palette ---------- */
:root {
    --space-deep: #05070f;
    --space-base: #090e1c;
    --glass: rgba(13, 20, 38, 0.78);
    --glass-2: rgba(17, 26, 48, 0.6);
    --line: rgba(148, 163, 184, 0.14);
    --ink: #e7eefb;
    --muted: #8fa2c0;
    --cyan: #22d3ee;
    --violet: #8b5cf6;
    --magenta: #ec4899;
    --emerald: #34d399;
    --amber: #fbbf24;
    --rose: #fb7185;
    --primary: #22d3ee;
    --primary-dark: #67e8f9;
    --primary-soft: rgba(34, 211, 238, 0.13);
    --primary-edge: #67e8f9;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #fb7185;
    --info: #38bdf8;
    --dark: #0a101f;
    --light: #ffffff;
    --border: rgba(148, 163, 184, 0.14);
    --text-dark: #e7eefb;
    --text-muted: #8fa2c0;
    --bg: #090e1c;
    --bg-2: rgba(13, 20, 38, 0.78);
    --grad: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 55%, #ec4899 100%);
    --grad-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.16));
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.38);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.5);
    --ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Global background + drifting aurora ---------- */
body {
    background: var(--space-base);
    color: var(--ink);
}

body::before {
    background:
        radial-gradient(920px 430px at -8% -12%, rgba(34, 211, 238, 0.15), transparent 60%),
        radial-gradient(780px 410px at 108% -6%, rgba(139, 92, 246, 0.17), transparent 62%),
        radial-gradient(900px 520px at 50% 122%, rgba(236, 72, 153, 0.1), transparent 60%);
    animation: auroraDrift 22s ease-in-out infinite alternate;
    will-change: background-position;
}

@keyframes auroraDrift {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50%  { background-position: 20% 6%, 82% 4%, 45% 96%; }
    100% { background-position: 6% 10%, 96% 8%, 55% 92%; }
}

h1, h2, h3, h4, .dash-label, .nav-link, .btn {
    letter-spacing: -0.015em;
}

::selection {
    background: rgba(139, 92, 246, 0.45);
    color: #fff;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #2a3550;
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: #3d4c72;
    border: 3px solid transparent;
    background-clip: content-box;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.22);
}

/* ---------- Header ---------- */
.site-header {
    background: rgba(9, 14, 28, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-bottom: 1px solid transparent;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.site-header::after {
    background: var(--grad);
    opacity: 0.85;
}

.site-brand h2 {
    font-family: var(--font-display);
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

.site-brand .version {
    color: rgba(143, 162, 192, 0.7);
}

.brand-user-mini {
    color: var(--muted);
}

.brand-user-mini:hover {
    color: var(--cyan);
}

.nav-link {
    color: #a7b6d1;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease), opacity var(--ease), filter var(--ease);
}

.nav-link:hover {
    color: #fff;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.18);
}

.nav-link.active {
    color: #fff;
    background: var(--grad);
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.4);
    border-color: transparent;
}

.nav-link::before {
    display: none;
}

/* ---------- Header buttons ---------- */
.btn-new {
    background: var(--grad);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.45);
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease), opacity var(--ease), filter var(--ease);
    position: relative;
    overflow: hidden;
}

.btn-new::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(0) skewX(-20deg);
    /* Was `transition: left`, which re-runs layout on every frame of the
       sweep. translateX is composited, so the shine no longer costs a
       reflow per frame. 420% of this element equals the 210% of the button
       that -80% -> 130% covered. */
    transition: transform 0.5s ease;
}

.btn-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.55);
}

.btn-new:hover::after {
    transform: translateX(420%) skewX(-20deg);
}

.btn-logout {
    color: var(--muted);
    border: 1px solid rgba(251, 113, 133, 0.3);
    background: rgba(251, 113, 133, 0.08);
}

.btn-logout:hover {
    color: #fff;
    background: rgba(251, 113, 133, 0.2);
    border-color: rgba(251, 113, 133, 0.55);
}

/* ---------- Floating menu ---------- */
.floating-menu-toggle {
    background: var(--grad);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.45);
}

.floating-menu-panel {
    background: rgba(9, 14, 28, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.floating-menu-link {
    color: #a7b6d1;
}

.floating-menu-link:hover,
.floating-menu-link.active {
    color: #fff;
    background: var(--grad-soft);
}

/* ---------- Page layout ---------- */
.page-content {
    animation: page-fade-in 300ms ease-out;
}

.page-header h2 {
    color: #fff;
    background: linear-gradient(90deg, #fff 0%, var(--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.page-description {
    color: var(--muted);
}

/* ---------- Dashboard action grid ---------- */
.dash-btn {
    background: linear-gradient(160deg, #0e1a33 0%, #121a33 60%, #1a1240 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: background-color 240ms ease-out, border-color 240ms ease-out, color 240ms ease-out, box-shadow 240ms ease-out, transform 240ms ease-out, opacity 240ms ease-out, filter 240ms ease-out;
}

.dash-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad);
    opacity: 0;
    transition: opacity 240ms ease-out;
    z-index: 0;
}

.dash-btn:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 18px 40px rgba(139, 92, 246, 0.35);
}

.dash-btn:hover::before {
    opacity: 0.16;
}

.dash-icon {
    font-size: 30px;
    filter: drop-shadow(0 4px 12px rgba(34, 211, 238, 0.35));
    transition: transform 240ms ease-out;
    position: relative;
    z-index: 1;
}

.dash-btn:hover .dash-icon {
    transform: scale(1.12) translateY(-2px);
}

.dash-label {
    color: #e7eefb;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* ---------- Cards ---------- */
.card {
    background: var(--glass);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.32);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
}

.card-header h4 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.card-title {
    color: #fff;
}

.card-value {
    color: var(--cyan);
    font-weight: 800;
}

/* ---------- Tables ---------- */
.table-container {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.table-container table {
    background: transparent;
}

.table-container thead th,
.table-container table th {
    background: rgba(20, 30, 56, 0.5);
    color: #a7b6d1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.table-container table td {
    color: var(--ink);
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    background: transparent;
}

.table-container table tbody tr {
    transition: background 180ms ease-out;
    background: transparent;
}

.table-container table tbody tr:hover {
    background: rgba(34, 211, 238, 0.06);
}

/* Neutralise any inline light row backgrounds inside tables */
.table-container table td,
.table-container table th,
.table-container table tr {
    background-color: transparent !important;
}

.table-header {
    color: var(--muted);
}

/* ---------- Badges ---------- */
.badge {
    background: rgba(148, 163, 184, 0.14);
    color: #dbe5f5;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-primary { background: rgba(34, 211, 238, 0.16); color: #7deeff; border-color: rgba(34, 211, 238, 0.35); }
.badge-secondary { background: rgba(148, 163, 184, 0.14); color: #c7d3e6; border-color: rgba(148, 163, 184, 0.24); }
.badge-success { background: rgba(52, 211, 153, 0.15); color: #6fe8bd; border-color: rgba(52, 211, 153, 0.34); }
.badge-warning { background: rgba(251, 191, 36, 0.15); color: #ffd75e; border-color: rgba(251, 191, 36, 0.36); }
.badge-danger { background: rgba(251, 113, 133, 0.15); color: #ff9aa8; border-color: rgba(251, 113, 133, 0.36); }
.badge-info { background: rgba(56, 189, 248, 0.15); color: #7dd4ff; border-color: rgba(56, 189, 248, 0.34); }
.badge-dark { background: rgba(10, 16, 31, 0.85); color: #e7eefb; border-color: rgba(148, 163, 184, 0.3); }

/* ---------- Buttons ---------- */
.btn {
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease), opacity var(--ease), filter var(--ease);
}

.btn-primary {
    background: var(--grad);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.4);
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(0) skewX(-20deg);
    /* Was `transition: left`, which re-runs layout on every frame of the
       sweep. translateX is composited, so the shine no longer costs a
       reflow per frame. 420% of this element equals the 210% of the button
       that -80% -> 130% covered. */
    transition: transform 0.5s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(139, 92, 246, 0.55);
}

.btn-primary:hover::after {
    transform: translateX(420%) skewX(-20deg);
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.1);
    color: #dbe5f5;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.btn-secondary:hover {
    background: rgba(148, 163, 184, 0.18);
    color: #fff;
    border-color: rgba(148, 163, 184, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #34d399);
    border: none;
    color: #fff;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.55);
}

.action-link {
    color: var(--cyan);
}

/* ---------- Forms ---------- */
.form-group label {
    color: #a7b6d1;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(8, 13, 26, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: var(--ink);
    border-radius: 10px;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color: rgba(148, 163, 184, 0.34);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
    background: rgba(8, 13, 26, 0.9);
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.alert-info {
    background: rgba(56, 189, 248, 0.12);
    border-left: 4px solid var(--info);
    color: #c7ecff;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.12);
    border-left: 4px solid var(--amber);
    color: #ffe4a1;
}

.alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-left: 4px solid var(--emerald);
    color: #c9f7e4;
}

.alert-danger {
    background: rgba(251, 113, 133, 0.12);
    border-left: 4px solid var(--rose);
    color: #ffd2da;
}

/* ---------- Login / auth ---------- */
.login-container {
    background: linear-gradient(160deg, #060a17 0%, #0b1126 48%, #10153a 100%);
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 380px at 18% 16%, rgba(34, 211, 238, 0.22), transparent 68%),
        radial-gradient(640px 420px at 84% 22%, rgba(139, 92, 246, 0.26), transparent 68%),
        radial-gradient(520px 420px at 50% 108%, rgba(236, 72, 153, 0.16), transparent 70%);
    animation: auroraDrift 18s ease-in-out infinite alternate;
}

.login-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.9), transparent 78%);
    mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.9), transparent 78%);
    pointer-events: none;
}

.login-box {
    position: relative;
    background: rgba(10, 16, 31, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    color: var(--ink);
}

.login-box h1 {
    font-family: var(--font-display);
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

.login-box p {
    color: var(--muted);
}

/* ---------- Detail rows / values ---------- */
.detail-item {
    color: var(--ink);
}

.details-row {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.value {
    color: #fff;
    font-weight: 700;
}

/* ---------- Schedule widgets (dark-compat) ---------- */
.schedule-timeline,
.schedule-tabs,
.schedule-tab-panel {
    color: var(--ink);
}

.schedule-item {
    background: rgba(15, 24, 44, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.schedule-item:hover {
    border-color: rgba(34, 211, 238, 0.4);
}

.schedule-tab-btn {
    color: var(--muted);
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(8, 13, 26, 0.5);
}

.schedule-tab-btn:hover {
    color: #fff;
    border-color: rgba(34, 211, 238, 0.45);
}

.schedule-tab-btn.is-active {
    background: var(--grad-soft);
    color: #fff;
    border-color: rgba(139, 92, 246, 0.5);
}

/* ---------- Misc legibility ---------- */
.is-muted {
    color: var(--muted);
}

.success {
    color: var(--emerald);
}

.status-paid,
.status-completed,
.status-issued,
.status-confirmed,
.status-closed {
    color: var(--emerald);
}

.status-pending,
.status-sent,
.status-in_progress {
    color: var(--amber);
}

.status-overdue {
    color: var(--rose);
}

/* ---------- Reveal micro-animation (JS-gated, safe) ---------- */
body.js-anim .reveal-target {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

body.js-anim .reveal-target.in-view {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   MODERN · TradeFlow v5 theme
   Light-first design system + dark-mode toggle, built in the spirit of the
   Property Manager dashboard. Appended last so every rule below wins the
   cascade over the base sheet and the Aurora theme.
   ========================================================================== */

/* ---------- Palette (light default) ---------- */
:root {
    --ink: #0b1220;
    --ink-soft: #16203a;
    --slate: #5b6b82;
    --muted: #8b96a8;
    --line: #e7ecf3;
    --bg: #f4f6fa;
    --bg-2: #ffffff;
    --card: #ffffff;
    --brand: #06b6d4;
    --brand-2: #6366f1;
    --brand-grad: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
    --brand-soft: rgba(6, 182, 212, 0.10);
    --brand-soft-2: rgba(99, 102, 241, 0.10);
    --gold: #f59e0b;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --info: #06b6d4;
    --dark: #0b1220;
    --light: #ffffff;
    --border: #e7ecf3;
    --text-dark: #0b1220;
    --text-muted: #5b6b82;
    --space-base: #f4f6fa;
    --space-deep: #0b1220;
    --glass: rgba(255, 255, 255, 0.85);
    --glass-2: rgba(255, 255, 255, 0.72);
    --primary: #06b6d4;
    --primary-dark: #0891b2;
    --primary-soft: rgba(6, 182, 212, 0.10);
    --primary-edge: #22d3ee;
    --grad: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
    --grad-soft: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(99, 102, 241, 0.14));
    --shadow-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 2px 8px rgba(11, 18, 32, 0.05);
    --shadow-2: 0 8px 26px rgba(11, 18, 32, 0.08);
    --shadow-3: 0 20px 55px rgba(11, 18, 32, 0.15);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --ease: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --side-w: 258px;
    --top-h: 66px;

    /* Two colours that were written into their rules as hex before the themes
       existed, and so stayed light on every dark one: the band at the top of a
       table, and the page title in the top bar. Light keeps exactly what it
       had; each dark theme gives its own below. */
    --table-head-bg: #fafbfc;
    --page-title: #133a63;
    /* The caption row of a table. Light reads it at --muted; the dark themes
       need a step up from that to stay legible at 11.5px uppercase. */
    --table-caption: var(--muted);
}

[data-theme="dark"] {
    --table-head-bg: rgba(255, 255, 255, 0.04);
    --page-title: var(--ink);
    --table-caption: var(--slate);
    --ink: #e7edf8;
    --ink-soft: #c6d2e6;
    --slate: #98a7c2;
    --muted: #66749a;
    --line: #1d2944;
    --bg: #0b1220;
    --bg-2: #121b30;
    --card: #121b30;
    --brand: #22d3ee;
    --brand-2: #818cf8;
    --brand-soft: rgba(34, 211, 238, 0.14);
    --brand-soft-2: rgba(129, 140, 248, 0.16);
    --border: #1d2944;
    --text-dark: #e7edf8;
    --text-muted: #98a7c2;
    --space-base: #0b1220;
    --space-deep: #05070f;
    --glass: rgba(11, 18, 32, 0.82);
    --glass-2: rgba(18, 27, 48, 0.72);
    --primary: #22d3ee;
    --primary-dark: #67e8f9;
    --primary-soft: rgba(34, 211, 238, 0.14);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ---------- Ocean Theme (Teal/Cyan) ---------- */
[data-theme="ocean"] {
    --table-head-bg: rgba(255, 255, 255, 0.045);
    --page-title: var(--ink);
    --table-caption: var(--slate);
    --ink: #e0f2f1;
    --ink-soft: #a7d5cc;
    --slate: #81c3b8;
    --muted: #5ab3a3;
    --line: #0f3d3a;
    --bg: #0a1f2e;
    --bg-2: #0f3440;
    --card: #0f3440;
    --brand: #14b8a6;
    --brand-2: #06b6d4;
    --brand-soft: rgba(20, 184, 166, 0.14);
    --brand-soft-2: rgba(6, 182, 212, 0.16);
    --border: #0f3d3a;
    --text-dark: #e0f2f1;
    --text-muted: #81c3b8;
    --primary: #14b8a6;
    --primary-dark: #0d9488;
    --primary-soft: rgba(20, 184, 166, 0.14);
    --primary-edge: #5eead4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ---------- Sunset Theme (Warm/Orange) ---------- */
[data-theme="sunset"] {
    --table-head-bg: rgba(255, 255, 255, 0.05);
    --page-title: var(--ink);
    --table-caption: var(--slate);
    --ink: #fff1ed;
    --ink-soft: #fad4c0;
    --slate: #f5b89d;
    --muted: #ef8d5d;
    --line: #4a2015;
    --bg: #2a1410;
    --bg-2: #3d1f17;
    --card: #3d1f17;
    --brand: #fb923c;
    --brand-2: #f97316;
    --brand-soft: rgba(251, 146, 60, 0.14);
    --brand-soft-2: rgba(249, 115, 22, 0.16);
    --border: #4a2015;
    --text-dark: #fff1ed;
    --text-muted: #f5b89d;
    --primary: #fb923c;
    --primary-dark: #ea580c;
    --primary-soft: rgba(251, 146, 60, 0.14);
    --primary-edge: #fed7aa;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ---------- Forest Theme (Green/Nature) ---------- */
[data-theme="forest"] {
    --table-head-bg: rgba(255, 255, 255, 0.045);
    --page-title: var(--ink);
    --table-caption: var(--slate);
    --ink: #ecfdf3;
    --ink-soft: #a7f3d0;
    --slate: #6ee7b7;
    --muted: #34d399;
    --line: #0f3d2a;
    --bg: #0d1f15;
    --bg-2: #143626;
    --card: #143626;
    --brand: #34d399;
    --brand-2: #10b981;
    --brand-soft: rgba(52, 211, 153, 0.14);
    --brand-soft-2: rgba(16, 185, 129, 0.16);
    --border: #0f3d2a;
    --text-dark: #ecfdf3;
    --text-muted: #6ee7b7;
    --primary: #34d399;
    --primary-dark: #059669;
    --primary-soft: rgba(52, 211, 153, 0.14);
    --primary-edge: #a7f3d0;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ---------- Midnight Theme (Deep Blue/Purple) ---------- */
[data-theme="midnight"] {
    --table-head-bg: rgba(255, 255, 255, 0.05);
    --page-title: var(--ink);
    --table-caption: var(--slate);
    --ink: #e0e7ff;
    --ink-soft: #c7d2fe;
    --slate: #a5b4fc;
    --muted: #818cf8;
    --line: #1e1b4b;
    --bg: #0a0e1f;
    --bg-2: #141633;
    --card: #141633;
    --brand: #818cf8;
    --brand-2: #6366f1;
    --brand-soft: rgba(129, 140, 248, 0.14);
    --brand-soft-2: rgba(99, 102, 241, 0.16);
    --border: #1e1b4b;
    --text-dark: #e0e7ff;
    --text-muted: #a5b4fc;
    --primary: #818cf8;
    --primary-dark: #4f46e5;
    --primary-soft: rgba(129, 140, 248, 0.14);
    --primary-edge: #c7d2fe;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #06b6d4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 55px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* ---------- Global ---------- */
body {
    background: var(--space-base);
    color: var(--ink);
    font-family: var(--font-ui);
}

body::before {
    background:
        radial-gradient(720px 300px at 8% -8%, rgba(6, 182, 212, 0.07), transparent 60%),
        radial-gradient(700px 320px at 96% -6%, rgba(99, 102, 241, 0.07), transparent 60%);
    animation: none;
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) body::before {
    background:
        radial-gradient(760px 320px at 8% -8%, rgba(6, 182, 212, 0.12), transparent 60%),
        radial-gradient(720px 320px at 96% -6%, rgba(99, 102, 241, 0.12), transparent 60%);
}

::selection { background: rgba(6, 182, 212, 0.22); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) ::selection { background: rgba(34, 211, 238, 0.35); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6d0df; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a6b2c6; border: 3px solid transparent; background-clip: content-box; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) ::-webkit-scrollbar-thumb { background: #2a3550; border: 3px solid transparent; background-clip: content-box; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) ::-webkit-scrollbar-thumb:hover { background: #3d4c72; border: 3px solid transparent; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* Page entrance */
body.fp-page { animation: fpPageIn 0.4s ease both; }
@keyframes fpPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.side-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 300;
    background: #0b1220; color: #9aa7bb;
    display: flex; flex-direction: column;
    transition: transform 0.32s cubic-bezier(0.77, 0, 0.18, 1);
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .side-nav { background: #0a0f1d; }

.side-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px; color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-decoration: none;
}
.side-mark {
    width: 42px; height: 42px; border-radius: 13px; flex: none;
    background: var(--brand-grad); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.35);
}
/* The TradeFlow mark's own artboard already carries its padding, so the svg
   fills the tile - sizing it smaller would shrink the letter inside its own
   margins and stop it matching the favicon and app icon. */
.side-mark svg { width: 100%; height: 100%; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.side-brand-text strong { font-size: 17px; letter-spacing: -0.01em; }
.side-brand-text em { font-style: normal; font-weight: 600; font-size: 11px; color: #7d8aa6; letter-spacing: 0.4px; }

.side-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 12px; }
.side-scroll::-webkit-scrollbar { width: 6px; }
.side-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }

.side-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: #5b6a81; margin: 18px 12px 8px;
}
.side-label:first-child { margin-top: 2px; }

.side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; border-radius: 12px;
    color: #9aa7bb; font-weight: 600; font-size: 14px;
    margin-bottom: 3px; position: relative; text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.side-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; transform: translateX(2px); }
.side-link.active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 22px rgba(6, 182, 212, 0.35); }
.side-link svg { width: 19px; height: 19px; flex: none; }
.side-link.active svg { color: #fff; }

.side-foot { padding: 14px 14px 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: grid; gap: 6px; }
.side-demo {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: #ffd56f;
    background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px; padding: 5px 10px; text-transform: uppercase;
}
.side-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); animation: pulse 2s infinite; }
.side-user {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 12px; text-decoration: none;
    color: #c7d2e8; transition: background 0.2s;
}
.side-user:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.side-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 15px;
    display: grid; place-items: center; box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
}
.side-user-text { display: flex; flex-direction: column; min-width: 0; }
.side-user-text strong { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-text em { font-style: normal; font-size: 12px; color: #7d8aa6; }
.side-logout {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 10px 12px; border-radius: 12px; text-decoration: none;
    color: #ff9aa8; font-weight: 700; font-size: 13.5px;
    border: 1px solid rgba(251, 113, 133, 0.25); background: rgba(251, 113, 133, 0.07);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.side-logout:hover { background: rgba(251, 113, 133, 0.16); border-color: rgba(251, 113, 133, 0.5); color: #fff; }
.side-logout svg { width: 17px; height: 17px; }

.app-main { flex: 1; margin-left: var(--side-w); display: flex; flex-direction: column; min-width: 0; }

/* Topbar */
.topbar {
    position: sticky; top: 0; z-index: 200;
    display: flex; align-items: center; gap: 14px;
    height: var(--top-h); padding: 0 26px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--line);
}
.top-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.top-burger {
    display: none; width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: var(--bg); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
    place-items: center;
}
.top-burger svg { width: 22px; height: 22px; }

.top-icon {
    position: relative; width: 42px; height: 42px; border-radius: 12px; flex: none;
    background: var(--bg); border: 1px solid var(--line); color: var(--ink);
    display: grid; place-items: center; cursor: pointer;
    transition: transform 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.top-icon svg { width: 20px; height: 20px; }
.top-icon:hover { transform: translateY(-2px); color: var(--brand); border-color: var(--brand); box-shadow: 0 8px 18px rgba(6, 182, 212, 0.16); }

[data-theme="light"] .i-moon { display: none; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"])  .i-sun { display: none; }

/* Theme toggle (auth/landing pages) */
.theme-toggle {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    display: grid; place-items: center; cursor: pointer;
    transition: transform 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.theme-toggle:hover { transform: translateY(-2px); color: var(--brand); border-color: var(--brand); box-shadow: 0 8px 18px rgba(6, 182, 212, 0.18); }
.theme-toggle svg { width: 20px; height: 20px; }
.auth-theme { position: fixed; top: 18px; right: 18px; z-index: 800; }

.btn-light { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

.btn-top-add { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; }
.btn-top-add svg { width: 17px; height: 17px; }

/* ---- Icons inside buttons: constrain to fixed size ---- */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sm svg { width: 16px; height: 16px; }
@media (max-width: 720px) { .top-add-label { display: none; } .btn-top-add { padding: 0 13px; } }

.top-avatar {
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: 2px solid #fff; box-shadow: 0 4px 14px rgba(11, 18, 32, 0.18);
    background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 16px;
    display: grid; place-items: center; padding: 0;
}

/* Dropdowns */
.top-drop { position: relative; }
.drop-menu {
    position: absolute; right: 0; top: calc(100% + 12px);
    width: min(300px, 92vw); background: var(--card);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-3); padding: 8px; z-index: 340;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.top-drop.open .drop-menu { opacity: 1; visibility: visible; transform: none; }
.drop-head {
    display: flex; flex-direction: column; gap: 2px;
    padding: 11px 13px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.drop-head strong { font-family: var(--font-display); font-size: 14.5px; color: var(--ink); }
.drop-head span { font-size: 12px; color: var(--brand); text-transform: capitalize; font-weight: 600; }
.drop-menu a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 11px;
    color: var(--slate); font-weight: 600; font-size: 14px; text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.drop-menu a > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.drop-menu a em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 500; }
.drop-menu a:hover { background: var(--bg); color: var(--ink); }
.drop-menu a:hover em { color: var(--slate); }
.drop-menu a > svg { width: 16px; height: 16px; color: var(--muted); }
.drop-ico {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center;
}
.drop-ico svg { width: 17px; height: 17px; }
.drop-danger { color: var(--danger) !important; }
.drop-danger:hover { background: rgba(239, 68, 68, 0.08) !important; color: var(--danger) !important; }

/* Scrim (mobile sidebar) */
.dash-scrim { position: fixed; inset: 0; background: rgba(11, 18, 32, 0.5); z-index: 290; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.dash-scrim.open { opacity: 1; visibility: visible; }

/* Content */
.app-content { padding: 26px; flex: 1; }
.page-content { padding: 0; animation: none; }
.page-header h2 { background: none; -webkit-text-fill-color: currentColor; }
.page-description { color: var(--slate); }

/* ---------- Page header ---------- */
.page-header { margin-bottom: 26px; position: relative; padding-bottom: 14px; }
.page-header::after {
    content: ""; display: block; position: absolute; left: 0; bottom: 0;
    width: 58px; height: 4px; border-radius: 2px; background: var(--brand-grad);
}
.page-header h2 { color: var(--ink); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; }
.page-description { color: var(--slate); margin-top: 7px; }

/* ---------- Buttons ---------- */
.btn {
    border-radius: 12px;
    font-family: var(--font-display); font-weight: 700; font-size: 14px;
    padding: 11px 18px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--brand-grad); color: #fff; border: none;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.28);
    position: relative; overflow: hidden;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 182, 212, 0.4); }
.btn-primary::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(0) skewX(-20deg); transition: transform 0.55s ease;
}
.btn-primary:hover::after { transform: translateX(430%) skewX(-20deg); }
.btn-secondary { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-success { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 185, 129, 0.42); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-sm { padding: 8px 13px; font-size: 12.5px; border-radius: 9px; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-new { background: var(--brand-grad); border: none; color: #fff; box-shadow: 0 8px 22px rgba(6, 182, 212, 0.32); }
.btn-new:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(6, 182, 212, 0.45); }
.btn-logout { color: var(--slate); border: 1px solid var(--line); background: var(--card); }
.btn-logout:hover { color: var(--danger); border-color: var(--danger); }

a.action-link { color: var(--brand); font-weight: 700; }

/* The jobs list's Delete, which used to carry its red in a style attribute on
   the button and so kept the same deep shade on a dark page, where it sat at
   3.8:1 against the background. Its own name, not .action-link--danger: that
   one belongs to the appliance Remove button and brings an underline and a
   margin with it. Light keeps the red it had; the dark themes take a lighter
   one of the same hue. */
.action-link--delete { color: #dc3545; }
/* Edit sat at 4.2:1 on the lighter night themes for the same reason Delete
   did: its green was written into a style attribute on the link. */
.action-link--edit { color: #28a745; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .action-link--edit { color: #6ee7b7; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .action-link--delete,
[data-theme="ocean"] .action-link--delete,
[data-theme="sunset"] .action-link--delete,
[data-theme="forest"] .action-link--delete,
[data-theme="midnight"] .action-link--delete { color: #f87171; }
a.action-link:hover { color: var(--brand-2); text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-1);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: none;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(6, 182, 212, 0.32); }
.card-header { border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 16px; }
.card-header h4 { font-size: 15px; font-weight: 800; color: var(--ink); }
.card-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; font-weight: 700; }
.card-value { font-size: 20px; font-weight: 800; color: var(--ink); }

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card {
    position: relative; border-radius: var(--radius-md); padding: 16px 16px 18px; color: #fff;
    overflow: hidden; box-shadow: var(--shadow-2); animation: none;
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.stat-card .stat-ico {
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.2); color: #fff;
    display: grid; place-items: center; box-shadow: 0 8px 18px rgba(11, 18, 32, 0.14);
    transition: transform 0.3s;
}
.stat-card:hover .stat-ico { transform: scale(1.08) rotate(-5deg); }
.stat-card .val { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.stat-card .lbl { color: rgba(255, 255, 255, 0.82); font-size: 12px; font-weight: 600; margin-top: 5px; }
.stat-card::after {
    content: ""; position: absolute; right: -30px; bottom: -30px; width: 90px; height: 90px;
    border-radius: 50%; opacity: 0.4; filter: blur(30px); pointer-events: none;
}
.sc-a { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.sc-b { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.sc-c { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sc-d { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.stat-card:nth-child(1)::after { background: #22d3ee; }
.stat-card:nth-child(2)::after { background: #818cf8; }
.stat-card:nth-child(3)::after { background: #fbbf24; }
.stat-card:nth-child(4)::after { background: #a78bfa; }

/* ---------- Tables ---------- */
.table-container {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    margin-bottom: 24px;
    animation: none;
}
.table-header {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.table-header h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; }
.table-header p { color: var(--slate); }
.table-container table { background: transparent; width: 100%; border-collapse: collapse; }
.table-container table thead th {
    background: var(--bg) !important;
    color: var(--table-caption) !important;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 700; padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}
.table-container table td {
    color: var(--ink);
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background-color: transparent !important;
    vertical-align: middle;
}
.table-container table tbody tr { transition: background 0.15s; }
.table-container table tbody tr:last-child td { border-bottom: 0; }
.table-container table tbody tr:nth-child(even) td { background: rgba(11, 18, 32, 0.025) !important; }
.table-container table tbody tr:hover td { background: rgba(6, 182, 212, 0.06) !important; }
.table-container table th, .table-container table tr { background-color: transparent !important; }

.table-filter { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--muted); transition: border-color 0.2s, box-shadow 0.2s; }
.table-filter:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12); }
.table-filter input { border: 0; background: transparent; outline: none; font-family: var(--font-ui); font-size: 13px; color: var(--ink); width: 150px; }
.table-filter input::placeholder { color: var(--muted); }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg); color: var(--slate);
    border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 11px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-primary { background: rgba(6, 182, 212, 0.12); color: #0891b2; border-color: transparent; }
.badge-secondary { background: var(--bg); color: var(--slate); border-color: var(--line); }
.badge-success { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: transparent; }
.badge-warning { background: rgba(245, 158, 11, 0.13); color: #b7791f; border-color: transparent; }
.badge-danger { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: transparent; }
.badge-info { background: rgba(6, 182, 212, 0.12); color: #0891b2; border-color: transparent; }
.badge-dark { background: #0b1220; color: #fff; border-color: transparent; }

/* ---------- Forms ---------- */
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-group label { color: var(--slate); font-weight: 600; font-size: 13.5px; }
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
    border-radius: var(--radius-sm); padding: 12px 14px;
    font-family: var(--font-ui); font-size: 14.5px; outline: none; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover { border-color: rgba(6, 182, 212, 0.4); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--brand); background: var(--card);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12);
}
.form-group input::placeholder { color: var(--muted); }

/* ---------- Address Toggle (replaces .same-address-toggle) ---------- */
.addr-toggle {
    display: block;
}
.addr-toggle__input {
    display: none;
}
.addr-toggle__button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.addr-toggle__button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.addr-toggle__track {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: var(--line);
  border: 2px solid var(--line);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.addr-toggle__track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
  transform: translateY(-50%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.addr-toggle__input:checked + .addr-toggle__button .addr-toggle__track {
  background: var(--brand);
  border-color: var(--brand);
}
.addr-toggle__input:checked + .addr-toggle__button .addr-toggle__track::after {
  transform: translateY(-50%) translateX(20px);
}
.addr-toggle__button:focus-visible .addr-toggle__track {
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.addr-toggle__button:hover .addr-toggle__track {
  border-color: var(--brand);
}
.addr-toggle__input:checked + .addr-toggle__button:hover .addr-toggle__track {
  background: var(--brand-dark, var(--brand));
  border-color: var(--brand-dark, var(--brand));
}
.addr-toggle__label {
  line-height: 1.4;
  flex: 1;
}
/* Dark mode adjustments */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .addr-toggle__track::after {
  background: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .addr-toggle__input:checked + .addr-toggle__track::after {
  background: #fff;
}

/* Legacy support for .same-address-toggle */
.jobs-compact-form .same-address-toggle {
  display: flex !important;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-weight: normal;
}
.jobs-compact-form .same-address-toggle input[type="checkbox"] {
  width: auto !important;
  display: inline;
}

/* ---------- Alerts ---------- */
.alert {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    border-radius: var(--radius-sm); padding: 13px 16px; margin-bottom: 18px;
    font-size: 14px; font-weight: 600; border: 1px solid var(--line);
}
.alert a { font-weight: 800; text-decoration: underline; }
.alert-info { background: rgba(6, 182, 212, 0.09); color: #0e7490; border-color: rgba(6, 182, 212, 0.24); }
.alert-success { background: rgba(16, 185, 129, 0.09); color: #047857; border-color: rgba(16, 185, 129, 0.24); }
.alert-warning { background: rgba(245, 158, 11, 0.1); color: #92400e; border-color: rgba(245, 158, 11, 0.3); }
.alert-danger { background: rgba(239, 68, 68, 0.09); color: #b91c1c; border-color: rgba(239, 68, 68, 0.24); }
.alert-x { background: none; border: 0; color: inherit; opacity: 0.6; font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.alert-x:hover { opacity: 1; }

/* ---------- Dashboard module grid ---------- */
.big-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: 30px; }
.big-actions-grid .dash-btn { animation: none; }
.dash-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 26px 14px; border-radius: var(--radius-md);
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    box-shadow: var(--shadow-1); overflow: hidden; text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
}
.dash-btn::before { content: ""; position: absolute; inset: 0; background: var(--brand-grad); opacity: 0; transition: opacity 0.25s; z-index: 0; }
.dash-btn:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: transparent; color: #fff; }
.dash-btn:hover::before { opacity: 1; }
.dash-icon { font-size: 30px; position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(6, 182, 212, 0.3)); transition: transform 0.25s; }
.dash-btn:hover .dash-icon { transform: scale(1.12) translateY(-2px); }
.dash-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; position: relative; z-index: 1; color: var(--ink); }
.dash-btn:hover .dash-label { color: #fff; }

.quick-actions-mobile { display: flex; gap: 10px; }
.quick-actions-mobile .btn-new { justify-content: center; min-height: 46px; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Welcome banner ---------- */
.welcome {
    position: relative; border-radius: var(--radius-lg); padding: 12px 18px; color: #fff;
    overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px; box-shadow: var(--shadow-2);
    background: linear-gradient(120deg, #0b1220 0%, #0e2a3d 55%, #1e1b4b 100%);
}
.welcome::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 160px at 92% -20%, rgba(34, 211, 238, 0.34), transparent); }
.welcome::after { content: ""; position: absolute; width: 110px; height: 110px; right: -34px; bottom: -48px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); }
.welcome-greet { position: relative; z-index: 1; }
.welcome h2 { font-size: 17px; margin-bottom: 2px; letter-spacing: -0.01em; }
.welcome h2 em { font-style: normal; background: linear-gradient(90deg, #34d399, #22d3ee, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome p { color: rgba(255, 255, 255, 0.8); font-size: 12px; margin: 0; }
.welcome-actions { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.welcome .btn-light { background: #fff; color: #0b1220; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); }

/* ---------- Details row (settings) ---------- */
.details-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.detail-item { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.detail-item label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; display: block; margin-bottom: 4px; }
.detail-item p { margin: 0; color: var(--ink); font-weight: 600; }
.customer-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.customer-profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.customer-profile-grid .card { min-width: 0; }
.customer-profile-grid .detail-item p,
.customer-profile-grid .detail-item a { overflow-wrap: anywhere; }
.customer-profile-actions { align-items: stretch; }
.customer-profile-actions .btn { justify-content: center; }

@media (max-width: 760px) {
    .customer-profile-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .customer-profile-grid .details-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .customer-profile-grid .card-header h4,
    .customer-profile-grid h4 {
        font-size: 15px;
        line-height: 1.25;
    }

    .customer-profile-grid .detail-item {
        padding: 11px 12px;
    }

    .customer-profile-actions .btn {
        width: 100%;
    }
}

/* ---------- QoL components ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 4000; background: var(--brand-grad); box-shadow: 0 0 12px rgba(6, 182, 212, 0.55); transition: width 0.12s linear; }

.to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 46px; height: 46px;
    border: 0; border-radius: 14px; cursor: pointer; display: grid; place-items: center;
    color: #fff; background: var(--brand-grad); box-shadow: 0 12px 30px rgba(6, 182, 212, 0.4);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s, box-shadow 0.3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(6, 182, 212, 0.55); }

.toast-stack { position: fixed; top: calc(var(--top-h) + 14px); right: 18px; z-index: 900; display: grid; gap: 10px; max-width: 360px; }
.toast { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; box-shadow: var(--shadow-3); border-left: 4px solid var(--brand); font-size: 14px; font-weight: 600; color: var(--ink); animation: toastIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.toast-error { border-left-color: var(--danger); }
.toast-info { border-left-color: var(--brand-2); }
.toast-success { border-left-color: var(--success); }
.toast-icon { flex: none; }
.toast-close { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--muted); margin-left: auto; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal on scroll (decorative dashboard elements only) ----------
   Content-bearing elements (cards, tables, panels) are NEVER hidden, so
   lists always render. Only the decorative welcome banner, stat tiles and
   module grid animate in, with a JS safety net that force-reveals them. */
.fp-anim .welcome, .fp-anim .stat-card, .fp-anim .big-actions-grid {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.fp-anim .in-view { opacity: 1; transform: none; }

/* ---------- Auth pages ---------- */
.login-container { background: var(--space-base); }
.login-container::before,
.login-container::after { display: none; }
.auth-page {
    min-height: 100vh; display: grid; place-items: center; padding: 26px;
    background: var(--space-base); position: relative;
}
.auth-page::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(760px 360px at 10% -8%, rgba(6, 182, 212, 0.1), transparent 60%),
        radial-gradient(720px 340px at 96% -6%, rgba(99, 102, 241, 0.1), transparent 60%);
}
.auth-card {
    width: 100%; max-width: 440px; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 36px; box-shadow: var(--shadow-2);
    animation: authIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-card.auth-wide { max-width: 560px; }
@keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.auth-mark {
    width: 48px; height: 48px; border-radius: 14px; flex: none;
    background: var(--brand-grad); color: #fff;
    display: grid; place-items: center; box-shadow: 0 10px 24px rgba(6, 182, 212, 0.35);
}
.auth-mark svg { width: 24px; height: 24px; }
.auth-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.auth-brand-name em { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand); }
.auth-title { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.auth-sub { color: var(--slate); margin: 0 0 24px; font-size: 14.5px; }
.auth-switch { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.auth-switch .btn { display: inline-flex; justify-content: center; }
.auth-card .btn-primary, .auth-card .btn-success { width: 100%; padding: 13px; font-size: 15px; justify-content: center; }
.auth-alt { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.auth-alt p { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }
.auth-footer { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--slate); }
.auth-footer a { color: var(--brand); font-weight: 700; }
.auth-theme { position: fixed; top: 18px; right: 18px; z-index: 800; }

/* Schedule items (dashboard + classic list) */
.schedule-item { background: var(--card); border-color: var(--line); }
.schedule-item:hover { border-color: var(--brand); box-shadow: var(--shadow-2); }
.schedule-item-time { border-right: 1px dashed var(--line); }
.schedule-time-main { color: var(--brand); }
.schedule-time-date { color: var(--slate); }
.schedule-item-title { color: var(--ink); }
.schedule-item-meta { color: var(--slate); }
.schedule-item-address { color: var(--muted); }
.dashboard-schedule-list .dashboard-schedule-item { background: var(--card); border-color: var(--line); }
.dashboard-schedule-line { color: var(--ink); }
.dashboard-schedule-when { color: var(--brand); }
.dashboard-schedule-sub, .dashboard-schedule-empty { color: var(--slate); }
.schedule-tab-btn { background: var(--card); border-color: var(--line); color: var(--slate); }
.schedule-tab-btn.is-active { background: var(--brand-grad); border-color: transparent; color: #fff; }
.schedule-tab-panel { background: var(--card); border-color: var(--line); }
.schedule-tab-panel-head { border-bottom: 1px solid var(--line); }
.schedule-tab-panel-title { color: var(--ink); }
.schedule-tab-value { color: var(--ink); }
.schedule-tab-label { color: var(--muted); }

/* ---------- Dark-mode component overrides ---------- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) body { background: var(--bg); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .app-content { }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .topbar { background: rgba(11, 17, 32, 0.82); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .top-burger, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .top-icon { background: var(--bg); border-color: var(--line); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .top-avatar { border-color: #121b30; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .drop-menu { background: var(--card); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .drop-head { border-bottom-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .drop-menu a:hover { background: var(--bg); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .drop-menu a > svg { color: var(--muted); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .drop-ico { background: var(--brand-soft); color: var(--brand); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card { background: var(--card); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card:hover { border-color: rgba(34, 211, 238, 0.4); box-shadow: var(--shadow-2); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card-header { border-bottom-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card-header h4, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card-title, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card-value { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container { background: var(--card); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-header { border-bottom-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-header h3 { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container table thead th { background: rgba(255, 255, 255, 0.03) !important; color: var(--table-caption) !important; border-bottom-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container table td { color: var(--ink); border-bottom-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02) !important; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container table tbody tr:hover td { background: rgba(34, 211, 238, 0.08) !important; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-filter { background: var(--bg); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-filter input { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .badge { background: var(--bg); border-color: var(--line); color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .badge-secondary { background: var(--bg); color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .badge-dark { background: #1d2944; color: #fff; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-secondary { background: var(--card); border-color: var(--line); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-logout { background: var(--card); border-color: var(--line); color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-dark { background: #1d2944; color: #fff; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group label { color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group input, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group select, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group textarea { background: var(--bg); border-color: var(--line); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group input:focus, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group select:focus, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group textarea:focus { background: var(--card); border-color: var(--brand); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .form-group input::placeholder { color: var(--muted); }

/* ============================================================
   Native SELECT dropdown styling - matches cust-combo__list
   ============================================================ */
/* Firefox - style the dropdown options */
@-moz-document url-prefix() {
  select option {
    background: var(--bg-2, #ffffff);
    color: var(--ink, #0f172a);
    padding: 11px 14px;
  }
  select option:hover,
  select option:checked {
    background: var(--brand-soft, rgba(6, 182, 212, 0.1));
  }
  :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) select option {
    background: var(--bg-2, #16203a);
    color: var(--ink, #e7edf8);
  }
  :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) select option:hover,
  :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) select option:checked {
    background: var(--brand-soft, rgba(34, 211, 238, 0.16));
  }
}

/* WebKit/Blink - limited but we can style the button part */
select {
  /* Ensure consistent base styling is inherited from .form-group select */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 44px !important;
}

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b96a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Focus state removes custom arrow to show native focus ring */
select:focus {
  background-image: none;
}

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) select:focus {
  background-image: none;
}

/* For select dropdown (listbox) - WebKit pseudo-elements don't work on options
   but we can ensure the select itself looks consistent */
.form-group select {
  min-width: 200px;
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .alert { border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .page-header h2 { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .page-description { color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dash-btn { background: var(--card); border-color: var(--line); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dash-btn:hover { border-color: transparent; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dash-label { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .detail-item { background: var(--bg); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .detail-item label { color: var(--muted); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .detail-item p { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .auth-card { background: var(--card); border-color: var(--line); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .auth-brand-name { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .auth-title { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .toast { background: var(--card); border-color: var(--line); color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .welcome { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-item { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-item-time { border-right-color: #2f4868; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-time-main { color: #7bc8ff; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-time-date, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-item-meta, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-item-address { color: #9eb4d3; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-item-title { color: #f0f6ff; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dashboard-schedule-item { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-collapse { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-collapse > summary { color: #dbe6f8; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-collapse > summary:hover { background: #1b2b4c; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-collapse-count { background: #1b2b4c; color: #9eb4d3; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dashboard-schedule-line { color: #dbe6f8; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dashboard-schedule-sub, :is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .dashboard-schedule-empty { color: #9eb4d3; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-tab-btn { background: #141f37; border-color: #2a4066; color: #9eb4d3; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-tab-btn.is-active { background: var(--brand-grad); color: #fff; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-tab-panel { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .schedule-tab-panel-title { color: #f0f6ff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .side-nav { transform: translateX(-100%); }
    .side-nav.open { transform: none; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.4); }
    .app-main { margin-left: 0; }
    .top-burger { display: grid; }
    .app-content { padding: 20px 16px; }
    .topbar { padding: 0 16px; gap: 10px; }
    .top-title { font-size: 17px; }
}
@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .big-actions-grid { grid-template-columns: repeat(2, 1fr); }
    /* Deliberately matches the 640px rule below rather than enlarging the
       banner on the smallest screens, which is what it used to do. */
    .welcome { padding: 11px 13px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    /* Keep revealed content visible when transitions are disabled */
    .fp-anim .welcome, .fp-anim .stat-card, .fp-anim .big-actions-grid {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============ Reminders page ============ */
.page-lead {
    margin-bottom: 18px;
}

.reminder-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.reminder-card h4 {
    margin: 0;
    font-size: 17px;
}

.reminder-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.reminder-card .btn {
    margin-top: auto;
}

.reminder-count {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 2px 0 4px;
}

.table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 28px 16px;
    font-size: 14px;
}

/* ============ Dark mode contrast fixes ============ */

/* --- Sidebar: section labels (too dim at #5b6a81) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .side-label { color: #8896b0; }

/* --- Sidebar: nav link text & icons — bump contrast --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .side-link { color: #b4c2da; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .side-link:hover { color: #fff; }

/* --- Alerts: fix dark-teal-on-dark-bg (too dull to read) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .alert-info  { background: rgba(34,211,238,0.10); color: #7dd3fc; border-color: rgba(34,211,238,0.22); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .alert-success { background: rgba(16,185,129,0.10); color: #6ee7b7; border-color: rgba(16,185,129,0.22); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .alert-warning { background: rgba(245,158,11,0.10); color: #fcd34d; border-color: rgba(245,158,11,0.22); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .alert-danger  { background: rgba(239,68,68,0.10);  color: #fca5a5; border-color: rgba(239,68,68,0.22); }

/* --- Welcome banner: subtitle (too dull) & name gradient (fades into bg) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .welcome p { color: rgba(255,255,255,0.92); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .welcome h2 em {
    background: linear-gradient(90deg, #34d399, #22d3ee, #a78bfa);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Stat tiles: icon box too transparent (icons hard to see) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .stat-card .stat-ico { background: rgba(255,255,255,0.28); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .stat-card .lbl { color: rgba(255,255,255,0.92); }

/* --- Table cards: ensure dark bg (not white in dark shell) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-container { background: var(--card); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-header h3 { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-header p  { color: var(--slate); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .table-header .badge { border-color: var(--line); }

/* --- Buttons: soften glow in dark so they aren't overly bright --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-primary { box-shadow: 0 6px 20px rgba(34,211,238,0.22); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-secondary { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.20); color: #c8d5ec; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .btn-secondary:hover { background: rgba(148,163,184,0.18); border-color: rgba(148,163,184,0.35); color: #fff; }

/* --- Page description / muted paragraph text --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .page-description { color: #a3b5d0; }

/* --- Card inner headings & body (ensure contrast) --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card h4 { color: var(--ink); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .card p  { color: #a3b5d0; }

/* --- Reminder cards / stat counts: muted label text --- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .reminder-count { color: #a3b5d0; }

/* ====================================================================
   Settings Page — scoped styles
   ==================================================================== */

/* ---- Horizontal tab bar ---- */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

/* ---- Section wrapper ---- */
.settings-section {
    animation: reveal-up 0.35s ease both;
}

/* ---- 2-column compact form grid ---- */
.settings-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
    .settings-two-col { grid-template-columns: 1fr; }
}

/* ---- Upload zone card ---- */
.settings-upload {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    background: var(--bg);
    border: 2px dashed var(--line);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, background 0.2s;
}
.settings-upload:hover {
    border-color: var(--brand);
    background: rgba(6, 182, 212, 0.04);
}
.settings-upload-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.settings-upload-icon svg {
    width: 22px;
    height: 22px;
}
.settings-upload-body { flex: 1; min-width: 0; }
.settings-upload-label {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
}
.settings-upload-hint {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.45;
}
.settings-upload-preview {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-upload-preview img {
    max-width: 200px;
    max-height: 80px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    object-fit: contain;
}
.settings-upload-preview .settings-upload-file {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-upload-preview .settings-upload-file:hover {
    text-decoration: underline;
}

/* ---- Toggle switch ---- */
.settings-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    -webkit-user-select: none;
    user-select: none;
}
.settings-toggle-wrap:hover {
    border-color: var(--brand);
}
.settings-toggle-label {
    flex: 1;
}
.settings-toggle-label strong {
    display: block;
    font-size: 14px;
    color: var(--ink);
}
.settings-toggle-label span {
    display: block;
    font-size: 12px;
    color: var(--slate);
    margin-top: 2px;
}
.settings-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.settings-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: background 0.25s;
}
.settings-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    transition: transform 0.25s;
    pointer-events: none;
}
.settings-toggle input:checked ~ .settings-toggle-track {
    background: var(--brand);
}
.settings-toggle input:checked ~ .settings-toggle-knob {
    transform: translateX(22px);
}

/* ---- Developer mode banner ---- */
.settings-dev-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.settings-dev-banner-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.settings-dev-banner-icon svg {
    width: 20px;
    height: 20px;
}
.settings-dev-banner-body {
    flex: 1;
}
.settings-dev-banner-body strong {
    display: block;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}
.settings-dev-banner-body span {
    font-size: 12px;
    color: var(--slate);
}

/* ---- Notification toggle row ---- */
.settings-notif-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.settings-notif-row:last-child {
    border-bottom: none;
}
.settings-notif-row label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

/* ---- Card with subtle header icon ---- */
.settings-card-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.settings-card-icon span {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.settings-card-icon svg {
    width: 17px;
    height: 17px;
}

/* ---- Subscription card grid ---- */
.settings-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.settings-sub-item {
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-align: center;
}
.settings-sub-item strong {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}
.settings-sub-item span {
    font-size: 11px;
    color: var(--slate);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ====================================================================
   Mobile Responsive Fixes (≤640px)
   ==================================================================== */
@media (max-width: 640px) {
    /* ---- Buttons: smaller padding + text, icons stay 18px ---- */
    .btn { padding: 10px 16px; font-size: 13px; gap: 6px; border-radius: 10px; }
    .btn-sm { padding: 8px 12px; font-size: 12px; }
    .btn svg { width: 16px; height: 16px; }

    /* ---- Page header ---- */
    .page-header h2 { font-size: 22px; }
    .page-header::after { width: 42px; height: 3px; }

    /* ---- Settings tab bar: single-row horizontal scroll ---- */
    /* These used to be a nowrap row that scrolled sideways. Seven tabs need
       about 700px and a phone has 360-430, so roughly half of settings sat off
       the right-hand edge with nothing on screen to say they were there. They
       now lay out as a grid and every one is visible. */
    .settings-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 12px;
    }
    .settings-tabs .btn {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        white-space: nowrap;
        font-size: 12.75px;
        padding: 10px 12px;
        min-height: 42px;
    }
    .settings-tabs .btn svg { flex-shrink: 0; }
    .settings-tabs .btn span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- Settings two-col: stack vertically ---- */
    .settings-two-col { grid-template-columns: 1fr; gap: 12px; }

    /* ---- Settings upload zones ---- */
    .settings-upload { padding: 14px; gap: 12px; }
    .settings-upload-icon { width: 40px; height: 40px; border-radius: 10px; }
    .settings-upload-icon svg { width: 18px; height: 18px; }

    /* ---- Developer mode banner: stack ---- */
    .settings-dev-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }

    /* ---- Notification toggles ---- */
    .settings-toggle-wrap { padding: 12px 14px; gap: 10px; }
    .settings-toggle { width: 44px; height: 24px; }
    .settings-toggle-knob { width: 18px; height: 18px; top: 3px; left: 3px; }
    .settings-toggle input:checked ~ .settings-toggle-knob { transform: translateX(20px); }

    /* ---- Subscription grid ---- */
    .settings-sub-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .settings-sub-item { padding: 12px; }
    .settings-sub-item strong { font-size: 18px; }

    /* ---- Tables: hide less important columns ---- */
    .table-container table th:nth-child(n+5),
    .table-container table td:nth-child(n+5) { display: none; }

    /* ---- Cards: reduce padding ---- */
    .card { padding: 18px; border-radius: 14px; }
    .card-header { padding-bottom: 12px; margin-bottom: 12px; }
    .card-header h4 { font-size: 14px; }

    /* ---- Form groups ---- */
    .form-group input,
    .form-group select,
    .form-group textarea { padding: 10px 12px; font-size: 14px; }

    /* ---- Alerts ---- */
    .alert { padding: 10px 14px; font-size: 13px; border-radius: 10px; }

    /* ---- Badges ---- */
    .badge { padding: 3px 9px; font-size: 11px; }

    /* ---- Welcome banner ---- */
    .welcome { padding: 11px 13px; border-radius: 14px; margin-bottom: 12px; }
    .welcome h2 { font-size: 15px; }
    .welcome p { font-size: 11.5px; }
    .welcome-actions .btn { width: 100%; min-height: 38px; font-size: 13.5px; }

    /* ---- Stat tiles ---- */
    .stat-card { padding: 14px; border-radius: 12px; }
    .stat-card .val { font-size: 20px; }
    .stat-card .stat-ico { width: 34px; height: 34px; border-radius: 10px; }

    /* ---- Topbar: all buttons same height, single row, flush to top ---- */
    .topbar { padding: 0 14px; gap: 8px; align-items: center; flex-direction: row !important; height: var(--top-h); }
    .topbar .top-title { font-size: 16px; flex: 1; min-width: 0; }
    .top-burger { width: 40px; height: 40px; border-radius: 10px; }
    .top-burger svg { width: 20px; height: 20px; }
    .top-icon { width: 40px; height: 40px; border-radius: 10px; }
    .top-avatar { width: 40px; height: 40px; font-size: 15px; }
    .btn-top-add { height: 40px; padding: 0 12px; }
    .btn-top-add svg { width: 16px; height: 16px; }

    /* ---- Sidebar: off-canvas on mobile ---- */
    .side-nav { width: 260px; }

    /* ---- Reminders: tabs full-width ---- */
    .reminder-tabs .btn { width: 100%; justify-content: center; }
    .reminder-grid { grid-template-columns: 1fr; }

    /* ---- Job form checkbox: left-align on mobile ---- */
    .jobs-compact-form .same-address-toggle {
        display: block !important;
        text-align: left;
        padding-left: 0;
    }
    .jobs-compact-form .same-address-toggle input[type="checkbox"] {
        width: auto !important;
        display: inline;
    }

    /* ---- Quick actions grid ---- */
    .big-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dash-btn { padding: 18px 10px; }
    .dash-label { font-size: 13px; }

    input[type="search"],
    input[type="number"] {
        min-width: 0 !important;
    }

    /* ---- Tab buttons: ensure they don't overflow ---- */
    .btn-group,
    .reminder-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }
    .btn-group .btn,
    .reminder-tabs .btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        text-align: center;
    }
}

/* ---- Appliance tags in job form ---- */
#property-appliances-wrap {
    margin-bottom: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
    border: none !important;
    background: none !important;
}

#property-appliances-wrap label {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--slate);
}

#property-appliances-list {
    gap: 4px;
}

#appliance-hint {
    margin-top: 2px;
    font-size: 10px;
    color: var(--muted);
}
.appliance-tag {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    line-height: 1.2;
    white-space: nowrap;
}

.appliance-tag:hover {
    transform: translateY(-1px);
}

/* Colored variants by appliance type */
.appliance-tag[data-type="boiler"],
.appliance-tag[data-type="Boiler"],
.appliance-tag[data-type="Combi Boiler"],
.appliance-tag[data-type="combi_boiler"] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    color: #1e40af;
}

.appliance-tag[data-type="cooler"],
.appliance-tag[data-type="Cooler"] {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
    border-color: #14b8a6;
    color: #115e59;
}

.appliance-tag[data-type="heater"],
.appliance-tag[data-type="Heater"] {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
    border-color: #f43f5e;
    color: #9f1239;
}

.appliance-tag[data-type="sensor"],
.appliance-tag[data-type="Sensor"] {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-color: #a855f7;
    color: #6b21a8;
}

/* ==========================================================================
   "TEMP" row badge - jobs and customers with no customer record yet.

   It is the first line of the row's first cell rather than an absolutely
   positioned box. Table cells are vertical-align: middle, which re-centres the
   content inside any taller box and puts the text straight back under an
   absolute badge - laying it out in flow avoids that entirely, and the row
   grows by exactly the badge's height.
   ========================================================================== */
.row-temp-badge {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 0 3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fde68a;
    color: #7c4a03;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.6;
    text-transform: uppercase;
}

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .row-temp-badge {
    background: #4a3a12;
    color: #fcd34d;
}

/* Collapsible certificate sections. The panels start shut so the form opens
   short; <details> keeps its contents in the DOM while closed, so every input
   still holds its value and still posts whether the panel is open or not. */
.cert-collapse {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--card, #ffffff);
}

.cert-collapse > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    border-radius: 8px;
}

.cert-collapse > summary::-webkit-details-marker {
    display: none;
}

/* Chevron drawn in CSS, so no icon font or image is needed. */
.cert-collapse > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 120ms ease-out;
}

.cert-collapse[open] > summary::before {
    transform: rotate(45deg);
}

.cert-collapse > summary:hover {
    background: var(--primary-soft, #eef4ff);
}

.cert-collapse > summary:focus-visible {
    outline: 2px solid var(--primary, #1e88e5);
    outline-offset: -2px;
}

.cert-collapse-count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft, #eef4ff);
    color: var(--primary, #1e88e5);
    font-size: 11px;
    font-weight: 700;
}

.cert-collapse-body {
    padding: 0 12px 12px;
}

/* "Select as appropriate and relevant": the dropdown sits directly after its
   question rather than out at the right-hand edge, so it reads as that
   question's answer. The label is not stretched, so the box follows the text. */
.pipework-outcome-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.pipework-outcome-row > label {
    margin: 0;
    flex: 0 1 auto;
    font-weight: 500;
}

.pipework-outcome-row > select {
    flex: 0 0 auto;
    width: 150px;
    min-width: 120px;
}

/* Final phone parity layer. Keep dense desktop grids usable on narrow screens
   without changing the desktop layout or requiring page-specific overrides. */

@media (max-width: 640px) {

    .schedule-tabs,
    .schedule-tab-panel-grid,
    .document-form-grid,
    .appliance-form-grid-inline,
    .pipework-outcomes-grid,
    .form-row[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0;
        width: 100%;
    }

    .schedule-tabs > *,
    .schedule-tab-panel-grid > *,
    .document-form-grid > *,
    .appliance-form-grid-inline > *,
    .pipework-outcomes-grid > *,
    .form-row[style*="grid-template-columns"] > * {
        min-width: 0;
        max-width: 100%;
    }

    .schedule-tab-list {
        max-height: none;
        overflow: visible;
    }

    .schedule-tab-panels {
        padding: 12px;
    }

    [role="dialog"],
    .modal,
    .modal-content {
        width: min(100% - 20px, 560px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }

    .table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-container tbody {
        min-width: 0;
    }

    .table-container tbody td:last-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .table-container tbody td:last-child .action-link,
    .table-container tbody td:last-child button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
    }

    .card {
        padding: 14px;
    }

    /* (The touch-scrolling hint that was here is gone with the scroller.) */
}

@media (max-width: 380px) {

    .table-container tbody tr {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MOBILE LISTS · v6.5 - TWO LINES PER ROW, TAP TO EXPAND
   On phones each list row collapses to two lines. Tapping expands it to the
   full card; tapping again opens the record. Expanding a row collapses any
   other, so the list always stays short.

   Collapsed layout is a wrapping flex row:
     line 1  first cell + second cell, side by side
     line 2  third cell, forced onto its own line by flex-basis 100%
   The jobs list overrides this further down, because its first column is a
   bare "#ID".

   Only rows that are already click-to-open (tr.clickable-row) collapse -
   empty-state rows and the sub-tables inside forms are left alone. Desktop is
   untouched: everything here sits inside the phone breakpoint.
   ========================================================================== */
@media (max-width: 768px) {
    .table-container tbody tr.clickable-row {
        position: relative;
        padding-right: 30px;
    }

    /* ---- collapsed: two lines ---- */
    .table-container tbody tr.clickable-row:not(.is-expanded) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
        row-gap: 1px;
        overflow: hidden;
    }
    .table-container tbody tr.clickable-row:not(.is-expanded) > td {
        display: none;
    }
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(1),
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(2),
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(3) {
        display: block;
        min-width: 0;
        padding: 1px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* line 1 */
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(1) {
        flex: 0 0 auto;
        font-size: 15px;
        font-weight: 700;
    }
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(2) {
        flex: 1 1 auto;
        font-size: 15px;
    }
    /* line 2 - flex-basis 100% pushes it onto its own line */
    .table-container tbody tr.clickable-row:not(.is-expanded) > td:nth-child(3) {
        flex: 0 0 100%;
        font-size: 13.5px;
        color: var(--text-muted);
    }
    /* the "LABEL" caption belongs to the expanded card, not the summary lines */
    .table-container tbody tr.clickable-row:not(.is-expanded) > td::before {
        display: none;
    }

    /* ---- expanded card: larger, more readable text ---- */
    .table-container tbody td {
        font-size: 14.5px;
    }
    .table-container tbody td::before {
        font-size: 11px;
    }

    /* ---- chevron affordance ---- */
    .table-container tbody tr.clickable-row::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 22px;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--text-muted);
        border-bottom: 2px solid var(--text-muted);
        transform: rotate(45deg);
        transition: transform 0.18s ease;
        pointer-events: none;
    }
    .table-container tbody tr.clickable-row.is-expanded::after {
        top: 20px;
        right: 18px;
        transform: rotate(-135deg);
        border-color: var(--brand, #06b6d4);
    }

    /* An open row gets a visible target in the corner the chevron sits in, so
       that closing it again looks like something you can do. The chevron
       itself is a pseudo-element and cannot be tapped, so the script matches
       this corner by position; this is what makes that area look like a
       control rather than empty space. */
    .table-container tbody tr.clickable-row.is-expanded::before {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--bg, #f1f5f9);
        border: 1px solid var(--line, #e2e8f0);
        pointer-events: none;
    }

    /* Trade is left out of an opened job. On a single-trade business it says
       the same thing on every row, and the opened row is where the space is
       worth something. Keyed on the column heading rather than its position,
       so moving a column does not silently hide the wrong one. The wide-screen
       table still has the column. */
    .jobs-list tbody tr.clickable-row.is-expanded td[data-label="Trade"] {
        display: none;
    }

    /* ---- expanded: highlight which row is open ---- */
    .table-container tbody tr.clickable-row.is-expanded {
        border-color: var(--brand, #06b6d4);
    }
}

/* --------------------------------------------------------------------------
   JOBS LIST · drag to reorder
   The handle, the row while it is being dragged, and the flash that says the
   new order was saved. Same values as the to-do list's, which is the feature
   this one was modelled on, so the two behave alike to the hand.
   -------------------------------------------------------------------------- */
.jobs-id-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.jobs-id-text {
    min-width: 0;
}

.jobs-drag-handle {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    /* background-color, not background: the shorthand would wipe out any
       background-image the button inherits. */
    background-color: var(--bg);
    color: var(--text-muted);
    cursor: grab;
    /* Without this a drag on a touch screen scrolls the page instead of
       moving the row, and the pointer events never arrive. */
    touch-action: none;
    user-select: none;
    font-size: 16px;
    line-height: 1;
}

.jobs-drag-handle:active {
    cursor: grabbing;
}

.jobs-list tbody tr.clickable-row.is-dragging {
    opacity: .88;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}

/* Faint while the order is in flight, so a slow connection does not look like
   nothing happened. */
.jobs-list tbody tr.clickable-row.is-moving {
    opacity: .6;
}

/* Set on the row and on its cells: on a wide screen the cells are
   transparent and the row carries the colour, and on a phone the row is a
   card with a white background of its own. */
.jobs-list tbody tr.clickable-row.reorder-flash,
.jobs-list tbody tr.clickable-row.reorder-flash > td {
    background-color: var(--primary-soft);
    transition: background-color .2s ease;
}

body.jobs-drag-active {
    cursor: grabbing;
    user-select: none;
}

@media (max-width: 768px) {
    /* A thumb needs more than 26px. */
    .jobs-drag-handle {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

/* --------------------------------------------------------------------------
   MOBILE LISTS · jobs list
   The jobs table leads with a bare "#ID" column, which says nothing on its own,
   so the collapsed row shows the customer name with the job address beneath it.
   Higher specificity than the rules above, so it applies to this table only.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* the #ID cell is only useful once the row is opened */
    .table-container.jobs-list tbody tr.clickable-row:not(.is-expanded) > td:nth-child(1) {
        display: none;
    }
    /* line 1 - customer name */
    .table-container.jobs-list tbody tr.clickable-row:not(.is-expanded) > td:nth-child(2) {
        flex: 0 0 100%;
        font-size: 15px;
        font-weight: 700;
    }

    /* Except when the list can be reordered: the cell comes back to carry the
       drag handle, with the #ID text still hidden, so the handle costs nothing
       and the name moves up beside it instead of onto its own line. A phone is
       where dragging a row is most useful, so this is the one place the handle
       could not be allowed to disappear. */
    .table-container.jobs-list.is-reorderable tbody tr.clickable-row:not(.is-expanded) > td:nth-child(1) {
        display: block;
        flex: 0 0 auto;
        align-self: center;
        padding: 0;
    }
    .table-container.jobs-list.is-reorderable tbody tr.clickable-row:not(.is-expanded) > td:nth-child(1) .jobs-id-text {
        display: none;
    }
    .table-container.jobs-list.is-reorderable tbody tr.clickable-row:not(.is-expanded) > td:nth-child(2) {
        flex: 1 1 auto;
    }
    /* line 2 - job address */
    .table-container.jobs-list tbody tr.clickable-row:not(.is-expanded) > td:nth-child(3) {
        flex: 0 0 100%;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--text-muted);
    }
}

/* ==========================================================================
   CUSTOMERS LIST - DESKTOP: one line per customer
   The name cell used to carry the customer code on a second line, so every
   row was two lines tall and only a handful fitted on screen. The code now
   follows the name inline, and the columns are given fixed shares so a long
   address or email truncates with an ellipsis instead of wrapping and
   re-introducing a second line. Each of those cells carries a title, so the
   full value is still readable on hover.

   table-layout:fixed is what makes truncation possible at all - without it a
   table cell grows to fit its content and ignores the width. Desktop only:
   under 768px the generic .table-container rules stack each row into a card,
   which is the right shape for a phone and must keep its wrapping.
   ========================================================================== */
@media (min-width: 769px) {
    .table-container.customers-list table {
        table-layout: fixed;
        width: 100%;
    }
    .table-container.customers-list tbody td,
    .table-container.customers-list thead th {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Back to the 12px every other table in the app uses, so the row height
       matches the rest of the site - still one line per customer, which is
       what the two-line name cell was costing. */
    .table-container.customers-list tbody td {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .table-container.customers-list th:nth-child(1),
    .table-container.customers-list td:nth-child(1) { width: 22%; }
    .table-container.customers-list th:nth-child(2),
    .table-container.customers-list td:nth-child(2) { width: 27%; }
    .table-container.customers-list th:nth-child(3),
    .table-container.customers-list td:nth-child(3) { width: 9%; }
    .table-container.customers-list th:nth-child(4),
    .table-container.customers-list td:nth-child(4) { width: 21%; }
    .table-container.customers-list th:nth-child(5),
    .table-container.customers-list td:nth-child(5) { width: 12%; }
    .table-container.customers-list th:nth-child(6),
    .table-container.customers-list td:nth-child(6) { width: 9%; }
}

/* ==========================================================================
   INVOICE FORM · v6.5 - MOBILE
   The line items table is laid out for a desktop at min-width:1000px, so on a
   phone it forced sideways scrolling to reach Qty, Unit Price and Line Total.
   Here each item becomes two compact lines with no horizontal scroll:

       01 | [ description...................... ]
          | QTY        UNIT PRICE    LINE TOTAL
          | [    ]     [ £     ]     [ £      ]

   The table, rows and cells keep every id, name and value, so the totals
   script and the POST payload are untouched. Inline styles on the table and
   cells are why the overrides below need !important. Phone breakpoint only.
   ========================================================================== */
@media (max-width: 768px) {
    .invoice-items-wrap {
        overflow-x: visible !important;
    }
    .invoice-items-table {
        min-width: 0 !important;
        display: block;
    }
    /* column headings are replaced by the per-field labels below */
    .invoice-items-table thead {
        display: none;
    }
    .invoice-items-table tbody {
        display: block;
    }
    .invoice-items-table tbody tr {
        display: grid;
        grid-template-columns: 24px repeat(3, minmax(0, 1fr));
        gap: 4px 8px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
    }
    .invoice-items-table tbody tr:last-child {
        border-bottom: 0;
    }
    .invoice-items-table tbody td {
        /* !important because the cells carry inline padding/border */
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    /* row number, sitting alongside both lines */
    .invoice-items-table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
    }
    /* line 1 - description across the full width */
    .invoice-items-table tbody td:nth-child(2) {
        grid-column: 2 / -1;
        grid-row: 1;
    }
    /* line 2 - the three numeric fields side by side */
    .invoice-items-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .invoice-items-table tbody td:nth-child(4) { grid-column: 3; grid-row: 2; }
    .invoice-items-table tbody td:nth-child(5) { grid-column: 4; grid-row: 2; }

    .invoice-items-table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* Inputs match the app's mobile field baseline: 44px tall and 16px text.
       Anything under 16px makes iOS Safari zoom the page in on focus, which
       jumps the layout on every tap, and under 44px is an awkward target. */
    .invoice-items-table tbody td input {
        width: 100%;
        min-height: 44px;
        padding: 9px 10px;
        font-size: 16px;
        border-radius: 8px;
    }
    .invoice-items-table tbody td .currency-input {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .invoice-items-table tbody td .currency-input input {
        min-width: 0;
    }

    /* the rest of the invoice form: roomier fields, no cramped two-up rows */
    .document-form-grid .form-group input,
    .document-form-grid .form-group select,
    .document-form-grid .form-group textarea {
        min-height: 44px;
        font-size: 16px;
    }
}

/* --------------------------------------------------------------------------
   INVOICE FORM · extra line items
   Lines 11-15 stay in the page - the totals script binds to every row at load -
   but are hidden until "+ Add line" reveals them. !important because the mobile
   block above sets display:grid on these rows, which would otherwise win over
   a plain display:none. Applies on desktop and mobile alike.
   -------------------------------------------------------------------------- */
.invoice-items-table tbody tr.invoice-item-row--hidden {
    display: none !important;
}

/* ==========================================================================
   CERTIFICATE FORM · v6.5 - MOBILE
   The gas-safety tables are built for a desktop: the inspection grid at
   min-width 1200px and the defects grid at 900px, both inside a sideways
   scrolling box. On a phone that meant dragging the table left and right to
   reach the fields. Here each row becomes a labelled card instead.

   Column headings are hidden and their labels regenerated per cell with
   nth-child, so no markup had to change in forty-odd cells - only two class
   hooks on the tables. The appliance list is matched through #appliance-list,
   which covers both the rendered copy and the one the AJAX refresh returns.
   Phone breakpoint only; the desktop tables are untouched.
   ========================================================================== */
@media (max-width: 768px) {
    .cert-wide-wrap {
        overflow-x: visible !important;
        border: 0 !important;
    }
    .cert-wide-table {
        min-width: 0 !important;
        display: block;
    }
    .cert-wide-table thead {
        display: none;
    }
    .cert-wide-table tbody {
        display: block;
    }
    .cert-wide-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-2, #fff);
    }
    .cert-wide-table tbody td {
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
    }
    /* the leading "#" cell becomes the card heading */
    .cert-wide-table tbody td:first-child {
        grid-column: 1 / -1;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--brand, #06b6d4);
    }
    .cert-wide-table tbody td:not(:first-child)::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 3px;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .cert-wide-table tbody td input,
    .cert-wide-table tbody td select,
    .cert-wide-table tbody td textarea {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* ---- inspection rows: label each column by position ---- */
    /* The cell carries the appliance name itself now, so nothing is added to it. */
    .cert-inspection-table tbody td:first-child { grid-column: 1 / -1; }
    .cert-inspection-table th:first-child,
    .cert-inspection-table td:first-child { min-width: 0; width: auto; }
    .cert-inspection-table .cert-insp-appliance { max-width: none; font-size: 12px; }
    .cert-inspection-table tbody td:nth-child(2) { grid-column: 1 / -1; }
    .cert-inspection-table tbody td:nth-child(2)::before  { content: 'Pressure / Heat Input'; }
    .cert-inspection-table tbody td:nth-child(3)::before  { content: 'Safety Devices'; }
    .cert-inspection-table tbody td:nth-child(4)::before  { content: 'Ventilation'; }
    .cert-inspection-table tbody td:nth-child(5)::before  { content: 'Flue Visual'; }
    .cert-inspection-table tbody td:nth-child(6)::before  { content: 'Flue Operation'; }
    .cert-inspection-table tbody td:nth-child(7)::before  { content: 'Combustion'; }
    .cert-inspection-table tbody td:nth-child(8)::before  { content: 'Serviced'; }
    .cert-inspection-table tbody td:nth-child(9)::before  { content: 'CO Alarm Fitted'; }
    .cert-inspection-table tbody td:nth-child(10)::before { content: 'CO Alarm Tested'; }
    .cert-inspection-table tbody td:nth-child(11)::before { content: 'Safe To Use'; }

    /* ---- defects: text full width, then the two short fields ---- */
    .cert-defects-table tbody td:first-child::after { content: ' - defect'; }
    .cert-defects-table tbody td:nth-child(2) { grid-column: 1 / -1; }
    .cert-defects-table tbody td:nth-child(2)::before { content: 'Defect'; }
    .cert-defects-table tbody td:nth-child(3)::before { content: 'Classification'; }
    .cert-defects-table tbody td:nth-child(4)::before { content: 'Warning Ref'; }

    /* ---- appliance list: covers the rendered copy and the AJAX refresh ---- */
    #appliance-list table {
        display: block;
    }
    #appliance-list thead {
        display: none;
    }
    #appliance-list tbody {
        display: block;
    }
    #appliance-list tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 8px;
        padding: 10px;
        border-bottom: 1px solid var(--border);
    }
    #appliance-list tbody td {
        padding: 0 !important;
        min-width: 0;
        font-size: 13.5px;
        overflow-wrap: anywhere;
    }
    #appliance-list tbody td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
        color: var(--brand, #06b6d4);
    }
    /* the empty-slot row spans the card, and the actions sit on their own line */
    #appliance-list tbody td[colspan] {
        grid-column: 1 / -1;
        color: var(--text-muted);
    }
    #appliance-list tbody td:last-child {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        margin-top: 4px;
    }
    #appliance-list tbody td:last-child .btn {
        flex: 1;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   REMINDERS PAGE · v6.5
   Summary tiles, the search/overdue toolbar and the per-row contact buttons.
   Scoped to the reminders markup, so nothing else picks these up.
   ========================================================================== */
.rem-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.rem-tile {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: var(--card, #fff);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.rem-tile:hover {
    border-color: var(--brand, #06b6d4);
    transform: translateY(-1px);
}
.rem-tile__label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}
.rem-tile__value {
    display: block;
    margin-top: 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink, #0f172a);
    line-height: 1.15;
}
.rem-tile__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.rem-tile.is-alert .rem-tile__value { color: #dc2626; }
.rem-tile.is-alert { border-color: #fecaca; }

/* ---- search + overdue toolbar ---- */
.rem-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rem-search {
    flex: 1 1 260px;
    min-width: 0;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-size: 15px;
    background: var(--card, #fff);
    color: var(--ink, #0f172a);
}
.rem-search:focus {
    outline: none;
    border-color: var(--brand, #06b6d4);
    box-shadow: 0 0 0 3px var(--brand-soft, rgba(6, 182, 212, 0.18));
}
.rem-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--card, #fff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.rem-toggle:has(input:checked) {
    border-color: #dc2626;
    color: #dc2626;
}
.rem-result {
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

/* ---- per-row contact buttons ---- */
.rem-actions {
    white-space: nowrap;
}
.rem-action {
    margin-right: 6px;
}
.rem-action:last-child {
    margin-right: 0;
}

/* "Paid?" tick on the unpaid invoices list. The real checkbox stays in the
   DOM for keyboard and screen-reader use; the visible box is the span beside
   it, so it can be sized and coloured like the rest of the app. */
.rem-paid-head,
.rem-paid {
    text-align: center;
    width: 64px;
}

.paid-form {
    margin: 0;
    display: inline-flex;
}

.paid-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
}

.paid-tick input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.paid-tick-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--card, #fff);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out;
}

.paid-tick-box svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--anim-fast) ease-out, transform var(--anim-fast) ease-out;
}

/* A faint tick on hover shows what the box is for before it is clicked. */
.paid-tick:hover .paid-tick-box {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.paid-tick:hover .paid-tick-box svg {
    opacity: 0.45;
    transform: scale(1);
}

.paid-tick input:checked + .paid-tick-box {
    background: var(--success);
    border-color: var(--success);
}

.paid-tick input:checked + .paid-tick-box svg {
    opacity: 1;
    transform: scale(1);
}

.paid-tick input:focus-visible + .paid-tick-box {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.paid-tick input:disabled + .paid-tick-box {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .rem-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .rem-tile { padding: 11px 12px; }
    .rem-tile__value { font-size: 20px; }
    .rem-toolbar { gap: 8px; }
    .rem-search { min-height: 44px; font-size: 16px; }
    .rem-toggle { min-height: 44px; }
}

/* ==========================================================================
   SCHEDULE - rebuilt
   Day / Week / Month in one page. The day view is a dense sortable list with
   everything an engineer needs before setting off (time, customer, address,
   phone, category, status); week and month are true calendar grids with the
   jobs sitting inside the date boxes.

   Everything is scoped under .sch so none of it reaches the rest of the app,
   and it is built from the site tokens so it inherits every theme.
   ========================================================================== */

.sch {
    --sch-gap: 16px;
    --sch-tone: var(--primary);
    font-family: var(--font-ui);
}

/* Tone accents, scoped so the older .tone-* rules elsewhere are untouched. */
.sch .tone-repair { --sch-tone: #ef4444; }
.sch .tone-service { --sch-tone: #06b6d4; }
.sch .tone-cp12 { --sch-tone: #8b5cf6; }
.sch .tone-install { --sch-tone: #f59e0b; }
.sch .tone-default { --sch-tone: #3b82f6; }
.sch .tone-personal { --sch-tone: #10b981; }
.sch .personal-cash { --sch-tone: #10b981; }
.sch .personal-date { --sch-tone: #ec4899; }
.sch .personal-insurance { --sch-tone: #6366f1; }
.sch .personal-other { --sch-tone: #64748b; }
.sch .personal-unavailable { --sch-tone: #94a3b8; }

/* ---- masthead ---------------------------------------------------------- */
.sch-masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sch-gap);
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.sch-masthead h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: -0.02em;
}
.sch-masthead p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13.5px;
}
.sch-dot-sep { opacity: 0.45; margin: 0 6px; }

/* ---- toolbar ----------------------------------------------------------- */
.sch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sch-seg {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    background: var(--bg, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.sch-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--anim-fast) ease-out, color var(--anim-fast) ease-out;
}
.sch-seg-btn:hover { color: var(--text-dark); }
.sch-seg-btn.is-on {
    background: var(--card, #fff);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}
.sch-seg--sm .sch-seg-btn { padding: 6px 14px; font-size: 12.5px; }

.sch-datenav { display: inline-flex; align-items: center; gap: 6px; }
.sch-nav-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    color: var(--text-dark);
    text-decoration: none;
    font-size: 19px;
    line-height: 1;
    transition: border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out;
}
.sch-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.sch-nav-label {
    min-width: 190px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}
.sch-today-btn {
    margin-left: 4px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.sch-today-btn:hover { border-color: var(--primary); color: var(--primary); }
.sch-today-btn.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- week strip -------------------------------------------------------- */
.sch-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.sch-strip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card, #fff);
    text-decoration: none;
    color: var(--text-dark);
    transition: border-color var(--anim-fast) ease-out, transform var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out;
}
.sch-strip-day:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.sch-strip-dow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
}
.sch-strip-num { font-size: 19px; font-weight: 700; font-family: var(--font-display); }
.sch-strip-load {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sch-strip-free { opacity: 0.4; }
.sch-pip { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sch-pip--job { background: var(--primary); }
.sch-pip--personal { background: var(--success); }
.sch-strip-day.is-today { border-color: var(--primary-edge, #93bbfd); }
.sch-strip-day.is-today .sch-strip-num { color: var(--primary); }
.sch-strip-day.is-sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.sch-strip-day.is-sel .sch-strip-dow,
.sch-strip-day.is-sel .sch-strip-load,
.sch-strip-day.is-sel .sch-strip-num { color: #fff; }
.sch-strip-day.is-sel .sch-pip--job,
.sch-strip-day.is-sel .sch-pip--personal { background: rgba(255, 255, 255, 0.85); }

/* ---- cards ------------------------------------------------------------- */
/* The jobs list takes the full width of the page and Personal sits under it.
   Sharing the row with a fixed 320px side panel squeezed the job columns until
   the address truncated to "16 argyle ho..." on an ordinary laptop, while the
   side panel beside it was usually near-empty. */
.sch-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sch-gap);
    align-items: start;
}

/* Reordering is animated with FLIP, which drives transform directly. */
.sch-rows .sch-row { will-change: transform; }
.sch-card {
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.sch-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.sch-card-head h4 {
    margin: 0;
    font-size: 15px;
    font-family: var(--font-display);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sch-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--primary-soft, #eff6ff);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}
.sch-sort { display: inline-flex; align-items: center; gap: 8px; }
.sch-sort .sch-label { margin: 0; }

/* ---- the day list ------------------------------------------------------ */
.sch-tablehead,
.sch-row {
    display: grid;
    /* Column order: customer, phone, job address, category, time, status,
       actions. The actions cell holds the retime button and the drag grip for
       a job, or Create Job for an inquiry. */
    grid-template-columns: minmax(0, 1.3fr) 128px minmax(0, 1.6fr) 124px 78px 104px 124px;
    gap: 10px;
    align-items: center;
}
.sch-tablehead {
    padding: 9px 16px;
    background: var(--bg, #f8fafc);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* positioned, so a row's offsetTop is measured against the list itself -
   the drag reads that instead of a transform-affected rect. */
.sch-rows { padding: 6px; position: relative; }
.sch-row {
    position: relative;
    padding: 11px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--card, #fff);
    transition: background var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out;
}
/* the tone shows as a spine down the left of the row */
.sch-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--sch-tone);
}
.sch-row:hover {
    background: var(--bg, #f8fafc);
    border-color: var(--border);
    box-shadow: var(--shadow-1);
}
.sch-row.is-dragging { opacity: 0.5; }
.sch-c { min-width: 0; font-size: 12.25px; }
.sch-c--time {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sch-tone);
    padding-left: 10px;
}
.sch-c--cust { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sch-c--cust a {
    font-weight: 600;
    font-size: 12.75px;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sch-c--cust a:hover { color: var(--primary); }
.sch-c--cust small { font-size: 10.5px; color: var(--text-muted); }
.sch-c--addr,
.sch-c--phone {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}
.sch-c--phone a { color: var(--text-muted); text-decoration: none; }
.sch-c--phone a:hover { color: var(--primary); }
.sch-c em { opacity: 0.5; font-style: normal; }
.sch-tag {
    display: inline-block;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg, #f1f5f9);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sch-state {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sch-state--pending { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.sch-state--in_progress { background: rgba(6, 182, 212, 0.14); color: #0e7490; }
.sch-state--completed { background: rgba(16, 185, 129, 0.14); color: #047857; }
.sch-state--closed { background: rgba(100, 116, 139, 0.14); color: #475569; }
.sch-state--cancelled { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.sch-c--act { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sch-icon-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--anim-fast) ease-out, color var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out;
}
.sch-icon-btn:hover { background: var(--bg, #f1f5f9); border-color: var(--border); color: var(--text-dark); }
.sch-icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.sch-grip { color: var(--border); cursor: grab; font-size: 14px; user-select: none; }

/* Why a drag does nothing, said where the sort is chosen, with the one tap
   that puts it right. */
.sch-reorder-hint {
    /* The card head is flex, not grid - this has to claim a whole line of its
       own or it is squeezed to a sliver beside the sort control. */
    flex: 1 0 100%;
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.45;
}
.sch-reorder-hint[hidden] { display: none; }
.sch-linkbtn {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin-left: 2px;
    color: #92400e;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.sch-reorder-hint.is-flash { animation: sch-hint-flash 600ms ease-out; }
@keyframes sch-hint-flash {
    0%   { background: #fde68a; }
    100% { background: #fffbeb; }
}
/* A grip that cannot lift anything should not look like it can. */
.sch-rows:not(.is-reorderable) .sch-grip { opacity: 0.45; cursor: not-allowed; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-reorder-hint { background: #3a2f12; border-color: #5c4a18; color: #fcd34d; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-linkbtn { color: #fcd34d; }

@media (prefers-reduced-motion: reduce) {
    .sch-reorder-hint.is-flash { animation: none; }
}
.sch-rows.is-reorderable .sch-grip { color: var(--text-muted); }

/* ---- lifting a job into a new position ---------------------------------
   The row itself travels with the pointer, so the order on screen during the
   drag is the order that gets saved. Only possible in time order, because
   reordering rewrites the jobs' times. */
.sch-rows.is-reorderable .sch-row { cursor: grab; }
/* Neighbours are moved by re-ordering the DOM, not by transform, so this
   transition never had anything to animate - and it reached the dragged row. */
.sch-rows.is-lifting .sch-row { transition: none; }
.sch-row.is-lifted {
    cursor: grabbing;
    background: var(--card, #fff);
    border-color: var(--primary);
    box-shadow: var(--shadow-3);
    transform: scale(1.012);
    position: relative;
    z-index: 5;
    transition: none;
}
.sch-row.is-lifted::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    pointer-events: none;
}
/* The grip is the touch handle - a finger drags from here so the page can
   still be scrolled from anywhere else on the row. */
.sch-rows.is-reorderable .sch-grip { cursor: grab; touch-action: none; }
.sch-rows.is-reorderable .sch-grip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.sch-row.is-lifted .sch-grip { cursor: grabbing; }
/* Stops text being selected across the list while a row is travelling. */
body.sch-no-select { user-select: none; -webkit-user-select: none; }

/* Reorder feedback. The drop saves in the background, so the list says what
   it is doing instead of the page reloading underneath the pointer. */
.sch-rows.is-saving { cursor: progress; }
.sch-rows.is-saving .sch-row { opacity: 0.72; transition: opacity var(--anim-fast) ease-out; }
.sch-rows.is-saved .sch-c--time {
    animation: sch-time-settle 900ms ease-out;
}
@keyframes sch-time-settle {
    0%   { background: var(--primary-soft, #eef4ff); border-radius: 6px; }
    100% { background: transparent; border-radius: 6px; }
}

/* The held row is carried by an inline transform, so nothing here may add a
   transition to it - that would lag it behind the pointer. */
/* The row being dragged must have NO transition on transform. It is moved by
   an inline transform on every pointermove, so a transition makes it ease
   towards the finger instead of following it - and because the target moves
   again before the ease finishes, it never catches up and visibly shakes.

   .sch-rows.is-lifting .sch-row above sets that transition and is three
   classes, so it outranked the two-class .sch-row.is-lifted { transition:
   none } and applied to the dragged row as well. This is four classes, so it
   wins, and it is the row the transition must never reach. */
.sch-rows.is-lifting .sch-row.is-lifted {
    transition: box-shadow var(--anim-fast) ease-out;
}
.sch-rows.is-lifting .sch-row:not(.is-lifted) { transition: none; }

@media (prefers-reduced-motion: reduce) {
    .sch-rows.is-saved .sch-c--time { animation: none; }
}

.sch-empty { padding: 34px 20px; text-align: center; color: var(--text-muted); }
.sch-empty p { margin: 0 0 12px; font-size: 13.5px; }

/* ---- personal side panel ----------------------------------------------- */
.sch-card--side .sch-personal { list-style: none; margin: 0; padding: 8px; }
.sch-personal-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--sch-tone);
    background: var(--bg, #f8fafc);
    margin-bottom: 8px;
}
.sch-personal-item form { margin: 0; }
.sch-personal-time { font-size: 12px; font-weight: 700; color: var(--sch-tone); }
.sch-personal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sch-personal-main strong { font-size: 13px; }
.sch-personal-main small { font-size: 11.5px; color: var(--text-muted); }
.sch-repeat {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.sch-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-muted);
}
.sch-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sch-sw { width: 9px; height: 9px; border-radius: 3px; background: var(--sch-tone); display: inline-block; }

/* ---- calendar grids (week + month) ------------------------------------- */
.sch-cal {
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.sch-cal-head {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--bg, #f8fafc);
    border-bottom: 1px solid var(--border);
}
.sch-cal-dow {
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.sch-cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sch-cal-body--week .sch-cell { min-height: 300px; }
.sch-cal-body--month .sch-cell { min-height: 118px; }
.sch-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sch-cell:nth-child(7n) { border-right: 0; }
.sch-cell.is-out { background: var(--bg, #f8fafc); opacity: 0.6; }
.sch-cell.is-today { background: var(--primary-soft, #eff6ff); }
.sch-cell.is-sel { box-shadow: inset 0 0 0 2px var(--primary); }
.sch-cell-date {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 700;
}
.sch-cell-num { font-size: 15px; font-family: var(--font-display); }
.sch-cell-mon { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.sch-cell.is-today .sch-cell-num { color: var(--primary); }
.sch-cell-date:hover .sch-cell-num { color: var(--primary); }
.sch-cell-items { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sch-cell-free { font-size: 11px; color: var(--text-muted); opacity: 0.6; }
.sch-ev {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 7px;
    border-left: 3px solid var(--sch-tone);
    background: var(--bg, #f8fafc);
    text-decoration: none;
    color: var(--text-dark);
    font-size: 12px;
    min-width: 0;
    transition: transform var(--anim-fast) ease-out, box-shadow var(--anim-fast) ease-out;
}
.sch-ev:hover { transform: translateX(1px); box-shadow: var(--shadow-1); }
.sch-ev b { font-variant-numeric: tabular-nums; color: var(--sch-tone); font-size: 11.5px; }
.sch-ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-ev--sm { padding: 3px 6px; font-size: 11px; }
.sch-more {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding-left: 4px;
}
.sch-more:hover { text-decoration: underline; }

/* ---- add-reminder panel ------------------------------------------------ */
.sch-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1200;
}
.sch-panel-card {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--card, #fff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
}
.sch-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.sch-panel-head h4 { margin: 0; font-family: var(--font-display); font-size: 16px; }
.sch-panel-close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}
.sch-panel-close:hover { color: var(--text-dark); }
.sch-panel-body { padding: 18px 20px; }
.sch-label {
    display: block;
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.sch-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card, #fff);
    color: var(--text-dark);
    font-size: 14px;
    font-family: inherit;
}
.sch-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.sch-input--sm { width: auto; padding: 6px 10px; font-size: 12.5px; }
.sch-choice,
.sch-chipgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-choice-btn {
    appearance: none;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card, #fff);
    color: var(--text-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anim-fast) ease-out, border-color var(--anim-fast) ease-out, color var(--anim-fast) ease-out;
}
.sch-choice-btn:hover { border-color: var(--primary); color: var(--primary); }
.sch-choice-btn.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.sch-field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.sch-field-row .sch-span2 { grid-column: span 2; }
.sch-toggle {
    appearance: none;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
}
.sch-toggle.is-on { background: var(--success); border-color: var(--success); color: #fff; }
.sch-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}
.sch-panel-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---- dark mode --------------------------------------------------------- */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-card,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-cal,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-panel-card,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-strip-day,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-nav-btn,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-today-btn,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-input,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-choice-btn,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-toggle { background: #141f37; border-color: #2a4066; color: #dbe6f8; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-seg { background: #0f1a2e; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-seg-btn.is-on { background: #1d2c4a; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-tablehead,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-cal-head { background: #0f1a2e; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-row { background: #141f37; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-row:hover { background: #1b2a47; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-cell { border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-cell.is-out { background: #0f1a2e; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-cell.is-today { background: #16294a; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-ev,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-personal-item,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-tag { background: #0f1a2e; border-color: #2a4066; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
    .sch-day { grid-template-columns: minmax(0, 1fr); }
    .sch-tablehead,
    .sch-row { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1.4fr) 120px 110px 100px 56px; }
}

@media (max-width: 860px) {
    /* A seven column grid is unusable on a phone, and this is the view an
       engineer actually opens in the van - so each job becomes a card. */
    .sch-tablehead { display: none; }
    .sch-row {
        /* 62px holds "08:04" at 18px with room to breathe - it needs 60 and
           had 52, so the time ran into the customer name with a 2px gap.
           90px is two 44px targets plus the 2px between them. */
        grid-template-columns: 62px minmax(0, 1fr) 90px;
        grid-template-areas:
            "time cust act"
            "time addr addr"
            "time phone phone"
            "time meta meta";
        row-gap: 4px;
        column-gap: 8px;
        padding: 12px 9px;
        border: 1px solid var(--border);
        margin-bottom: 8px;
    }
    .sch-c--time { grid-area: time; align-self: start; }
    .sch-c--cust { grid-area: cust; }
    .sch-c--addr { grid-area: addr; white-space: normal; }
    .sch-c--phone { grid-area: phone; }
    .sch-c--cat { grid-area: meta; }
    .sch-c--status { grid-area: meta; justify-self: end; }
    .sch-c--act { grid-area: act; }

    /* The cell still has to exist for the desktop grid, which places by
       source order, so it is emptied rather than dropped and collapsed only
       here - no stray dash, and no blank line in the card. */
    .sch-c--phone:empty { display: none; }
    /* On touch a job may only be lifted by its grip, so the grip has to be a
       real target - 34px of column is a miss as often as a hit with a thumb.
       Both get the 44px minimum, side by side so the row they sit on stays
       one control tall - stacking them made every card 44px taller. */
    .sch-c--act {
        grid-area: act;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }
    /* Both are transparent until hover, which a phone never does, so they
       were two bare glyphs floating in the corner. They get a real shape. */
    .sch-c--act .sch-icon-btn,
    .sch-c--act .sch-grip {
        display: grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        font-size: 18px;
        border-radius: 12px;
        background: var(--bg, #f1f5f9);
        border: 1px solid var(--border);
        color: var(--text-dark);
    }
    .sch-c--act .sch-grip { letter-spacing: 1px; }

    /* The time is what the day is scanned by, so it is the loudest thing on
       the card. */
    .sch-c--time { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
    /* ----------------------------------------------------------------
       Readability on a phone. Measured before changing anything: the
       customer name - the thing you actually scan for - was 13px, the
       same size as everything else on the card, and the address and
       phone were both rgb(91,107,130). That grey clears AA at 5.4:1, so
       this is about size and hierarchy rather than a contrast failure:
       the name leads, the address is darker at 7.6:1, and the number
       reads as something to press.
       ---------------------------------------------------------------- */
    .sch-c--cust a {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }
    .sch-c--cust small {
        font-size: 11.5px;
        color: #64748b;
    }

    .sch-c--addr {
        font-size: 14px;
        color: #475569;          /* 5.9:1 on white, against 4.3:1 before */
        line-height: 1.4;
    }

    /* The number is a tel: link, so it should look like something to press
       rather than like more grey address text. */
    .sch-c--phone a {
        font-size: 15px;
        font-weight: 600;
        color: #0e7490;          /* 5.4:1 on white; var(--primary) is a cyan at 2.4:1 */
    }

    .sch-tag { font-size: 13px; padding: 5px 12px; }
    .sch-state { font-size: 12px; padding: 5px 11px; }

    /* Safari zooms the whole page when a control under 16px takes focus,
       which throws the layout off every time the sort is changed. */
    #schSort,
    .sch-input { font-size: 16px; }

    .sch-strip-day span { font-size: 12px; color: #475569; }
    .sch-cal-body--week { grid-template-columns: minmax(0, 1fr); }
    .sch-cal-body--week .sch-cell { min-height: auto; border-right: 0; }
    .sch-cal--week .sch-cal-head { display: none; }
    .sch-cal-body--month .sch-cell { min-height: 84px; padding: 5px; }
    .sch-ev span { font-size: 10.5px; }
    .sch-strip { gap: 4px; }
    .sch-strip-day { padding: 8px 2px; }
    .sch-nav-label { min-width: 120px; font-size: 13px; }
    .sch-field-row { grid-template-columns: minmax(0, 1fr); }
    .sch-field-row .sch-span2 { grid-column: auto; }
    .sch-toolbar { gap: 10px; }
    .sch-masthead h2 { font-size: 22px; }
}

/* ===========================================================================
   v1.2.10 - version badge, release notes, inquiries
   Scoped class names so none of this can reach the rest of the site.
   =========================================================================== */

/* ---- sidebar version badge --------------------------------------------- */
.side-version {
    display: block;
    margin: 0 0 10px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    transition: color var(--anim-fast, 0.15s) var(--ease, ease), border-color var(--anim-fast, 0.15s) var(--ease, ease);
}
.side-version:hover,
.side-version:focus-visible {
    color: var(--primary);
    border-color: var(--primary);
}

/* ---- release notes ------------------------------------------------------ */
.rn-current {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
}
.rn-current-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.rn-current strong { font-size: 15px; }
.rn-current em { color: var(--text-muted); font-style: normal; font-size: 13px; }

.rn-release { padding: 20px; margin-bottom: 16px; }
.rn-release.is-current { border-left: 3px solid var(--primary); }
.rn-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.rn-head h3 { margin: 0; font-size: 17px; }
.rn-name { color: var(--text-muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
.rn-date { color: var(--text-muted); font-size: 12.5px; }
.rn-summary { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }

.rn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rn-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.rn-tag {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.7;
}
.rn-added    { background: color-mix(in srgb, var(--emerald) 16%, transparent); color: var(--emerald); }
.rn-changed  { background: color-mix(in srgb, var(--cyan) 16%, transparent);    color: var(--cyan); }
.rn-fixed    { background: color-mix(in srgb, var(--amber) 18%, transparent);   color: var(--amber); }
.rn-security { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }

/* ---- inquiries ---------------------------------------------------------- */
.inq-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

/* The job address while it is mirroring the customer address: readable, but
   visibly not something you type into. */
input.is-mirrored {
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: not-allowed;
}

@media (max-width: 860px) {
    .rn-head { gap: 4px; }
    .rn-tag { min-width: 56px; }
}

/* ---- v1.2.10 schedule row actions -------------------------------------- */
/* The delete control is a real form so it posts with a token; it must not
   break the inline flow of the actions cell. */
.sch-rowdel { display: inline; margin: 0; padding: 0; }

a.sch-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.sch-icon-btn--danger { color: var(--danger); }
.sch-icon-btn--danger:hover,
.sch-icon-btn--danger:focus-visible {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

/* ---- v1.2.10 paired New Inquiry / New Job buttons ----------------------- */
/* The two top buttons sit together. Below 720px their labels are hidden, so
   each keeps the icon of the section it opens - inbox for Inquiries,
   clipboard for Jobs - which is what tells them apart at that size. */
.btn-top-add--job { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.btn-top-add--job:hover,
.btn-top-add--job:focus-visible { border-color: var(--primary); color: var(--primary); }

/* On a narrow phone the top bar already carries burger, title, theme, bell,
   avatar and the inquiry button. The job button drops out rather than squeeze
   the rest; it is still one tap away in Quick Actions and on the Jobs page. */
@media (max-width: 480px) {
    .btn-top-add--job { display: none; }
}

/* The dashboard's mobile pair, stacked and equal width so neither looks like
   the lesser option. */
.quick-actions-mobile { display: grid; gap: 10px; }
.btn-new--alt {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border);
}
.btn-new--alt:hover,
.btn-new--alt:focus-visible { border-color: var(--primary); color: var(--primary); }

/* ===========================================================================
   v1.2.20 - inquiry form layout
   The form used to be a single 860px column on a page that is often twice
   that, so a desktop reader scrolled past a lot of empty space. It is now two
   grouped sections that use the width available, and a single column again on
   a phone.
   =========================================================================== */

.inq-card { padding: 0; overflow: hidden; }

.inq-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.inq-card-head h4 { margin: 0; font-size: 16px; }

.inq-form { padding: 22px; }

.inq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px 28px;
    align-items: start;
}

.inq-section {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* A quiet heading rather than a boxed fieldset: it groups the fields without
   adding another border inside a card that already has one. */
.inq-legend {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Two fields that belong together, which collapse to one on a narrow screen. */
.inq-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 18px;
}

.inq-form .form-group { margin-bottom: 16px; min-width: 0; }
.inq-form .form-group small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.inq-addr-toggle { margin-bottom: 10px; }

/* Scheduled at stays the biggest control on the form - it is the field people
   come back to change. */
.inq-scheduled__input {
    font-size: 16px;
    padding: 13px 14px;
    min-height: 50px;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.inq-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ---- the toggle, which lived only inside jobs.php -----------------------
   .jobs-compact-form .job-toggle was scoped to the job form, so the same
   markup on the inquiry form rendered as a bare checkbox. These are the
   unscoped rules; the job form's own, being more specific, still win there. */
.job-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    margin-bottom: 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    transition: border-color var(--anim-fast, .15s) var(--ease, ease), background var(--anim-fast, .15s) var(--ease, ease);
}
.job-toggle:hover { border-color: var(--primary); }
.job-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.job-toggle__track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--border);
    transition: background var(--anim-fast, .15s) var(--ease, ease);
}
.job-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform var(--anim-fast, .15s) var(--ease, ease);
}
.job-toggle__input:checked ~ .job-toggle__track { background: var(--primary); }
.job-toggle__input:checked ~ .job-toggle__track .job-toggle__thumb { transform: translateX(18px); }
.job-toggle__input:focus-visible ~ .job-toggle__track { outline: 2px solid var(--primary); outline-offset: 2px; }
.job-toggle__text { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.job-toggle__text small {
    display: block;
    margin-top: 3px;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .job-toggle__thumb { background: #e2e8f0; }

@media (max-width: 760px) {
    .inq-form { padding: 16px; }
    .inq-card-head { padding: 14px 16px; }
    .inq-grid { grid-template-columns: 1fr; gap: 6px; }
    .inq-row { grid-template-columns: 1fr; gap: 0; }
    /* Comfortable to hit with a thumb. */
    .inq-form .form-group input,
    .inq-form .form-group select { min-height: 46px; font-size: 16px; }
    .inq-actions { position: sticky; bottom: 0; background: var(--card); }
    .inq-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- v1.2.20 inquiries list -------------------------------------------- */
/* A six-column table overflowed sideways on a phone. This is a grid: columns
   on a desktop, a card per enquiry below 860px, so nothing is ever cut off. */

.inq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.inq-search { display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; }
.inq-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 13px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    background: var(--card);
    color: inherit;
}
.inq-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.inq-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inq-count { color: var(--text-muted); font-size: 13px; white-space: nowrap; }

.inq-listhead,
.inq-item {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 140px minmax(0, 1.6fr) 130px 160px 232px;
    gap: 12px;
    align-items: center;
}
.inq-listhead {
    padding: 9px 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0;
    border-bottom: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.inq-list { display: grid; }
.inq-item {
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: none;
    transition: background var(--anim-fast, .15s) var(--ease, ease);
}
.inq-item:first-child { border-top: 1px solid var(--border); }
.inq-listhead + .inq-list .inq-item:first-child { border-top: none; }
.inq-item:last-child { border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px); }
.inq-item:hover { background: var(--bg-2); }

.inq-c { min-width: 0; font-size: 13.5px; }
.inq-c--cust { display: flex; flex-direction: column; gap: 2px; }
.inq-c--cust strong { font-size: 14px; }
.inq-c--cust small {
    color: var(--text-muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inq-c--addr,
.inq-c--phone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-c--phone a { color: inherit; text-decoration: none; }
.inq-c--phone a:hover { color: var(--primary); }
.inq-c em { color: var(--text-muted); font-style: normal; }

.inq-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: 11.5px;
    white-space: nowrap;
}

/* Urgency, so a date that has passed does not read like one months away. */
.inq-when { font-size: 13px; white-space: nowrap; }
.inq-tone--past .inq-when { color: var(--danger); font-weight: 700; }
.inq-tone--today .inq-when { color: var(--amber); font-weight: 700; }
.inq-tone--soon .inq-when { color: var(--primary); font-weight: 600; }
.inq-tone--none .inq-when { color: var(--text-muted); }
.inq-tone--past { box-shadow: inset 3px 0 0 var(--danger); }
.inq-tone--today { box-shadow: inset 3px 0 0 var(--amber); }

.inq-c--act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.inq-del { display: inline; margin: 0; }
.inq-del-btn { color: var(--danger); }
.inq-del-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.inq-empty { padding: 40px 24px; text-align: center; }
.inq-empty h4 { margin: 0 0 8px; font-size: 17px; }
.inq-empty p { margin: 0 0 18px; color: var(--text-muted); font-size: 13.5px; }

@media (max-width: 860px) {
    /* One card per enquiry. The column headings go away and each value
       carries its own label, so nothing depends on a header row that is no
       longer above it. */
    .inq-listhead { display: none; }
    .inq-list { gap: 10px; }
    .inq-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md, 12px);
    }
    .inq-item:first-child,
    .inq-item:last-child { border-radius: var(--radius-md, 12px); border-top: 1px solid var(--border); }

    .inq-c--phone,
    .inq-c--addr,
    .inq-c--cat,
    .inq-c--when { display: flex; gap: 8px; align-items: baseline; white-space: normal; }
    .inq-c[data-label]::before {
        content: attr(data-label);
        flex: 0 0 74px;
        color: var(--text-muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .inq-c--addr { white-space: normal; overflow: visible; }

    .inq-c--act { justify-content: stretch; margin-top: 4px; }
    .inq-c--act .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
    .inq-del { display: flex; flex: 1 1 auto; }
    .inq-del .btn { width: 100%; }

    .inq-toolbar { gap: 10px; }
    .inq-search { flex: 1 1 100%; }
    .inq-search input { min-height: 44px; font-size: 16px; }
    .inq-toolbar-right { width: 100%; justify-content: space-between; }
}

/* ---- v1.2.20 grouped release notes ------------------------------------- */
.rn-group { margin-top: 12px; }
.rn-group:first-of-type { margin-top: 4px; }
.rn-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
}
.rn-group-count { color: var(--text-muted); font-size: 11.5px; }
.rn-group .rn-list { padding-left: 2px; }
.rn-group .rn-list li { display: list-item; margin-left: 18px; list-style: disc; }
.rn-group .rn-list li::marker { color: var(--text-muted); }
.rn-note { background: var(--bg-2); color: var(--text-muted); border: 1px solid var(--border); }
.rn-notes .rn-list li { color: var(--text-muted); }

/* ---- v1.2.20 inquiries on the schedule --------------------------------- */
/* An enquiry sits in the day list with the jobs so the day reads in order,
   but it is not a job: nothing is committed to the customer yet. Colour alone
   would not carry that - it has to survive sitting next to a repair row,
   which is already red - so it also gets a tinted background, a dashed edge
   and a labelled badge. */
.sch .sch-row--inq { --sch-tone: #ec4899; }

.sch-row--inq {
    background: color-mix(in srgb, #ec4899 7%, var(--card));
    border-left-style: dashed !important;
}
.sch-row--inq:hover { background: color-mix(in srgb, #ec4899 12%, var(--card)); }

.sch-row--inq .sch-c--cust small {
    color: #ec4899;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 10.5px;
}

.sch-state--inquiry { background: rgba(236, 72, 153, 0.16); color: #be185d; }

.sch-count--inq {
    margin-left: 6px;
    background: rgba(236, 72, 153, 0.16);
    color: #be185d;
}

/* No grip on these rows: dragging rewrites job times, and an enquiry has no
   job time to rewrite. */
.sch-row--inq .sch-c--act { justify-content: flex-end; }
.sch-row--inq .sch-c--act .btn { white-space: nowrap; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-row--inq { background: color-mix(in srgb, #ec4899 14%, #141f37); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-row--inq:hover { background: color-mix(in srgb, #ec4899 20%, #141f37); }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-state--inquiry { background: rgba(236, 72, 153, 0.22); color: #f9a8d4; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .sch-count--inq { background: rgba(236, 72, 153, 0.22); color: #f9a8d4; }

@media (max-width: 860px) {
    .sch-row--inq .sch-c--act .btn { width: 100%; justify-content: center; }
}

/* ---- v1.2.20 collapsible release items --------------------------------- */
/* Closed, a release is exactly three lines: what it is, when and how much,
   and its one line summary. The whole history is on one page, and expanded
   that runs to several screens. */

.rn-release { padding: 0; }
.rn-release + .rn-release { margin-top: 8px; }

.rn-sum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: inherit;
    transition: background var(--anim-fast, .15s) var(--ease, ease);
}
/* Safari and old Chrome draw their own triangle without these. */
.rn-sum::-webkit-details-marker { display: none; }
.rn-sum::marker { content: ''; }
.rn-sum:hover { background: var(--bg-2); }
.rn-sum:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.rn-sum-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.rn-sum-line {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rn-sum-title { font-size: 14px; font-weight: 700; }
.rn-sum-title .rn-name { font-weight: 400; color: var(--text-muted); font-size: 13.5px; margin-left: 6px; }
.rn-sum-meta { font-size: 12px; color: var(--text-muted); }
.rn-dot { margin: 0 6px; opacity: 0.5; }
.rn-sum-text { font-size: 13px; color: var(--text-muted); }

.rn-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* A chevron drawn from a border, so there is no icon to load. */
.rn-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--anim-med, .2s) var(--ease, ease);
}
.rn-release[open] > .rn-sum .rn-chevron { transform: rotate(-135deg); }
.rn-release[open] > .rn-sum { border-bottom: 1px solid var(--border); border-radius: inherit inherit 0 0; }
.rn-release[open] > .rn-sum .rn-sum-text { white-space: normal; }

.rn-body { padding: 10px 12px 14px; }
.rn-body .rn-group:first-of-type { margin-top: 0; }

@media (max-width: 760px) {
    .rn-sum { padding: 13px 14px; gap: 10px; }
    .rn-body { padding: 14px 14px 18px; }
    .rn-sum-title { font-size: 14px; }
    /* The name drops below the version rather than squeezing it out. */
    .rn-sum-title .rn-name { display: block; margin: 2px 0 0; }
    .rn-sum-line { white-space: normal; }
    .rn-sum-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---- v1.2.20 time set apart, and a status you can change --------------- */

/* The time is read differently from the rest of the row - it is the thing you
   scan the day by - so it is given its own tile with rules either side rather
   than sitting in the run of text columns. */
.sch-c--time {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: -4px 0;
    padding: 6px 4px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--sch-tone) 8%, transparent);
    border-radius: 6px;
}
.sch-tablehead > span:nth-child(5) {
    text-align: center;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ---- the status control ------------------------------------------------ */
.sch-statusbtn {
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
    padding-right: 18px;
    transition: border-color var(--anim-fast, .15s) var(--ease, ease), opacity var(--anim-fast, .15s) var(--ease, ease);
}
/* A caret drawn from a border, so the button needs no icon. */
.sch-statusbtn::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.7;
}
.sch-statusbtn:hover { border-color: currentColor; }
.sch-statusbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sch-statusbtn.is-saving { opacity: 0.55; cursor: progress; }
.sch-statusbtn.is-saved { animation: schStatusFlash 0.9s var(--ease, ease); }
@keyframes schStatusFlash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* Jobs are written as "canceled" by the job form but the badge was only ever
   styled as "cancelled", so a cancelled job had no colour at all. */
.sch-state--canceled { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
.sch-state--new { background: rgba(236, 72, 153, 0.16); color: #be185d; }

.sch-statusmenu {
    position: absolute;
    z-index: 70;
    min-width: 170px;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(11, 18, 32, 0.18);
}
.sch-statusmenu[hidden] { display: none; }
.sch-statusmenu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.sch-statusmenu-item:hover { background: var(--bg-2); }
.sch-statusmenu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sch-statusdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sch-statusdot--in_progress { background: #06b6d4; }
.sch-statusdot--completed { background: #10b981; }
.sch-statusdot--canceled { background: #ef4444; }

@media (max-width: 860px) {
    /* On a card the time already sits alone at the top; a rule under it does
       the separating that the side borders do on a wide screen. */
    .sch-c--time {
        justify-content: flex-start;
        margin: 0 0 2px;
        padding: 0 0 8px;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: none;
    }
    .sch-statusbtn { font-size: 12px; padding: 5px 20px 5px 10px; }
    .sch-statusmenu { min-width: 190px; }
    .sch-statusmenu-item { padding: 12px 12px; font-size: 15px; }
}

/* Pending in the status menu, matching its badge. */
.sch-statusdot--pending { background: #f59e0b; }

/* ---- v1.2.25 inquiry customer picker ----------------------------------- */
.inq-combo { position: relative; }
.inq-combo__list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(11, 18, 32, 0.18);
}
.inq-combo__list[hidden] { display: none; }
.inq-combo__opt {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.inq-combo__opt:hover { background: var(--bg-2); }
.inq-combo__opt strong { display: block; font-size: 13.5px; font-weight: 600; }
.inq-combo__opt small { display: block; font-size: 11.5px; color: var(--text-muted); }

.inq-linked {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--emerald, #10b981);
}
.inq-linked[hidden] { display: none; }
.inq-linked .sch-linkbtn { margin-left: 4px; }

.inq-chip--linked {
    background: color-mix(in srgb, var(--emerald, #10b981) 15%, transparent);
    border-color: transparent;
    color: var(--emerald, #10b981);
}

/* ===========================================================================
   Upcoming Schedule panel on the dashboard
   It used to be a plain card at the foot of the page, below the stats, the
   big actions and the mobile buttons - which is a long way down for the one
   question the dashboard is opened to answer. It now sits directly under the
   stats and is built to be read at a glance.
   =========================================================================== */

.up-panel {
    margin: 0 0 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-1, 0 1px 2px rgba(11, 18, 32, 0.06));
}

.up-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.up-head h3 { margin: 0; font-size: 16px; }
.up-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.up-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.up-all:hover { text-decoration: underline; }

.up-list { display: grid; }

.up-item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1.7fr) 210px 150px;
    gap: 14px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background var(--anim-fast, .15s) var(--ease, ease);
}
.up-item:last-child { border-bottom: 0; }
.up-item:hover { background: var(--bg-2); }

/* Today and tomorrow are marked, because on a dashboard the difference
   between "now" and "next week" is the whole point. */
.up-item.is-today { border-left-color: var(--amber, #f59e0b); background: color-mix(in srgb, var(--amber, #f59e0b) 5%, transparent); }
.up-item.is-soon { border-left-color: var(--primary); }
.up-item--inq { border-left-color: #ec4899; background: color-mix(in srgb, #ec4899 5%, transparent); }

/* The time leads, as it does on the schedule itself. */
.up-when {
    display: grid;
    gap: 1px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 4px 2px;
    border-radius: 8px;
    background: var(--bg-2);
}
.up-when:hover { background: color-mix(in srgb, var(--primary) 12%, var(--bg-2)); }
.up-when strong { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.up-when small { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.up-main { display: grid; gap: 2px; min-width: 0; }
.up-who {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.up-who:hover { color: var(--primary); }
.up-where { font-size: 12.25px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-where em { font-style: normal; opacity: 0.7; }

.up-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.up-tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: 11px;
    white-space: nowrap;
}

.up-act { display: flex; justify-content: flex-end; }
/* The number is a tel: link, so it should look like something to press. */
.up-call {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}
.up-call:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.up-empty { padding: 32px 18px; text-align: center; }
.up-empty p { margin: 0 0 14px; color: var(--text-muted); font-size: 13.5px; }

@media (max-width: 860px) {
    /* A card per booking, with the time kept beside the name rather than
       stacked above it - on a phone the pair reads as one line of answer. */
    .up-item {
        grid-template-columns: 62px minmax(0, 1fr);
        grid-template-areas: "when main" "meta meta" "act act";
        gap: 4px 12px;
        padding: 14px 16px;
    }
    .up-when { grid-area: when; align-self: start; }
    .up-when strong { font-size: 17px; }
    .up-main { grid-area: main; }
    .up-where { white-space: normal; }
    .up-meta { grid-area: meta; margin-top: 6px; }
    .up-act { grid-area: act; justify-content: stretch; margin-top: 6px; }
    .up-call { width: 100%; text-align: center; padding: 10px; font-size: 14px; }
    .up-head { padding: 13px 15px; }
}

/* ---- Needs attention panel on the dashboard ---------------------------- */
/* Deliberately the same shape as the Upcoming panel above it, so the two read
   as a pair: what is coming, then what has been left. */

.rem-panel {
    margin: 0 0 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-1, 0 1px 2px rgba(11, 18, 32, 0.06));
}

.rem-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.rem-head h3 { margin: 0; font-size: 16px; }
.rem-count {
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber, #f59e0b) 18%, transparent);
    color: #b45309;
    font-size: 11.5px;
    font-weight: 700;
}
.rem-breakdown { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.rem-breakdown a { color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.rem-breakdown a:hover { color: var(--primary); text-decoration: underline; }
.rem-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.rem-all:hover { text-decoration: underline; }

.rem-list { display: grid; }

.rem-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) 150px;
    gap: 14px;
    align-items: center;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: background var(--anim-fast, .15s) var(--ease, ease);
}
.rem-item:last-child { border-bottom: 0; }
.rem-item:hover { background: var(--bg-2); }
/* Overdue is the whole point of the list, so it is the loudest thing in it. */
.rem-item.is-overdue { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.rem-item.is-due { border-left-color: var(--amber, #f59e0b); }

.rem-kind {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rem-kind--lgsr { background: rgba(139, 92, 246, 0.16); color: #6d28d9; }
.rem-kind--service { background: rgba(6, 182, 212, 0.16); color: #0e7490; }
.rem-kind--invoice { background: rgba(16, 185, 129, 0.16); color: #047857; }

/* These three, and the count beside "Needs attention", are a translucent tint
   with a deep ink on top. Over white that reads as a pale chip with dark text;
   over a dark page the tint stays dark and the ink disappears into it. The
   dark themes take the light end of each colour instead, which is the same
   hue at a legible weight. */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-kind--lgsr,
[data-theme="ocean"] .rem-kind--lgsr,
[data-theme="sunset"] .rem-kind--lgsr,
[data-theme="forest"] .rem-kind--lgsr,
[data-theme="midnight"] .rem-kind--lgsr { color: #c4b5fd; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-kind--service,
[data-theme="ocean"] .rem-kind--service,
[data-theme="sunset"] .rem-kind--service,
[data-theme="forest"] .rem-kind--service,
[data-theme="midnight"] .rem-kind--service { color: #67e8f9; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-kind--invoice,
[data-theme="ocean"] .rem-kind--invoice,
[data-theme="sunset"] .rem-kind--invoice,
[data-theme="forest"] .rem-kind--invoice,
[data-theme="midnight"] .rem-kind--invoice { color: #6ee7b7; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-count,
[data-theme="ocean"] .rem-count,
[data-theme="sunset"] .rem-count,
[data-theme="forest"] .rem-count,
[data-theme="midnight"] .rem-count { color: #fcd34d; }

.rem-main { display: grid; gap: 1px; min-width: 0; }
.rem-main strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-main small { font-size: 11.5px; color: var(--text-muted); }

.rem-when { text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--text-muted); }
.rem-item.is-overdue .rem-when { color: var(--danger); }
/* --danger is a mid red that reads on white and on the darkest theme, but not
   on the lighter night ones, where it came out at 3.5:1. */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-item.is-overdue .rem-when { color: #fca5a5; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .rem-item.is-due .rem-when { color: #fcd34d; }
.rem-item.is-due .rem-when { color: #b45309; }

@media (max-width: 860px) {
    .rem-item {
        grid-template-columns: auto 1fr;
        grid-template-areas: "kind when" "main main";
        gap: 6px 10px;
        padding: 13px 16px;
    }
    .rem-kind { grid-area: kind; }
    .rem-when { grid-area: when; text-align: right; }
    .rem-main { grid-area: main; }
    .rem-main strong { white-space: normal; }
    .rem-head { padding: 13px 15px; }
    .rem-all { margin-left: 0; }
}

/* The temp-customer badge on an inquiry. Amber rather than grey: a temporary
   customer is a thing still to be dealt with, not a neutral fact. */
.inq-chip--temp {
    background: color-mix(in srgb, var(--amber, #f59e0b) 16%, transparent);
    border-color: transparent;
    color: #b45309;
}
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .inq-chip--temp { color: #fbbf24; }

/* ---- Certificate: the Pressure / Heat Input cell ----------------------- */
/* It prints into one narrow box on the certificate, so it stays one field.
   It was an unlabelled input squeezed to whatever was left of a column in an
   eleven column table, with a calculator button taking a third of it. The
   column now has room, the box says what it expects, and the calculator reads
   as the optional help it is. */

.cert-phi {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
.cert-phi__input {
    /* A real floor and a real basis. min-width:0 was letting the box shrink to
       nothing, and because an auto-layout table sizes a column to what its
       content asks for, a box asking for nothing got a column to match. */
    flex: 1 1 190px;
    min-width: 170px;
    min-height: 40px;
    font-size: 14px;
    padding: 8px 10px;
}
.cert-phi__input::placeholder { color: var(--text-muted); opacity: 0.65; }
.cert-phi__calc { flex: 0 0 auto; white-space: nowrap; }
/* The word only appears where there is room for it. */
.cert-phi__calc-label { display: none; }

/* Give the column itself room, rather than letting it take the remainder. */
.cert-inspection-table th:nth-child(2),
.cert-inspection-table td:nth-child(2) { min-width: 260px; width: 260px; }

@media (min-width: 1100px) {
    .cert-phi__calc-label { display: inline; margin-left: 6px; font-size: 12.5px; }
    .cert-inspection-table th:nth-child(2),
    .cert-inspection-table td:nth-child(2) { min-width: 330px; width: 330px; }
    .cert-phi__input { flex: 1 1 210px; min-width: 190px; }
}

@media (max-width: 768px) {
    /* The cell already spans the whole card here. Make both halves properly
       tappable and keep the word on the button, since there is room on a line
       of its own. */
    .cert-inspection-table td:nth-child(2) { min-width: 0; width: auto; }
    /* Stacked, so the box gets the whole width of the card rather than sharing
       it with a button. */
    .cert-phi { flex-direction: column; align-items: stretch; gap: 8px; }
    .cert-phi__input { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 48px; font-size: 16px; }
    .cert-phi__calc { width: 100%; justify-content: center; min-height: 44px; padding: 0 14px; }
    .cert-phi__calc-label { display: inline; margin-left: 6px; font-size: 14px; }
}

/* ---------- Free-trial bar ---------- */
.trial-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 18px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft, #eff6ff);
    border: 1px solid var(--primary-edge, #93bbfd);
    color: var(--text-dark);
    font-size: 13.5px;
}
.trial-bar--urgent {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}
.trial-bar__text { min-width: 0; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .trial-bar { background: #11223c; border-color: #1d3a5c; color: #dbe6f8; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .trial-bar--urgent { background: #3a2f12; border-color: #5c4a18; color: #fcd34d; }

/* Appliance Inspection is the one section of the certificate form that is never
   collapsed. A row only exists because an appliance was added, so there is
   nothing in it the engineer did not ask for and nothing worth hiding. It
   borrows the look of .cert-collapse so the form still reads as one set of
   sections rather than one odd one out. */
.cert-open-section {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--card, #ffffff);
}

.cert-open-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.cert-open-section__count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-soft, #eef4ff);
    color: var(--primary, #1e88e5);
    font-size: 11px;
    font-weight: 700;
}

.cert-open-section__body {
    padding: 0 12px 12px;
}

.cert-open-section__empty {
    margin: 0;
    padding: 2px 0 6px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* Each row says which appliance it is for, because "03" on its own means
   nothing once a position in the middle has been removed. */
.cert-insp-pos {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--primary, #1e88e5);
}

.cert-insp-appliance {
    display: block;
    margin-top: 2px;
    max-width: 170px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted);
}

.cert-inspection-table th:first-child,
.cert-inspection-table td:first-child { min-width: 170px; width: 170px; vertical-align: top; }

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-open-section { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-open-section__head { color: #dbe6f8; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .cert-open-section__count { background: #1b2b4c; color: #9eb4d3; }

/* ── Standalone documents ───────────────────────────────────────────────
   A certificate or invoice with no job behind it. The block sits in place of
   the job the document would otherwise have taken its customer and address
   from, so it is set apart from the fields around it rather than reading as
   more of the same form. */
.standalone-card {
    border: 1px solid var(--border, #e2e8f0);
    border-left: 3px solid var(--warning, #f59e0b);
    border-radius: 8px;
    background: var(--bg, #f8fafc);
    padding: 14px 16px 6px;
}

.standalone-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.standalone-card__head h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
}

/* The reference the document is filed under, and the number printed on it. */
.standalone-ref {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--warning-soft, rgba(245, 158, 11, 0.14));
    color: var(--warning, #b45309);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.standalone-ref--pending { opacity: 0.72; }

.standalone-card__note {
    margin: 8px 0 14px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.standalone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
}

.standalone-grid__wide { grid-column: 1 / -1; }

/* Two columns is the point at which the address stops being readable beside
   the name, and one column is the point at which it stops fitting at all. */
@media (max-width: 860px) {
    .standalone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .standalone-grid { grid-template-columns: 1fr; }
    .standalone-card { padding: 12px 12px 4px; }
    .standalone-ref { margin-left: 0; }
    .standalone-grid input { min-height: 46px; font-size: 16px; }
}

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .standalone-card { background: #141f37; border-color: #2a4066; }
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .standalone-card__head h4 { color: #dbe6f8; }

/* ── Free trial, on the registration form ───────────────────────────────
   Takes the place of the three-price radio group. Somebody who clicked
   "Free Trial" has not asked what it costs yet, so this answers the only
   question they do have - what happens at the end - and nothing else. */
.trial-reassure {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--success, #16a34a);
    border-left-width: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--success, #16a34a) 7%, transparent);
}

.trial-reassure strong {
    font-size: 13.5px;
    color: var(--success, #15803d);
}

.trial-reassure span {
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* The one remaining step after registering, so it should not look like the
   secondary buttons beside it. */
.btn-lg {
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   Guided walkthrough (tour.php)

   Drawn, not filmed. It plays like a video and reads like a page: when
   motion is turned off, every chapter is shown at once and nothing moves.
   Self-contained tokens, so the same component looks right on the public
   home page and inside the workspace, which use different palettes.
   ═══════════════════════════════════════════════════════════════════════ */
.fpt {
    --fpt-card: var(--card, #ffffff);
    --fpt-bg: var(--bg, #f6f8fb);
    --fpt-line: var(--border, #e2e8f0);
    --fpt-ink: var(--text-dark, #0f172a);
    --fpt-muted: var(--text-muted, #64748b);
    --fpt-brand: var(--primary, #1d8a8a);
    --fpt-good: #16a34a;
    --fpt-warn: #d97706;
    --fpt-bad: #dc2626;
    --fpt-info: #2563eb;
    display: block;
    color: var(--fpt-ink);
}

.fpt__intro { text-align: center; max-width: 620px; margin: 0 auto 22px; }
.fpt__intro h2 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 28px); line-height: 1.25; }
.fpt__intro p { margin: 0; color: var(--fpt-muted); font-size: 14.5px; line-height: 1.6; }

/* ---- the window ---------------------------------------------------- */
.fpt__frame {
    border: 1px solid var(--fpt-line);
    border-radius: 14px;
    background: var(--fpt-card);
    overflow: hidden;
    box-shadow: 0 18px 44px -28px rgba(15, 23, 42, 0.45);
}

.fpt__chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--fpt-bg);
    border-bottom: 1px solid var(--fpt-line);
}

.fpt__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fpt-line); flex: 0 0 auto; }
.fpt__dot:first-child { background: #f87171; }
.fpt__dot:nth-child(2) { background: #fbbf24; }
.fpt__dot:nth-child(3) { background: #4ade80; }

.fpt__url {
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--fpt-card);
    border: 1px solid var(--fpt-line);
    color: var(--fpt-muted);
    font-size: 11.5px;
    letter-spacing: 0.01em;
}

.fpt__body { display: grid; grid-template-columns: 148px minmax(0, 1fr); min-height: 310px; min-width: 0; }
.fpt__frame, .fpt__stage, .fpt__side { min-width: 0; max-width: 100%; }

/* ---- the little sidebar -------------------------------------------- */
.fpt__side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 10px;
    background: var(--fpt-bg);
    border-right: 1px solid var(--fpt-line);
}

.fpt__navitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fpt-muted);
    transition: background 220ms ease, color 220ms ease;
}

.fpt__navdot {
    width: 6px; height: 6px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.45;
    flex: 0 0 auto;
}

.fpt__navitem.is-active {
    background: color-mix(in srgb, var(--fpt-brand) 13%, transparent);
    color: var(--fpt-brand);
    font-weight: 700;
}

.fpt__navitem.is-active .fpt__navdot { opacity: 1; }

/* ---- the stage ------------------------------------------------------ */
.fpt__stage { position: relative; padding: 18px 20px; min-height: 310px; min-width: 0; overflow: hidden; }

.fpt__screen {
    position: absolute;
    inset: 18px 20px auto;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 420ms ease, transform 420ms ease;
}

.fpt__screen.is-active { opacity: 1; transform: none; position: relative; inset: auto; }

.fpt__screenhead {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fpt-muted);
}

.fpt__screenhead--tight { margin-top: 16px; }

/* ---- rows ----------------------------------------------------------- */
.fpt__rows { display: flex; flex-direction: column; gap: 8px; }

.fpt__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--fpt-line);
    border-radius: 9px;
    background: var(--fpt-card);
}

.fpt__row--timed { gap: 12px; }
.fpt__row.is-dashed { border-style: dashed; background: color-mix(in srgb, var(--fpt-warn) 7%, transparent); }
.fpt__row.is-hot { border-color: var(--fpt-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpt-brand) 14%, transparent); }

.fpt__time {
    flex: 0 0 auto;
    min-width: 52px;
    font-size: 16px;
    font-weight: 700;
    color: var(--fpt-ink);
    font-variant-numeric: tabular-nums;
}

.fpt__rowmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fpt__rowmain strong { font-size: 13px; font-weight: 600; }
.fpt__rowmain small { font-size: 11.5px; color: var(--fpt-muted); }

.fpt__rowbtn {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 7px;
    background: var(--fpt-brand);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

/* ---- tags ----------------------------------------------------------- */
.fpt__tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.fpt__tag--good  { background: color-mix(in srgb, var(--fpt-good) 14%, transparent); color: var(--fpt-good); }
.fpt__tag--warn  { background: color-mix(in srgb, var(--fpt-warn) 16%, transparent); color: var(--fpt-warn); }
.fpt__tag--bad   { background: color-mix(in srgb, var(--fpt-bad) 13%, transparent);  color: var(--fpt-bad); }
.fpt__tag--info  { background: color-mix(in srgb, var(--fpt-info) 13%, transparent); color: var(--fpt-info); }
.fpt__tag--brand { background: var(--fpt-brand); color: #fff; }

/* ---- forms ---------------------------------------------------------- */
.fpt__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fpt__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fpt__field--toggle { justify-content: flex-end; }
.fpt__fieldlabel { font-size: 11px; font-weight: 600; color: var(--fpt-muted); }

.fpt__fieldbox {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--fpt-line);
    border-radius: 7px;
    background: var(--fpt-card);
    font-size: 12.5px;
}

.fpt__fieldbox.is-typing { border-color: var(--fpt-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpt-brand) 12%, transparent); }
.fpt__fieldbox.is-typing::after { content: ""; width: 1px; height: 14px; margin-left: 1px; background: var(--fpt-brand); animation: fpt-caret 900ms steps(2) infinite; }

@keyframes fpt-caret { 50% { opacity: 0; } }

.fpt__fieldchip {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fpt-brand) 12%, transparent);
    color: var(--fpt-brand);
    font-size: 12px;
    font-weight: 600;
}

.fpt__switch {
    width: 36px; height: 20px;
    border-radius: 999px;
    background: var(--fpt-brand);
    position: relative;
    align-self: flex-start;
}

.fpt__switch i { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

.fpt__cta {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 20px;
    border-radius: 8px;
    background: var(--fpt-brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}

/* ---- documents ------------------------------------------------------ */
.fpt__dochead { display: flex; align-items: baseline; gap: 10px; }
.fpt__dochead .fpt__screenhead { margin-bottom: 12px; }

.fpt__docnum {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fpt-brand) 12%, transparent);
    color: var(--fpt-brand);
    font-size: 11px;
    font-weight: 700;
}

.fpt__doclines { display: flex; flex-direction: column; gap: 7px; }

.fpt__docline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--fpt-line);
    border-radius: 8px;
}

.fpt__doclabel { flex: 0 0 auto; min-width: 136px; font-size: 11.5px; font-weight: 600; color: var(--fpt-muted); }
.fpt__docvalue { font-size: 12.5px; font-weight: 500; }
.fpt__docvalue.is-typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; background: var(--fpt-brand); vertical-align: middle; animation: fpt-caret 900ms steps(2) infinite; }

/* ---- dashboard tiles ------------------------------------------------ */
.fpt__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }

.fpt__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px;
    border-radius: 9px;
    border: 1px solid var(--fpt-line);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.fpt__tile--brand { background: var(--fpt-brand); border-color: var(--fpt-brand); color: #fff; }

/* ---- the pointer ---------------------------------------------------- */
.fpt__cursor {
    position: absolute;
    width: 16px; height: 16px;
    margin: -4px 0 0 -4px;
    border-radius: 50% 50% 50% 2px;
    background: var(--fpt-ink);
    border: 2px solid var(--fpt-card);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
    transition: left 850ms cubic-bezier(0.22, 1, 0.36, 1), top 850ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 3;
}

.fpt__cursor.is-clicking::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px solid var(--fpt-brand);
    animation: fpt-ripple 700ms ease-out;
}

@keyframes fpt-ripple {
    from { transform: scale(0.4); opacity: 0.9; }
    to   { transform: scale(1.5); opacity: 0; }
}

/* ---- the commentary ------------------------------------------------- */
.fpt__script { position: relative; margin-top: 18px; min-height: 108px; }

.fpt__caption {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 380ms ease, transform 380ms ease;
    pointer-events: none;
}

.fpt__caption.is-active { opacity: 1; transform: none; position: relative; }

.fpt__eyebrow {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fpt-brand);
}

.fpt__caption h3 { margin: 0 0 6px; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.3; }
.fpt__text { margin: 0; color: var(--fpt-muted); font-size: 14px; line-height: 1.62; max-width: 62ch; }

/* ---- controls ------------------------------------------------------- */
.fpt__controls { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }

.fpt__play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--fpt-line);
    border-radius: 999px;
    background: var(--fpt-card);
    color: var(--fpt-ink);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}

.fpt__play:hover { border-color: var(--fpt-brand); color: var(--fpt-brand); }

/* Two bars for pause; the same element becomes a triangle for play, so there
   is no icon font and nothing extra to load. */
.fpt__playicon {
    width: 9px; height: 11px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
    box-sizing: border-box;
}

.fpt__playicon.is-play {
    width: 0; height: 0;
    border: 6px solid transparent;
    border-left: 9px solid currentColor;
    border-right: 0;
}

.fpt__chapters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 260px; }

.fpt__chip {
    position: relative;
    overflow: hidden;
    padding: 6px 12px;
    border: 1px solid var(--fpt-line);
    border-radius: 999px;
    background: var(--fpt-card);
    color: var(--fpt-muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.fpt__chip:hover { color: var(--fpt-ink); border-color: var(--fpt-brand); }
.fpt__chip.is-active { color: var(--fpt-brand); border-color: var(--fpt-brand); }

.fpt__chipbar {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: color-mix(in srgb, var(--fpt-brand) 15%, transparent);
    pointer-events: none;
}

.fpt__chip:not(.is-active) .fpt__chipbar { transform: scaleX(0) !important; transition: none !important; }
.fpt__chiptext { position: relative; }

/* ---- motion off: the whole thing as a readable page ------------------ */
.fpt.is-still .fpt__screen { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 18px; }
.fpt.is-still .fpt__caption { position: relative; inset: auto; opacity: 1; transform: none; margin-bottom: 18px; }
.fpt.is-still .fpt__cursor { display: none; }
.fpt.is-still .fpt__script { min-height: 0; }
.fpt.is-still .fpt__chipbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .fpt__screen, .fpt__caption, .fpt__cursor, .fpt__navitem { transition: none; }
    .fpt__cursor.is-clicking::after, .fpt__fieldbox.is-typing::after { animation: none; }
}

/* ---- narrow screens -------------------------------------------------- */
@media (max-width: 760px) {
    .fpt__body { grid-template-columns: 1fr; min-height: 0; }
    .fpt__side { flex-direction: row; overflow-x: auto; gap: 4px; border-right: 0; border-bottom: 1px solid var(--fpt-line); padding: 9px 10px; }
    .fpt__navitem { white-space: nowrap; font-size: 11.5px; }
    .fpt__navdot { display: none; }
    .fpt__stage { min-height: 268px; padding: 14px; }
    .fpt__screen { inset: 14px 14px auto; }
    .fpt__fields { grid-template-columns: 1fr; }
    .fpt__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fpt__doclabel { min-width: 96px; }
    .fpt__script { min-height: 140px; }
    .fpt__cursor { display: none; }
}

@media (max-width: 560px) {
    .fpt__docline { flex-direction: column; align-items: flex-start; gap: 4px; }
    .fpt__doclabel { min-width: 0; }
    .fpt__chapters { flex: 1 1 100%; }

    /* The tag drops under the name rather than being squeezed off the edge. */
    .fpt__row { flex-wrap: wrap; row-gap: 6px; padding: 9px 10px; }
    .fpt__rowmain { flex: 1 1 60%; }
    .fpt__time { min-width: 44px; font-size: 15px; }
    .fpt__tag { order: 3; }
    .fpt__rowbtn { order: 4; margin-left: auto; }
    .fpt__screenhead { font-size: 12px; }
}

/* ── Tips (guide.php) ─────────────────────────────────────────────────── */
.fpg-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fpg-tipgroup {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 11px;
    background: var(--card, #fff);
    padding: 16px 18px;
}

.fpg-tipgroup > h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fpg-tipgroup > h3 span {
    width: 24px; height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary, #1d8a8a) 13%, transparent);
    color: var(--primary, #1d8a8a);
    font-size: 12px;
}

.fpg-tip { padding: 10px 0; border-top: 1px solid var(--border, #e2e8f0); }
.fpg-tip:first-of-type { border-top: 0; padding-top: 0; }
.fpg-tip strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.fpg-tip span { display: block; color: var(--text-muted, #64748b); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 860px) {
    .fpg-tips { grid-template-columns: 1fr; }
}

/* Row of buttons under the walkthrough on the guide page. */
.guide-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.guide-actions--tight { margin-top: 0; }

@media (max-width: 560px) {
    .guide-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* The walkthrough section on the public home page. Its own breathing room,
   and the trial buttons repeated underneath while the product is fresh in
   mind rather than making people scroll back to the hero. */
.home-tour { margin: 46px auto 10px; max-width: 1080px; padding: 0 16px; }
.home-tour__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 560px) {
    .home-tour { margin-top: 30px; }
    .home-tour__cta .btn-home { flex: 1 1 100%; text-align: center; }
}

/* The appliance row's Edit link and Remove button sit on one line. The button
   is a form submit rather than a link, because a delete behind a GET can be
   triggered by a prefetch without anybody clicking it. */
.appliance-actions { white-space: nowrap; }
.appliance-actions form { display: inline; }

.action-link--danger {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 6px;
    font: inherit;
    color: var(--danger, #dc2626);
    cursor: pointer;
    text-decoration: underline;
}

.action-link--danger:hover { opacity: 0.8; }

/* ── Date with an optional time ────────────────────────────────────────
   Replaces the datetime-local boxes, which refuse a date without an hour.
   The two sit side by side so they still read as one answer. */
.fp-dt { display: block; }
.fp-dt__label { display: block; margin-bottom: 6px; }
.fp-dt__row { display: flex; gap: 8px; align-items: center; }
.fp-dt__date { flex: 1 1 60%; min-width: 0; }
.fp-dt__time { flex: 0 1 130px; min-width: 0; }

.fp-dt__hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .fp-dt__row { flex-wrap: wrap; }
    .fp-dt__date, .fp-dt__time { flex: 1 1 100%; }
}

/* ── Appliance reordering ──────────────────────────────────────────────
   Dragged by the grip, the same gesture as a job in the schedule. The
   position is not decoration: it is the slot the certificate prints the
   appliance in and the inspection row that carries its readings, so a move
   carries both. */
.appl-handle { display: inline-flex; align-items: center; gap: 7px; }
.cert-appl-pos { min-width: 22px; text-align: center; }

.appl-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    border-radius: 5px;
    color: var(--text-muted, #94a3b8);
    cursor: grab;
    touch-action: none;
}

.appl-grip:hover { color: var(--primary, #1d8a8a); background: var(--bg, #f1f5f9); }
.appl-grip:focus-visible { outline: 2px solid var(--primary, #1d8a8a); outline-offset: 1px; }

.appl-row { cursor: grab; }
.appl-row.is-lifted {
    cursor: grabbing;
    background: var(--card, #fff);
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.45);
    outline: 1px solid var(--primary, #1d8a8a);
    position: relative;
    z-index: 2;
}

#appliance-list.is-lifting .appl-grip { cursor: grabbing; }
#appliance-list.is-lifting .appl-row:not(.is-lifted) { opacity: 0.75; }

/* Nothing is selectable mid-drag, or the gesture paints the table blue. */
body.appl-no-select, body.appl-no-select * { user-select: none; -webkit-user-select: none; }

@media (max-width: 560px) {
    .appl-handle { gap: 4px; }
    .appl-grip { width: 26px; height: 30px; }
}

/* Owned By and Inspected, answered on the appliance row. Sized and styled to
   sit in a table cell the way the form's own selects sit in a field, so the
   list reads as one thing rather than a table with controls bolted on. */
/* Two answers given on the appliance row itself, so they have to fit a table
   cell rather than a form field's own line.
 
   Only the size is changed here. Colour, border and radius are left to the
   .form-group rules every other field on the page uses, so these follow the
   light and dark themes without being told to. The width needs the extra
   specificity because `.form-group select` sets min-width: 200px, which beats a
   max-width and pushed the Actions column off the edge; the padding needs
   !important because the global select rule reserves 44px on the right for a
   chevron - more than a cell can spare, and .form-group select's background
   shorthand has painted that chevron out anyway. */
.form-group select.appl-inline,
select.appl-inline {
    width: 100%;
    min-width: 0;
    max-width: 132px;
    padding: 7px 10px !important;
    font-size: 13px;
    line-height: 1.3;
}

.form-group select.appl-inline--narrow,
select.appl-inline--narrow { max-width: 74px; }

.appl-inline:hover { border-color: var(--primary, #1d8a8a); }
.appl-inline:focus { outline: 2px solid var(--primary, #1d8a8a); outline-offset: -1px; border-color: var(--primary, #1d8a8a); }

/* A moment of green on save; red stays until the next attempt. */
.appl-inline.is-saved { border-color: var(--success, #16a34a); animation: appl-saved 1.4s ease-out forwards; }
.appl-inline.is-failed { border-color: var(--danger, #dc2626); }

@keyframes appl-saved {
    0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #16a34a) 26%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .appl-inline.is-saved { animation: none; }
}

@media (max-width: 760px) {
    .form-group select.appl-inline,
    select.appl-inline { max-width: none; font-size: 16px; padding: 10px 12px !important; }
    .form-group select.appl-inline--narrow,
    select.appl-inline--narrow { max-width: none; }
}

/* ============================================================
   Filter bars - one layout for every list on the site.

   Each list page used to arrange its own filters out of inline styles, and on a
   phone they stacked into three or four full-width rows: a search field, then a
   second field, then a Filter button and a Clear button on rows of their own.
   That was most of a phone screen spent before the first result appeared.

   Now the search field keeps the top row with its submit folded into the end of
   it, and every other control collapses behind one Filters button that is only
   opened when it is wanted. Desktop is unchanged in spirit - everything still
   sits on one line.
   ============================================================ */

.fp-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* The search field, with its submit tucked inside the right-hand end so it
   never needs a row of its own. */
.fp-filterbar__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 0;
}

.fp-filterbar__icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}

.fp-filterbar__search input[type="search"] {
    width: 100%;
    min-width: 0;
    padding: 10px 44px 10px 36px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--card, #fff);
    color: var(--text-dark, #0f172a);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}

.fp-filterbar__search input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--brand, #06b6d4);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12);
}

.fp-filterbar__go {
    position: absolute;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--primary, #3b82f6);
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.fp-filterbar__go:hover { filter: brightness(1.08); }
.fp-filterbar__go svg { width: 15px; height: 15px; }

/* White on the brand colour works while the brand is the darker cyan the light
   theme uses. Every dark theme brightens it to sit on a dark page, and white
   on that reads at under 2:1. These two take a deep ink instead, which is the
   same pill with the contrast the other way up. */
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .fp-filterbar__go,
[data-theme="ocean"] .fp-filterbar__go,
[data-theme="sunset"] .fp-filterbar__go,
[data-theme="forest"] .fp-filterbar__go,
[data-theme="midnight"] .fp-filterbar__go,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .filter-btn.active,
[data-theme="ocean"] .filter-btn.active,
[data-theme="sunset"] .filter-btn.active,
[data-theme="forest"] .filter-btn.active,
[data-theme="midnight"] .filter-btn.active { color: #08131f; }

/* Secondary controls. One row beside the search on a wide screen; behind the
   Filters button on a narrow one. */
.fp-filterbar__panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-filterbar__field {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.fp-filterbar__field > input,
.fp-filterbar__field > select {
    padding: 9px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    /* background-color, never the shorthand: the shorthand would reset
       background-image and take the chevron off the select with it. */
    background-color: var(--card, #fff);
    color: var(--text-dark, #0f172a);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
}

/* The chevron rule reserves 44px on every select, which is more than these
   need. */
.fp-filterbar__field > select {
    padding-right: 30px !important;
    min-width: 0;
    background-position: right 9px center;
    background-size: 15px 15px;
}
.fp-filterbar__field > input[type="number"] { width: 92px; }

.fp-filterbar__toggle {
    display: none;            /* only earns its place on a narrow screen */
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: var(--card, #fff);
    color: var(--text-dark, #0f172a);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.fp-filterbar__toggle svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
.fp-filterbar.is-open .fp-filterbar__toggle svg { transform: rotate(180deg); }
.fp-filterbar.is-open .fp-filterbar__toggle { border-color: var(--brand, #06b6d4); }

/* How many secondary filters are actually set, so the button says whether
   opening it is worth the tap. */
.fp-filterbar__count {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary, #3b82f6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.fp-filterbar__toggle[data-filter-count]:not([data-filter-count="0"]) .fp-filterbar__count { display: inline-block; }

.fp-filterbar__clear {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text-muted, #64748b);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fp-filterbar__clear:hover { color: var(--text-dark, #0f172a); background: var(--bg, #f1f5f9); }

/* The page's own action - New Job, New Customer - sits beside the filters on a
   wide screen and takes its own line on a narrow one. */
.fp-filterbar__action { margin-left: auto; }

@media (max-width: 760px) {
    .fp-filterbar {
        gap: 8px;
        margin-bottom: 12px;
    }

    .fp-filterbar__search { flex: 1 1 100%; }

    /* 16px keeps iOS from zooming the page in when the field takes focus. */
    .fp-filterbar__search input[type="search"] {
        min-height: 44px;
        font-size: 16px;
    }

    .fp-filterbar__toggle { display: inline-flex; }

    /* Collapsing is only switched on once the script has wired the button up,
       so with no JavaScript the filters stay where they can be reached. */
    .fp-filterbar.is-collapsible .fp-filterbar__panel { display: none; }
    .fp-filterbar.is-collapsible.is-open .fp-filterbar__panel {
        display: flex;
        flex: 1 1 100%;
        padding: 10px;
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 12px;
        background: var(--bg, #f8fafc);
    }

    .fp-filterbar.is-collapsible.is-open .fp-filterbar__field { flex: 1 1 100%; }
    .fp-filterbar.is-collapsible.is-open .fp-filterbar__field > input,
    .fp-filterbar.is-collapsible.is-open .fp-filterbar__field > select {
        flex: 1;
        min-height: 44px;
        font-size: 16px;
    }
    .fp-filterbar.is-collapsible.is-open .fp-filterbar__field > input[type="number"] { width: auto; }

    .fp-filterbar__action {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

/* ---- the row filter that every table gets given -------------------------
   A pill with a 150px box inside it reads as an afterthought on a phone, and it
   sat directly under a search field that had just been used. Full width and
   shorter here, so the two read as one group rather than two competing boxes. */
@media (max-width: 760px) {
    .table-header .table-filter {
        display: flex;
        width: 100%;
        padding: 5px 12px;
        border-radius: 10px;
    }
    .table-header .table-filter input {
        width: 100%;
        min-height: 34px;
        font-size: 16px;
    }
}

/* ---- rows of filter pills ----------------------------------------------
   These already scrolled sideways, but the last one was cut clean through, so
   it read as broken rather than as more. A fade at the edge says there is more,
   and snapping stops a pill being left half on screen. */
@media (max-width: 760px) {
    .fp-pillscroll,
    .sch-seg,
    .todo-toolbar .filters {
        position: relative;
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }

    .fp-pillscroll::-webkit-scrollbar,
    .sch-seg::-webkit-scrollbar,
    .todo-toolbar .filters::-webkit-scrollbar { display: none; }

    .fp-pillscroll > *,
    .sch-seg > *,
    .todo-toolbar .filters > * { scroll-snap-align: start; }

    /* Once it is scrolled to the end there is nothing more to hint at. */
    .fp-pillscroll.is-end,
    .sch-seg.is-end,
    .todo-toolbar .filters.is-end {
        -webkit-mask-image: none;
                mask-image: none;
    }
}

:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .fp-filterbar__search input[type="search"],
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .fp-filterbar__field > input,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .fp-filterbar__field > select,
:is([data-theme="dark"],[data-theme="ocean"],[data-theme="sunset"],[data-theme="forest"],[data-theme="midnight"]) .fp-filterbar__toggle {
    background-color: var(--card);
    border-color: var(--line);
    color: var(--ink);
}