/* ============================================================================
   Smart Availability — v1.0
   - Dark theme, mobile-first, standard width (like DoctorShifts)
   - Namespaced with sa- to avoid conflicts with master CSS
   - Elegant animations: stars/orbits, fly-up cards, glowing timeline
   ============================================================================ */

:root {
    --sa-bg: #0b1022;
    --sa-text: #e7eaf3;
    --sa-muted: #93a4b5;
    --sa-primary: #A78BFA;
    --sa-accent: #22D3EE;
    --sa-border: rgba(148,163,184,.24);
    --sa-card: rgba(17,26,47,.78);
    --sa-shadow: 0 24px 62px rgba(0,0,0,.45);
}

.sa-main {
    background: radial-gradient(1200px 900px at 90% -20%, rgba(34,211,238,.10), transparent 60%), radial-gradient(1000px 700px at 15% -20%, rgba(167,139,250,.10), transparent 60%), var(--sa-bg);
    color: var(--sa-text);
    min-height: 100%;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.sa-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

/* ------------------------------ */
/* HERO with animated constellations */
.sa-hero {
    position: relative;
    border: 1px solid var(--sa-border);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--sa-card);
    box-shadow: var(--sa-shadow);
    overflow: hidden;
}

.sa-hero-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sa-stars .sa-star {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, #fff, #cfe3ff 60%, transparent 70%);
    box-shadow: 0 0 24px rgba(34,211,238,.8), 0 0 60px rgba(167,139,250,.6);
    animation: saTwinkle 5s ease-in-out infinite;
}

.sa-star.s1 {
    left: 10%;
    top: 16%;
    animation-delay: 0s;
}

.sa-star.s2 {
    left: 22%;
    top: 36%;
    animation-delay: .8s;
}

.sa-star.s3 {
    left: 48%;
    top: 12%;
    animation-delay: 1.4s;
}

.sa-star.s4 {
    left: 66%;
    top: 22%;
    animation-delay: .3s;
}

.sa-star.s5 {
    left: 82%;
    top: 8%;
    animation-delay: 1.8s;
}

.sa-star.s6 {
    left: 32%;
    top: 44%;
    animation-delay: 2.2s;
}

@keyframes saTwinkle {
    0%,100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}

/* Orbit rings */
.sa-orbit {
    position: absolute;
    border: 1px dashed rgba(34,211,238,.25);
    border-radius: 999px;
    animation: saPulse 9s ease-in-out infinite;
}

    .sa-orbit.o1 {
        width: 46%;
        height: 46%;
        left: 27%;
        top: 10%;
    }

    .sa-orbit.o2 {
        width: 62%;
        height: 62%;
        left: 19%;
        top: 16%;
        animation-delay: 1s;
    }

    .sa-orbit.o3 {
        width: 78%;
        height: 78%;
        left: 11%;
        top: 22%;
        animation-delay: 2s;
    }

@keyframes saPulse {
    0%,100% {
        transform: scale(1);
        opacity: .5;
    }

    50% {
        transform: scale(1.06);
        opacity: .9;
    }
}

.sa-hero-inner {
    position: relative;
    z-index: 2;
    padding: 42px 16px 16px;
    text-align: center;
}

.sa-title {
    margin: 0;
    font-size: clamp(2rem,5vw,3rem);
    font-weight: 900;
    background: linear-gradient(90deg,#fff,#e7f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sa-sub {
    color: var(--sa-muted);
    max-width: 980px;
    margin: 12px auto 0;
}

.sa-cta {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.sa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--sa-border);
    text-decoration: none;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

    .sa-btn.primary {
        background: linear-gradient(135deg, var(--sa-primary), var(--sa-accent));
        color: #0b1022;
        border: 0;
        box-shadow: 0 16px 34px rgba(99,102,241,.35);
    }

    .sa-btn.ghost {
        background: rgba(255,255,255,.06);
        color: #eaf1ff;
        border-color: rgba(148,163,184,.35);
    }

    .sa-btn:hover {
        transform: translateY(-1px);
    }

/* ------------------------------ */
/* Sections */
.sa-section {
    max-width: 1200px;
    padding: 0 16px;
    margin: 30px auto 46px;
}

.sa-sec-head {
    text-align: center;
    display: grid;
    gap: 8px;
    justify-items: center;
    margin-bottom: 16px;
}

    .sa-sec-head h2 {
        margin: 0;
        font-weight: 900;
        letter-spacing: .2px;
        font-size: clamp(1.6rem,3.4vw,2.2rem);
    }

    .sa-sec-head p {
        margin: 0;
        color: var(--sa-muted);
        max-width: 860px;
    }

/* Cards grid */
.sa-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.sa-card {
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), transparent), var(--sa-card);
    padding: 16px;
    box-shadow: var(--sa-shadow);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .sa-card:hover {
        transform: translateY(-2px);
        border-color: rgba(167,139,250,.42);
        box-shadow: 0 24px 70px rgba(0,0,0,.4);
    }

.sa-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-accent));
    color: #0b1022;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(99,102,241,.35);
}

.sa-card h3 {
    margin: 10px 0 6px;
    font-weight: 900;
}

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

/* Fly-up animation */
.fly-up {
    opacity: 0;
    transform: translateY(6px);
    animation: saFlyUp .28s ease forwards;
}

@keyframes saFlyUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------ */
/* Simulation (timeline) */
.sa-sim-controls {
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    background: linear-gradient(180deg,rgba(255,255,255,.06),transparent), var(--sa-card);
    box-shadow: var(--sa-shadow);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.sa-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 12px;
}

    .sa-row > label {
        font-weight: 800;
        color: var(--sa-muted);
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: .72rem;
    }

.sa-input {
    height: 44px;
    border: 1px solid var(--sa-border);
    border-radius: 12px;
    padding: 0 12px;
    background: linear-gradient(180deg,rgba(20,28,54,.92),rgba(12,18,36,.92));
    color: var(--sa-text);
}

    .sa-input:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34,211,238,.22);
    }

.sa-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sa-chip {
    border: 1px solid var(--sa-border);
    background: rgba(255,255,255,.06);
    color: var(--sa-text);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s, transform .16s;
}

    .sa-chip:hover {
        transform: translateY(-1px);
        border-color: var(--sa-accent);
    }

    .sa-chip.active {
        background: linear-gradient(135deg,var(--sa-primary),var(--sa-accent));
        color: #0b1022;
        border-color: transparent;
    }

    .sa-chip.danger {
        border-color: rgba(239,68,68,.45);
        color: #ffdddd;
    }

.sa-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.sa-timeline {
    margin-top: 14px;
    border: 1px solid var(--sa-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--sa-card);
    box-shadow: var(--sa-shadow);
    padding: 14px;
}

.sa-axis {
    position: relative;
    height: 38px;
    border-bottom: 1px solid rgba(148,163,184,.18);
    margin-bottom: 8px;
}

.sa-tick {
    position: absolute;
    transform: translateX(-50%);
    top: 8px;
    font-size: .78rem;
    color: #cfe3ff;
    font-weight: 800;
}

.sa-layers {
    position: relative;
    height: 160px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
    overflow: hidden;
}

.sa-layer {
    position: absolute;
    inset: 0;
}

.sa-block {
    position: absolute;
    top: 26px;
    height: 64px;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

    .sa-block.shift {
        background: rgba(34,197,94,.14);
        border: 1px dashed rgba(34,197,94,.54);
    }

    .sa-block.lock {
        background: linear-gradient(135deg, rgba(239,68,68,.32), rgba(239,68,68,.22));
        border: 1px solid rgba(239,68,68,.50);
    }

    .sa-block.free {
        top: 96px;
        height: 28px;
        background: linear-gradient(135deg, #06b6d4, #6366f1);
        border: 1px solid rgba(6,182,212,.55);
        filter: drop-shadow(0 10px 22px rgba(99,102,241,.35));
    }

.sa-slot {
    position: absolute;
    top: 132px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sa-primary), var(--sa-accent));
    box-shadow: 0 10px 22px rgba(99,102,241,.35);
}

.sa-note {
    margin-top: 8px;
    color: var(--sa-muted);
    font-size: .92rem;
}

/* Benefits glow */
.sa-card.glow {
    border-color: rgba(167,139,250,.42);
    box-shadow: 0 24px 70px rgba(124,58,237,.35);
}

/* Footnote */
.sa-footnote {
    display: grid;
    place-items: center;
    margin-top: 16px;
}

.sa-muted {
    color: var(--sa-muted);
}

/* Responsive */
@media (max-width:980px) {
    .sa-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .sa-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px) {
    .sa-shell {
        padding: 12px;
    }

    .sa-title {
        font-size: clamp(1.8rem,6vw,2.2rem);
    }

    .sa-btn {
        padding: 9px 12px;
    }

    .sa-layers {
        height: 180px;
    }

    .sa-block {
        height: 56px;
        top: 22px;
    }

        .sa-block.free {
            top: 92px;
        }

    .sa-slot {
        top: 130px;
        height: 16px;
    }
}