/* =========================================================================
   Smart Intake — shell polish (loads after app.css + shell.css)
   Goal: match the login page across the app — soft branded glow,
   refined glass cards, login-style inputs, subtle entrance motion.
   ========================================================================= */

@keyframes ssi-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ssi-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Branded backdrop glow --------------------------------------------- */
/* Same soft radial-gradient wash that lives behind the login card —
   only added on light themes (the role-theme topbar already supplies its
   own ambience, so we don't double up). `pointer-events: none` keeps it
   purely decorative. */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 18% 12%,
            rgba(67, 176, 241, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 55% 50% at 82% 88%,
            rgba(5, 125, 205, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 50%,
            rgba(150, 207, 241, 0.10) 0%, transparent 70%);
}

/* Slight backdrop dimmer beneath glass cards for richer separation. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(232, 238, 241, 0.0) 0%,
        rgba(232, 238, 241, 0.25) 100%);
}

/* ---- Topbar ------------------------------------------------------------- */

.topbar {
    border-radius: 14px;
}

.topbar.glass--dark {
    box-shadow:
        0 10px 32px rgba(15, 30, 50, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.topbar__logo {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 11px;
    overflow: hidden;
    background: transparent;
    box-shadow:
        0 4px 14px rgba(5, 125, 205, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.topbar__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar__title {
    letter-spacing: -0.022em;
    font-weight: 600;
}

.topbar__link,
.topbar__drop-trigger {
    padding: 7px 13px;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease;
}

.topbar__link:hover,
.topbar__drop-trigger:hover {
    background: rgba(255, 255, 255, 0.16);
}

.topbar__user {
    padding: 5px 12px 5px 5px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.topbar__role-pill {
    padding: 3px 9px;
    letter-spacing: 0.05em;
}

/* ---- Buttons (match the login Sign-in button) -------------------------- */

.btn {
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease,
        filter 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn--primary {
    background: linear-gradient(145deg, var(--primary, #057dcd), #0369a1);
    box-shadow: 0 4px 14px rgba(5, 125, 205, 0.32);
}

.btn--primary:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(5, 125, 205, 0.42);
    transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(5, 125, 205, 0.26);
}

.btn--primary:focus-visible {
    outline: none;
    box-shadow:
        0 4px 14px rgba(5, 125, 205, 0.32),
        0 0 0 3px rgba(5, 125, 205, 0.24);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.62);
}

.btn--ghost:hover:not(:disabled) {
    background: #fff;
    border-color: var(--primary, #057dcd);
    box-shadow: 0 2px 8px rgba(5, 125, 205, 0.14);
}

.btn--ghost:focus-visible {
    border-color: var(--primary, #057dcd);
    box-shadow: 0 0 0 3px rgba(5, 125, 205, 0.14);
}

.btn--ghost:active:not(:disabled) {
    transform: translateY(0);
}

/* ---- Form fields (login-style focus ring) ------------------------------ */

.field input,
.field select,
.field textarea,
.input,
.meetings-field__control,
input[type="text"]:not(.topbar *),
input[type="email"]:not(.topbar *),
input[type="password"]:not(.topbar *),
input[type="search"]:not(.topbar *),
input[type="tel"]:not(.topbar *),
input[type="url"]:not(.topbar *),
input[type="number"]:not(.topbar *),
input[type="date"]:not(.topbar *),
input[type="datetime-local"]:not(.topbar *),
select:not(.topbar *),
textarea:not(.topbar *) {
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus,
.meetings-field__control:focus,
input[type="text"]:focus:not(.topbar *),
input[type="email"]:focus:not(.topbar *),
input[type="password"]:focus:not(.topbar *),
input[type="search"]:focus:not(.topbar *),
input[type="tel"]:focus:not(.topbar *),
input[type="url"]:focus:not(.topbar *),
input[type="number"]:focus:not(.topbar *),
input[type="date"]:focus:not(.topbar *),
input[type="datetime-local"]:focus:not(.topbar *),
select:focus:not(.topbar *),
textarea:focus:not(.topbar *) {
    border-color: var(--primary, #057dcd);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(5, 125, 205, 0.14);
}

@media (max-width: 899px) {
    .field input,
    .field select,
    .field textarea {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }
}

/* ---- Glass surfaces (richer, more "login-card" feel) ------------------- */

.glass {
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow:
        0 10px 32px rgba(30, 61, 88, 0.14),
        0 2px 0 rgba(255, 255, 255, 0.50) inset;
}

.glass--strong {
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow:
        0 14px 38px rgba(30, 61, 88, 0.16),
        0 2px 0 rgba(255, 255, 255, 0.58) inset;
}

/* Cards that act as links — quiet lift on hover, same as login */
a.dept-card.glass,
a.dept-card {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

a.dept-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(30, 61, 88, 0.16),
        0 2px 0 rgba(255, 255, 255, 0.55) inset;
    border-color: rgba(5, 125, 205, 0.26);
    text-decoration: none;
}

/* Section cards (hub, reports, person sections) get a soft lift on hover */
section.glass,
section.person-hub-section.glass {
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

section.glass:hover {
    box-shadow:
        0 14px 38px rgba(30, 61, 88, 0.16),
        0 2px 0 rgba(255, 255, 255, 0.55) inset;
}

/* ---- Hero blocks ------------------------------------------------------- */

.hero h1,
.dashboard-hero h1 {
    font-weight: 700;
    letter-spacing: -0.028em;
}

.dashboard-hero__greeting {
    letter-spacing: 0.06em;
    opacity: 0.9;
    color: var(--primary, #057dcd);
}

.dashboard-hero__sub {
    line-height: 1.55;
    color: var(--text-secondary, #2d4660);
}

.stat {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.68);
    box-shadow:
        0 2px 6px rgba(30, 61, 88, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.stat:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 14px rgba(30, 61, 88, 0.10),
        0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

/* ---- Status pills get a touch more body --------------------------------- */

.status {
    box-shadow: 0 1px 2px rgba(30, 61, 88, 0.08);
}

/* ---- Flash messages (icon + soft tint) --------------------------------- */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    box-shadow: 0 2px 10px rgba(30, 61, 88, 0.08);
}

.flash::before {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}

.flash--success::before {
    content: "✓";
    background: rgba(62, 138, 107, 0.24);
    color: var(--success-ink, #3e8a6b);
}

.flash--warning::before {
    content: "!";
    background: rgba(160, 122, 54, 0.24);
    color: var(--warning-ink, #a07a36);
}

.flash--error::before,
.flash--danger::before {
    content: "✕";
    background: rgba(157, 74, 74, 0.24);
    color: var(--danger-ink, #9d4a4a);
}

.flash--info::before {
    content: "i";
    font-style: italic;
    background: rgba(5, 125, 205, 0.18);
    color: var(--primary, #057dcd);
}

.flash--info {
    background: rgba(109, 192, 241, 0.30);
    color: var(--ink, #1e3d58);
    border-color: rgba(5, 125, 205, 0.20);
}

/* ---- Focus ring (a11y) — keep tokens.css behavior, tinted soft ------- */

:focus-visible {
    outline-color: var(--primary, #057dcd);
    outline-width: 2px;
    outline-offset: 2px;
}

/* ---- Page entrance — same fade-up the login uses ----------------------- */

@media (prefers-reduced-motion: no-preference) {
    .container > .dashboard-hero,
    .container > .hero,
    .container > .flash-stack,
    .container > .dept-grid,
    .container > .status-grid,
    .container > section.glass,
    .container > section.person-hub,
    .container > section.person-hub-section {
        animation: ssi-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .container > .dashboard-hero,
    .container > .hero {
        animation-delay: 0.02s;
    }

    .container > .flash-stack {
        animation-delay: 0.05s;
    }

    .container > .dept-grid,
    .container > .status-grid {
        animation-delay: 0.10s;
    }

    .container > section.glass:nth-of-type(n + 2),
    .container > section.person-hub-section:nth-of-type(n + 2) {
        animation-delay: 0.12s;
    }
}