/*
 * Africa Tour Operators — operator onboarding & dashboard
 * ------------------------------------------------------
 * Loads AFTER ato-public.css and overrides the parts of the old dashboard that
 * were off the theme palette (glassmorphism, pill radii, blue-grey shadows,
 * hardcoded status colours).
 *
 * Rules of the house:
 *   - No hardcoded palette hexes. Tokens, color-mix() or rgba(12,51,43,..) only.
 *   - Radii 3–14px.  - Small caps labels 11–11.5px.  - Container 1180px.
 *   - Headings + display numbers: --ato-font-heading. Everything else: body font.
 *
 * Enqueue handle: ato-dashboard   (dependency: ato-public)
 */

/* =========================================================================
   0. Local tokens — all derived from the plugin/theme tokens
   ========================================================================= */

.ato-dashboard,
.ato-auth {
    --ato-dash-ink: var(--ato-dark, var(--ink));
    --ato-dash-surface: var(--ato-bg-white, var(--paper));
    --ato-dash-canvas: var(--ato-bg-light, var(--cream));
    --ato-dash-line: var(--ato-border-color, var(--line));
    --ato-dash-rule: var(--ato-rule, var(--rule));

    /* Tints built on the green-dark key so nothing reads blue or rust. */
    --ato-dash-tint-1: rgba(var(--shadow), 0.04);
    --ato-dash-tint-2: rgba(var(--shadow), 0.07);
    --ato-dash-tint-3: rgba(var(--shadow), 0.12);

    --ato-dash-shadow: var(--ato-shadow-sm);
    --ato-dash-shadow-lift: var(--ato-shadow-md);

    --ato-dash-gap: 24px;
    --ato-dash-radius: var(--ato-radius-lg);

    --ato-label-size: var(--ato-fs-label, 11.5px);
    --ato-label-track: 0.16em;
}

/* =========================================================================
   1. Shells
   ========================================================================= */

.ato-dashboard.ato-dashboard-v2,
.ato-auth.ato-onboarding {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 28px 64px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--ato-font-body);
    color: var(--ato-text-main);
    font-size: var(--ato-fs-base);
    line-height: 1.65;
}

.ato-dashboard-v2 h1,
.ato-dashboard-v2 h2,
.ato-dashboard-v2 h3,
.ato-auth h1,
.ato-auth h2,
.ato-auth h3 {
    font-family: var(--ato-font-heading);
    color: var(--ato-title-color);
    font-weight: 600;
    letter-spacing: 0;
}

.ato-eyebrow {
    display: block;
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-secondary);
    margin-bottom: 6px;
}

.ato-req {
    color: var(--ato-danger);
    font-weight: 700;
}

/* =========================================================================
   2. Registration / onboarding
   ========================================================================= */

.ato-auth.ato-onboarding {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.ato-auth-intro h1 {
    font-size: 40px;
    line-height: 1.12;
    margin: 0 0 14px;
}

.ato-auth-lede {
    font-size: var(--ato-fs-reading);
    color: var(--ato-text-main);
    margin: 0 0 28px;
}

.ato-journey-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ato-dash-line);
}

.ato-journey-step {
    position: relative;
    padding: 0 0 22px 22px;
}

.ato-journey-step:last-child {
    padding-bottom: 0;
}

.ato-journey-num {
    position: absolute;
    left: -15px;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ato-dash-canvas);
    border: 2px solid var(--ato-dash-line);
    color: var(--ato-text-muted);
    font-family: var(--ato-font-heading);
    font-size: 15px;
    font-weight: 700;
}

.ato-journey-step.is-current .ato-journey-num {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: var(--ato-bg-white);
}

.ato-journey-label {
    display: block;
    font-weight: 600;
    color: var(--ato-title-color);
    font-size: var(--ato-fs-base);
}

.ato-journey-hint {
    display: block;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-auth-card {
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
    padding: 36px;
}

.ato-form-footnote {
    margin: 12px 0 0;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    text-align: center;
}

.ato-auth-link {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--ato-dash-line);
    text-align: center;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-auth-link a {
    color: var(--ato-primary);
    font-weight: 600;
}

@media (max-width: 980px) {
    .ato-auth.ato-onboarding {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ato-auth-intro h1 {
        font-size: 32px;
    }

    .ato-auth-card {
        padding: 24px;
    }
}

/* =========================================================================
   3. Form furniture (fieldsets, labels, inputs, chips, consent)
   ========================================================================= */

.ato-fieldset {
    border: 0;
    border-top: 1px solid var(--ato-dash-line);
    margin: 0 0 28px;
    padding: 24px 0 0;
    min-width: 0;
}

.ato-fieldset:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ato-fieldset-legend {
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-primary);
    padding: 0 0 14px;
}

.ato-form-group label,
.ato-group-label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-small);
    font-weight: 600;
    color: var(--ato-title-color);
    letter-spacing: 0.01em;
    text-transform: none;
}

.ato-dashboard-v2 .ato-form-group input[type="text"],
.ato-dashboard-v2 .ato-form-group input[type="email"],
.ato-dashboard-v2 .ato-form-group input[type="url"],
.ato-dashboard-v2 .ato-form-group input[type="tel"],
.ato-dashboard-v2 .ato-form-group input[type="number"],
.ato-dashboard-v2 .ato-form-group input[type="password"],
.ato-dashboard-v2 .ato-form-group select,
.ato-dashboard-v2 .ato-form-group textarea,
.ato-auth .ato-form-group input[type="text"],
.ato-auth .ato-form-group input[type="email"],
.ato-auth .ato-form-group input[type="url"],
.ato-auth .ato-form-group input[type="tel"],
.ato-auth .ato-form-group input[type="number"],
.ato-auth .ato-form-group input[type="password"],
.ato-auth .ato-form-group input[type="file"],
.ato-auth .ato-form-group select,
.ato-auth .ato-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-base);
    line-height: 1.5;
    color: var(--ato-text-main);
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-sm);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ato-dashboard-v2 .ato-form-group input:focus,
.ato-dashboard-v2 .ato-form-group select:focus,
.ato-dashboard-v2 .ato-form-group textarea:focus,
.ato-auth .ato-form-group input:focus,
.ato-auth .ato-form-group select:focus,
.ato-auth .ato-form-group textarea:focus {
    outline: none;
    border-color: var(--ato-primary);
    box-shadow: 0 0 0 3px rgba(var(--shadow), 0.12);
}

.ato-help-text,
.ato-form-help {
    display: block;
    margin-top: 6px;
    font-size: var(--ato-fs-small);
    line-height: 1.5;
    color: var(--ato-text-muted);
}

.ato-multiselect {
    min-height: 132px;
    padding: 8px !important;
}

.ato-multiselect option {
    padding: 6px 8px;
    border-radius: var(--ato-radius-sm);
}

/* Prefixed number inputs ($ 1200) */
.ato-input-prefixed {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-sm);
    background: var(--ato-dash-surface);
    overflow: hidden;
}

.ato-input-prefixed:focus-within {
    border-color: var(--ato-primary);
    box-shadow: 0 0 0 3px rgba(var(--shadow), 0.12);
}

.ato-input-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--ato-dash-tint-1);
    border-right: 1px solid var(--ato-dash-line);
    font-family: var(--ato-font-heading);
    font-size: var(--ato-fs-reading);
    color: var(--ato-primary);
}

.ato-input-prefixed input[type="number"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    min-width: 0;
}

/* Region / speciality chips */
.ato-checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.ato-checkchip {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 12px 14px;
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-surface);
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--ato-text-main) !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ato-checkchip:hover {
    border-color: var(--ato-primary);
}

.ato-checkchip input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--ato-primary);
}

.ato-checkchip:has(input:checked) {
    border-color: var(--ato-primary);
    background: var(--ato-dash-tint-1);
    color: var(--ato-title-color) !important;
}

.ato-checkchip:focus-within {
    outline: 2px solid var(--ato-primary);
    outline-offset: 2px;
}

/* Consent */
.ato-consent {
    margin-top: 8px;
    padding: 18px 20px;
    border: 1px solid var(--ato-dash-rule);
    border-left: 3px solid var(--ato-secondary);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
}

.ato-consent-label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
    font-size: var(--ato-fs-small) !important;
    font-weight: 400 !important;
    line-height: 1.6;
    color: var(--ato-text-main) !important;
    cursor: pointer;
    text-transform: none !important;
}

.ato-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--ato-primary);
}

.ato-consent:focus-within {
    border-color: var(--ato-primary);
}

/* =========================================================================
   4. Dashboard header strip
   ========================================================================= */

.ato-dashboard-v2 .ato-dash-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ato-dash-line);
}

.ato-dash-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ato-dash-logo {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-surface);
    box-shadow: var(--ato-dash-shadow);
}

.ato-dash-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.ato-dash-logo-initial {
    font-family: var(--ato-font-heading);
    font-size: 34px;
    font-weight: 700;
    color: var(--ato-primary);
}

.ato-dash-titles {
    min-width: 0;
}

.ato-dashboard-v2 .ato-dash-titles h1 {
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--ato-title-color);
}

.ato-dash-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-dash-meta {
    position: relative;
}

.ato-dash-meta + .ato-dash-meta::before {
    content: '';
}

.ato-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--ato-radius-sm);
    border: 1px solid currentColor;
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.ato-status-pill--success {
    color: var(--ato-success);
    background: color-mix(in srgb, var(--ato-success) 10%, transparent);
}

.ato-status-pill--pending {
    color: var(--ato-secondary-hover);
    background: color-mix(in srgb, var(--ato-secondary) 16%, transparent);
}

.ato-status-pill--warning {
    color: var(--ato-danger);
    background: color-mix(in srgb, var(--ato-danger) 10%, transparent);
}

.ato-status-pill--info {
    color: var(--ato-primary);
    background: var(--ato-dash-tint-2);
}

.ato-dashboard-v2 .ato-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* =========================================================================
   5. Approval status banner
   ========================================================================= */

.ato-status-banner {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
    padding: 24px 26px;
    border: 1px solid var(--ato-dash-rule);
    border-left: 4px solid var(--ato-primary);
    border-radius: var(--ato-dash-radius);
    background: var(--ato-dash-surface);
    box-shadow: var(--ato-dash-shadow);
}

.ato-status-banner--success {
    border-left-color: var(--ato-success);
    background: color-mix(in srgb, var(--ato-success) 6%, var(--ato-dash-surface));
}

.ato-status-banner--pending {
    border-left-color: var(--ato-secondary);
    background: color-mix(in srgb, var(--ato-secondary) 9%, var(--ato-dash-surface));
}

.ato-status-banner--warning {
    border-left-color: var(--ato-danger);
    background: color-mix(in srgb, var(--ato-danger) 6%, var(--ato-dash-surface));
}

.ato-status-banner--info {
    border-left-color: var(--ato-primary);
    background: var(--ato-dash-tint-1);
}

.ato-status-banner-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
}

.ato-status-banner-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--ato-primary);
}

.ato-status-banner--success .ato-status-banner-icon .dashicons {
    color: var(--ato-success);
}

.ato-status-banner--pending .ato-status-banner-icon .dashicons {
    color: var(--ato-secondary-hover);
}

.ato-status-banner--warning .ato-status-banner-icon .dashicons {
    color: var(--ato-danger);
}

.ato-status-banner-body {
    min-width: 0;
}

.ato-status-banner-label {
    margin: 0 0 4px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-status-banner-headline {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.25;
}

.ato-status-banner-text {
    margin: 0;
    font-size: var(--ato-fs-base);
    color: var(--ato-text-main);
    max-width: 74ch;
}

.ato-status-banner-hint {
    margin: 12px 0 0;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    max-width: 74ch;
}

.ato-status-note {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-2);
    font-size: var(--ato-fs-small);
}

.ato-status-note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ato-title-color);
}

.ato-status-note p {
    margin: 0;
    color: var(--ato-text-main);
}

@media (max-width: 700px) {
    .ato-status-banner {
        flex-direction: column;
        padding: 20px;
    }

    .ato-dashboard-v2 .ato-status-banner-headline {
        font-size: 21px;
    }
}

/* =========================================================================
   6. Stat tiles — flat, on-palette, no glass
   ========================================================================= */

.ato-dashboard-v2 .ato-stats-grid,
.ato-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--ato-dash-gap);
    margin: 0 0 28px;
}

.ato-dashboard-v2 .ato-stat-card,
.ato-analytics .ato-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 22px 24px;
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ato-dashboard-v2 .ato-stat-card:hover,
.ato-analytics .ato-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--ato-primary);
    box-shadow: var(--ato-dash-shadow-lift);
}

.ato-dashboard-v2 .ato-stat-value,
.ato-analytics .ato-stat-value {
    font-family: var(--ato-font-heading);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--ato-primary);
}

.ato-dashboard-v2 .ato-stat-value small,
.ato-analytics .ato-stat-value small {
    font-family: var(--ato-font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--ato-text-muted);
}

.ato-stat-value--sm {
    font-size: 30px !important;
    margin-top: 8px;
}

.ato-dashboard-v2 .ato-stat-label,
.ato-analytics .ato-stat-label {
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-stat-foot {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-stat-card--wide {
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    grid-column: span 2;
}

.ato-stat-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ato-stat-header .dashicons {
    color: var(--ato-secondary);
}

.ato-stat-heading {
    margin: 0;
    font-family: var(--ato-font-label) !important;
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-text-muted) !important;
}

.ato-icon-wrapper {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ato-dash-tint-1);
    color: var(--ato-primary);
}

.ato-icon-wrapper .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
}

.ato-icon-wrapper--success {
    background: color-mix(in srgb, var(--ato-success) 12%, transparent);
    color: var(--ato-success);
}

@media (max-width: 640px) {
    .ato-stat-card--wide {
        grid-column: span 1;
    }
}

/* Completeness card */
.ato-dashboard-v2 .ato-profile-completeness {
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
    padding: 22px 24px;
    margin: 0 0 32px;
}

.ato-dashboard-v2 .ato-completeness-header {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-small);
    color: var(--ato-title-color);
}

.ato-dashboard-v2 .ato-completeness-pct {
    font-family: var(--ato-font-heading);
    font-size: 21px;
}

.ato-dashboard-v2 .ato-progress-bar {
    height: 8px;
    background: var(--ato-dash-tint-2);
    border-radius: var(--ato-radius-sm);
}

.ato-dashboard-v2 .ato-progress-fill {
    background: var(--ato-primary);
    border-radius: var(--ato-radius-sm);
}

/* =========================================================================
   7. Tabs — accessible, restrained radii, JS-free fallback
   ========================================================================= */

.ato-dashboard-v2 .ato-dashboard-tabs {
    margin-top: 0;
}

.ato-dashboard-v2 .ato-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0 0 28px;
    background: transparent;
    border-bottom: 1px solid var(--ato-dash-line);
    border-radius: 0;
    list-style: none;
}

.ato-dashboard-v2 .ato-tabs-nav li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--ato-radius-sm) var(--ato-radius-sm) 0 0;
    background: transparent;
    color: var(--ato-text-muted);
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.ato-dashboard-v2 .ato-tabs-nav .ato-tab-link {
    display: block;
    padding: 13px 20px;
    color: inherit;
    text-decoration: none !important;
}

.ato-dashboard-v2 .ato-tabs-nav li:hover {
    color: var(--ato-primary);
    background: var(--ato-dash-tint-1);
}

.ato-dashboard-v2 .ato-tabs-nav li[aria-selected="true"],
.ato-dashboard-v2 .ato-tabs-nav li.active {
    color: var(--ato-primary);
    background: transparent;
    box-shadow: none;
}

.ato-dashboard-v2 .ato-tabs-nav li[aria-selected="true"]::after,
.ato-dashboard-v2 .ato-tabs-nav li.active::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--ato-primary);
}

.ato-dashboard-v2 .ato-tabs-nav li:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: 2px;
}

.ato-dashboard-v2 .ato-tab-count {
    background: var(--ato-secondary);
    color: var(--ato-dark);
    border-radius: var(--ato-radius-sm);
    font-family: var(--ato-font-body);
    font-size: 11px;
    margin-right: 14px;
}

.ato-panel-title {
    margin: 0 0 6px;
    font-size: 26px;
}

.ato-panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ato-dash-line);
}

.ato-panel-note {
    margin: 0;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

/* JS-free fallback: no tablist, every panel stacked and readable. */
.ato-tabs-nojs .ato-tabs-nav {
    display: none;
}

.ato-tabs-nojs .ato-tab-content {
    display: block !important;
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--ato-dash-line);
}

.ato-tabs-nojs .ato-tab-content:last-child {
    border-bottom: 0;
}

.ato-tabs-js .ato-tab-content {
    display: none;
}

.ato-tabs-js .ato-tab-content.active {
    display: block;
}

.ato-tabs-js .ato-tab-content:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .ato-dashboard-v2 .ato-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ato-dashboard-v2 .ato-tabs-nav li {
        flex: 0 0 auto;
    }
}

/* =========================================================================
   8. Safari list
   ========================================================================= */

.ato-dashboard-v2 .ato-tours-list {
    display: grid;
    gap: 16px;
}

.ato-dashboard-v2 .ato-list-item {
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
}

.ato-dashboard-v2 .ato-list-item:hover {
    transform: none;
    border-color: var(--ato-primary);
    box-shadow: var(--ato-dash-shadow-lift);
}

.ato-dashboard-v2 .ato-item-image {
    background: var(--ato-dash-tint-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ato-item-image-placeholder.dashicons {
    font-size: 30px;
    width: 30px;
    height: 30px;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-item-content h3 {
    font-family: var(--ato-font-heading);
    font-size: 21px;
}

.ato-dashboard-v2 .ato-item-content h3 a {
    color: var(--ato-title-color);
    text-decoration: none;
}

.ato-dashboard-v2 .ato-item-content h3 a:hover {
    color: var(--ato-primary);
}

.ato-dashboard-v2 .ato-item-meta {
    font-size: var(--ato-fs-small);
    flex-wrap: wrap;
    gap: 8px 18px;
}

.ato-dashboard-v2 .ato-item-meta abbr {
    text-decoration: none;
    border: 0;
}

.ato-dashboard-v2 .ato-item-actions {
    background: var(--ato-dash-tint-1);
    border-left: 1px solid var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-status-badge {
    border-radius: var(--ato-radius-sm);
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    letter-spacing: 0.1em;
    padding: 4px 9px;
}

.ato-dashboard-v2 .ato-status-badge.publish {
    background: color-mix(in srgb, var(--ato-success) 14%, transparent);
    color: var(--ato-success);
}

.ato-dashboard-v2 .ato-status-badge.pending {
    background: color-mix(in srgb, var(--ato-secondary) 22%, transparent);
    color: var(--ato-secondary-hover);
}

.ato-dashboard-v2 .ato-status-badge.draft {
    background: var(--ato-dash-tint-2);
    color: var(--ato-text-muted);
}

@media (max-width: 720px) {
    .ato-dashboard-v2 .ato-list-item {
        flex-direction: column;
    }

    .ato-dashboard-v2 .ato-item-image {
        width: 100%;
        height: 160px;
    }

    .ato-dashboard-v2 .ato-item-actions {
        border-left: 0;
        border-top: 1px solid var(--ato-dash-line);
    }
}

/* =========================================================================
   9. Enquiries
   ========================================================================= */

.ato-leads-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ato-dash-gap);
}

.ato-lead-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ato-lead-card:hover {
    border-color: var(--ato-primary);
    box-shadow: var(--ato-dash-shadow-lift);
}

.ato-lead-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ato-lead-badge {
    padding: 4px 10px;
    border-radius: var(--ato-radius-sm);
    background: var(--ato-dash-tint-2);
    color: var(--ato-primary);
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ato-lead-date {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-lead-title {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.3;
}

.ato-lead-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-lead-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ato-lead-meta .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--ato-secondary);
}

.ato-lead-content {
    flex: 1 1 auto;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
    border-left: 2px solid var(--ato-dash-rule);
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-text-main);
}

.ato-lead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* =========================================================================
   10. Empty states & alerts
   ========================================================================= */

.ato-dashboard-v2 .ato-empty-state,
.ato-analytics .ato-empty-state {
    padding: 48px 28px;
    text-align: center;
    background: var(--ato-dash-surface);
    border: 1px dashed var(--ato-dash-rule);
    border-radius: var(--ato-dash-radius);
    box-shadow: none;
}

.ato-dashboard-v2 .ato-empty-state .dashicons,
.ato-analytics .ato-empty-state .dashicons {
    font-size: 38px;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    color: var(--ato-dash-rule);
}

.ato-dashboard-v2 .ato-empty-state p {
    margin: 0 auto 18px;
    max-width: 52ch;
    font-size: var(--ato-fs-reading);
    color: var(--ato-text-muted);
}

.ato-alert {
    display: block;
    padding: 16px 20px;
    margin: 0 0 20px;
    border: 1px solid var(--ato-dash-rule);
    border-left: 3px solid var(--ato-primary);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-text-main);
}

.ato-alert a {
    color: var(--ato-primary);
    font-weight: 600;
}

.ato-alert-info {
    border-left-color: var(--ato-primary);
}

.ato-alert-warning {
    border-left-color: var(--ato-secondary);
    background: color-mix(in srgb, var(--ato-secondary) 10%, transparent);
}

.ato-alert-error {
    border-left-color: var(--ato-danger);
    background: color-mix(in srgb, var(--ato-danger) 8%, transparent);
    color: var(--ato-danger);
}

.ato-alert-success {
    border-left-color: var(--ato-success);
    background: color-mix(in srgb, var(--ato-success) 8%, transparent);
}

/* AJAX response messages injected by ato-public.js */
.ato-form-message,
.ato-message {
    padding: 14px 18px;
    margin: 0 0 18px;
    border-radius: var(--ato-radius-md);
    border: 1px solid var(--ato-dash-rule);
    font-size: var(--ato-fs-small);
    background: var(--ato-dash-tint-1);
    color: var(--ato-text-main);
}

.ato-form-message.success,
.ato-message.success {
    border-color: var(--ato-success);
    background: color-mix(in srgb, var(--ato-success) 8%, transparent);
    color: var(--ato-success);
}

.ato-form-message.error,
.ato-message.error {
    border-color: var(--ato-danger);
    background: color-mix(in srgb, var(--ato-danger) 8%, transparent);
    color: var(--ato-danger);
}

/* =========================================================================
   11. Safari wizard inside the dashboard
   ========================================================================= */

.ato-dashboard-v2 .ato-tour-form-wizard {
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
    padding: 28px;
}

.ato-dashboard-v2 .ato-wizard-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 28px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-stepper-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: var(--ato-radius-sm);
    color: var(--ato-text-muted);
    font-size: var(--ato-fs-small);
    font-weight: 600;
}

.ato-dashboard-v2 .ato-stepper-item.active {
    background: var(--ato-dash-tint-1);
    color: var(--ato-primary);
}

.ato-dashboard-v2 .ato-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: var(--ato-font-heading);
    font-size: 14px;
    font-weight: 700;
}

.ato-dashboard-v2 .ato-stepper-item.active .ato-step-number {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: var(--ato-bg-white);
}

.ato-dashboard-v2 .ato-step-header h3 {
    font-size: 24px;
    margin: 0 0 4px;
}

.ato-dashboard-v2 .ato-step-header p {
    margin: 0 0 22px;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-step-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-form-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin: 0 0 22px;
    border-radius: var(--ato-radius-md);
    border: 1px solid var(--ato-dash-rule);
    border-left: 3px solid var(--ato-secondary);
    background: color-mix(in srgb, var(--ato-secondary) 10%, transparent);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
}

.ato-dashboard-v2 .ato-form-note .dashicons {
    color: var(--ato-secondary-hover);
    flex: 0 0 auto;
}

.ato-dashboard-v2 .ato-itinerary-day {
    display: flex;
    gap: 18px;
    padding: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    background: var(--ato-dash-canvas);
}

.ato-dashboard-v2 .ato-day-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ato-dashboard-v2 .ato-day-badge {
    padding: 6px 12px;
    border-radius: var(--ato-radius-sm);
    background: var(--ato-primary);
    color: var(--ato-bg-white);
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ato-dashboard-v2 .ato-remove-day {
    width: 26px;
    height: 26px;
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-sm);
    background: transparent;
    color: var(--ato-danger);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.ato-dashboard-v2 .ato-remove-day:hover {
    background: color-mix(in srgb, var(--ato-danger) 10%, transparent);
}

.ato-dashboard-v2 .ato-day-content {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 14px;
}

.ato-dashboard-v2 .ato-image-upload,
.ato-dashboard-v2 .ato-modern-gallery-upload {
    padding: 18px;
    border: 1px dashed var(--ato-dash-rule);
    border-radius: var(--ato-dash-radius);
    background: var(--ato-dash-canvas);
}

.ato-dashboard-v2 .ato-preview-image,
.ato-dashboard-v2 .ato-large-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    margin-bottom: 14px;
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
    overflow: hidden;
}

.ato-dashboard-v2 .ato-preview-image img,
.ato-dashboard-v2 .ato-large-preview img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ato-dashboard-v2 .ato-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--ato-text-muted);
    font-size: var(--ato-fs-small);
}

.ato-dashboard-v2 .ato-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ato-dashboard-v2 .ato-gallery-item {
    position: relative;
    border-radius: var(--ato-radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.ato-dashboard-v2 .ato-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ato-dashboard-v2 .ato-remove-image {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ato-radius-sm);
    background: var(--ato-dark);
    color: var(--ato-bg-white);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ato-dashboard-v2 .ato-photo-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    margin: 20px 0;
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
}

.ato-auth .ato-photo-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    margin: 20px 0 0;
    border: 1px solid var(--ato-dash-rule);
    border-radius: var(--ato-radius-md);
    background: var(--ato-dash-tint-1);
}

.ato-disclaimer-icon .dashicons {
    color: var(--ato-secondary);
}

.ato-disclaimer-text strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    font-weight: 700;
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-title-color);
}

.ato-disclaimer-text p {
    margin: 0;
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-text-muted);
}

/* =========================================================================
   12. Buttons — trimmed for dense dashboard use
   ========================================================================= */

.ato-dashboard-v2 .ato-button,
.ato-auth .ato-button {
    border-radius: var(--ato-radius-sm);
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-small);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ato-dashboard-v2 .ato-button:hover,
.ato-auth .ato-button:hover {
    transform: none;
}

.ato-dashboard-v2 .ato-button-small {
    padding: 9px 16px;
}

.ato-dashboard-v2 .ato-button-outline,
.ato-auth .ato-button-outline {
    border-width: 1px;
    background: var(--ato-dash-surface);
}

.ato-dashboard-v2 .ato-button-danger {
    background: transparent;
    border: 1px solid var(--ato-danger);
    color: var(--ato-danger);
}

.ato-dashboard-v2 .ato-button-danger:hover {
    background: var(--ato-danger);
    color: var(--ato-bg-white);
}

.ato-dashboard-v2 .ato-button-disabled {
    background: var(--ato-dash-tint-2);
    color: var(--ato-text-muted);
    cursor: not-allowed;
    padding: 9px 16px;
}

.ato-dashboard-v2 .ato-button small,
.ato-auth .ato-button small {
    font-weight: 400;
    opacity: 0.8;
}

.ato-auth .ato-button-block {
    width: 100%;
    min-width: 0;
    padding: 15px 24px;
    font-size: var(--ato-fs-base);
}

.ato-dashboard-v2 .ato-button:focus-visible,
.ato-auth .ato-button:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: 2px;
}

.ato-dashboard-v2 .ato-avg-number {
    font-family: var(--ato-font-heading);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--ato-primary);
}

/* =========================================================================
   14. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    .ato-dashboard-v2 *,
    .ato-auth * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =========================================================================
   15. Per-day itinerary photo, enquiry pager, and unlinked titles
   Added with the operator self-service audit. Uses the existing tokens and
   the .ato-dashboard-v2 scope only; no new colours, no framework.
   ========================================================================= */

/* --- Per-day photo control in the itinerary repeater ------------------- */

.ato-dashboard-v2 .ato-day-photo {
    margin-top: 4px;
}

.ato-dashboard-v2 .ato-day-photo .ato-group-label em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-day-image-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Override the tall square preview the profile photos use: a day thumbnail
   sits inline beside its two buttons rather than stacking above them. */
.ato-dashboard-v2 .ato-day-image-upload .ato-preview-image {
    min-height: 0;
    width: 84px;
    height: 62px;
    margin-bottom: 0;
    flex: 0 0 auto;
    border: 1px dashed var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-day-image-upload .ato-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ato-dashboard-v2 .ato-day-image-upload .ato-button {
    margin: 0;
}

/* --- Enquiry pager ----------------------------------------------------- */

.ato-dashboard-v2 .ato-leads-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: var(--ato-dash-gap);
    padding-top: 16px;
    border-top: 1px solid var(--ato-dash-rule);
}

.ato-dashboard-v2 .ato-leads-pager-pos {
    font-family: var(--ato-font-label);
    font-size: var(--ato-label-size);
    letter-spacing: var(--ato-label-track);
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-lead-delivery-note {
    display: block;
    margin-top: 4px;
    color: var(--ato-danger);
}

/* --- Analytics footnote ------------------------------------------------ */

.ato-dashboard-v2 .ato-analytics-note {
    margin-top: var(--ato-dash-gap);
    color: var(--ato-text-muted);
    font-size: 0.92em;
    line-height: 1.6;
}

/* --- Safari titles that are not yet public ----------------------------- */

/* Draft and pending safaris render as plain text, not links, because their
   permalink 404s until they are published. Keep the heading's weight so the
   list does not look ragged. */
.ato-dashboard-v2 .ato-item-title-plain {
    color: var(--ato-title-color);
}

/* =========================================================================
   16. Dashboard UX pass (dashux2)
   -------------------------------------------------------------------------
   Appended deliberately: every rule here is a correction to something above,
   so it must win on source order. Nothing in sections 0-15 was edited.
   ========================================================================= */

/* ---------------------------------------------------------------- 16.1
   Break out of the theme article measure.

   The theme wraps page content in `.pp-page-grid { max-width: 780px }` - a
   blog-post measure. The dashboard declares max-width:1180px and never got
   near it: measured at 1440x900 the whole dashboard was 780px wide, which is
   why four stat tiles wrapped 3 + 1 and the safari rows were cramped.
   `.pp-wrap` above it is already 1180px, so releasing the grid is enough.
   :has() is a progressive enhancement - without it the dashboard simply keeps
   today's 780px and nothing breaks.
   ------------------------------------------------------------------------- */
.pp-page-grid:has(.ato-dashboard-v2),
.pp-page-grid:has(.ato-auth) {
    max-width: none;
}

/* ---------------------------------------------------------------- 16.2
   Accessible text colours, scoped to the dashboard only.

   Measured at 1440x900 against the real backgrounds:
     --ato-text-muted  #7a817d  = 3.57:1 on the cream canvas  (FAIL)
     --ato-secondary   #b08d4f  = 2.81:1 on the cream canvas  (FAIL)
   Both are used for running body copy: help text, stat labels, the empty
   state sentence, inactive tab labels, the eyebrow. Re-pointed to darker
   values of the same hue that clear 4.5:1 on all three dashboard surfaces
   (#f6f2ea canvas, #fbfaf6 card, #ffffff field). --ato-text-main (#5b615e,
   5.56:1) already passed and is left alone.
   These overrides do not leave the dashboard: the site-wide tokens in
   ato-public.css are untouched.
   ------------------------------------------------------------------------- */
.ato-dashboard,
.ato-auth {
    --ato-text-muted: var(--muted);   /* 4.78:1 on #f6f2ea, 5.34:1 on #fff */
    --ato-dash-eyebrow: var(--gold-dark); /* 4.88:1 on #f6f2ea */

    /* Spacing rhythm: one scale, used by everything below. */
    --ato-sp-1: 4px;
    --ato-sp-2: 8px;
    --ato-sp-3: 12px;
    --ato-sp-4: 16px;
    --ato-sp-5: 24px;
    --ato-sp-6: 32px;
    --ato-sp-7: 48px;
}

.ato-dashboard .ato-eyebrow,
.ato-auth .ato-eyebrow {
    color: var(--ato-dash-eyebrow);
}

/* ---------------------------------------------------------------- 16.3
   Visible focus for every interactive thing in the dashboard.
   Keyboard users previously got the browser default, which the theme
   outline:none resets had already removed in several places.
   ------------------------------------------------------------------------- */
.ato-dashboard :is(a, button, input, select, textarea, [tabindex], [role="tab"], [role="button"]):focus-visible,
.ato-auth :is(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
    outline: 3px solid var(--ato-primary);
    outline-offset: 2px;
    border-radius: var(--ato-radius-sm);
}

/* ---------------------------------------------------------------- 16.4
   Stat tiles: a real grid, and quieter.

   `auto-fit, minmax(210px, 1fr)` inside a 780px column produced three columns
   and a fourth tile orphaned on its own row, left-aligned under the first.
   Explicit column counts per breakpoint instead, so the row is always whole.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ato-sp-4);
    margin-bottom: var(--ato-sp-6);
}

@media (min-width: 900px) {
    .ato-dashboard-v2 .ato-stats-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ato-dashboard-v2 .ato-stats-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
    .ato-dashboard-v2 .ato-stats-grid { grid-template-columns: minmax(0, 1fr); }
}

.ato-dashboard-v2 .ato-stat-card {
    gap: var(--ato-sp-1);
    padding: var(--ato-sp-4) var(--ato-sp-5) var(--ato-sp-5);
}

/* The tiles are a readout, not a control. Lifting them on hover implied they
   were clickable; nothing happens when you click one. */
.ato-dashboard-v2 .ato-stat-card:hover {
    transform: none;
    border-color: var(--ato-dash-line);
    box-shadow: var(--ato-dash-shadow);
}

.ato-dashboard-v2 .ato-stat-label {
    order: -1;                  /* label above the number, so the eye lands on
                                   what it is before how many */
    margin-bottom: var(--ato-sp-1);
}

.ato-dashboard-v2 .ato-stat-value {
    font-size: 44px;
    letter-spacing: -0.02em;
}

.ato-dashboard-v2 .ato-stat-value small {
    font-size: 20px;
    margin-left: 1px;
    color: var(--ato-primary);
    opacity: 0.6;
}

.ato-dashboard-v2 .ato-stat-foot {
    margin-top: var(--ato-sp-2);
    line-height: 1.45;
}

/* ---------------------------------------------------------------- 16.5
   Header strip: give it a surface so it reads as the page identity band
   rather than loose text, and stop the action buttons crowding the title.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-dash-strip {
    align-items: center;
    gap: var(--ato-sp-5);
    padding: var(--ato-sp-5);
    margin-bottom: var(--ato-sp-5);
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
}

.ato-dashboard-v2 .ato-dashboard-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ato-sp-2);
}

/* "Public profile not live yet" was a disabled button: button-shaped, so it
   invited a click, and 3.45:1 so it was hard to read. It is a status, not an
   action - render it as one. */
.ato-dashboard-v2 .ato-dash-live-note {
    display: inline-flex;
    align-items: center;
    gap: var(--ato-sp-2);
    max-width: 24ch;
    font-size: var(--ato-fs-small);
    line-height: 1.35;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-dash-live-note .dashicons {
    flex: 0 0 auto;
    color: var(--ato-dash-eyebrow);
}

/* ---------------------------------------------------------------- 16.6
   Set-up card - the day-one empty state.

   Replaces the old `.ato-profile-completeness` block, which sat directly
   below a stat tile showing the same percentage and then listed three of the
   nine outstanding items with no way to act on them.
   ------------------------------------------------------------------------- */
.ato-setup-card {
    padding: var(--ato-sp-5);
    margin: 0 0 var(--ato-sp-6);
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
}

.ato-setup-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ato-sp-2) var(--ato-sp-4);
    margin-bottom: var(--ato-sp-3);
}

.ato-setup-head h2 {
    margin: 0;
    font-size: 22px !important;
    line-height: 1.25;
}

.ato-setup-score {
    margin-left: auto;
    font-family: var(--ato-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--ato-primary);
    white-space: nowrap;
}

.ato-setup-card .ato-progress-bar {
    margin-bottom: var(--ato-sp-4);
}

.ato-setup-intro {
    margin: 0 0 var(--ato-sp-4);
    max-width: 66ch;
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-text-main);
}

.ato-setup-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0 var(--ato-sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ato-setup-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ato-sp-3);
    padding: var(--ato-sp-2) 0;
    border-bottom: 1px solid var(--ato-dash-tint-1);
}

.ato-setup-mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--ato-dash-rule);
    background: transparent;
}

.ato-setup-mark .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    color: #fff;
}

.ato-setup-item--done .ato-setup-mark {
    background: var(--ato-success);
    border-color: var(--ato-success);
}

.ato-setup-text {
    font-size: var(--ato-fs-small);
    line-height: 1.5;
}

.ato-setup-item--done .ato-setup-text {
    color: var(--ato-text-muted);
}

.ato-setup-text a {
    color: var(--ato-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ato-setup-why {
    display: block;
    color: var(--ato-text-muted);
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- 16.7
   Tabs: a real bar, 44px minimum tap target, and a label that is legible
   before you select it.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-tabs-nav {
    gap: 2px;
    margin-bottom: var(--ato-sp-5);
    background: var(--ato-dash-tint-1);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius) var(--ato-dash-radius) 0 0;
    padding: var(--ato-sp-1) var(--ato-sp-1) 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ato-dashboard-v2 .ato-tabs-nav li {
    border-radius: var(--ato-radius-md) var(--ato-radius-md) 0 0;
    white-space: nowrap;
}

.ato-dashboard-v2 .ato-tabs-nav .ato-tab-link {
    padding: 13px 18px;
    min-height: 46px;
    display: flex;
    align-items: center;
}

.ato-dashboard-v2 .ato-tabs-nav li[aria-selected="true"],
.ato-dashboard-v2 .ato-tabs-nav li.active {
    background: var(--ato-dash-surface);
}

.ato-dashboard-v2 .ato-tabs-nav li[aria-selected="true"]::after,
.ato-dashboard-v2 .ato-tabs-nav li.active::after {
    left: 0;
    right: 0;
    bottom: auto;
    top: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
}

.ato-dashboard-v2 .ato-tab-count {
    margin-right: var(--ato-sp-3);
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ato-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- 16.8
   Panel headings and toolbars.

   `.ato-panel-title` was 32px - the same size as the theme page H1 two
   blocks above it, so "My Safaris" competed with "Operator Dashboard".
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-panel-title {
    font-size: 24px !important;
    margin: 0 0 var(--ato-sp-1);
}

.ato-panel-lede {
    margin: 0 0 var(--ato-sp-5);
    max-width: 70ch;
    font-size: var(--ato-fs-small);
    line-height: 1.6;
    color: var(--ato-text-muted);
}

.ato-dashboard-v2 .ato-panel-toolbar {
    align-items: center;
    gap: var(--ato-sp-4);
    margin-bottom: var(--ato-sp-5);
    padding-bottom: var(--ato-sp-4);
    border-bottom: 1px solid var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-panel-toolbar .ato-panel-note {
    margin: 0;
}

/* ---------------------------------------------------------------- 16.9
   Empty states that teach.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-empty-state {
    padding: var(--ato-sp-7) var(--ato-sp-5);
    text-align: left;
    background: var(--ato-dash-surface);
}

.ato-empty-inner {
    max-width: 62ch;
    margin: 0 auto;
}

.ato-dashboard-v2 .ato-empty-state .ato-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--ato-sp-4);
    border-radius: var(--ato-radius-lg);
    background: var(--ato-dash-tint-1);
}

.ato-dashboard-v2 .ato-empty-state .ato-empty-icon .dashicons {
    margin: 0;
    font-size: 26px;
    width: 26px;
    height: 26px;
    color: var(--ato-primary);
}

.ato-dashboard-v2 .ato-empty-state h3 {
    margin: 0 0 var(--ato-sp-2);
    font-size: 21px;
}

.ato-dashboard-v2 .ato-empty-state p {
    margin: 0 0 var(--ato-sp-4);
    max-width: none;
    text-align: left;
    color: var(--ato-text-main);
}

.ato-empty-steps {
    margin: 0 0 var(--ato-sp-5);
    padding: 0;
    list-style: none;
    counter-reset: atostep;
}

.ato-empty-steps li {
    position: relative;
    counter-increment: atostep;
    padding: var(--ato-sp-2) 0 var(--ato-sp-2) 38px;
    font-size: var(--ato-fs-small);
    line-height: 1.55;
    color: var(--ato-text-main);
}

.ato-empty-steps li::before {
    content: counter(atostep);
    position: absolute;
    left: 0;
    top: var(--ato-sp-2);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ato-primary);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: 12px;
    font-weight: 700;
}

.ato-empty-steps strong {
    color: var(--ato-title-color);
}

/* ---------------------------------------------------------------- 16.10
   Safari rows: alignment and a status that is readable at a glance.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-list-item {
    align-items: center;
    gap: var(--ato-sp-4);
}

.ato-dashboard-v2 .ato-item-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ato-sp-2);
}

.ato-dashboard-v2 .ato-item-actions .ato-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.ato-dashboard-v2 .ato-item-meta {
    gap: var(--ato-sp-3);
    color: var(--ato-text-muted);
}

/* ---------------------------------------------------------------- 16.11
   Edit mode for the safari form.
   ------------------------------------------------------------------------- */
.ato-editing-banner {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ato-sp-3);
    padding: var(--ato-sp-3) var(--ato-sp-4);
    margin: 0 0 var(--ato-sp-5);
    border: 1px solid var(--ato-secondary);
    border-left: 3px solid var(--ato-secondary);
    border-radius: var(--ato-radius-md);
    background: color-mix(in srgb, var(--ato-secondary) 12%, transparent);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-main);
}

.ato-form-editing .ato-editing-banner { display: flex; }
.ato-form-editing .ato-adding-note { display: none; }

.ato-editing-banner .ato-editing-name {
    font-weight: 700;
    color: var(--ato-title-color);
    overflow-wrap: anywhere;
}

.ato-editing-banner .ato-cancel-edit {
    margin-left: auto;
}

/* ---------------------------------------------------------------- 16.12
   Delete confirmation dialog.

   window.confirm() could not name the safari being deleted, so the operator
   was asked to confirm destroying "this safari" with no way to check which.
   ------------------------------------------------------------------------- */
.ato-confirm-backdrop {
    /* The dialog is appended to <body>, outside .ato-dashboard, so it does not
       inherit the spacing scale declared there. Without this block every
       var(--ato-sp-N) below resolved to nothing and the dialog rendered with no
       padding at all: the heading, the safari name and the buttons were flush
       against the box edges. The --ato-* colour and font tokens are declared on
       :root in ato-public.css and do reach here. */
    --ato-sp-1: 4px;
    --ato-sp-2: 8px;
    --ato-sp-3: 12px;
    --ato-sp-4: 16px;
    --ato-sp-5: 24px;
    --ato-sp-6: 32px;

    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ato-sp-5);
    background: rgba(var(--shadow), 0.55);
}

.ato-confirm-dialog {
    width: 100%;
    max-width: 480px;
    padding: 28px;
    background: #fff;
    border-radius: var(--ato-radius-lg);
    box-shadow: 0 24px 60px rgba(var(--shadow), 0.3);
    font-family: var(--ato-font-body);
    color: var(--ato-text-main);
    line-height: 1.6;
}

.ato-confirm-dialog h2 {
    margin: 0 0 var(--ato-sp-3);
    font-family: var(--ato-font-heading);
    font-size: 21px;
    font-weight: 600;
    color: var(--ato-title-color);
}

.ato-confirm-target {
    display: block;
    padding: var(--ato-sp-3) var(--ato-sp-4);
    margin: 0 0 var(--ato-sp-4);
    border-left: 3px solid var(--ato-danger);
    background: rgba(var(--shadow), 0.04);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ato-title-color);
    overflow-wrap: anywhere;
}

.ato-confirm-dialog p {
    margin: 0 0 var(--ato-sp-4);
    font-size: var(--ato-fs-small);
    line-height: 1.6;
}

.ato-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--ato-sp-2);
}

.ato-confirm-actions .ato-button { min-height: 44px; }

/* ---------------------------------------------------------------- 16.13
   Feedback: inline messages are announced and scrolled to, and the form
   action row keeps one primary action visible.
   ------------------------------------------------------------------------- */
.ato-dashboard-v2 .ato-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ato-sp-4);
    padding: var(--ato-sp-4) 0 0;
    margin-top: var(--ato-sp-5);
    border-top: 1px solid var(--ato-dash-line);
}

.ato-dashboard-v2 .ato-form-actions .ato-button-primary { min-height: 46px; }

.ato-form-actions-note {
    margin: 0;
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
}

.ato-is-busy { opacity: 0.65; cursor: progress; }

/* ---------------------------------------------------------------- 16.14
   Mobile. Checked at 375x812.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
    .ato-dashboard.ato-dashboard-v2,
    .ato-auth.ato-onboarding {
        padding: var(--ato-sp-5) var(--ato-sp-4) var(--ato-sp-7);
    }

    .ato-dashboard-v2 .ato-dash-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--ato-sp-4);
    }

    .ato-dashboard-v2 .ato-dashboard-actions {
        margin-left: 0;
        width: 100%;
    }

    .ato-dashboard-v2 .ato-dash-titles h1 {
        font-size: 26px !important;
        overflow-wrap: anywhere;
    }

    .ato-dashboard-v2 .ato-panel-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ato-dashboard-v2 .ato-panel-toolbar .ato-button { width: 100%; justify-content: center; }

    .ato-dashboard-v2 .ato-list-item { flex-wrap: wrap; }

    .ato-dashboard-v2 .ato-item-actions {
        width: 100%;
        margin-left: 0;
    }

    .ato-dashboard-v2 .ato-item-actions .ato-button { flex: 1 1 0; justify-content: center; }

    .ato-setup-list { grid-template-columns: minmax(0, 1fr); }

    .ato-dashboard-v2 .ato-stat-value { font-size: 34px; }

    .ato-dashboard-v2 .ato-empty-state { padding: var(--ato-sp-5) var(--ato-sp-4); }
}

/* ---------------------------------------------------------------- 16.15
   Corrections found by looking at the rendered page at 1440x900.
   ------------------------------------------------------------------------- */

/* The approval banner was the only block on the landing screen with no card
   surface: header strip, set-up card and stat tiles are all white panels, and
   the banner sat naked on the canvas between two of them, reading as a hole in
   the stack rather than as the most important thing on the page. */
.ato-dashboard-v2 .ato-status-banner {
    padding: var(--ato-sp-5);
    margin-bottom: var(--ato-sp-5);
    background: var(--ato-dash-surface);
    border: 1px solid var(--ato-dash-line);
    border-radius: var(--ato-dash-radius);
    box-shadow: var(--ato-dash-shadow);
}

.ato-dashboard-v2 .ato-status-banner--pending { border-left: 4px solid var(--ato-secondary); }
.ato-dashboard-v2 .ato-status-banner--success { border-left: 4px solid var(--ato-success); }
.ato-dashboard-v2 .ato-status-banner--warning { border-left: 4px solid var(--ato-secondary); }
.ato-dashboard-v2 .ato-status-banner--info    { border-left: 4px solid var(--ato-primary); }

.ato-dashboard-v2 .ato-status-banner-headline {
    font-size: 22px !important;
    margin: 2px 0 var(--ato-sp-2);
}

/* The empty state centred its own column inside a 1124px panel, so its heading
   started ~200px right of "My Safaris" directly above it. Nothing else on the
   page is centred. */
.ato-empty-inner { margin: 0; }

/* ---------------------------------------------------------------- 16.16
   Touch target sizes, measured at 375x812.

   Everything interactive in the dashboard now clears 24x24 (WCAG 2.5.8) and
   every real button clears 44px on touch. The two failures found by measuring
   were the set-up checklist links, one of which was a 17px-tall inline link,
   and the header/list buttons sitting at 40-42px.
   ------------------------------------------------------------------------- */
.ato-setup-text a {
    display: inline-block;
    padding-block: 4px;
    min-height: 24px;
}

@media (max-width: 782px) {
    .ato-dashboard-v2 .ato-button,
    .ato-dashboard-v2 .ato-item-actions .ato-button,
    .ato-dashboard-v2 .ato-dashboard-actions .ato-button {
        min-height: 44px;
    }

    .ato-setup-item { padding: 10px 0; }
}

/* ---------------------------------------------------------------- 16.17
   Mobile header strip, seen at 375x812.

   The logo tile kept its desktop size next to the titles, leaving the title
   column about 200px wide: "Operator dashboard" broke across two lines and
   "Dashux Test Safaris" across two more before the status pill. And the two
   action buttons stacked at their own content widths, so they stepped in and
   out down the left edge.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
    .ato-dashboard-v2 .ato-dash-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ato-sp-3);
        width: 100%;
    }

    .ato-dashboard-v2 .ato-dash-logo {
        width: 64px;
        height: 64px;
        min-width: 0;
        flex: 0 0 auto;
    }

    .ato-dashboard-v2 .ato-dash-logo-initial { font-size: 28px; }

    .ato-dashboard-v2 .ato-dashboard-actions .ato-button,
    .ato-dashboard-v2 .ato-dash-live-note {
        width: 100%;
        max-width: none;
        justify-content: center;
        text-align: center;
    }

    .ato-dashboard-v2 .ato-dash-live-note { justify-content: flex-start; text-align: left; }
}

/* ---------------------------------------------------------------- 16.18
   The last three contrast failures, measured on the rendered page with
   alpha correctly composited over each ancestor.

   Before:  "Approved & live" status pill      3.85:1   (needs 4.5)
            "Published" safari status badge    3.50:1   (needs 4.5)
            inactive tab label on the tab bar  4.42:1   (needs 4.5)

   The first two are both --ato-success (#2f7d4f) printed on a 10-14% tint of
   itself, which is exactly the arrangement that looks fine and measures badly.
   Darkened inside the dashboard only; the site-wide token is untouched. White
   text on the darker green (the set-up checklist ticks) goes from 5.0:1 to
   7.2:1, so nothing regresses.

   The tab label failed only because the tab bar gained a tint background in
   16.7 -- on the plain canvas the same colour measured 4.78:1. Inactive tabs
   now use the main text colour, which is also the correct hierarchy: an
   unselected tab is a destination, not secondary prose.
   ------------------------------------------------------------------------- */
.ato-dashboard,
.ato-auth {
    --ato-success: #1f6340;   /* 6.10:1 on its own 10% tint */
}

.ato-dashboard-v2 .ato-tabs-nav li:not([aria-selected="true"]):not(.active) {
    color: var(--ato-text-main);   /* 5.18:1 on the tinted bar */
}