/* =============================================================================
   Minimalist theme for Pool by Pros.
   -----------------------------------------------------------------------------
   Design principles:
     1. Calm neutral palette: white surfaces, soft off-white background,
        a single ink color, one muted gray, and semantic colors reserved only
        for state (success / warning / danger).
     2. Hairline 1px borders instead of heavy box-shadows or gradients.
     3. Generous whitespace and consistent small radii (8 / 10 / 12 px).
     4. Flat — no backdrop blur, no glass effects, no glow.
     5. Typography-first hierarchy. Weights restricted to 400 / 500 / 600 / 700.
     6. Restrained micro-interactions: scale(0.99) on press, no transforms on hover.
     7. Same DOM, same functionality — only chrome changes. All semantic colors
        for status pills, badges and progress bars are preserved.
   ========================================================================== */

:root {
    /* Greys only — no pure black. Slate scale chosen for warm-cool neutrality. */
    --mz-ink:            #334155;   /* slate-700 — strongest text/accents */
    --mz-ink-strong:     #1e293b;   /* slate-800 — for very rare emphasis */
    --mz-text:           #475569;   /* slate-600 — primary body text */
    --mz-muted:          #64748b;   /* slate-500 */
    --mz-faint:          #94a3b8;   /* slate-400 */
    --mz-surface:        #ffffff;
    --mz-surface-alt:    #f1f5f9;   /* slate-100 — page background, contrasts with white cards */
    --mz-surface-sunken: #e2e8f0;   /* slate-200 — pressed / selected states */
    --mz-surface-soft:   #f8fafc;   /* slate-50 — very light tint */
    --mz-border:         #e2e8f0;   /* slate-200 — hairline */
    --mz-border-strong:  #cbd5e1;   /* slate-300 */
    --mz-accent:         #475569;   /* slate-600 — primary CTA (dark grey, never black) */
    --mz-accent-hover:   #334155;   /* slate-700 */
    --mz-focus-ring:     rgba(71, 85, 105, 0.20);
    --mz-shadow-faint:   0 1px 2px rgba(15, 23, 42, 0.04);
    --mz-shadow-soft:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --mz-shadow-sheet:   0 -10px 32px rgba(15, 23, 42, 0.12);
    --mz-radius-sm:      6px;
    --mz-radius-md:      10px;
    --mz-radius-lg:      14px;
    --mz-radius-pill:    999px;

    --mz-success:        #16a34a;
    --mz-success-soft:   #22c55e;
    --mz-warning:        #d97706;
    --mz-danger:         #dc2626;
    --mz-danger-soft:    #f87171;  /* softer red, used for non-destructive icons (skip) */
    --mz-info:           #2563eb;
}

/* -----------------------------------------------------------------------------
   1. Page chrome
   -------------------------------------------------------------------------- */

body.minimalist-preview {
    color: var(--mz-text) !important;
    /* Subtle grey body with a barely-visible gradient so cards float against
       a slightly cooler page background. Same treatment is used on tech_app. */
    background:
        radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.10), transparent 32rem),
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--mz-surface-alt) !important;
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

body.theme-minimalist {
    color-scheme: light;
}

body.minimalist-preview::before {
    content: none !important;
}

body.minimalist-preview .app-watermark-logo {
    display: none !important;
}

/* The wrapper / sidebar used by the admin shell  ---------------------------- */

.minimalist-preview .wrapper {
    background: var(--mz-surface-alt) !important;
    background-image: none !important;
}

.minimalist-preview .sidebar {
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    border-right: 1px solid var(--mz-border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .sidebar-header,
.minimalist-preview .sidebar-footer,
.minimalist-preview .sidebar-user {
    background: var(--mz-surface) !important;
    border-color: var(--mz-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .sidebar-footer span,
.minimalist-preview .sidebar-user span {
    color: var(--mz-text) !important;
    text-shadow: none !important;
}

.minimalist-preview .sidebar-footer a {
    color: var(--mz-ink) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.minimalist-preview .sidebar-menu li a {
    border: 1px solid transparent !important;
    border-radius: var(--mz-radius-md) !important;
    color: var(--mz-text) !important;
    font-weight: 500;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease;
}

.minimalist-preview .sidebar-menu li a:hover {
    background: var(--mz-surface-sunken) !important;
    color: var(--mz-ink) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.minimalist-preview .sidebar-menu li a.active {
    background: var(--mz-surface-sunken) !important;
    color: var(--mz-ink) !important;
    font-weight: 600;
    border-color: var(--mz-border) !important;
    box-shadow: none !important;
}

.minimalist-preview .main-content {
    background: var(--mz-surface-alt) !important;
}

.minimalist-preview .main-content iframe {
    background: var(--mz-surface-alt) !important;
}

/* -----------------------------------------------------------------------------
   2. Tech app top bar
   -------------------------------------------------------------------------- */

.minimalist-preview .top-bar,
.minimalist-preview .header {
    background: var(--mz-surface) !important;
    background-image: none !important;
    color: var(--mz-ink) !important;
    border-bottom: 1px solid var(--mz-border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Pool Profile top-bar meta (address + gate access) — match route card legibility. */
.minimalist-preview .top-bar-meta {
    color: var(--mz-muted) !important;
}
.minimalist-preview .top-bar-address,
.minimalist-preview .top-bar-pool-access {
    color: var(--mz-muted) !important;
}
.minimalist-preview .top-bar-pool-access .pool-access-label {
    color: var(--mz-ink) !important;
    font-weight: 600;
}
.minimalist-preview .top-bar-pool-access .pool-access-dog-yes {
    color: var(--mz-danger) !important;
}
.minimalist-preview .header-title {
    color: var(--mz-ink) !important;
}

.minimalist-preview .top-left .route-status,
.minimalist-preview .top-weather #loc-name,
.minimalist-preview #loc-name {
    color: var(--mz-muted) !important;
    text-shadow: none !important;
    font-weight: 500;
    opacity: 1 !important;
}

/* Temperature, date and other top-bar primary readouts: dark grey for visibility. */
.minimalist-preview .top-weather #temp,
.minimalist-preview #temp,
.minimalist-preview .top-bar #weather-temp,
.minimalist-preview .top-bar .top-temp,
.minimalist-preview .top-left strong,
.minimalist-preview .top-right strong {
    color: var(--mz-ink) !important;
    text-shadow: none !important;
    font-weight: 700;
    opacity: 1 !important;
}

.minimalist-preview .top-weather .date {
    color: var(--mz-muted) !important;
    text-shadow: none !important;
    font-weight: 600;
    opacity: 1 !important;
}

.minimalist-preview .status-pill-mini {
    border-radius: var(--mz-radius-pill);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: none !important;
}

.minimalist-preview .main-menu-btn,
.minimalist-preview .top-bar-icon-btn,
.minimalist-preview .top-bar-reorder-btn {
    background: var(--mz-surface) !important;
    color: var(--mz-ink) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background 120ms ease, border-color 120ms ease;
}

.minimalist-preview .main-menu-btn:hover,
.minimalist-preview .top-bar-icon-btn:hover,
.minimalist-preview .top-bar-reorder-btn:hover {
    background: var(--mz-surface-sunken) !important;
    border-color: var(--mz-border-strong) !important;
}

.minimalist-preview .top-bar-icon-btn .briefing-badge,
.minimalist-preview .btn-action.btn-action-icon .briefing-badge {
    background: var(--mz-danger) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 0 0 2px var(--mz-surface) !important;
    font-weight: 700;
}

.minimalist-preview #btnRemindersTop i {
    color: #7c3aed !important;
    text-shadow: none !important;
}

.minimalist-preview #btnBriefingTop i {
    color: var(--mz-warning) !important;
    text-shadow: none !important;
}

.minimalist-preview .btn-action.active,
.minimalist-preview #btnReorderTop.active,
.minimalist-preview .top-bar-reorder-btn.active {
    color: #fff !important;
    background: var(--mz-accent) !important;
    border-color: var(--mz-accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.minimalist-preview .btn-action.active i,
.minimalist-preview #btnReorderTop.active i {
    color: #fff !important;
}

/* Progress divider remains thin but uses the success color. ------------- */

.minimalist-preview .progress-divider-container {
    background: var(--mz-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .progress-divider-bar {
    background: var(--mz-success) !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   3. Header + sub-page bars (service_form, profile, etc.)
   -------------------------------------------------------------------------- */

.minimalist-preview .header {
    color: var(--mz-ink) !important;
}

.minimalist-preview .header .btn-back,
.minimalist-preview .header .timer-badge,
.minimalist-preview .header .drop-menu > button {
    background: var(--mz-surface) !important;
    color: var(--mz-ink) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .header .timer-badge {
    color: var(--mz-danger) !important;
    border-color: var(--mz-border) !important;
}

.minimalist-preview .header .timer-badge .pulse-dot {
    background: var(--mz-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* -----------------------------------------------------------------------------
   4. Generic surface treatment: cards, pills, boxes, panels
   -------------------------------------------------------------------------- */

.minimalist-preview .status-pill,
.minimalist-preview .route-metrics-row,
.minimalist-preview .chart-container,
.minimalist-preview .info-card,
.minimalist-preview .filter-dates-box,
.minimalist-preview #serviceForm .card,
.minimalist-preview .settings-card,
.minimalist-preview .category-block,
.minimalist-preview .top-header,
.minimalist-preview .header-bar,
.minimalist-preview .summary-card,
.minimalist-preview .metric-card,
.minimalist-preview .stat-card,
.minimalist-preview .panel,
.minimalist-preview .card,
.minimalist-preview .box,
.minimalist-preview .table-card,
.minimalist-preview .content-card,
.minimalist-preview .gate-access-strip {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-lg) !important;
    box-shadow: var(--mz-shadow-faint) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .status-pill,
.minimalist-preview .route-metrics-row {
    margin-bottom: 12px;
}

.minimalist-preview .status-pill {
    padding: 10px 14px !important;
    color: var(--mz-text) !important;
}

.minimalist-preview .stats-group .stat-item,
.minimalist-preview .route-metric-item {
    color: var(--mz-text) !important;
    font-weight: 500;
}

.minimalist-preview .route-metric-sep {
    background: var(--mz-border) !important;
}

/* -----------------------------------------------------------------------------
   5. Route cards (the heart of the tech app)
   -------------------------------------------------------------------------- */

.minimalist-preview .route-card {
    isolation: isolate;
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-lg) !important;
    box-shadow: var(--mz-shadow-faint) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.minimalist-preview .route-card::before,
.minimalist-preview .route-card::after {
    content: none !important;
}

.minimalist-preview .route-card:hover {
    border-color: var(--mz-border-strong) !important;
    box-shadow: var(--mz-shadow-soft) !important;
}

.minimalist-preview .route-card:active,
.minimalist-preview .sheet-menu-btn:active,
.minimalist-preview .btn-action:active,
.minimalist-preview .btn-back:active,
.minimalist-preview .btn-start:active,
.minimalist-preview .sheet-btn:active,
.minimalist-preview .btn-opt:active,
.minimalist-preview .main-menu-btn:active,
.minimalist-preview .top-bar-icon-btn:active {
    transform: scale(0.99);
}

.minimalist-preview .route-card.completed-job,
.minimalist-preview .route-card.skipped-pending-job {
    opacity: 0.55;
}

.minimalist-preview .route-card.type-supplier {
    background: #fefce8 !important;
    border-color: #fde68a !important;
}

.minimalist-preview .route-card.route-card-reminder-only,
.minimalist-preview .route-card.type-reminder {
    background: #faf5ff !important;
    border-color: #e9d5ff !important;
}

.minimalist-preview .route-card-meta-strip {
    background: var(--mz-surface-alt) !important;
    border-top: 1px solid var(--mz-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--mz-muted) !important;
}

.minimalist-preview .route-card .client-info {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}

.minimalist-preview .route-card .client-info h3 {
    color: var(--mz-ink) !important;
    text-shadow: none !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.minimalist-preview .route-card .client-info .address-text,
.minimalist-preview .route-card .client-info p {
    color: var(--mz-muted) !important;
    font-weight: 400;
}

.minimalist-preview .route-card .card-link,
.minimalist-preview .route-card .card-link-main-cell,
.minimalist-preview .route-card .card-link-meta-cell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Route stop bolinhas: grey body with a coloured ring that signals state.
   Ring colour communicates STATUS:
     - Soft red ring  -> not done yet (pending)
     - Green ring     -> completed
   Inner glyph (number / flask / clipboard) keeps communicating TYPE.
   This keeps the visual language consistent: ring = status, icon = type. */

.minimalist-preview .stop-num,
.minimalist-preview .stop-num-reminder,
.minimalist-preview .stop-num-supplier {
    background: var(--mz-surface-alt) !important; /* light grey body */
    color: var(--mz-text) !important;              /* dark grey glyph */
    border: 2px solid #fca5a5 !important;          /* soft red ring (pending) */
    font-weight: 700;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Subtle tint inside the bolinha hints at the type, but stays mostly grey. */
.minimalist-preview .stop-num-reminder { color: #7c3aed !important; }
.minimalist-preview .stop-num-supplier { color: #b45309 !important; }

/* Completed -> green ring + green glyph + faint green tint on the body. */
.minimalist-preview .route-card.completed-job .stop-num,
.minimalist-preview .route-card.completed-job .stop-num-reminder,
.minimalist-preview .route-card.completed-job .stop-num-supplier {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}

/* Skipped-but-still-pending: neutral ring so it doesn't fight with the
   pending-red language. Tech still knows the card is skipped because the
   whole card is dimmed (opacity: 0.55 from the .skipped-pending-job rule). */
.minimalist-preview .route-card.skipped-pending-job .stop-num,
.minimalist-preview .route-card.skipped-pending-job .stop-num-reminder,
.minimalist-preview .route-card.skipped-pending-job .stop-num-supplier {
    border-color: var(--mz-border-strong) !important;
    color: var(--mz-muted) !important;
}

.minimalist-preview .card-eta-time,
.minimalist-preview .task-reminder-tag,
.minimalist-preview .task-today-label,
.minimalist-preview .menu-state-pill,
.minimalist-preview .shop-item-qty,
.minimalist-preview .shop-item-priority {
    background: var(--mz-surface-sunken) !important;
    color: var(--mz-text) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-pill) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.minimalist-preview .skip-service-btn {
    width: auto !important;
    height: auto !important;
    padding: 6px !important;
    color: var(--mz-danger-soft) !important; /* softer red */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
    opacity: 0.85;
}

.minimalist-preview .skip-service-btn:hover,
.minimalist-preview .skip-service-btn:active {
    background: transparent !important;
    color: var(--mz-danger) !important; /* on press becomes the full red */
    opacity: 1;
    transform: scale(0.96);
}

/* -----------------------------------------------------------------------------
   6. Buttons (generic)
   --------------------------------------------------------------------------
   Strategy: every button in the system gets the SAME pill-rectangle shape,
   the SAME min-height, and the SAME hairline border. The only thing that
   changes between intents is the fill colour. */

.minimalist-preview .btn,
.minimalist-preview button,
.minimalist-preview .button,
.minimalist-preview .btn-history,
.minimalist-preview .btn-gallery,
.minimalist-preview .sheet-btn,
.minimalist-preview .sheet-btn-aux,
.minimalist-preview .tech-prof-pencil,
.minimalist-preview .task-photo-btn,
.minimalist-preview .file-upload-box,
.minimalist-preview .media-source-btn,
.minimalist-preview .btn-opt {
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-weight: 500;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.minimalist-preview .btn:hover,
.minimalist-preview button:hover,
.minimalist-preview .sheet-btn:hover,
.minimalist-preview .btn-opt:hover {
    background: var(--mz-surface-soft) !important;
    border-color: var(--mz-border-strong) !important;
}

/* Primary buttons: dark grey (slate-600), never pure black. */

.minimalist-preview .btn-add,
.minimalist-preview .btn-cat,
.minimalist-preview .btn-primary,
.minimalist-preview .btn-start,
.minimalist-preview .submit-btn,
.minimalist-preview .sheet-btn.primary,
.minimalist-preview button[type="submit"],
.minimalist-preview .footer .btn-submit {
    color: #fff !important;
    background: var(--mz-accent) !important;
    background-image: none !important;
    border: 1px solid var(--mz-accent) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600;
}

.minimalist-preview .btn-add:hover,
.minimalist-preview .btn-cat:hover,
.minimalist-preview .btn-primary:hover,
.minimalist-preview .btn-start:hover,
.minimalist-preview .submit-btn:hover,
.minimalist-preview .sheet-btn.primary:hover,
.minimalist-preview button[type="submit"]:hover,
.minimalist-preview .footer .btn-submit:hover {
    background: var(--mz-accent-hover) !important;
    border-color: var(--mz-accent-hover) !important;
}

/* Pool profile bottom bar: Skip Service — soft red hint (not neutral surface). */
.minimalist-preview .bottom-action .btn-skip-service {
    background: #fef2f2 !important;
    background-image: none !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.minimalist-preview .bottom-action .btn-skip-service:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}
.minimalist-preview .bottom-action .btn-skip-service:active {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}

.minimalist-preview .route-card-sms-btn {
    color: #2563eb !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--mz-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.minimalist-preview .route-card-sms-btn:hover,
.minimalist-preview .route-card-sms-btn:active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.minimalist-preview .footer .btn-submit:disabled {
    color: #fff !important;
    background: var(--mz-faint) !important;
    border-color: var(--mz-faint) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}

/* --- Admin button system standardisation ---------------------------------
   The admin pages share a `.admin-btn` API (assets/css/admin_buttons.css).
   Under Minimalist we normalise EVERY variant to the same height, padding,
   radius and hairline shape, with the only variable being the fill colour
   per intent. No translateY on hover, no heavy shadow, no transform. */

.minimalist-preview .admin-btn {
    min-height: 38px !important;
    padding: 9px 15px !important;
    gap: 8px !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

.minimalist-preview .admin-btn:hover {
    background: var(--mz-surface-soft) !important;
    border-color: var(--mz-border-strong) !important;
    color: var(--mz-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

.minimalist-preview .admin-btn:active {
    transform: scale(0.99) !important;
    box-shadow: none !important;
}

.minimalist-preview .admin-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--mz-focus-ring) !important;
    border-color: var(--mz-border-strong) !important;
}

/* Size modifiers — keep consistent shape, just change height/padding. */
.minimalist-preview .admin-btn--xs {
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: var(--mz-radius-sm) !important;
}
.minimalist-preview .admin-btn--sm {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: var(--mz-radius-sm) !important;
}
.minimalist-preview .admin-btn--lg {
    min-height: 46px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    border-radius: var(--mz-radius-lg) !important;
}
.minimalist-preview .admin-btn--icon {
    width: 38px !important;
    min-width: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.minimalist-preview .admin-btn--pill {
    border-radius: var(--mz-radius-pill) !important;
}
.minimalist-preview .admin-btn--full {
    width: 100% !important;
}

/* Intent: primary -> dark grey fill */
.minimalist-preview .admin-btn--primary,
.minimalist-preview .admin-btn--solid.admin-btn--primary {
    background: var(--mz-accent) !important;
    border-color: var(--mz-accent) !important;
    color: #ffffff !important;
}
.minimalist-preview .admin-btn--primary:hover,
.minimalist-preview .admin-btn--solid.admin-btn--primary:hover {
    background: var(--mz-accent-hover) !important;
    border-color: var(--mz-accent-hover) !important;
    color: #ffffff !important;
}

/* Intent: secondary / neutral solid -> medium grey */
.minimalist-preview .admin-btn--secondary,
.minimalist-preview .admin-btn--neutral,
.minimalist-preview .admin-btn--solid.admin-btn--neutral {
    background: var(--mz-muted) !important;
    border-color: var(--mz-muted) !important;
    color: #ffffff !important;
}
.minimalist-preview .admin-btn--secondary:hover,
.minimalist-preview .admin-btn--neutral:hover,
.minimalist-preview .admin-btn--solid.admin-btn--neutral:hover {
    background: var(--mz-ink) !important;
    border-color: var(--mz-ink) !important;
}

/* Intent: success */
.minimalist-preview .admin-btn--success,
.minimalist-preview .admin-btn--solid.admin-btn--success {
    background: var(--mz-success) !important;
    border-color: var(--mz-success) !important;
    color: #ffffff !important;
}
.minimalist-preview .admin-btn--success:hover,
.minimalist-preview .admin-btn--solid.admin-btn--success:hover {
    background: #15803d !important;
    border-color: #15803d !important;
}

/* Intent: warning */
.minimalist-preview .admin-btn--warning,
.minimalist-preview .admin-btn--solid.admin-btn--warning {
    background: var(--mz-warning) !important;
    border-color: var(--mz-warning) !important;
    color: #ffffff !important;
}
.minimalist-preview .admin-btn--warning:hover,
.minimalist-preview .admin-btn--solid.admin-btn--warning:hover {
    background: #b45309 !important;
    border-color: #b45309 !important;
}

/* Intent: danger */
.minimalist-preview .admin-btn--danger,
.minimalist-preview .admin-btn--solid.admin-btn--danger {
    background: var(--mz-danger) !important;
    border-color: var(--mz-danger) !important;
    color: #ffffff !important;
}
.minimalist-preview .admin-btn--danger:hover,
.minimalist-preview .admin-btn--solid.admin-btn--danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Emphasis: soft -> very light tinted fill, hairline of the same family */
.minimalist-preview .admin-btn--soft {
    background: var(--mz-surface-alt) !important;
    border-color: var(--mz-border) !important;
    color: var(--mz-text) !important;
}
.minimalist-preview .admin-btn--soft.admin-btn--primary {
    background: var(--mz-surface-soft) !important;
    border-color: var(--mz-border) !important;
    color: var(--mz-ink) !important;
}
.minimalist-preview .admin-btn--soft.admin-btn--success {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}
.minimalist-preview .admin-btn--soft.admin-btn--warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
.minimalist-preview .admin-btn--soft.admin-btn--danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

/* Emphasis: ghost -> no border, no fill */
.minimalist-preview .admin-btn--ghost {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--mz-text) !important;
}
.minimalist-preview .admin-btn--ghost:hover {
    background: var(--mz-surface-soft) !important;
    border-color: transparent !important;
    color: var(--mz-ink) !important;
}

.minimalist-preview .admin-btn--link {
    min-height: auto !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    color: var(--mz-ink) !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
.minimalist-preview .admin-btn--link:hover {
    color: var(--mz-ink-strong) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.minimalist-preview .admin-btn:disabled,
.minimalist-preview .admin-btn[disabled],
.minimalist-preview .admin-btn[aria-disabled="true"] {
    opacity: 0.5 !important;
}

/* Legacy admin button aliases (.btn, .btn-primary, .btn-danger, etc.):
   honour the same hairline + grey palette so older pages match. */
.minimalist-preview :where(
    .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-muted,
    .btn-danger, .btn-warning, .btn-warn, .btn-success, .btn-ok,
    .btn-save, .btn-save-client, .btn-search, .btn-sync, .btn-act,
    .vs-btn, .gs-btn
) {
    min-height: 38px;
    padding: 9px 15px;
    gap: 8px;
    border: 1px solid var(--mz-border);
    border-radius: var(--mz-radius-md);
    background: var(--mz-surface);
    color: var(--mz-text);
    box-shadow: none;
    font-weight: 600;
    font-size: 13px;
}
.minimalist-preview :where(.btn-primary, .btn-search, .btn-sync, .vs-btn-primary, .gs-btn-primary) {
    background: var(--mz-accent);
    border-color: var(--mz-accent);
    color: #ffffff;
}
.minimalist-preview :where(.btn-primary, .btn-search, .btn-sync, .vs-btn-primary, .gs-btn-primary):hover {
    background: var(--mz-accent-hover);
    border-color: var(--mz-accent-hover);
}
.minimalist-preview :where(.btn-success, .btn-ok, .btn-save, .btn-save-client) {
    background: var(--mz-success);
    border-color: var(--mz-success);
    color: #ffffff;
}
.minimalist-preview :where(.btn-danger, .vs-btn-danger, .gs-btn-danger) {
    background: var(--mz-danger);
    border-color: var(--mz-danger);
    color: #ffffff;
}
.minimalist-preview :where(.btn-warning, .btn-warn) {
    background: var(--mz-warning);
    border-color: var(--mz-warning);
    color: #ffffff;
}
.minimalist-preview :where(.btn-secondary, .btn-muted, .vs-btn-ghost) {
    background: var(--mz-surface-alt);
    border-color: var(--mz-border);
    color: var(--mz-text);
}
.minimalist-preview :where(.btn-ghost) {
    background: transparent;
    border-color: transparent;
}
.minimalist-preview :where(.btn-ghost):hover {
    background: var(--mz-surface-soft);
    border-color: transparent;
}
.minimalist-preview .admin-actions,
.minimalist-preview .admin-toolbar,
.minimalist-preview .admin-btn-group {
    gap: 8px !important;
}

/* -----------------------------------------------------------------------------
   7. Technician card (admin → technicians page)
   -------------------------------------------------------------------------- */

.minimalist-preview .tech-card {
    isolation: isolate;
    position: relative;
    overflow: hidden;
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-lg) !important;
    box-shadow: var(--mz-shadow-faint) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.minimalist-preview .tech-card::after,
.minimalist-preview .tech-card::before {
    content: none !important;
}

.minimalist-preview .tech-card:hover {
    transform: translateY(-1px);
    border-color: var(--mz-border-strong) !important;
    box-shadow: var(--mz-shadow-soft) !important;
}

.minimalist-preview .tech-card.inactive {
    opacity: 0.5;
}

.minimalist-preview .tech-header {
    border-bottom: 1px solid var(--mz-border) !important;
    background: var(--mz-surface) !important;
    background-image: none !important;
}

.minimalist-preview .tech-avatar {
    border: 1px solid var(--mz-border) !important;
    box-shadow: none !important;
}

.minimalist-preview .tech-body {
    color: var(--mz-text) !important;
}

.minimalist-preview .tech-footer {
    padding: 14px !important;
    background: var(--mz-surface-alt) !important;
    border-top: 1px solid var(--mz-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .tech-footer .btn-edit,
.minimalist-preview .tech-footer .btn-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px !important;
    border-radius: var(--mz-radius-md) !important;
    border: 1px solid var(--mz-border) !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500;
    text-decoration: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background 120ms ease, border-color 120ms ease;
}

.minimalist-preview .tech-footer .btn-edit::before,
.minimalist-preview .tech-footer .btn-pay::before {
    content: none !important;
}

.minimalist-preview .tech-footer .btn-edit i,
.minimalist-preview .tech-footer .btn-pay i {
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mz-muted) !important;
}

.minimalist-preview .tech-footer .btn-edit:hover,
.minimalist-preview .tech-footer .btn-pay:hover {
    background: var(--mz-surface-sunken) !important;
    border-color: var(--mz-border-strong) !important;
    transform: none !important;
    filter: none !important;
}

.minimalist-preview .role-badge,
.minimalist-preview .status-badge {
    box-shadow: none !important;
    border: 1px solid var(--mz-border) !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   8. Bottom sheets, modals and overlays
   -------------------------------------------------------------------------- */

.minimalist-preview .sheet-overlay,
.minimalist-preview .hist-overlay,
.minimalist-preview .gallery-overlay,
.minimalist-preview .media-source-overlay,
.minimalist-preview .modal-view {
    /* Soft darken + blur of whatever is behind, instead of a flat black wash. */
    background: rgba(30, 41, 59, 0.35) !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
}

/* Fallback when backdrop-filter isn't supported: use a slightly stronger dim. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .minimalist-preview .sheet-overlay,
    .minimalist-preview .hist-overlay,
    .minimalist-preview .gallery-overlay,
    .minimalist-preview .media-source-overlay,
    .minimalist-preview .modal-view {
        background: rgba(30, 41, 59, 0.55) !important;
    }
}

.minimalist-preview .sheet,
.minimalist-preview .hist-content,
.minimalist-preview .gallery-content,
.minimalist-preview .media-source-overlay .sheet,
.minimalist-preview .modal-main {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: var(--mz-shadow-sheet) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .sheet::before,
.minimalist-preview .hist-content::before,
.minimalist-preview .gallery-content::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--mz-border-strong);
    margin: 8px auto 0;
    flex: 0 0 auto;
}

.minimalist-preview .sheet-header,
.minimalist-preview .modal-bar {
    background: var(--mz-surface) !important;
    border-bottom: 1px solid var(--mz-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--mz-ink) !important;
    font-weight: 600;
}

.minimalist-preview .pbp-sheet-drag-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.minimalist-preview .pbp-sheet-drag-handle:active {
    cursor: grabbing;
}

.minimalist-preview .sheet-menu-btn,
.minimalist-preview .route-sheet-task-card,
.minimalist-preview .shop-client-group,
.minimalist-preview #remindersSheetOverlay .reminders-row,
.minimalist-preview .client-item-card,
.minimalist-preview .filter-date-cell,
.minimalist-preview .section-sort-item,
.minimalist-preview .default-svc-type-grid .svc-type-field,
.minimalist-preview .route-tag-row,
.minimalist-preview .theme-option-card,
.minimalist-preview .company-stack-col,
.minimalist-preview .company-upload-box,
.minimalist-preview .company-media-panel,
.minimalist-preview .task-tech-block {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .last-photo-card {
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: var(--mz-shadow-faint) !important;
}

.minimalist-preview .last-photo-label,
.minimalist-preview .zoom-hint {
    border: 1px solid var(--mz-border) !important;
    background: var(--mz-ink) !important;
    color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .bottom-action,
.minimalist-preview .submit-footer {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--mz-border) !important;
    box-shadow: 0 -1px 0 var(--mz-border), 0 -8px 24px rgba(15, 23, 42, 0.04) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* -----------------------------------------------------------------------------
   9. Tech profile page (admin → team_member_profile)
   -------------------------------------------------------------------------- */

.minimalist-preview .tech-prof-card .tech-prof-actions .tech-prof-save {
    color: #fff !important;
    background: var(--mz-success) !important;
    background-image: none !important;
    border: 1px solid var(--mz-success) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .tech-prof-card .tech-prof-actions .tech-prof-cancel {
    color: var(--mz-text) !important;
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .tech-prof-card .tech-prof-actions .tech-prof-save:disabled {
    opacity: 0.5;
}

/* -----------------------------------------------------------------------------
   10. Service form: chemicals / checklist
   -------------------------------------------------------------------------- */

.minimalist-preview .chem-readings-card .chem-tab {
    color: var(--mz-text) !important;
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-pill) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
    font-weight: 500;
}

.minimalist-preview .chem-readings-card .chem-tab.active,
.minimalist-preview .chem-readings-card .chem-tab[aria-selected="true"] {
    color: #fff !important;
    background: var(--mz-accent) !important;
    background-image: none !important;
    border-color: var(--mz-accent) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 600;
}

.minimalist-preview .chem-readings-card .btn-opt.selected,
.minimalist-preview .checklist-group-card[data-category-key="water_appearance"] .btn-opt.selected,
.minimalist-preview .checklist-group-card[data-category-key="water_level"] .btn-opt.selected,
.minimalist-preview .checklist-group-card[data-category-key="weather"] .btn-opt.selected {
    color: var(--mz-ink) !important;
    background: var(--mz-surface-sunken) !important;
    background-image: none !important;
    border-color: var(--mz-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-weight: 600;
}

.minimalist-preview .checklist-group-card[data-category-key="task"] .checklist-item,
.minimalist-preview .checklist-group-card[data-category-key="task"] .compact-row,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .checklist-item,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .compact-row,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .checklist-item,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .compact-row {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 10px 12px !important;
    margin: 6px 0 !important;
}

.minimalist-preview .checklist-group-card[data-category-key="task"] .checklist-item label,
.minimalist-preview .checklist-group-card[data-category-key="task"] .compact-row label,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .checklist-item label,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .compact-row label,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .checklist-item label,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .compact-row label {
    color: var(--mz-ink) !important;
    font-weight: 400 !important;
}

.minimalist-preview .checklist-group-card[data-category-key="task"] .checklist-item:has(input[type="checkbox"]:checked),
.minimalist-preview .checklist-group-card[data-category-key="task"] .compact-row:has(input[type="checkbox"]:checked),
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .checklist-item:has(input[type="checkbox"]:checked),
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .compact-row:has(input[type="checkbox"]:checked),
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .checklist-item:has(input[type="checkbox"]:checked),
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .compact-row:has(input[type="checkbox"]:checked) {
    background: var(--mz-surface-sunken) !important;
    border-color: var(--mz-ink) !important;
    box-shadow: none !important;
}

.minimalist-preview .checklist-group-card[data-category-key="task"] .checklist-item:has(input[type="checkbox"]:checked) label,
.minimalist-preview .checklist-group-card[data-category-key="task"] .compact-row:has(input[type="checkbox"]:checked) label,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .checklist-item:has(input[type="checkbox"]:checked) label,
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] .compact-row:has(input[type="checkbox"]:checked) label,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .checklist-item:has(input[type="checkbox"]:checked) label,
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] .compact-row:has(input[type="checkbox"]:checked) label {
    color: var(--mz-ink) !important;
    font-weight: 600 !important;
}

.minimalist-preview .checklist-group-card[data-category-key="task"] input[type="checkbox"],
.minimalist-preview .checklist-group-card[data-category-key="equipment_check"] input[type="checkbox"],
.minimalist-preview .checklist-group-card[data-category-key="notes_preset"] input[type="checkbox"],
.minimalist-preview input[type="checkbox"],
.minimalist-preview input[type="radio"] {
    accent-color: var(--mz-ink);
}

/* -----------------------------------------------------------------------------
   11. Form controls
   -------------------------------------------------------------------------- */

.minimalist-preview input,
.minimalist-preview textarea,
.minimalist-preview select,
.minimalist-preview .sheet-input,
.minimalist-preview .sheet-select,
.minimalist-preview .task-notes-input,
.minimalist-preview .tech-prof-input {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md) !important;
    color: var(--mz-text) !important;
    box-shadow: none !important;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.minimalist-preview input::placeholder,
.minimalist-preview textarea::placeholder {
    color: var(--mz-faint) !important;
    opacity: 1;
}

.minimalist-preview input:focus,
.minimalist-preview textarea:focus,
.minimalist-preview select:focus,
.minimalist-preview .sheet-input:focus,
.minimalist-preview .sheet-select:focus {
    border-color: var(--mz-ink) !important;
    box-shadow: 0 0 0 3px var(--mz-focus-ring) !important;
    outline: none;
}

/* -----------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */

.minimalist-preview table {
    background: var(--mz-surface) !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: var(--mz-radius-md);
    overflow: hidden;
    box-shadow: none !important;
}

.minimalist-preview th {
    background: var(--mz-surface-alt) !important;
    color: var(--mz-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78em;
    border-bottom: 1px solid var(--mz-border) !important;
}

.minimalist-preview td {
    border-bottom: 1px solid var(--mz-border) !important;
    color: var(--mz-text) !important;
}

.minimalist-preview tr:last-child td {
    border-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   13. Drop-downs / popovers / SweetAlert
   -------------------------------------------------------------------------- */

.minimalist-preview .group-handle,
.minimalist-preview .modal-card,
.minimalist-preview .swal2-popup,
.minimalist-preview .drop-content {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: var(--mz-radius-lg) !important;
}

.minimalist-preview .swal2-popup .swal2-title {
    color: var(--mz-ink) !important;
    font-weight: 600;
}

.minimalist-preview .swal2-popup .swal2-html-container {
    color: var(--mz-text) !important;
}

.minimalist-preview .swal2-popup .swal2-confirm,
.minimalist-preview .swal2-popup .swal2-styled.swal2-confirm {
    background: var(--mz-accent) !important;
    background-image: none !important;
    border: 1px solid var(--mz-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: var(--mz-radius-md) !important;
}

.minimalist-preview .swal2-popup .swal2-cancel,
.minimalist-preview .swal2-popup .swal2-styled.swal2-cancel {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border) !important;
    color: var(--mz-text) !important;
    box-shadow: none !important;
    border-radius: var(--mz-radius-md) !important;
}

.minimalist-preview .swal2-popup .swal2-deny {
    background: var(--mz-danger) !important;
    border: 1px solid var(--mz-danger) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: var(--mz-radius-md) !important;
}

.minimalist-preview .card-title,
.minimalist-preview .info-card h3,
.minimalist-preview .chart-header,
.minimalist-preview .pool-filter-visit-block > h3 {
    border-bottom-color: var(--mz-border) !important;
    color: var(--mz-ink) !important;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   14. Tech app bottom navigation (date scroller)
   -------------------------------------------------------------------------- */

.minimalist-preview .bottom-nav {
    background: var(--mz-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--mz-border) !important;
    box-shadow: 0 -1px 0 var(--mz-border), 0 -6px 18px rgba(15, 23, 42, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.minimalist-preview .bottom-nav .nav-wrapper,
.minimalist-preview .bottom-nav .date-scroller {
    overflow-y: visible !important;
}

.minimalist-preview .bottom-nav .date-scroller {
    padding-top: 5px;
    padding-bottom: 2px;
}

.minimalist-preview .bottom-nav .nav-arrow {
    color: var(--mz-muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.minimalist-preview .bottom-nav .nav-arrow:active {
    transform: scale(0.94);
}

.minimalist-preview .bottom-nav .date-item {
    color: var(--mz-muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500;
}

.minimalist-preview .bottom-nav .date-item span:not(.date-item-pending-badge) {
    color: var(--mz-muted) !important;
    font-weight: 500;
}

.minimalist-preview .bottom-nav .date-item-top.date-item-pending-badge {
    color: #ffffff !important;
}

.minimalist-preview .bottom-nav .date-item strong {
    color: var(--mz-ink) !important;
    font-weight: 700;
}

.minimalist-preview .bottom-nav .date-item.active {
    /* Avoid pure dark fill — use a soft selected state instead. */
    color: var(--mz-ink) !important;
    background: var(--mz-surface-sunken) !important;
    background-image: none !important;
    border: 1px solid var(--mz-border-strong) !important;
    border-radius: var(--mz-radius-md) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    transform: none;
}

.minimalist-preview .bottom-nav .date-item.active span:not(.date-item-pending-badge),
.minimalist-preview .bottom-nav .date-item.active strong {
    color: var(--mz-ink) !important;
}

.minimalist-preview .bottom-nav .date-item.today:not(.active) {
    color: var(--mz-success) !important;
    border-bottom: 2px solid var(--mz-success) !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

.minimalist-preview .bottom-nav .date-item.today:not(.active) span:not(.date-item-pending-badge),
.minimalist-preview .bottom-nav .date-item.today:not(.active) strong {
    color: var(--mz-success) !important;
}

/* Today + active = both soft-selected and the green underline. */
.minimalist-preview .bottom-nav .date-item.today.active {
    border-bottom: 2px solid var(--mz-success) !important;
}

/* -----------------------------------------------------------------------------
   15. Reduced-motion / fallbacks
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .minimalist-preview *,
    .minimalist-preview *::before,
    .minimalist-preview *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .minimalist-preview .sidebar {
        position: relative;
        z-index: 300;
        overflow: visible !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .minimalist-preview .sidebar-menu-container,
    .minimalist-preview .sidebar-menu-scroll {
        overflow: visible !important;
    }

    .minimalist-preview .sidebar-menu-scroll-track {
        overflow-x: auto !important;
        overflow-y: visible !important;
        border-bottom: 1px solid var(--mz-border) !important;
    }

    .minimalist-preview .has-submenu > .submenu {
        position: fixed !important;
        z-index: 2500 !important;
        pointer-events: auto;
        background: var(--mz-surface) !important;
        background-image: none !important;
        border: 1px solid var(--mz-border) !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-radius: var(--mz-radius-md) !important;
    }

    .minimalist-preview .has-submenu.open > .submenu { display: block !important; }
    .minimalist-preview .has-submenu:not(.open) > .submenu { display: none !important; }

    .minimalist-preview .has-submenu > .submenu .menu-link {
        color: var(--mz-text) !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    .minimalist-preview .has-submenu > .submenu .menu-link:hover,
    .minimalist-preview .has-submenu > .submenu .menu-link:active {
        background: var(--mz-surface-sunken) !important;
        color: var(--mz-ink) !important;
    }
}

/* -----------------------------------------------------------------------------
   16. Tech route app body fine-tunes (parity with liquid-glass scope)
   -------------------------------------------------------------------------- */

body.minimalist-preview:has(.bottom-nav) {
    /* Same subtle grey gradient as the rest of the system, so tech_app shares the
       admin shell's look-and-feel. */
    background:
        radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.10), transparent 32rem),
        radial-gradient(circle at 100% 0%, rgba(100, 116, 139, 0.08), transparent 28rem),
        var(--mz-surface-alt) !important;
    background-attachment: fixed;
}

/* Keep the existing "container" stack predictable. */
.minimalist-preview .container {
    position: relative;
    z-index: 1;
}