/* ============================================================
   Ivaro Design Tokens — single source of truth
   Loaded by Ivaro.Web (and any other host) via
   <link href="app.css" />
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap');

:root {
    /* Primary — deep navy from Ivaro wordmark */
    --color-primary:        #1B3A6B;
    --color-primary-light:  #2753A0;
    --color-primary-pale:   #EBF0F8;

    /* Secondary — bright blue from logo figure */
    --color-secondary:      #2979CC;
    --color-secondary-light:#4A90D9;
    --color-secondary-pale: #E8F2FB;

    /* Accent — teal-green from logo book pages */
    --color-accent:         #2EAA8A;
    --color-accent-light:   #4DC68A;
    --color-accent-pale:    #E6F7F2;

    /* PLAT-WO-15a (go-live #6): text shades of the brand hues, darkened until they meet WCAG AA (4.5:1) on their
       pale fills. Same hues, darker; for text on light surfaces only. */
    --color-accent-text:    #1E7A63;   /* 4.72:1 on --color-accent-pale, 5.22:1 on white */
    --color-secondary-text: #1F63A8;   /* 5.45:1 on #EAF2FA (the profile chip's fill) */
    --color-warning-text:   #8A5200;   /* 5.82:1 on #FFF3E0 (the amber freshness chip's fill) */

    /* Gradients */
    --gradient-brand:       linear-gradient(135deg, #2EAA8A 0%, #4DC68A 100%);   /* decoration only: white text on it fails AA */
    --gradient-brand-blue:  linear-gradient(135deg, #2979CC 0%, #2EAA8A 100%);
    /* PLAT-WO-15a (go-live #6, Kevin 2026-11-04): the primary button's fill. The brand's own teal and green, darkened, so
       white text is 4.76:1 at the teal end and 4.81:1 at the green end (AA needs 4.5:1). Every .btn-cta uses this. */
    --gradient-cta:         linear-gradient(135deg, #238169 0%, #298156 100%);

    /* Neutrals */
    --color-surface:        #FFFFFF;
    --color-surface-2:      #F4F6FA;
    --color-surface-3:      #E8ECF3;
    --color-border:         #D0D7E3;
    --color-text-primary:   #1B3A6B;
    --color-text-secondary: #5A6478;
    --color-text-muted:     #5F6B7D;   /* PLAT-WO-15a (go-live #6): was #8E97A8 (2.94:1). 5.40:1 on white, 4.99:1 on --color-surface-2, 4.56:1 on --color-surface-3 */

    /* Semantic */
    --color-success:        #2EAA8A;
    --color-warning:        #E8920C;
    --color-error:          #C0392B;
    --color-info:           #2979CC;

    /* Progression stages */
    --color-foundation:     #2EAA8A;
    --color-development:    #2979CC;
    --color-mastery:        #1B3A6B;

    /* Typography */
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'DM Serif Display', Georgia, serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.5rem;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
}

/* ------------------------------------------------------------
   Global resets / base
   ------------------------------------------------------------ */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
}
a:hover { color: var(--color-secondary-light); }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--color-text-primary);
    font-weight: 600;
    outline: none;
}

button {
    font-family: var(--font-body);
}

input, select, textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */

.ivaro-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ------------------------------------------------------------
   AI loading banner — shared between SupportingStandardsSelector
   and EngagementChipPicker so both AI-suggestion surfaces use the
   same blue-bar + ✦ treatment. Defined globally (not in a scoped
   .razor.css) so it applies regardless of component scope.
   ------------------------------------------------------------ */

.supporting-selector__loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-secondary-pale);
    border-radius: 6px;
    border-left: 3px solid var(--color-secondary);
}

.supporting-selector__loading-icon {
    font-size: 0.85rem;
    color: var(--color-primary, #1a56db);
    flex-shrink: 0;
}

.supporting-selector__loading-text {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-secondary);
    font-style: italic;
}

/* ------------------------------------------------------------
   Chip
   ------------------------------------------------------------ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border: 1px solid rgba(46,170,138,0.25);
    line-height: 1.4;
    cursor: pointer;
}
.chip .remove-btn {
    width: 16px;
    height: 16px;
    margin-left: var(--space-1);
    border-radius: 50%;
    background: rgba(46,170,138,0.15);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 11px;
    line-height: 1;
    padding: 0;
}
.chip .remove-btn:hover {
    background: rgba(46,170,138,0.3);
}

.chip.chip--focus {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
    border-color: rgba(41,121,204,0.25);
}

/* Compact chip variant — used inline inside chip-based multi-select inputs
   (Focus Standards / Supporting Standards). Keeps the chip height within
   a single input row. */
.chip.chip--inline {
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    border-radius: 4px;
    line-height: 1.4;
}
.chip.chip--inline .chip__code {
    font-weight: 600;
}
.chip.chip--focus .remove-btn {
    background: rgba(41,121,204,0.15);
    color: var(--color-secondary);
}
.chip.chip--focus .remove-btn:hover {
    background: rgba(41,121,204,0.3);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.btn-primary {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-light);
}
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cta {
    background: var(--gradient-cta);
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
/* PLAT-WO-15a: hover DARKENS (white text 5.28:1 / 5.33:1), never lightens below AA. */
.btn-cta:hover { filter: brightness(0.94); }
/* PLAT-WO-15a: a focus ring that stays visible next to the darker fill: navy, offset onto the page's own surface. */
.btn-cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Outlined navy — save state, secondary actions */
.btn-save {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.btn-save:hover {
    background: var(--color-primary-pale);
}
.btn-save.btn-save--saved {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Outlined secondary — keep-original, tertiary actions */
.btn-keep {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.btn-keep:hover {
    border-color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Panel header (sidebar section titles)
   ------------------------------------------------------------ */

.panel-header {
    background: var(--color-primary);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: 6px 6px 0 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------
   Prior Knowledge note
   ------------------------------------------------------------ */

.prior-knowledge-note {
    background: #FFFBF0;
    border-left: 3px solid #F0C040;
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   Spinner (used by buttons + loading states)
   ------------------------------------------------------------ */

.ivaro-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: ivaro-spin 0.8s linear infinite;
}
.ivaro-spinner.ivaro-spinner--dark {
    border: 2px solid rgba(27,58,107,0.2);
    border-top-color: var(--color-primary);
}
@keyframes ivaro-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   Generation Loading Overlay — frost backdrop + popup card
   These MUST be global — scoped CSS will not match elements
   rendered from MainLayout.razor across component boundaries.
   ------------------------------------------------------------ */

/* 🔴 WO-44 Part B.2 — the popup over an open modal (the review modal sits at 1000, its upsell at 1100). Opt-in. */
.gen-overlay--above-modals {
    z-index: 1200 !important;
}

.gen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(27, 58, 107, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gen-overlay-in 0.3s ease;
}

.gen-popup {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-10) var(--space-12);
    box-shadow: 0 12px 48px rgba(27, 58, 107, 0.18),
                0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 400px;
    width: calc(100vw - 48px);
    text-align: center;
    animation: gen-popup-in 0.35s ease;
}

.gen-popup__logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.85;
}

.gen-popup__message {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
    min-height: 2.8em;
}

/* IS-AP5 - the optional count line under the message ("2 of 4 packets ready..."). Absent unless a page sets it. */
.gen-popup__detail {
    font-size: var(--text-base);
    color: var(--color-text-secondary, var(--color-text-primary));
    margin: 0;
}

.gen-popup__spinner {
    width: 24px;
    height: 24px;
}

/* ============================================================
   Generation overlay — progress checklist
   Rendered between the logo and the rotating message when the
   PageOverlayState has steps. Page-side timer ticks through each
   item; the active item pulses, completed items show a check.
   ============================================================ */
.gen-popup__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gen-popup__checklist-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
    transition: color 220ms ease;
}

.gen-popup__checklist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    transition: all 220ms ease;
}

.gen-popup__checklist-item--current {
    color: var(--color-text-primary);
    font-weight: 500;
}

.gen-popup__checklist-icon--pulse {
    border-color: var(--color-secondary);
    position: relative;
}

.gen-popup__checklist-icon--pulse::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-secondary);
    animation: gen-checklist-pulse 1.4s ease-in-out infinite;
}

@keyframes gen-checklist-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50%      { transform: scale(1.05); opacity: 1; }
}

.gen-popup__checklist-item--done {
    color: var(--color-text-secondary);
}

.gen-popup__checklist-item--done .gen-popup__checklist-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface);
    font-weight: 700;
}

@keyframes gen-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gen-popup-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 480px) {
    .gen-popup {
        padding: var(--space-8) var(--space-6);
    }
    .gen-popup__message {
        font-size: var(--text-lg);
    }
}

/* ============================================================
   Shimmer text — animated gradient sweep for active AI/loading
   moments. Apply ONLY to actively-running processes, never to
   static labels.
   ============================================================ */
@keyframes ivaro-shimmer {
    0%   { background-position: -250% 0; }
    100% { background-position:  250% 0; }
}

.shimmer-text {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #1B3A6B 0%,
        #1B3A6B 40%,
        #2EAA8A 50%,
        #1B3A6B 60%,
        #1B3A6B 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ivaro-shimmer 6.6s linear infinite;
}

.shimmer-text--light {
    display: inline-block;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.55) 40%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.55) 60%,
        rgba(255,255,255,0.55) 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ivaro-shimmer 6.6s linear infinite;
}

.shimmer-text--slow {
    animation-duration: 10.5s;
}

/* Review & Export button — progressive Phase 2 loading state */
.btn-review-export--loading {
    opacity: 0.85;
    cursor: not-allowed;
    min-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   SP-06 Phase A.2 — Circuit-loss reconnect banner.
   Replaces the framework's default full-screen reconnect modal.
   The element (#components-reconnect-modal, static host markup in
   App.razor) is hidden by default; the framework adds ONE of its
   state classes and the rules below reveal the matching sub-state.
   Non-blocking: a fixed top bar that never covers the page body, so
   a teacher can still read and print while the connection recovers.
   Pure CSS + inline onclick — must work with no live circuit.
   ============================================================ */

/* Hidden by default and whenever the framework hides it. */
#components-reconnect-modal {
    display: none;
}
#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

/* Any active state shows the banner. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;                       /* above the app shell + topbar */
    animation: ivaro-reconnect-in 180ms ease-out;
    pointer-events: none;               /* let the page underneath stay scrollable */
}

.ivaro-reconnect__bar {
    pointer-events: auto;               /* but the bar itself is interactive */
    max-width: 720px;
    margin: var(--space-3) auto 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(27, 58, 107, 0.16);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    color: var(--color-text-primary);
}

/* Each sub-state hidden until its parent class is present. */
.ivaro-reconnect__state {
    display: none;
    align-items: center;
    gap: var(--space-4);
}
.components-reconnect-show .ivaro-reconnect__state--retrying { display: flex; }
.components-reconnect-failed .ivaro-reconnect__state--failed { display: flex; }
.components-reconnect-rejected .ivaro-reconnect__state--rejected { display: flex; }

/* Left accent per severity. */
.components-reconnect-show .ivaro-reconnect__bar   { border-left: 4px solid var(--color-secondary); }
.components-reconnect-failed .ivaro-reconnect__bar { border-left: 4px solid var(--color-warning); }
.components-reconnect-rejected .ivaro-reconnect__bar { border-left: 4px solid var(--color-error); }

.ivaro-reconnect__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.ivaro-reconnect__text strong {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
}
.ivaro-reconnect__text span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.ivaro-reconnect__spinner {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-secondary-pale);
    border-top-color: var(--color-secondary);
    border-radius: 50%;
    animation: ivaro-reconnect-spin 0.8s linear infinite;
}

.ivaro-reconnect__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
}
.ivaro-reconnect__btn {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ivaro-reconnect__btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.ivaro-reconnect__btn--primary:hover { background: var(--color-primary-light); }
.ivaro-reconnect__btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.ivaro-reconnect__btn--ghost:hover { border-color: var(--color-text-muted); }

@keyframes ivaro-reconnect-spin { to { transform: rotate(360deg); } }
@keyframes ivaro-reconnect-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stack text over actions on narrow screens so nothing clips. */
@media (max-width: 560px) {
    .ivaro-reconnect__state--failed,
    .ivaro-reconnect__state--rejected {
        flex-direction: column;
        align-items: stretch;
    }
    .ivaro-reconnect__actions { justify-content: flex-end; }
}