/* ============================================================================
   GetPassed - Dashboard redesign (v1)
   Brings the homepage design language to the authenticated Dashboard.
   Scoped to div.dashboard; !important is used to beat the legacy dashboard
   rules in custom.css (which are more specific). Remove once the legacy
   dashboard LESS is refactored.
   ============================================================================ */

:root {
    --gp-ink: #0f172a;
    --gp-body: #475569;
    --gp-muted: #64748b;
    --gp-brand: #ff6b2c;
    --gp-brand-600: #e85a1c;
    --gp-muted-bg: #f1f5f9;
    --gp-border: #e2e8f0;
    --gp-radius: 14px;
    --gp-radius-pill: 999px;
    --gp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --gp-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gp-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- page shell ---------- */
div.dashboard {
    background-color: var(--gp-muted-bg) !important;
    font-family: var(--gp-font-body) !important;
    color: var(--gp-ink) !important;
    padding-top: 32px;
    padding-bottom: 64px;
    -webkit-font-smoothing: antialiased;
}

    div.dashboard h1,
    div.dashboard h2,
    div.dashboard h3,
    div.dashboard .title,
    div.dashboard .name,
    div.dashboard .counter .title1,
    div.dashboard .counter .title2,
    div.dashboard .average-rating,
    div.dashboard .no-appointments-title,
    div.dashboard .btn {
        font-family: var(--gp-font-head) !important;
    }

/* ---------- cards ---------- */
div.dashboard .info-block {
    background: #fff !important;
    border: 1px solid var(--gp-border) !important;
    border-radius: var(--gp-radius) !important;
    box-shadow: var(--gp-shadow-sm) !important;
    padding: 26px 28px;
    overflow: hidden;
}

    div.dashboard .info-block .title {
        font-weight: 600;
        font-size: 17px;
        color: var(--gp-ink) !important;
    }

/* business name (dashboard "hero") */
div.dashboard .name-info .name h1 {
    margin: 0;
    font-weight: 700 !important;
    font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
    letter-spacing: -.01em;
    color: var(--gp-ink) !important;
}

div.dashboard .name-info .address {
    margin-top: 8px;
    color: var(--gp-muted) !important;
}

/* ---------- counters ---------- */
div.dashboard .counts-info {
    padding: 0 !important;
}

div.dashboard .counter {
    padding: 24px 26px;
    background: #fff !important;
    border-color: var(--gp-border) !important;
}

    div.dashboard .counter .title1 {
        font-weight: 700 !important;
        font-size: 34px !important;
        line-height: 1.1;
        color: var(--gp-ink) !important;
    }

    div.dashboard .counter .title2 {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        letter-spacing: .03em;
        color: var(--gp-muted) !important;
    }

/* ---------- chart ---------- */
div.dashboard .graph-info .dropdown-toggle {
    color: var(--gp-ink) !important;
    font-weight: 600;
}

/* ---------- buttons ---------- */
div.dashboard .btn {
    border-radius: var(--gp-radius-pill) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

div.dashboard .btn-three {
    background-color: var(--gp-brand) !important;
    color: #20140a !important;
    border: 0 !important;
}

    div.dashboard .btn-three:hover,
    div.dashboard .btn-three:focus {
        background-color: var(--gp-brand-600) !important;
        color: #20140a !important;
    }

div.dashboard .btn-six {
    background-color: var(--gp-ink) !important;
    color: #fff !important;
    border: 0 !important;
}

    div.dashboard .btn-six:hover,
    div.dashboard .btn-six:focus {
        background-color: #1e293b !important;
        color: #fff !important;
    }

div.dashboard .btn-seven {
    background: #fff !important;
    color: var(--gp-ink) !important;
    border: 1px solid var(--gp-border) !important;
}

    div.dashboard .btn-seven:hover,
    div.dashboard .btn-seven:focus {
        border-color: var(--gp-ink) !important;
        color: var(--gp-ink) !important;
    }

/* ---------- average / ratings ---------- */
div.dashboard .average-block .average-rating {
    font-weight: 700 !important;
    color: var(--gp-ink) !important;
}

div.dashboard .rating-progress {
    background: var(--gp-muted-bg) !important;
    border-radius: var(--gp-radius-pill) !important;
    overflow: hidden;
}

    div.dashboard .rating-progress .progress-value {
        background: var(--gp-brand) !important;
        border-radius: var(--gp-radius-pill) !important;
    }

div.dashboard .rating-infos .rating-info .count {
    color: var(--gp-muted) !important;
}

/* ---------- appointments ---------- */
div.dashboard .appointments-table table th {
    color: var(--gp-muted) !important;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---------- focus visibility ---------- */
div.dashboard a:focus-visible,
div.dashboard button:focus-visible,
div.dashboard .dropdown-toggle:focus-visible {
    outline: 2px solid var(--gp-brand);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    div.dashboard {
        padding-top: 18px;
    }

        div.dashboard .info-block {
            padding: 20px;
        }
}

@media (prefers-reduced-motion: reduce) {
    div.dashboard .btn,
    div.dashboard * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}