/* _content/ETuteApp.UI.Shared/Components/Charts/ComparisonChart.razor.rz.scp.css */
/* Chart width follows its card. Below 880px the chart keeps a 560px floor and scrolls inside
   .et-chart-scroll (overflow-x:auto, defined in app.css) so category labels stay readable. */
.cmp-chart-wrap[b-cyj0qjf1l3]  .rz-chart {
    min-width: 0;
}

/* Radzen legend items default to 22px high; they toggle series, so give them a 28px hit area. */
.cmp-chart-wrap[b-cyj0qjf1l3]  .rz-legend-item {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.cmp-chart-hint[b-cyj0qjf1l3] {
    display: none;
    font-size: 11.5px;
    color: var(--muted, #666);
}

@media (max-width: 879.98px) {
    .cmp-chart-wrap[b-cyj0qjf1l3]  .rz-chart {
        min-width: 560px;
    }

    .cmp-chart-hint[b-cyj0qjf1l3] {
        display: block;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Charts/TimeSeriesChart.razor.rz.scp.css */
/* Radzen legend items default to 22px high; they toggle series, so give them a 28px hit area (same as ComparisonChart). */
.et-chart-scroll[b-41zelg2zkl]  .rz-legend-item {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}
/* _content/ETuteApp.UI.Shared/Components/Chatbot/ChatbotWidget.razor.rz.scp.css */
/* Chatbot Widget Styles — Fresh Campus (cyan #06b6d4 / coral #f97316, Sora + Manrope).
   Tokens come from design-tokens.css; literals are fallbacks for contexts where it
   hasn't loaded. Icons render via <RadzenIcon> (Material Symbols, .rzi). */
.chatbot-widget[b-5k51kuo4dt] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: var(--body, 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Toggle Button */
.chatbot-toggle-btn[b-5k51kuo4dt] {
    width: 60px;
    height: 60px;
    border-radius: var(--r-pill, 999px);
    background: var(--cyan, #06b6d4);
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px var(--cyan-ring, rgba(6, 182, 212, .35));
    transition: transform 0.2s var(--ease, ease), background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.chatbot-toggle-btn .rzi[b-5k51kuo4dt] {
    font-size: 28px;
}

/* UI-MPD07: the FAB had the browser default ring; the app standard is 2px #0e7490 */
.chatbot-toggle-btn:focus-visible[b-5k51kuo4dt] {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.chatbot-toggle-btn:hover[b-5k51kuo4dt] {
    transform: scale(1.05);
    background: var(--cyan-deep, #0891b2);
    box-shadow: 0 10px 26px var(--cyan-ring, rgba(6, 182, 212, .45));
}

.chatbot-toggle-btn.active[b-5k51kuo4dt] {
    background: var(--cyan-deep, #0891b2);
}

.chatbot-badge[b-5k51kuo4dt] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--coral, #f97316);
    color: #fff;
    border-radius: var(--r-pill, 999px);
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(249, 115, 22, .4);
}

/* Chat Popup */
.chatbot-popup[b-5k51kuo4dt] {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: 600px;
    max-height: calc(100vh - 120px);
    background: var(--surface, #fff);
    border-radius: var(--r-xl, 20px);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(11, 23, 51, .08), 0 30px 60px rgba(11, 23, 51, .10));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp-b-5k51kuo4dt 0.3s var(--ease, ease);
}

@keyframes slideUp-b-5k51kuo4dt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.chatbot-header[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    color: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-header-content[b-5k51kuo4dt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-header-content .rzi[b-5k51kuo4dt] {
    font-size: 26px;
}

.chatbot-header h4[b-5k51kuo4dt] {
    margin: 0;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chatbot-header small[b-5k51kuo4dt] {
    font-size: 12px;
    opacity: 0.9;
}

.chatbot-header-actions[b-5k51kuo4dt] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-5k51kuo4dt] {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-icon .rzi[b-5k51kuo4dt] {
    font-size: 18px;
}

.btn-icon:hover[b-5k51kuo4dt] {
    background: rgba(255, 255, 255, 0.32);
}

/* Messages Container */
.chatbot-messages[b-5k51kuo4dt] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--canvas, #f2fbfd);
    scroll-behavior: smooth;
}

.chatbot-messages[b-5k51kuo4dt]::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages[b-5k51kuo4dt]::-webkit-scrollbar-thumb {
    background: var(--cyan-wash-2, #cffafe);
    border-radius: 3px;
}

/* Welcome Screen */
.chatbot-welcome[b-5k51kuo4dt] {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted, #64748b);
}

.chatbot-welcome .rzi[b-5k51kuo4dt] {
    color: var(--cyan, #06b6d4);
    margin-bottom: 16px;
}

.chatbot-welcome h5[b-5k51kuo4dt] {
    margin: 16px 0 8px;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    color: var(--ink, #0b1733);
}

.chatbot-suggestions[b-5k51kuo4dt] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-suggestion[b-5k51kuo4dt] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    padding: 10px 16px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    font-size: 13px;
    color: var(--cyan-deep, #0e7490);
    font-weight: 500;
    transition: all 0.2s;
    text-align: left;
}

.btn-suggestion:hover[b-5k51kuo4dt] {
    background: var(--cyan-wash, #ecfeff);
    border-color: var(--cyan, #06b6d4);
}

/* Messages */
.chatbot-message[b-5k51kuo4dt] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    animation: fadeIn-b-5k51kuo4dt 0.3s ease;
}

@keyframes fadeIn-b-5k51kuo4dt {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chatbot-message.user[b-5k51kuo4dt] {
    flex-direction: row-reverse;
}

.message-icon[b-5k51kuo4dt] {
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill, 999px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-icon .rzi[b-5k51kuo4dt] {
    font-size: 20px;
}

.chatbot-message.user .message-icon[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    color: #fff;
}

/* Assistant speaks as Etute — warm coral accent (mirrors the EtAiCard treatment). */
.chatbot-message.assistant .message-icon[b-5k51kuo4dt] {
    background: var(--coral-wash, #fff1e6);
    color: var(--coral, #f97316);
}

.message-content[b-5k51kuo4dt] {
    flex: 1;
    background: var(--surface, #fff);
    padding: 12px 16px;
    border-radius: var(--r-lg, 16px);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-sm, 0 2px 5px rgba(11, 23, 51, .05));
    position: relative;
}

.chatbot-message.user .message-content[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    border-color: var(--cyan, #06b6d4);
    color: #fff;
}

.message-content p[b-5k51kuo4dt] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.message-content a[b-5k51kuo4dt] {
    color: var(--cyan-deep, #0e7490);
    font-weight: 600;
}

.chatbot-message.user .message-content a[b-5k51kuo4dt] {
    color: #fff;
    text-decoration: underline;
}

.message-content ul[b-5k51kuo4dt],
.message-content ol[b-5k51kuo4dt] {
    margin: 8px 0;
    padding-left: 20px;
}

.message-content h1[b-5k51kuo4dt], .message-content h2[b-5k51kuo4dt], .message-content h3[b-5k51kuo4dt],
.message-content h4[b-5k51kuo4dt], .message-content h5[b-5k51kuo4dt], .message-content h6[b-5k51kuo4dt] {
    margin: 12px 0 8px;
    font-family: var(--display, 'Sora', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 600;
}

.message-content table[b-5k51kuo4dt] {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 13px;
}

.message-content table th[b-5k51kuo4dt],
.message-content table td[b-5k51kuo4dt] {
    padding: 8px;
    border: 1px solid var(--line, #e3eef2);
    text-align: left;
}

.message-content code[b-5k51kuo4dt] {
    background: var(--cyan-wash, #ecfeff);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.message-time[b-5k51kuo4dt] {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.7;
}

.ai-badge[b-5k51kuo4dt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--coral-wash, #fff1e6);
    color: var(--coral, #f97316);
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
}

.ai-badge .rzi[b-5k51kuo4dt] {
    font-size: 13px;
}

/* Typing Indicator */
.typing-indicator[b-5k51kuo4dt] {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span[b-5k51kuo4dt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan, #06b6d4);
    animation: typing-b-5k51kuo4dt 1.4s infinite;
}

.typing-indicator span:nth-child(2)[b-5k51kuo4dt] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-5k51kuo4dt] {
    animation-delay: 0.4s;
}

@keyframes typing-b-5k51kuo4dt {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Input Area */
.chatbot-input-area[b-5k51kuo4dt] {
    padding: 16px;
    background: var(--surface, #fff);
    border-top: 1px solid var(--line, #e3eef2);
}

.chatbot-error[b-5k51kuo4dt] {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
    padding: 8px 12px;
    border-radius: var(--r, 12px);
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chatbot-error .rzi[b-5k51kuo4dt] {
    font-size: 18px;
}

.chatbot-input-wrapper[b-5k51kuo4dt] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chatbot-input[b-5k51kuo4dt] {
    flex: 1;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-pill, 999px);
    padding: 10px 16px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
}

.chatbot-input:focus[b-5k51kuo4dt] {
    border-color: var(--cyan, #06b6d4);
    box-shadow: 0 0 0 3px var(--cyan-ring, rgba(6, 182, 212, .16));
}

.chatbot-input:disabled[b-5k51kuo4dt] {
    background: var(--gray-100, #f1f5f9);
    cursor: not-allowed;
}

.btn-send[b-5k51kuo4dt] {
    background: var(--cyan, #06b6d4);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-send .rzi[b-5k51kuo4dt] {
    font-size: 20px;
}

.btn-send:hover:not(:disabled)[b-5k51kuo4dt] {
    background: var(--cyan-deep, #0891b2);
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--cyan-ring, rgba(6, 182, 212, .35));
}

.btn-send:disabled[b-5k51kuo4dt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.chatbot-hint[b-5k51kuo4dt] {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--placeholder, #64748b);
    text-align: center;
}

/* Responsive Design for Mobile/Tablet */
@media (max-width: 768px) {
    .chatbot-widget[b-5k51kuo4dt] {
        bottom: 10px;
        right: 10px;
    }

    .chatbot-toggle-btn[b-5k51kuo4dt] {
        width: 56px;
        height: 56px;
    }

    .chatbot-popup[b-5k51kuo4dt] {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        max-height: none;
        /* Pin all four edges (inset) instead of sizing with vh: the base rule's 100vh-based
           max-height and the slideUp translateY(20px) pushed the panel 20px below the
           visual viewport. Safe-area insets keep it clear of notches and home bars. */
        inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        border-radius: 0;
        border: none;
        box-shadow: none;
        animation: chatbotFadeIn-b-5k51kuo4dt 0.2s ease;
    }

    @keyframes chatbotFadeIn-b-5k51kuo4dt {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .chatbot-header[b-5k51kuo4dt] {
        padding: 12px 16px;
    }

    .chatbot-messages[b-5k51kuo4dt] {
        padding: 12px;
    }

    .chatbot-input-area[b-5k51kuo4dt] {
        padding: 12px;
    }

    .chatbot-welcome[b-5k51kuo4dt] {
        padding: 30px 16px;
    }

    .message-content[b-5k51kuo4dt] {
        max-width: 85%;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .chatbot-toggle-btn[b-5k51kuo4dt] {
        width: 52px;
        height: 52px;
    }

    .chatbot-header h4[b-5k51kuo4dt] {
        font-size: 15px;
    }

    .chatbot-header small[b-5k51kuo4dt] {
        font-size: 11px;
    }

    .message-content[b-5k51kuo4dt] {
        font-size: 13px;
        padding: 10px 14px;
    }

    .chatbot-input[b-5k51kuo4dt] {
        font-size: 13px;
        padding: 8px 14px;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Common/PhoneInputField.razor.rz.scp.css */
/* Desktop (>=1025px, fine pointer): horizontal, country compact left, number fills remaining width */
.phone-input-field .phone-country[b-l0o68anqvj] {
    width: 120px;
    flex: 0 0 120px;
}

.phone-input-field .phone-number[b-l0o68anqvj] {
    flex: 1 1 auto;
    min-width: 180px;
}

/* Tablet & phone: stack vertically — each control takes the full row width */
@media (pointer: coarse), (max-width: 1024px) {
    .phone-input-field .phone-country[b-l0o68anqvj],
    .phone-input-field .phone-number[b-l0o68anqvj] {
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
    }
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtAiCard.razor.rz.scp.css */
.et-aicard[b-471eh9t4cp] {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--warm-line);
    background: var(--grad-warm);
    border-radius: var(--r-xl);
    padding: 14px 16px;
}

.et-aicard__orb[b-471eh9t4cp] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.et-aicard__orb[b-471eh9t4cp]  i {
    color: #fff;
    font-size: 19px;
}

.et-aicard__body[b-471eh9t4cp] {
    flex: 1;
    min-width: 0;
}

.et-aicard__title[b-471eh9t4cp] {
    font-weight: 700;
    font-size: var(--fs-body);
    color: var(--ink);
}

.et-aicard__sub[b-471eh9t4cp] {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-top: 2px;
}

.et-aicard__act[b-471eh9t4cp] {
    flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtAskBar.razor.rz.scp.css */
.et-ask[b-n3mg9v4srs] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 8px 7px 10px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}

.et-ask:hover[b-n3mg9v4srs] {
    border-color: var(--cyan-wash-2);
}

.et-ask:focus-visible[b-n3mg9v4srs] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}

.et-ask__orb[b-n3mg9v4srs] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.et-ask__orb[b-n3mg9v4srs]  i {
    color: #fff;
    font-size: 15px;
}

.et-ask__ph[b-n3mg9v4srs] {
    flex: 1;
    color: var(--muted);
    font-size: var(--fs-ui);
}

.et-ask__kbd[b-n3mg9v4srs] {
    font-size: var(--fs-xs);
    color: var(--placeholder);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 6px;
    flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtDialogShell.razor.rz.scp.css */
.et-dlg[b-ittoq6kqo1] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Self-cap the shell height so a tall dialog scrolls its body instead of
       overflowing the viewport. Independent of the parent chain — works even
       through the RadzenTemplateForm <form> wrapper that sits between
       .rz-dialog-content and this root. dvh accounts for mobile browser chrome. */
    max-height: 92vh;
    max-height: 92dvh;
}

.et-dlg__hd[b-ittoq6kqo1] {
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.et-dlg__title[b-ittoq6kqo1] {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.et-dlg__desc[b-ittoq6kqo1] {
    margin: 5px 0 0;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
}

.et-dlg__bd[b-ittoq6kqo1] {
    padding: 20px 26px;
    flex: 1;
    /* REQUIRED: without min-height:0 a flex item won't shrink below its content
       size, so overflow-y:auto never engages and the body just pushes the
       footer off-screen instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
    /* Dialogs scroll vertically only — never horizontally. Without this, overflow-y:auto
       makes the browser compute overflow-x to 'auto' too, so any content a hair wider than
       the body (a fixed-width field, a flex row that can't shrink) shows a stray horizontal
       scrollbar (e.g. the Add Holiday dialog). Clip it; form content is responsive. */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Radzen form fields fill their own width — don't constrain here */
}

.et-dlg__ft[b-ittoq6kqo1] {
    padding: 12px 26px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Phone: bound the shell to the viewport so the footer can never fall below it (UI-101).
   Rz dialog is capped at 100dvh - 16px (app.css); subtract titlebar (up to ~72px with the
   touch-size close button) and the 15px content padding top and bottom (30px) plus 2px slack.
   Only .et-dlg__bd scrolls; header and footer are flex-none. vh first, dvh overrides. */
@media (max-width: 768px) {
    .et-dlg[b-ittoq6kqo1] {
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
    }
}

/* Footer standard: markup order is Cancel (Outlined, Secondary) then the primary action (Filled, Primary).
   >= 480px: right-aligned, Cancel left of primary. < 480px: stacked full width, primary above Cancel.
   Button height comes from the global design-token tiers (40 desktop / 36 touch); do not set it here. */
@media (max-width: 479.98px) {
    .et-dlg__ft[b-ittoq6kqo1] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .et-dlg__ft[b-ittoq6kqo1]  .rz-button {
        width: 100%;
    }
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtField.razor.rz.scp.css */
.et-fld[b-t4qjbz6q77] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.et-fld__label[b-t4qjbz6q77] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.et-fld__req[b-t4qjbz6q77] {
    color: var(--red);
    margin-left: 2px;
}

.et-fld__help[b-t4qjbz6q77] {
    font-size: 11.5px;
    color: var(--muted);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtFilterChip.razor.rz.scp.css */
.et-chip[b-314ioog2co] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}

.et-chip__ico[b-314ioog2co]  .rz-icon {
    font-size: 15px;
    opacity: .7;
}

.et-chip__caret[b-314ioog2co]  .rz-icon {
    font-size: 15px;
    opacity: .55;
}

.et-chip:hover[b-314ioog2co] {
    border-color: var(--ink);
}

.et-chip.active[b-314ioog2co] {
    background: var(--cyan-wash);
    border-color: var(--cyan);
    color: var(--cyan-deep);
}

.et-chip:focus-visible[b-314ioog2co] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtFormSection.razor.rz.scp.css */
.et-fcard[b-qbivhuigov] {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    margin-bottom: 16px;
}

.et-fcard__h[b-qbivhuigov] {
    margin-bottom: 18px;
}

.et-fcard__title[b-qbivhuigov] {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
}

.et-fcard__desc[b-qbivhuigov] {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 0;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtListCard.razor.rz.scp.css */
/* EtListCard — DESIGN-SYSTEM §5.3 (mock.css .list / .list__head / .list__foot). */

.et-list[b-8vuimekbug] {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.et-list__head[b-8vuimekbug] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
}

.et-list__heading[b-8vuimekbug] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.et-list__title[b-8vuimekbug] {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.et-list__count[b-8vuimekbug] {
  color: var(--muted);
  font-size: 13px;
}

.et-list__filters[b-8vuimekbug] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.et-list__foot[b-8vuimekbug] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtListRow.razor.rz.scp.css */
/* EtListRow — DESIGN-SYSTEM §5.3 (mock.css .row / .rowact). */

.et-row[b-m1wpk3zw7l] {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-2);
  transition: background .15s var(--ease);
  position: relative;
}

.et-row:hover[b-m1wpk3zw7l] {
  background: var(--surface-2);
}

/* Hover-revealed actions — kept keyboard-reachable via focus-within. */
.et-row__act[b-m1wpk3zw7l] {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .15s var(--ease);
}

.et-row:hover .et-row__act[b-m1wpk3zw7l],
.et-row__act:focus-within[b-m1wpk3zw7l] {
  opacity: 1;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtMetricTile.razor.rz.scp.css */
/* EtMetricTile — DESIGN-SYSTEM §5.2
   Uniform KPI card: fixed min-width so tiles in a row stay the same size
   regardless of value length. Number uses 26px / weight 700 — prominent
   but not overwhelming (matches the --fs-display / body ratio). */

.et-metric[b-zbk0tfhbbx] {
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 16px 18px 14px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
}

/* Icon chip */
.et-metric__ico[b-zbk0tfhbbx] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-content: center;
    background: var(--surface-2);
    color: var(--ink-soft);
    flex: none;
}

.et-metric__ico[b-zbk0tfhbbx]  .rz-icon {
    font-size: 18px;
}

/* Number */
.et-metric__num[b-zbk0tfhbbx] {
    font-family: var(--display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-top: 10px;
    color: var(--ink);
}

/* Footer: label + optional delta */
.et-metric__foot[b-zbk0tfhbbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: 6px;
}

.et-metric__label[b-zbk0tfhbbx] {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
}

.et-metric__delta[b-zbk0tfhbbx] {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--green-deep);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* Variant colour chips */
.et-metric--green .et-metric__ico[b-zbk0tfhbbx]  { background: var(--green-wash); color: var(--green-deep); }
.et-metric--gold  .et-metric__ico[b-zbk0tfhbbx]  { background: var(--cyan-wash);  color: var(--cyan-deep);  }
.et-metric--red   .et-metric__ico[b-zbk0tfhbbx]  { background: var(--red-wash);   color: var(--red);        }
.et-metric--amber .et-metric__ico[b-zbk0tfhbbx]  { background: var(--amber-wash); color: var(--amber-ink);  }

/* Number colour variants (optional) */
.et-metric--green .et-metric__num[b-zbk0tfhbbx]  { color: var(--green-deep); }
.et-metric--red   .et-metric__num[b-zbk0tfhbbx]  { color: var(--red); }
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtMoneyInput.razor.rz.scp.css */
.et-ingroup[b-suabb76qvm] {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.et-ingroup:focus-within[b-suabb76qvm] {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-ring);
}

.et-ingroup__pfx[b-suabb76qvm] {
    padding: 0 12px;
    color: var(--muted);
    font-weight: 600;
    font-size: 13.5px;
    border-right: 1px solid var(--line);
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--surface-2);
    white-space: nowrap;
    flex: none;
}

.et-ingroup__input[b-suabb76qvm] {
    border: 0;
    background: none;
    height: 100%;
    padding: 0 13px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}

.et-ingroup__input:focus[b-suabb76qvm] {
    outline: none;
}

.et-ingroup__input[b-suabb76qvm]::placeholder {
    color: #aeb0b6;
}

.et-ingroup__input:disabled[b-suabb76qvm] {
    color: var(--muted);
    cursor: not-allowed;
}

.et-ingroup__input[b-suabb76qvm]::-webkit-outer-spin-button,
.et-ingroup__input[b-suabb76qvm]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.et-ingroup__input[type=number][b-suabb76qvm] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtPageHeader.razor.rz.scp.css */
/* EtPageHeader — DESIGN-SYSTEM §4.3 (mock.css .head).
   Scoped to this component; these are EtPageHeader's own elements, so plain
   selectors apply (no ::deep needed). */

.et-head[b-1xpoctn664] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 12px;              /* title sits ~12px under the topbar at every width */
}

.et-head__lead[b-1xpoctn664] {
  min-width: 0;
}

.et-head__titlerow[b-1xpoctn664] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.et-head__title[b-1xpoctn664] {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);   /* 20px mobile → 22px desktop */
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.et-head__sub[b-1xpoctn664] {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: var(--fs-body);      /* 14px — same as body, readable on mobile */
}

.et-head__actions[b-1xpoctn664] {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}


/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSaveBar.razor.rz.scp.css */
.et-savebar[b-rx26vunmqn] {
    position: sticky;
    top: 0;
    background: rgba(246,245,241,.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 14px clamp(20px,2.6vw,34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
}

.et-savebar__l[b-rx26vunmqn] {
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.et-savebar__title[b-rx26vunmqn] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -.01em;
}

.et-savebar__dot[b-rx26vunmqn] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
}

.et-savebar__r[b-rx26vunmqn] {
    display: flex;
    gap: 10px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSearchBox.razor.rz.scp.css */
.et-search[b-i652ncwptu] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.et-search__ico[b-i652ncwptu] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.et-search__ico[b-i652ncwptu]  .rz-icon {
    font-size: 16px;
}

.et-search__input[b-i652ncwptu] {
    height: 38px;
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--r-pill);
    padding: 0 14px 0 38px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}

.et-search__input[b-i652ncwptu]::placeholder {
    color: var(--placeholder);
}

.et-search__input:focus[b-i652ncwptu] {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSectionNav.razor.rz.scp.css */
.et-fnav[b-9u1dyhwini] {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSectionNavItem.razor.rz.scp.css */
.et-fnav__item[b-uke50m63sn] {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 11px;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
    text-decoration: none;
    cursor: pointer;
}

.et-fnav__item:hover[b-uke50m63sn] {
    background: var(--surface-2);
    color: var(--ink);
}

.et-fnav__item.on[b-uke50m63sn] {
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-weight: 600;
}

.et-fnav__n[b-uke50m63sn] {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    flex: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.et-fnav__item.on .et-fnav__n[b-uke50m63sn] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--ink);
}

.et-fnav__item.done .et-fnav__n[b-uke50m63sn] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtSegmentedControl.razor.rz.scp.css */
.et-seg[b-g92cet9o64] {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
}

.et-seg__btn[b-g92cet9o64] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    background: none;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.et-seg__btn.on[b-g92cet9o64] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.et-seg__btn:focus-visible[b-g92cet9o64] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtStatusPill.razor.rz.scp.css */
.et-status[b-gfm6ak1dn8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 12.5px;
}

.et-status__dot[b-gfm6ak1dn8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.et-status--pending[b-gfm6ak1dn8] {
    background: var(--amber-wash);
    color: var(--amber-ink);
}

.et-status--pending .et-status__dot[b-gfm6ak1dn8] {
    background: var(--amber);
}

.et-status--done[b-gfm6ak1dn8] {
    background: var(--green-wash);
    color: var(--green-deep);
}

.et-status--done .et-status__dot[b-gfm6ak1dn8] {
    background: var(--green);
}

.et-status--draft[b-gfm6ak1dn8] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.et-status--draft .et-status__dot[b-gfm6ak1dn8] {
    background: var(--muted);
}

.et-status--void[b-gfm6ak1dn8] {
    background: var(--red-wash);
    color: var(--red);
}

.et-status--void .et-status__dot[b-gfm6ak1dn8] {
    background: var(--red);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtToggle.razor.rz.scp.css */
.et-toggle[b-7v4mjjlqe3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.et-toggle__tk[b-7v4mjjlqe3] {
    width: 40px;
    height: 23px;
    border-radius: 100px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    position: relative;
    transition: background .2s var(--ease);
    flex: none;
    padding: 0;
    cursor: pointer;
}

.et-toggle__tk[b-7v4mjjlqe3]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .2s var(--ease);
}

.et-toggle.on .et-toggle__tk[b-7v4mjjlqe3] {
    background: var(--green);
    border-color: var(--green);
}

.et-toggle.on .et-toggle__tk[b-7v4mjjlqe3]::after {
    left: 19px;
}

.et-toggle__label[b-7v4mjjlqe3] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
}

.et-toggle__tk:focus-visible[b-7v4mjjlqe3] {
    outline: none;
    box-shadow: 0 0 0 3px var(--cyan-ring);
}
/* _content/ETuteApp.UI.Shared/Components/DesignSystem/EtUsageBar.razor.rz.scp.css */
/* EtUsageBar — DESIGN-SYSTEM §5.4 (mock.css .usage / .bar / .legend). */

.et-usage[b-5pjhi5sejw] {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.et-usage__top[b-5pjhi5sejw] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}

.et-usage__used[b-5pjhi5sejw] {
  color: var(--ink-soft);
  font-weight: 600;
}

.et-usage__left[b-5pjhi5sejw] {
  color: var(--green-deep);
  font-weight: 700;
}

.et-usage__bar[b-5pjhi5sejw] {
  height: 7px;
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
}

.et-usage__seg[b-5pjhi5sejw] {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--c);
}

.et-usage__legend[b-5pjhi5sejw] {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.et-usage__leg[b-5pjhi5sejw] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.et-usage__leg i[b-5pjhi5sejw] {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c);
  display: inline-block;
  flex: none;
}
/* _content/ETuteApp.UI.Shared/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   ETute Fresh Campus — MainLayout scoped shell (rail + topbar)
   Ported from Equant360's MainLayout.razor.css (eq-→et-, gold→cyan).
   .et-shell is a display:contents wrapper carrying THIS component's scope, so
   Radzen child roots (.rz-sidebar/.rz-body/.rz-layout) are reached via "::deep".
   Defensive !important on Radzen roots: ETute app.css still paints them navy
   (reconciled fully in Phase-0 Step 2).
   ========================================================================== */

.et-shell[b-x0o0r5ik4y] { display: contents; }

.et-shell[b-x0o0r5ik4y]  .rz-layout { min-height: 100vh; }

/* Overlay rail — fixed drawer, collapsed by default, slides in over content -- */
.et-shell[b-x0o0r5ik4y]  .et-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(11,23,51,.35);
  animation: et-scrim-in-b-x0o0r5ik4y .18s var(--ease);
}
@keyframes et-scrim-in-b-x0o0r5ik4y { from { opacity: 0; } to { opacity: 1; } }

.et-shell[b-x0o0r5ik4y]  .et-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
  width: min(248px, 86vw);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: thin;
  transform: translateX(-100%);
  transition: transform .22s var(--ease);
}
.et-shell[b-x0o0r5ik4y]  .et-side.et-side--open {
  transform: translateX(0);
  box-shadow: 0 0 48px rgba(11,23,51,.22);
}

.et-shell[b-x0o0r5ik4y]  .et-side__brand {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 6px 20px;
}
.et-shell[b-x0o0r5ik4y]  .et-side__logo {
  width: 100%; height: auto; max-height: 88px; display: block; object-fit: contain;
}

/* Nav -------------------------------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-nav { display: flex; flex-direction: column; gap: 2px; }

.et-shell[b-x0o0r5ik4y]  .et-nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px;
  font-weight: 500; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
  /* native <button> resets (UI-MPC01): keeps the former <a> look */
  width: 100%; box-sizing: border-box; margin: 0; border: 0; background: transparent;
  font-family: inherit; line-height: inherit; text-align: left;
}
.et-shell[b-x0o0r5ik4y]  .et-nav__item .rz-icon { font-size: 18px; opacity: .8; flex: none; }
.et-shell[b-x0o0r5ik4y]  .et-nav__text { flex: 1; min-width: 0; }
.et-shell[b-x0o0r5ik4y]  .et-nav__caret { margin-left: auto; color: var(--muted); transition: transform .15s var(--ease); }
.et-shell[b-x0o0r5ik4y]  .et-nav__caret.expanded { transform: rotate(180deg); }
.et-shell[b-x0o0r5ik4y]  .et-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-nav__item.active { background: var(--cyan-wash); color: var(--cyan-deep); font-weight: 600; }
.et-shell[b-x0o0r5ik4y]  .et-nav__item.active .rz-icon { opacity: 1; }

.et-shell[b-x0o0r5ik4y]  .et-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px 7px 40px; border-radius: 10px;
  font-weight: 500; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; text-decoration: none;
  transition: background .15s var(--ease), color .15s var(--ease);
  width: 100%; box-sizing: border-box; margin: 0; border: 0; background: transparent;
  font-family: inherit; line-height: inherit; text-align: left;
}
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem .rz-icon { font-size: 16px; opacity: .7; flex: none; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem.active { background: var(--cyan-wash); color: var(--cyan-deep); font-weight: 600; }
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem.active .rz-icon { opacity: 1; }

/* Footer — "me" identity card -------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-side__footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.et-shell[b-x0o0r5ik4y]  .et-side__me {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px;
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-input); text-align: left;
}
.et-shell[b-x0o0r5ik4y]  .et-side__me:hover { background: var(--surface-2); }

/* Keyboard focus: 2px #0e7490 inside the item so the drawer's overflow clips nothing.
   !important: a global focus rule would otherwise zero the outline on these controls. */
.et-shell[b-x0o0r5ik4y]  .et-nav__item:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-nav__subitem:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-side__me:focus-visible { outline: 2px solid #0e7490 !important; outline-offset: -2px; }

/* UI-MPC03: below the breakpoint where the chat panel is a full-screen sheet, the page behind it
   is hidden from focus (visibility, not inert: the widget is not part of this layout's state). */
@media (max-width: 768px) {
  body:has(.chatbot-popup) .et-shell[b-x0o0r5ik4y]  .app-body { visibility: hidden; }
}
.et-shell[b-x0o0r5ik4y]  .et-side__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grad-mark); color: #fff;
  display: grid; place-content: center;
  font-weight: 700; font-size: 12px; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-side__id { flex: 1; min-width: 0; line-height: 1.2; }
.et-shell[b-x0o0r5ik4y]  .et-side__nm {
  font-weight: 600; font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.et-shell[b-x0o0r5ik4y]  .et-side__rl { color: var(--muted); font-size: 11.5px; display: block; }

/* Topbar ----------------------------------------------------------------- */
.et-shell[b-x0o0r5ik4y]  .et-topbar {
  display: flex; align-items: center; gap: 16px;
  height: 60px; flex: none; padding: 0 22px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger {
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: grid; place-content: center; cursor: pointer; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger .rz-icon { font-size: 20px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__crumb { font-size: 13px; color: var(--muted); white-space: nowrap; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__crumb b { color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__spacer { flex: 1; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__ask { flex: 1; display: flex; justify-content: center; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__right { display: flex; align-items: center; gap: 8px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon {
  position: relative;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: grid; place-content: center; cursor: pointer; flex: none;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon:hover { background: var(--surface-2); color: var(--ink); }
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon .rz-icon { font-size: 18px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__badge {
  position: absolute; top: 2px; right: 2px; /* UI-516: "99+" must sit fully inside the 36-38px icon box */
  min-width: 18px; height: 18px; padding: 0 3px;
  box-sizing: border-box; border-radius: 9px; background: #d03b1c; color: #fff; /* coral darkened, white on it contrast 4.9:1 */
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid var(--surface); pointer-events: none;
}

/* Phones: burger + breadcrumb + year switcher + the icon cluster cannot all fit on a
   360px row, so the bar overflowed and clipped the right-hand icons. Tighten the frame
   and drop the breadcrumb — the page's own heading already names the section. */
@media (max-width: 640px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar { gap: 8px; padding: 0 12px; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__crumb { display: none; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right { gap: 6px; min-width: 0; }
  /* AcademicYearSwitcher carries an inline Style="min-width:180px;max-width:240px",
     and an inline style outranks a stylesheet rule — hence !important here. Without
     overriding min-width the switcher stays 180px wide however small the screen gets. */
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown { min-width: 0 !important; max-width: 150px !important; }
}
/* Profile avatar: the RadzenProfileMenu <ul> is a flex child that could shrink to 0 when the
   bar was crowded, leaving only the caret. Never let it (or the gravatar) shrink. */
.et-shell[b-x0o0r5ik4y]  .et-topbar__right ul.rz-profile-menu { flex: none; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-gravatar { flex: none; min-width: 32px; min-height: 32px; }
/* UI-517: burger, bell, help and avatar share one box per breakpoint (38px, 36px at <=880px). */
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-gravatar { width: 38px; height: 38px; }
@media (max-width: 880px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar__burger,
  .et-shell[b-x0o0r5ik4y]  .et-topbar__icon,
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-gravatar { width: 36px; height: 36px; }
}
/* Very narrow phones: the year text ('2026-27' + caret) needs ~124px, so the switcher keeps
   a floor (inline min-width:180px must be overridden, hence !important) and the lower-priority
   Help icon and the ask bar shed space instead. */
@media (max-width: 430px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown { min-width: 124px !important; max-width: 124px !important; flex: none; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right .et-topbar__icon[title="Help Center"] { display: none; }
}
/* Phones: the Ask control is a fixed 36px icon button (never shrinks, UI-023). Width budget at
   360px, measured offsets (bar edge to burger 22px each side) -> inner 360-2*(8+14)=316+8=324:
   burger 34 + ask 36 + year 124 + bell 34 + avatar menu 62 = 290; gaps 2x6 (bar) + 2x4 (right)
   = 20; total 310 <= 324 (14px spare). At 440: + help 34, year 150, one more 4px gap = 374
   <= 396. Before: 38+36+132+38+62+2*8+2*6 = 334 > 316, so Ask was squeezed to 2px. */
@media (max-width: 640px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar { gap: 6px; padding: 0 8px; }
  /* flex:none: the cluster takes its content width instead of shrinking 4px under it (UI-074); the
     other items are already flex:none/min-width:0, so the free space comes out of the spacer. */
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right { gap: 4px; flex: none; min-width: auto; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__ask { flex: none; min-width: 36px; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__ask .et-ask-bar { flex: none; width: 36px; min-width: 36px; max-width: 36px; }
}

/* UI-625: at 360px the right group ended 4px past the bar. Take 8px out of the gaps (2 bar gaps
   and 2 right-group gaps, 2px each) rather than shrink the year switcher below its 124px floor. */
@media (max-width: 380px) {
  .et-shell[b-x0o0r5ik4y]  .et-topbar { gap: 4px; }
  .et-shell[b-x0o0r5ik4y]  .et-topbar__right { gap: 2px; }
}

/* Topbar profile menu — force the global dark RadzenProfileMenu onto the light bar */
.et-shell[b-x0o0r5ik4y]  .et-topbar__right ul.rz-profile-menu,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Shared topbar keyboard focus ring (UI-MPE01). !important: Radzen and the layout set outline none or the browser default on these controls. */
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar .et-ask-bar:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right ul.rz-profile-menu:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-link:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-wrapper:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-dropdown:has(:focus-visible) {
  outline: 2px solid #0e7490 !important;
  outline-offset: 2px;
}
.et-shell[b-x0o0r5ik4y]  .et-topbar__burger:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__icon:focus-visible { border-radius: 12px; }
.et-shell[b-x0o0r5ik4y]  .et-topbar .et-ask-bar:focus-visible { box-shadow: none !important; }
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-link:focus-visible,
.et-shell[b-x0o0r5ik4y]  .et-topbar__right .rz-profile-menu .rz-navigation-item-wrapper:focus-visible { border-radius: 12px; }

/* Scroll model — only the body viewport scrolls -------------------------- */
.et-shell[b-x0o0r5ik4y]  .rz-body,
.et-shell[b-x0o0r5ik4y]  .app-body { overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .et-shell[b-x0o0r5ik4y]  .et-side { transition: none; }
  .et-shell[b-x0o0r5ik4y]  .et-nav__item,
  .et-shell[b-x0o0r5ik4y]  .et-nav__caret { transition: none; }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtActionCard.razor.rz.scp.css */
.et-action-card[b-joh596x9ja] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
    color: var(--ink);
}

.et-action-card__head[b-joh596x9ja] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.et-action-card__title[b-joh596x9ja] {
    flex: 1;
}

.et-action-card__timer[b-joh596x9ja] {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.et-action-card__meta[b-joh596x9ja] {
    display: flex;
}

.et-action-card__badge[b-joh596x9ja] {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: var(--line-2);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
}

.et-action-card__preview[b-joh596x9ja] {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    background: var(--surface);
    color: var(--ink-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.et-action-card__edit[b-joh596x9ja] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    resize: vertical;
}

.et-action-card__buttons[b-joh596x9ja] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.et-action-card__btn[b-joh596x9ja] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.et-action-card__btn:disabled[b-joh596x9ja] {
    opacity: 0.6;
    cursor: not-allowed;
}

.et-action-card__btn--confirm[b-joh596x9ja] {
    border-color: transparent;
    background: var(--coral);
    color: var(--surface);
    font-weight: 700;
}

.et-action-card__btn--confirm:hover:not(:disabled)[b-joh596x9ja] {
    background: var(--coral-soft);
}

.et-action-card__receipt[b-joh596x9ja] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-input);
    font-weight: 600;
}

.et-action-card__receipt--ok[b-joh596x9ja] {
    background: var(--green-wash);
    color: var(--green-deep);
}

.et-action-card__receipt--fail[b-joh596x9ja] {
    background: var(--red-wash);
    color: var(--red);
}

.et-action-card__receipt--muted[b-joh596x9ja] {
    background: var(--line-2);
    color: var(--muted);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAnswerCard.razor.rz.scp.css */
/* EtAnswerCard — the four renderable answer shapes (NILI Ask Bar Build Spec §2c). Tokens from
   design-tokens.css; the only literal hex here are the cyan-family bar tints (#67e8f9/#a5f3fc) that
   the spec calls out by exact value and design-tokens.css does not carry (--cyan/--cyan-bright cover
   only the first two of the three). No dark mode. */

.et-answer-card[b-cah1ne8146] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--r-xl, 20px);
}

.et-answer-card--warm[b-cah1ne8146] {
    background: var(--grad-warm, linear-gradient(120deg, #FFF3E8, #EAFBFD));
    border: 1px solid var(--warm-line, #fbe3cc);
}

.et-answer-card--plain[b-cah1ne8146] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
}

.et-answer-card__spark[b-cah1ne8146] {
    font-size: 15px;
    line-height: 1.3;
    flex-shrink: 0;
}

.et-answer-card--warm .et-answer-card__spark[b-cah1ne8146] {
    color: #c2410c; /* UI-044: >= 4.5:1 on light fills (was #f97316 = 2.8:1) */
}

.et-answer-card--plain .et-answer-card__spark[b-cah1ne8146] {
    color: var(--muted, #64748b);
}

.et-answer-card__body[b-cah1ne8146] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.et-answer-card__head[b-cah1ne8146] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.et-answer-card__tools[b-cah1ne8146] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---- read-aloud — muted/functional when idle, cyan-deep (same token EtAskInput's submit uses) while
   speaking; coral is reserved for the spark + the card's one primary action, never this button. ---- */

.et-answer-card__readaloud[b-cah1ne8146] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    cursor: pointer;
    font-size: 16px;
}

.et-answer-card__readaloud:hover[b-cah1ne8146] {
    background: var(--surface, #fff);
}

.et-answer-card__readaloud--speaking[b-cah1ne8146] {
    color: var(--cyan-deep, #0891b2);
}

.et-answer-card__copy[b-cah1ne8146] {
    width: auto;
    min-width: 28px;
    padding: 0 6px;
    gap: 4px;
}

.et-answer-card__copy-label[b-cah1ne8146] {
    font-size: 12px;
    line-height: 1;
}

.et-answer-card__bignum[b-cah1ne8146] {
    font-family: var(--display, 'Sora', sans-serif);
    font-size: var(--fs-display, 22px);
    font-weight: 700;
    color: var(--ink, #0B1733);
}

.et-answer-card__headline[b-cah1ne8146] {
    font-family: var(--display, 'Sora', sans-serif);
    font-size: var(--fs-h3, 15px);
    font-weight: 600;
    color: var(--ink, #0B1733);
    margin: 0;
}

.et-answer-card__sentences[b-cah1ne8146] {
    margin: 0;
    font-size: var(--fs-body, 14px);
    color: var(--ink-soft, #33415c);
    text-wrap: pretty;
}

.et-answer-card__evidence[b-cah1ne8146] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    overflow-x: auto;
    max-width: 100%;
}

/* ---- Shape B: cyan-family-only bars, never a rainbow series ---- */

.et-answer-card__bars[b-cah1ne8146] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.et-answer-card__bar-row[b-cah1ne8146] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-ui, 13.5px);
    min-width: 220px;
}

.et-answer-card__bar-label[b-cah1ne8146] {
    width: 56px;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-answer-card__bar-track[b-cah1ne8146] {
    flex: 1;
    height: 10px;
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    overflow: hidden;
}

.et-answer-card__bar-fill[b-cah1ne8146] {
    height: 100%;
    border-radius: var(--r-pill, 999px);
}

.et-answer-card__bar-fill--0[b-cah1ne8146] { background: var(--cyan, #06b6d4); }
.et-answer-card__bar-fill--1[b-cah1ne8146] { background: #67e8f9; }
.et-answer-card__bar-fill--2[b-cah1ne8146] { background: #a5f3fc; }

.et-answer-card__bar-value[b-cah1ne8146] {
    width: 64px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 600;
    color: var(--ink, #0B1733);
}

/* ---- Shape C: named-people rows, max 3 visible + "see all" ---- */

.et-answer-card__people[b-cah1ne8146] {
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-card__people-row[b-cah1ne8146] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.et-answer-card__people-name[b-cah1ne8146] {
    font-weight: 600;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-answer-card__people-trailing[b-cah1ne8146] {
    color: var(--muted, #64748b);
    font-weight: 600;
    flex-shrink: 0;
}

.et-answer-card__see-all[b-cah1ne8146] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: var(--surface-2, #f7fcfd);
    color: var(--cyan-deep, #0891b2);
    font-weight: 600;
    font-size: var(--fs-ui, 13.5px);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* ---- Shape B: multi-column data table (>2 columns) — compact density, collapsed to 5 rows ---- */

.et-answer-card__wide-table-scroll[b-cah1ne8146] {
    overflow-x: auto;
    max-width: 100%;
}

.et-answer-card__wide-table-el[b-cah1ne8146] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-card__wide-table-el th[b-cah1ne8146] {
    padding: 6px 10px;
    text-align: left;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--muted, #64748b);
    border-bottom: 1px solid var(--line, #e3eef2);
    white-space: nowrap;
}

.et-answer-card__wide-table-el td[b-cah1ne8146] {
    padding: 6px 10px;
    color: var(--ink, #0B1733);
    border-bottom: 1px solid var(--line-2, #eef4f6);
    white-space: nowrap;
}

.et-answer-card__wide-table-el tbody tr:nth-child(even)[b-cah1ne8146] {
    background: var(--surface-2, #f7fcfd);
}

.et-answer-card__wide-table-el tbody tr:last-child td[b-cah1ne8146] {
    border-bottom: none;
}

.et-answer-card__wide-cell--numeric[b-cah1ne8146] {
    text-align: right;
    font-weight: 600;
}

/* ---- status pills — icon + colour together, never colour alone ---- */

.et-answer-card__status[b-cah1ne8146] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill, 999px);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    flex-shrink: 0;
}

.et-answer-card__status--overdue[b-cah1ne8146],
.et-answer-card__status--error[b-cah1ne8146] {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
}

.et-answer-card__status--partpaid[b-cah1ne8146] {
    background: var(--amber-wash, #fef3e2);
    color: var(--amber-ink, #92400e);
}

.et-answer-card__status--paid[b-cah1ne8146] {
    background: var(--green-wash, #e7f8f0);
    color: var(--green-deep, #047857);
}

.et-answer-card__status--hidden[b-cah1ne8146] {
    background: var(--gray-100, #f1f5f9);
    color: var(--muted, #64748b);
}

/* _content/ETuteApp.UI.Shared/Components/Nili/EtAnswerFeedback.razor.rz.scp.css */
/* EtAnswerFeedback — thumbs + five fixed reasons. Tokens only, no new hex (design-tokens.css). */

.et-answer-feedback[b-7k0ryd6rhs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.et-answer-feedback__thumbs[b-7k0ryd6rhs] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Same action-row style as the Copy / read-aloud buttons in EtAnswerCard. */
.et-answer-feedback__thumb[b-7k0ryd6rhs] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

.et-answer-feedback__thumb:hover:not(:disabled)[b-7k0ryd6rhs] {
    background: var(--surface);
}

.et-answer-feedback__thumb[aria-pressed="true"][b-7k0ryd6rhs] {
    background: var(--cyan-wash);
    color: var(--cyan-deep);
}

.et-answer-feedback__thumb:focus-visible[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.et-answer-feedback__panel[b-7k0ryd6rhs] {
    max-width: 480px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface-2);
}

.et-answer-feedback__hint[b-7k0ryd6rhs] {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: var(--fs-sm, 12.5px);
}

.et-answer-feedback__reasons[b-7k0ryd6rhs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.et-answer-feedback__reason[b-7k0ryd6rhs] {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

/* Visually hidden but focusable: the native radio group keeps its arrow-key behaviour. */
.et-answer-feedback__radio[b-7k0ryd6rhs] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.et-answer-feedback__pill[b-7k0ryd6rhs] {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-ui, 13.5px);
}

.et-answer-feedback__radio:checked + .et-answer-feedback__pill[b-7k0ryd6rhs] {
    border-color: var(--cyan);
    color: var(--cyan-deep);
}

.et-answer-feedback__radio:focus-visible + .et-answer-feedback__pill[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.et-answer-feedback__submit[b-7k0ryd6rhs] {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: var(--r);
    background: var(--cyan);
    color: var(--surface);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.et-answer-feedback__submit:disabled[b-7k0ryd6rhs] {
    opacity: .5;
    cursor: not-allowed;
}

.et-answer-feedback__submit:focus-visible[b-7k0ryd6rhs] {
    outline: 2px solid var(--cyan-deep);
    outline-offset: 2px;
}

.et-answer-feedback__error[b-7k0ryd6rhs] {
    font-size: var(--fs-xs, 11.5px);
    color: var(--danger);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskBar.razor.rz.scp.css */
/* EtAskBar — topbar "Ask Etute" trigger. Geometry & states per NILI Ask Bar Build Spec §2a. */

.et-ask-bar[b-88lrj4gzbq] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 320px;
    max-width: 520px;
    height: 36px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface-2, #f7fcfd);
    padding: 0 14px;
    cursor: pointer;
    font: inherit;
    transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}

.et-ask-bar:hover[b-88lrj4gzbq] {
    background: #fff;
    border-color: var(--cyan-wash-2, #cffafe);
}

.et-ask-bar:focus-visible[b-88lrj4gzbq] {
    /* Topbar ring (2px #0e7490) comes from MainLayout.razor.css; no second box-shadow ring. */
    box-shadow: none;
}

.et-ask-bar__spark[b-88lrj4gzbq] {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: #c2410c; /* UI-044: contrast 5.0:1 on #f7fcfd (was #f97316 = 2.71:1) */
}

.et-ask-bar__placeholder[b-88lrj4gzbq] {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 13.5px;
    color: var(--placeholder, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-bar__shortcut[b-88lrj4gzbq] {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted, #64748b);
    border: 1px solid var(--line, #e3eef2);
    background: #fff;
    border-radius: 6px;
    padding: 1px 6px;
}

/* No keyboard on touch devices — the shortcut chip is meaningless there. */
@media (pointer: coarse) {
    .et-ask-bar__shortcut[b-88lrj4gzbq] {
        display: none;
    }
}

/* Collapse to a 36×36 circular ✦ icon-only button below 1100px — same click target, same action. */
@media (max-width: 1100px) {
    .et-ask-bar[b-88lrj4gzbq] {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding: 0;
        justify-content: center;
    }

    .et-ask-bar__placeholder[b-88lrj4gzbq],
    .et-ask-bar__shortcut[b-88lrj4gzbq] {
        display: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskEmptyState.razor.rz.scp.css */
/* EtAskEmptyState — empty state slotted into EtAskSheet's body. Geometry per NILI Ask Bar Build
   Spec §2b "step 2 — Open, nothing typed". */

.et-ask-empty[b-ab5859oykx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.et-ask-empty__intro[b-ab5859oykx] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink-soft, #33415c);
    line-height: 1.4;
}

.et-ask-empty__spark[b-ab5859oykx] {
    color: #c2410c; /* UI-044: 5.0:1 on white (was #f97316 = 2.8:1) */
    font-size: 15px;
    line-height: 1.4;
}

.et-ask-empty__section[b-ab5859oykx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-ask-empty__label[b-ab5859oykx] {
    font-size: var(--fs-xs, 11.5px);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #64748b);
    font-weight: 700;
}

.et-ask-empty__row[b-ab5859oykx] {
    height: 38px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    background: var(--surface-2, #f7fcfd);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #0B1733);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.et-ask-empty__row:hover[b-ab5859oykx] {
    border-color: var(--cyan, #06b6d4);
}

.et-ask-empty__recent-row[b-ab5859oykx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink-soft, #33415c);
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.et-ask-empty__recent-row:hover .et-ask-empty__row-text[b-ab5859oykx] {
    color: var(--cyan-deep, #0e7490);
}

.et-ask-empty__row-icon[b-ab5859oykx] {
    color: var(--cyan-deep, #0e7490);
    font-size: 14px;
    flex-shrink: 0;
}

.et-ask-empty__row-icon--muted[b-ab5859oykx] {
    color: var(--placeholder, #64748b);
}

.et-ask-empty__row-text[b-ab5859oykx] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-ask-empty__row-hint[b-ab5859oykx] {
    margin-left: auto;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.et-ask-empty__row-when[b-ab5859oykx] {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-sm, 12.5px);
    flex-shrink: 0;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskHistoryDetail.razor.rz.scp.css */
.et-ask-history-detail__status[b-rceez9z59k] {
    color: var(--muted, #64748b);
    font-size: 13px;
    padding: 20px 4px;
    text-align: center;
}

.et-ask-history-detail__header[b-rceez9z59k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px 6px;
    min-width: 0;
}

.et-ask-history-detail__title[b-rceez9z59k] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink, #0B1733);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-history-detail__meta[b-rceez9z59k] {
    font-size: 12px;
    color: var(--muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-history-detail[b-rceez9z59k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
    overflow-y: auto;
}

.et-ask-history-detail__q-row[b-rceez9z59k] {
    display: flex;
    justify-content: flex-end;
}

.et-ask-history-detail__q-bubble[b-rceez9z59k] {
    background: var(--cyan-wash, #ecfeff);
    color: var(--ink, #0B1733);
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    max-width: 82%;
    white-space: pre-wrap;
}

.et-ask-history-detail__a-row[b-rceez9z59k] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 92%;
}

.et-ask-history-detail__a-spark[b-rceez9z59k] {
    color: #c2410c; /* UI-044: 5.0:1 on white (was #f97316 = 2.8:1) */
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 3px;
}

.et-ask-history-detail__a-body[b-rceez9z59k] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft, #33415c);
    max-width: 100%;
    overflow-x: auto;
}

.et-ask-history-detail__a-body :deep(p)[b-rceez9z59k] {
    margin: 0 0 8px;
}

.et-ask-history-detail__a-body :deep(p:last-child)[b-rceez9z59k] {
    margin-bottom: 0;
}

.et-ask-history-detail__a-body :deep(table)[b-rceez9z59k] {
    border-collapse: collapse;
    font-size: 12.5px;
    width: max-content;
    max-width: 100%;
}

.et-ask-history-detail__a-body :deep(th)[b-rceez9z59k],
.et-ask-history-detail__a-body :deep(td)[b-rceez9z59k] {
    border: 1px solid var(--line, #e3eef2);
    padding: 5px 8px;
    text-align: left;
    white-space: nowrap;
}

.et-ask-history-detail__a-body :deep(.et-ask-history-detail__cell--num)[b-rceez9z59k] {
    text-align: right;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskHistoryList.razor.rz.scp.css */
.et-ask-history-list[b-xurqethjhn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
}

.et-ask-history-list__search[b-xurqethjhn] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    background: var(--surface);
}

.et-ask-history-list__item[b-xurqethjhn] {
    position: relative;
    display: flex;
    align-items: center;
}

.et-ask-history-list__menu-btn[b-xurqethjhn] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    border-radius: var(--r);
    padding: 4px 8px;
    cursor: pointer;
    font-size: var(--fs-h2);
    line-height: 1;
}

.et-ask-history-list__menu-btn:hover[b-xurqethjhn],
.et-ask-history-list__menu-btn:focus-visible[b-xurqethjhn] {
    background: var(--surface-2);
    color: var(--ink);
}

.et-ask-history-list__menu[b-xurqethjhn] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-width: 120px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 4px;
}

.et-ask-history-list__menu-item[b-xurqethjhn] {
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    padding: 7px 10px;
    border-radius: var(--r-input);
    cursor: pointer;
}

.et-ask-history-list__menu-item:hover[b-xurqethjhn],
.et-ask-history-list__menu-item:focus-visible[b-xurqethjhn] {
    background: var(--surface-2);
}

.et-ask-history-list__inline[b-xurqethjhn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    flex-wrap: wrap;
}

.et-ask-history-list__rename-input[b-xurqethjhn] {
    flex: 1 1 140px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 6px 8px;
    font-family: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
}

.et-ask-history-list__prompt[b-xurqethjhn] {
    flex: 1 1 auto;
    font-size: var(--fs-ui);
    color: var(--ink);
}

.et-ask-history-list__action[b-xurqethjhn] {
    border: 1px solid var(--cyan-deep);
    background: var(--cyan-deep);
    color: var(--surface);
    border-radius: var(--r-input);
    padding: 5px 12px;
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.et-ask-history-list__action--danger[b-xurqethjhn] {
    border-color: var(--red);
    background: var(--red);
}

.et-ask-history-list__action--quiet[b-xurqethjhn] {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
}

.et-ask-history-list__more[b-xurqethjhn] {
    align-self: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--r-pill);
    padding: 6px 16px;
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.et-ask-history-list__more:hover[b-xurqethjhn] {
    background: var(--surface-2);
}

.et-ask-history-list__empty[b-xurqethjhn] {
    color: var(--muted, #64748b);
    font-size: 13px;
    padding: 20px 4px;
    text-align: center;
}

.et-ask-history-list__group-label[b-xurqethjhn] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    padding: 0 6px 6px;
}

.et-ask-history-list__row[b-xurqethjhn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: var(--r, 12px);
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-history-list__row:hover[b-xurqethjhn],
.et-ask-history-list__row--active[b-xurqethjhn] {
    background: var(--surface-2, #f7fcfd);
}

.et-ask-history-list__row-title[b-xurqethjhn] {
    font-size: 13.5px;
    color: var(--ink, #0B1733);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.et-ask-history-list__row-time[b-xurqethjhn] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskInput.razor.rz.scp.css */
/* EtAskInput — free-text question row inside the ask sheet's empty state. Geometry per NILI Ask
   Bar Build Spec §2b "step 2" header row; submit button is #0891b2, never #06b6d4 (WCAG AA contrast
   for white text on the fill). */

.et-ask-input-row[b-j9w2ik9c98] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.et-ask-input[b-j9w2ik9c98] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    background: var(--surface-2, #f7fcfd);
    padding: 0 6px 0 12px;
    transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease);
}

.et-ask-input:focus-within[b-j9w2ik9c98] {
    border-color: var(--cyan-deep, #0891b2);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .16);
}

.et-ask-input__spark[b-j9w2ik9c98] {
    flex-shrink: 0;
    font-size: 15px;
    color: #c2410c; /* UI-044: 5.0:1 on white (was #f97316 = 2.8:1) */
}

.et-ask-input__field[b-j9w2ik9c98] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink, #0B1733);
}

.et-ask-input__field[b-j9w2ik9c98]::placeholder {
    color: var(--placeholder, #64748b);
}

.et-ask-input__field:disabled[b-j9w2ik9c98] {
    color: var(--muted, #64748b);
}

.et-ask-input__mic[b-j9w2ik9c98] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    position: relative;
}

.et-ask-input__mic:hover:not(:disabled)[b-j9w2ik9c98] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-input__mic:disabled[b-j9w2ik9c98] {
    color: var(--line, #e3eef2);
    cursor: not-allowed;
}

/* Listening: same cyan-deep token the submit button uses, PLUS a filled icon (see .razor markup) and a
   pulse ring — status is never conveyed by color alone. Never coral: that's reserved for the ✦ spark
   and primary create/save actions, not a functional control like the mic. */
.et-ask-input__mic--listening[b-j9w2ik9c98] {
    color: var(--cyan-deep, #0e7490);
    background: rgba(8, 145, 178, .1);
}

.et-ask-input__mic--listening[b-j9w2ik9c98]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pill, 999px);
    border: 1.5px solid var(--cyan-deep, #0891b2);
    animation: et-ask-mic-pulse-b-j9w2ik9c98 1.4s ease-out infinite;
}

@keyframes et-ask-mic-pulse-b-j9w2ik9c98 {
    0% {
        opacity: .7;
        transform: scale(.85);
    }
    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

.et-ask-input__submit[b-j9w2ik9c98] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: var(--cyan-deep, #0891b2);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-input__submit:hover:not(:disabled)[b-j9w2ik9c98] {
    background: #0e7490;
}

.et-ask-input__submit:disabled[b-j9w2ik9c98] {
    background: var(--line, #e3eef2);
    color: var(--muted, #64748b);
    cursor: not-allowed;
}

/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskSheet.razor.rz.scp.css */
/* EtAskSheet — overlay shell. Geometry per NILI Ask Bar Build Spec §2a "Sheet".
   --grad-warm is reserved for the answer card (a later task) and must never appear here. */

.et-ask-sheet__scrim[b-yd8jlfg5ji] {
    position: fixed;
    inset: 0;
    background: rgba(11, 23, 51, .18);
    z-index: 1300;
}

.et-ask-sheet[b-yd8jlfg5ji] {
    position: fixed;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(11, 23, 51, .08), 0 30px 60px rgba(11, 23, 51, .10));
    outline: none;
    overflow: hidden;

    /* Desktop: 760px centred panel, 28px below the 60px topbar, own scrolling body. */
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 140px);
    border-radius: var(--r-xl, 20px);

    animation: et-ask-sheet-enter-desktop-b-yd8jlfg5ji .14s var(--ease, cubic-bezier(.32, .72, 0, 1));
}

.et-ask-sheet__handle[b-yd8jlfg5ji] {
    display: none;
}

.et-ask-sheet__body[b-yd8jlfg5ji] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

@keyframes et-ask-sheet-enter-desktop-b-yd8jlfg5ji {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes et-ask-sheet-enter-phone-b-yd8jlfg5ji {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Phone: full-width bottom sheet, drag handle, top corners only. */
@media (max-width: 640px) {
    .et-ask-sheet__scrim[b-yd8jlfg5ji] {
        background: rgba(11, 23, 51, .22);
    }

    .et-ask-sheet[b-yd8jlfg5ji] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        max-height: 84vh;
        border-radius: var(--r-xl, 20px) var(--r-xl, 20px) 0 0;
        animation-name: et-ask-sheet-enter-phone-b-yd8jlfg5ji;
    }

    .et-ask-sheet__handle[b-yd8jlfg5ji] {
        display: block;
        flex-shrink: 0;
        position: relative;
        width: 100%;
        height: 24px;
        touch-action: none;
        cursor: grab;
    }

    .et-ask-sheet__handle[b-yd8jlfg5ji]::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: var(--r-pill, 999px);
        background: var(--line, #e3eef2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .et-ask-sheet[b-yd8jlfg5ji] {
        animation: none;
        transition: opacity .14s linear;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtAskSheetContent.razor.rz.scp.css */
/* EtAskSheetContent — persistent header: New chat (left), History + Close (right), one flex row, one
   owner. History and Close are cascaded/rendered here together so they share the same icon-button size
   and vertical centring — the history icon is a muted/functional control, same treatment as EtAskInput's
   mic button — never coral, that's reserved for the ✦ spark and the one primary create/save action. */
.et-ask-content__header[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    padding: 6px 6px 0 10px;
}

.et-ask-content__spark[b-gbf2khdp0h] {
    color: #c2410c; /* UI-044: contrast 5.0:1 on #fff (was var(--coral) #f97316 = 2.80:1) */
    margin-right: 6px;
}

.et-ask-content__title[b-gbf2khdp0h] {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: var(--fs-h3);
    color: var(--ink);
    white-space: nowrap; /* UI-045: stay on one line at 360 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.et-ask-content__beta[b-gbf2khdp0h] {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--amber);
    border-radius: var(--r-pill);
    background: var(--amber-wash);
    color: var(--amber-ink);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

.et-ask-content__header-spacer[b-gbf2khdp0h] {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 480px) {
    .et-ask-content__spark[b-gbf2khdp0h] { margin-right: 4px; }
    .et-ask-content__beta[b-gbf2khdp0h] { margin-left: 6px; }
    .et-ask-content__newchat[b-gbf2khdp0h] { margin-left: 4px; padding: 6px; }
    .et-ask-content__fullpage[b-gbf2khdp0h] { padding: 6px; }
}

/* UI-045: at <=400px the secondary actions go icon-only (label visually hidden, aria-label/title kept)
   so the title keeps its room; every target stays >= 36px. */
@media (max-width: 400px) {
    .et-ask-content__label[b-gbf2khdp0h] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .et-ask-content__fullpage[b-gbf2khdp0h],
    .et-ask-content__newchat[b-gbf2khdp0h] {
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
    }
    .et-ask-content__header-right[b-gbf2khdp0h] { gap: 0; }
}

.et-ask-content__header-right[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.et-ask-content__icon-btn[b-gbf2khdp0h] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.et-ask-content__icon-btn:hover:not(:disabled)[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-content__icon-btn:disabled[b-gbf2khdp0h] {
    color: var(--line, #e3eef2);
    cursor: not-allowed;
}

.et-ask-content__newchat[b-gbf2khdp0h] {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--muted, #64748b);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
}

.et-ask-content__newchat:hover[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink-soft, #33415c);
}

.et-ask-content__fullpage[b-gbf2khdp0h] {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.et-ask-content__fullpage:hover[b-gbf2khdp0h] {
    background: var(--surface-2);
    color: var(--ink-soft);
}

/* ---- FullPage surface: history column + main column (thread above a pinned composer) ----
   Height comes from the parent flex chain only (the /ask page provides a definite-height flex
   container); never 100vh/dvh. */
.et-ask-content--fullpage[b-gbf2khdp0h] {
    --et-ask-fp-pad: 12px;
    position: relative;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: var(--canvas);
    font-family: var(--body);
}

.et-ask-content--fullpage:not(.et-ask-content--open)[b-gbf2khdp0h] {
    grid-template-columns: 0 minmax(0, 1fr);
}

.et-ask-content__open-failed[b-gbf2khdp0h] {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font-size: 13px;
}

.et-ask-content__history-col[b-gbf2khdp0h] {
    min-height: 0;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
    outline: none;
}

.et-ask-content--fullpage:not(.et-ask-content--open) .et-ask-content__history-col[b-gbf2khdp0h] {
    display: none;
}

.et-ask-content__history-backdrop[b-gbf2khdp0h] {
    display: none;
}

.et-ask-content__main[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding-bottom: calc(var(--et-ask-fp-pad) + env(safe-area-inset-bottom));
}

.et-ask-content__main-body[b-gbf2khdp0h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.et-ask-content__main-inner[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 840px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0 var(--et-ask-fp-pad);
    box-sizing: border-box;
}

.et-ask-content__main-inner[b-gbf2khdp0h]  > *:not(.et-ask-content__thread) {
    flex-shrink: 0;
}

.et-ask-content--fullpage .et-ask-content__thread[b-gbf2khdp0h] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.et-ask-content--fullpage .et-ask-content__history[b-gbf2khdp0h] {
    padding-left: 0;
    padding-right: 0;
}

.et-ask-content--fullpage .et-ask-content__header[b-gbf2khdp0h] {
    padding: var(--et-ask-fp-pad) var(--et-ask-fp-pad) 0;
}

.et-ask-content--fullpage .et-ask-content__title[b-gbf2khdp0h] {
    font-family: var(--display);
}

/* Narrow: the column becomes a bottom sheet, closed until the toggle opens it. */
@media (max-width: 768px) {
    .et-ask-content--fullpage[b-gbf2khdp0h],
    .et-ask-content--fullpage:not(.et-ask-content--open)[b-gbf2khdp0h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .et-ask-content--fullpage.et-ask-content--open .et-ask-content__history-col[b-gbf2khdp0h] {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70%;
        z-index: 2;
        border-right: none;
        border-top: 1px solid var(--line);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        box-shadow: var(--shadow-lg);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .et-ask-content--fullpage.et-ask-content--open .et-ask-content__history-backdrop[b-gbf2khdp0h] {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--scrim);
    }
}

/* ---- live conversation thread ---- */

.et-ask-content__retry[b-gbf2khdp0h] {
    margin-top: 8px;
    border: 1px solid var(--line, #e3eef2);
    background: transparent;
    color: var(--ink-soft, #33415c);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
}

.et-ask-content__retry:hover[b-gbf2khdp0h] {
    background: var(--surface-2, #f7fcfd);
}

.et-ask-content__sr[b-gbf2khdp0h] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: -1px;
    padding: 0;
    border: 0;
}

.et-ask-content__thread[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 4px 10px;
    overflow-y: auto;
}

.et-ask-content__turn[b-gbf2khdp0h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Earlier turns stay visible but recede so the newest answer keeps visual priority — same treatment
   used in the alignment mockup. Kept subtle (opacity only) to stay above accessible contrast. */
.et-ask-content__turn--past[b-gbf2khdp0h] {
    opacity: .85;
}

.et-ask-content__live[b-gbf2khdp0h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.et-ask-content__live-avatar[b-gbf2khdp0h] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill, 999px);
    background: var(--coral-wash);
    color: var(--coral);
    font-size: 15px;
}

.et-ask-content__live-text[b-gbf2khdp0h] {
    flex: 1;
    min-width: 0;
    color: var(--ink);
    font-size: var(--fs-ui, 13.5px);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 8px;
}

.et-ask-content__q-row[b-gbf2khdp0h] {
    display: flex;
    justify-content: flex-end;
}

.et-ask-content__q-bubble[b-gbf2khdp0h] {
    background: var(--cyan-wash, #ecfeff);
    color: var(--ink, #0B1733);
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 13px;
    border-radius: 14px 14px 4px 14px;
    max-width: 82%;
}

.et-ask-content__history[b-gbf2khdp0h] {
    padding: 4px 18px 18px;
}

.et-ask-content__history-back[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--muted, #64748b);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 0;
    cursor: pointer;
}

.et-ask-content__history-back:hover[b-gbf2khdp0h] {
    color: var(--ink-soft, #33415c);
}

.et-ask-content__continue-btn[b-gbf2khdp0h] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--cyan-deep, #0e7490);
    border-radius: var(--r-pill, 999px);
    background: var(--cyan-wash, #ecfeff);
    color: var(--cyan-deep, #0e7490);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
}

.et-ask-content__continue-btn:hover[b-gbf2khdp0h] {
    background: var(--cyan-wash-2, #d7f4fa);
}

.et-ask-content__continue-btn:focus-visible[b-gbf2khdp0h] {
    outline: 2px solid var(--cyan-deep, #0e7490);
    outline-offset: 2px;
}

.et-ask-content__history-placeholder[b-gbf2khdp0h] {
    color: var(--muted, #64748b);
    font-size: 13px;
    margin: 10px 0 0;
}

/* Scope chips — the pills this conversation is scoped to, shown for its whole life.
   Wraps rather than scrolls: three labels can exceed a phone-width sheet, and a horizontal
   scroll inside the sheet is easy to miss and easy to trap a touch in. */
.et-ask-content__scope[b-gbf2khdp0h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px 0;
}

.et-ask-content__scope-chip[b-gbf2khdp0h] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid var(--nili-pill-border, #e2e8f0);
    border-radius: 999px;
    background: var(--nili-pill-bg, #f8fafc);
    color: var(--muted, #64748b);
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* UI-036: error block sat outside padded content; same padding as .et-ask-empty */
.nili-pill-error[b-gbf2khdp0h] {
    padding: 16px 18px;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtFollowUpChips.razor.rz.scp.css */
/* EtFollowUpChips — "Then ask" row. Tokens only, no new hex (design-tokens.css). */

.et-follow-up-chips[b-yr1xkqvkco] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-follow-up-chips__label[b-yr1xkqvkco] {
    font-size: var(--fs-xs, 11.5px);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted, #64748b);
    font-weight: 700;
}

.et-follow-up-chips__list[b-yr1xkqvkco] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.et-follow-up-chips__chip[b-yr1xkqvkco] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.et-follow-up-chips__chip:hover[b-yr1xkqvkco] {
    border-color: var(--cyan, #06b6d4);
    color: var(--cyan-deep, #0891b2);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtNiliBetaFooter.razor.rz.scp.css */
.et-nili-beta-footer[b-7zu6zrtg0k] {
    margin: 4px 18px 0;
    padding-bottom: 10px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
}

/* The global chatbot FAB (ChatbotWidget: fixed, right 10px, up to 56px wide) sits over the footer's right end on phones. */
@media (max-width: 640px) {
    .et-nili-beta-footer[b-7zu6zrtg0k] {
        padding-right: calc(64px + env(safe-area-inset-right, 0px));
    }
}

.et-nili-beta-footer a[b-7zu6zrtg0k] {
    color: var(--cyan-deep);
    text-decoration: underline;
}
/* _content/ETuteApp.UI.Shared/Components/Nili/EtThinking.razor.rz.scp.css */
/* EtThinking — ticked step list + shimmer while a turn streams. Geometry follows the same
   design-token file EtAskBar/EtAskSheet/EtAskEmptyState use (design-tokens.css). */

.et-thinking[b-tn68ijv3x5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.et-thinking__steps[b-tn68ijv3x5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-thinking__step[b-tn68ijv3x5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--muted, #64748b);
}

.et-thinking__step--done[b-tn68ijv3x5] {
    color: var(--ink, #0B1733);
}

.et-thinking__mark[b-tn68ijv3x5] {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: var(--fs-sm, 12.5px);
    color: var(--placeholder, #94a3b8);
}

.et-thinking__step--done .et-thinking__mark[b-tn68ijv3x5] {
    color: var(--cyan-deep, #0891b2);
}

.et-thinking__shimmer[b-tn68ijv3x5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.et-thinking__shimmer-line[b-tn68ijv3x5] {
    height: 12px;
    border-radius: var(--r-pill, 999px);
    background: linear-gradient(90deg, var(--surface-2, #f7fcfd) 25%, var(--line, #e3eef2) 50%, var(--surface-2, #f7fcfd) 75%);
    background-size: 200% 100%;
    animation: et-thinking-shimmer-b-tn68ijv3x5 1.4s ease-in-out infinite;
}

.et-thinking__shimmer-line--wide[b-tn68ijv3x5] {
    width: 80%;
}

.et-thinking__shimmer-line--narrow[b-tn68ijv3x5] {
    width: 50%;
}

.et-thinking__still-working[b-tn68ijv3x5] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.et-thinking__cancel[b-tn68ijv3x5] {
    align-self: flex-start;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.et-thinking__cancel:hover[b-tn68ijv3x5] {
    border-color: var(--coral, #f97316);
    color: var(--coral, #f97316);
}

@keyframes et-thinking-shimmer-b-tn68ijv3x5 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .et-thinking__shimmer-line[b-tn68ijv3x5] {
        animation: none;
        background: var(--line, #e3eef2);
    }
}
/* _content/ETuteApp.UI.Shared/Components/Nili/NiliChartCard.razor.rz.scp.css */
/* Reference-line overlay for horizontal-bar charts (see NiliChartCard.razor.cs comments): a mixed-orientation
   Radzen series doesn't align with a flipped bar axis, so the line is a positioned overlay instead. Uses the
   same --muted/--surface tokens as the rest of the Nili components, so it follows light/dark automatically. */

.nili-chart-plot[b-r25pkqercj] {
    position: relative;
}

.nili-reference-line[b-r25pkqercj] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--muted, #64748b);
    pointer-events: none;
    z-index: 1;
}

.nili-reference-label[b-r25pkqercj] {
    position: absolute;
    top: 0;
    left: 4px;
    white-space: nowrap;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    background: var(--surface, #fff);
    padding: 0 4px;
    border-radius: var(--r, 12px);
}
/* _content/ETuteApp.UI.Shared/Components/Nili/NiliPillPicker.razor.rz.scp.css */
/* NiliPillPicker — inline scope picker (NILI Pills D11/D12). Sizing per /design-tokens: 36px
   compact touch targets, chip-radius pills matching NiliFollowUpChips' nili- look. */

.nili-picker[b-pud6nytjw3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.nili-picker__quick-starts[b-pud6nytjw3],
.nili-picker__grid[b-pud6nytjw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nili-quick-start[b-pud6nytjw3] {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--cyan-deep, #0891b2);
    border-radius: 999px;
    background: var(--surface-2, #f7fcfd);
    color: var(--cyan-deep, #0891b2);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.nili-quick-start:hover[b-pud6nytjw3] {
    background: var(--cyan-tint, #e0f7fa);
}

.nili-pill[b-pud6nytjw3] {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: 999px;
    background: var(--surface-2, #f7fcfd);
    color: var(--ink, #0B1733);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
}

.nili-pill--selected[b-pud6nytjw3] {
    background: var(--coral, #f97316);
    border-color: var(--coral, #f97316);
    color: #fff;
}

.nili-pill--dimmed[b-pud6nytjw3] {
    opacity: .4;
    cursor: default;
}

.nili-picker__confirm[b-pud6nytjw3] {
    align-self: flex-start;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: var(--r, 12px);
    background: var(--coral, #f97316);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.nili-picker__confirm:disabled[b-pud6nytjw3] {
    background: var(--placeholder, #94a3b8);
    cursor: not-allowed;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/ClassScheduler.razor.rz.scp.css */
/* Resume banner and save-state indicator for the transactional timetable wizard.
   Both are plain elements in ClassScheduler's own markup, so scoped CSS reaches them directly --
   no ::deep, which only works through a scoped ancestor and never lands on a child component's
   own tags. */

.tt-resume[b-w9elea1t7t] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--amber, #d97706);
    border-radius: var(--r-card, 12px);
    background: var(--amber-wash, #fef3e2);
}

.tt-resume-icon[b-w9elea1t7t] {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--amber, #d97706);
    flex: 0 0 auto;
}

.tt-resume-copy[b-w9elea1t7t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;      /* lets the text wrap instead of forcing the row wider */
    flex: 1 1 auto;
}

.tt-resume-title[b-w9elea1t7t] {
    font-weight: 600;
    color: var(--ink, #0f172a);
}

.tt-resume-meta[b-w9elea1t7t] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.tt-resume-actions[b-w9elea1t7t] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* UI.Shared also renders inside the MAUI WebView, so this has to survive a phone width.
   Stack rather than let the actions squeeze the message to one word per line. */
@media (max-width: 640px) {
    .tt-resume[b-w9elea1t7t] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .tt-resume-actions[b-w9elea1t7t] {
        width: 100%;
        justify-content: flex-end;
    }
}

.tt-savestate[b-w9elea1t7t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
    padding: 2px 0 6px;
}

/* A save that did not land is the one thing here worth interrupting for: with no intermediate
   writes, the draft is the only copy of the user's work.

   Rendered as a proper inline alert rather than bare red text. Raw red words floating under the
   header read as a stack trace escaping into the UI; a bordered strip with an icon and the action
   attached looks deliberate and, more usefully, gives the reader the way out. */
.tt-savestate[data-state="failed"][b-w9elea1t7t],
.tt-savestate[data-state="superseded"][b-w9elea1t7t] {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--amber, #d97706);
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fef3e2);
    color: var(--ink, #0f172a);
    font-weight: 500;
}

/* Amber, not red. Neither state has lost anything - the draft is intact and the fix is one click
   away - and red for a recoverable condition spends alarm the next real emergency needs. */
.tt-savestate-icon[b-w9elea1t7t] {
    font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
    font-size: 18px;
    line-height: 1;
    color: var(--amber, #d97706);
    flex: 0 0 auto;
}

.tt-savestate-action[b-w9elea1t7t] {
    flex: 0 0 auto;
    margin-left: auto;
    border: 1px solid var(--amber, #d97706);
    background: #fff;
    color: var(--ink, #0f172a);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: var(--fs-sm, 12.5px);
    cursor: pointer;
}

.tt-savestate-action:hover[b-w9elea1t7t] {
    background: var(--amber-wash, #fef3e2);
}

@media (max-width: 640px) {
    .tt-savestate[data-state="failed"][b-w9elea1t7t],
    .tt-savestate[data-state="superseded"][b-w9elea1t7t] {
        flex-wrap: wrap;
    }

    .tt-savestate-action[b-w9elea1t7t] {
        margin-left: 0;
    }
}

/* UI-017 / UI-018. Scoped CSS only tags native elements, never a Radzen component's root, so the
   old `.class-scheduler-stack ::deep` prefix (a RadzenStack) never matched. .tt-scope is a native
   div (display: contents, no layout effect) that carries the scope attribute for ::deep. */
.tt-scope[b-w9elea1t7t] {
    display: contents;
}

.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title,
.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title .rz-button-text {
    /* Link look: Radzen text-variant info colour was cyan 2.43:1 on white; #0e7490 is 5.4:1 on white and keeps the clickable cue. !important beats the Radzen variant selectors. */
    color: #0e7490 !important;
    cursor: pointer;
}

.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title:hover,
.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title:hover .rz-button-text,
.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title:focus-visible,
.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title:focus-visible .rz-button-text {
    text-decoration: underline;
}

.tt-scope[b-w9elea1t7t]  .class-schedule-records .timetable-title:focus-visible {
    outline: 2px solid #0e7490;
    outline-offset: 2px;
}

.tt-scope[b-w9elea1t7t]  .class-schedule-records .input-label {
    font-size: 12px !important; /* app.css sets 10px with a 3-class selector; beat it for sure */
}

.tt-scope[b-w9elea1t7t]  .class-schedule-header .rz-button {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 32px;
}

.tt-scope[b-w9elea1t7t]  .class-timetable-header .rz-datepicker input.rz-inputtext {
    padding-inline: 6px 2px;
    font-size: 13px;
    letter-spacing: 0;
}

/* _content/ETuteApp.UI.Shared/Components/Pages/Common/TeacherSchedule.razor.rz.scp.css */
/* One teacher's week, shown in a side dialog.
   Same Fresh Campus token system as the timetable wizard steps, so opening this from step 1 or
   step 3 does not feel like landing in a different product. */

.ts-root[b-j5wf75drdz] {
    font-family: var(--body, inherit);
    color: var(--ink, #0B1733);
}

/* ---------- headline ---------- */
.ts-summary[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ts-stat[b-j5wf75drdz] {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 10px 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-left: 3px solid var(--cyan, #06b6d4);
    border-radius: var(--r-input, 10px);
}

.ts-stat--bad[b-j5wf75drdz] {
    border-color: var(--red, #e11d48);
    border-left-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

.ts-stat-value[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ts-stat-label[b-j5wf75drdz] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: #4B5563; /* UI-MPD20: AA on the drawer tint (muted token was 4.1:1) */
}

.ts-stat--warn[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

/* ---------- verdict ---------- */
/* One band carrying the best thing we currently have to say: the AI's reading when it has
   arrived, the plain fact about clashes when it has not. Colour is load-bearing here, so the
   severity word is always spelled out in the chip too. */
.ts-verdict[b-j5wf75drdz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e3eef2);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
}

.ts-verdict--action[b-j5wf75drdz] {
    border-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

.ts-verdict--watch[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

.ts-verdict--fine[b-j5wf75drdz] {
    border-color: var(--green, #059669);
    background: var(--green-wash, #e8f7f1);
}

.ts-verdict--combined[b-j5wf75drdz] {
    border-color: var(--blue, #2563eb);
    background: var(--blue-wash, #eaf1fd);
}

.ts-verdict--pending[b-j5wf75drdz] {
    border-left-color: var(--line, #e3eef2);
}

.ts-verdict-chip[b-j5wf75drdz] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid currentColor;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ts-verdict-body[b-j5wf75drdz] {
    min-width: 0;
}

.ts-verdict-text[b-j5wf75drdz] {
    font-size: var(--fs-ui, 13.5px);
    line-height: 1.45;
}

.ts-verdict--pending .ts-verdict-text[b-j5wf75drdz] {
    color: var(--muted, #64748b);
}

.ts-verdict-note[b-j5wf75drdz] {
    margin-top: 4px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-concerns[b-j5wf75drdz] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: var(--fs-sm, 12.5px);
    line-height: 1.5;
}

.ts-concerns li + li[b-j5wf75drdz] {
    margin-top: 2px;
}

/* ---------- the week ---------- */
/* Scrolls inside its own container: a wide week must never push the dialog sideways. */
.ts-grid-scroll[b-j5wf75drdz] {
    width: 100%;
    overflow-x: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
}

.ts-grid[b-j5wf75drdz] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm, 12.5px);
}

.ts-grid th[b-j5wf75drdz],
.ts-grid td[b-j5wf75drdz] {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    white-space: nowrap;
}

.ts-grid thead th[b-j5wf75drdz] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2, #f7fcfd);
    border-bottom: 1px solid var(--line, #e3eef2);
}

.ts-grid tbody tr:last-child td[b-j5wf75drdz] {
    border-bottom: 0;
}

.ts-slot-name[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.ts-slot-time[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    color: var(--placeholder, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.ts-day-head[b-j5wf75drdz],
.ts-day[b-j5wf75drdz] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    border-right: 1px solid var(--line, #e3eef2);
    font-family: var(--display, inherit);
    font-weight: 600;
}

.ts-day-head[b-j5wf75drdz] {
    z-index: 3;
    background: var(--surface-2, #f7fcfd);
    font-size: var(--fs-xs, 11.5px);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

/* ---------- cells ---------- */
.ts-cell[b-j5wf75drdz] {
    border-left: 3px solid transparent;
}

.ts-cell--teaching[b-j5wf75drdz] {
    background: var(--cyan-wash, #ecfeff);
    border-left-color: var(--cyan, #06b6d4);
}

/* A teacher in two rooms at once is the single most important thing this view can surface -
   UNLESS they meant it. See .ts-cell--combined below. */
.ts-cell--clash[b-j5wf75drdz] {
    background: var(--red-wash, #fdeaef);
    border-left-color: var(--red, #e11d48);
}

/* Two sections taught together, on purpose. Green, not red: nothing is wrong here, and painting a
   deliberate arrangement in alarm colours is how a teacher learns to ignore the colour that means
   they really are double-booked. */
.ts-cell--combined[b-j5wf75drdz] {
    background: var(--green-wash, #ecfdf5);
    border-left-color: var(--green, #047857);
}

.ts-combined-label[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    color: var(--green, #047857);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ts-cell--break[b-j5wf75drdz],
.ts-break-col[b-j5wf75drdz] {
    background: var(--gray-50, #f8fafc);
}

.ts-room[b-j5wf75drdz] {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.ts-subject[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    color: #4B5563;
    line-height: 1.3;
}

.ts-clash-count[b-j5wf75drdz] {
    display: block;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 700;
    color: #BE123C; /* UI-MPD20: AA on the clash wash (the red token was 4.07:1) */
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ts-more[b-j5wf75drdz] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: #4B5563;
}

.ts-break[b-j5wf75drdz] {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-style: italic;
}

.ts-free[b-j5wf75drdz] {
    color: var(--placeholder, #94a3b8);
}

/* ---------- workload panel ---------- */
/* Successor to the eight-tile "wellness score". Same presence on the page; every value here is
   calculated, carries a unit, and states its direction in the tooltip. */
.ts-metrics-head[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.ts-metrics-note[b-j5wf75drdz] {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ts-metrics-grid[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.ts-metrics[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-suggest[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-tile[b-j5wf75drdz] {
    padding: 9px 12px;
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r-input, 10px);
}

.ts-tile--alert[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    background: var(--amber-wash, #fef3e2);
}

.ts-tile-value[b-j5wf75drdz] {
    display: block;
    font-family: var(--display, inherit);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #0f172a);
}

.ts-tile-label[b-j5wf75drdz] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-tile-sub[b-j5wf75drdz] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    opacity: .8;
}

/* ---------- capacity: where this teacher COULD go ---------- */
/* Two columns because the panel is full width and these two questions are asked together:
   "when is she free" is useless without "what is she allowed to teach". The left column is
   narrower: a week of time chips needs far less room than a list of classes. */
.ts-capacity[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(320px, 3fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .ts-capacity[b-j5wf75drdz] {
        grid-template-columns: 1fr;
    }
}

.ts-capacity-col[b-j5wf75drdz] {
    padding: 12px 14px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r, 12px);
    background: var(--canvas, #fff);
}

.ts-capacity-empty[b-j5wf75drdz] {
    padding: 10px 12px;
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.ts-freedays[b-j5wf75drdz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-freeday[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.ts-freeday[b-j5wf75drdz] {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.ts-freeday:last-child[b-j5wf75drdz] {
    border-bottom: 0;
    padding-bottom: 0;
}

.ts-freeday-name[b-j5wf75drdz] {
    flex: 0 0 34px;
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    color: var(--muted, #64748b);
}

.ts-freeday-slots[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ts-chip[b-j5wf75drdz] {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--cyan-wash, #e8f7fb);
    border: 1px solid var(--line-2, #eef4f6);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

.ts-eligibility[b-j5wf75drdz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-elig-grade[b-j5wf75drdz] {
    padding: 8px 10px;
    border: 1px solid var(--line-2, #eef4f6);
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
}

.ts-elig-grade-head[b-j5wf75drdz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ts-elig-grade-name[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
}

.ts-badge[b-j5wf75drdz] {
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--line, #e3eef2);
    background: var(--canvas, #fff);
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    white-space: nowrap;
}

.ts-badge--unused[b-j5wf75drdz] {
    border-color: var(--amber, #d97706);
    color: var(--amber, #d97706);
}

.ts-elig-rows[b-j5wf75drdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* One pill per section+subject. Reads as a set at a glance, where a stack of full-width rows
   forced you to read every line to find the one that differed. */
.ts-elig-pill[b-j5wf75drdz] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line, #e3eef2);
    background: var(--canvas, #fff);
    font-size: var(--fs-xs, 11.5px);
}

.ts-elig-pill--unused[b-j5wf75drdz] {
    border-style: dashed;
    color: var(--muted, #64748b);
}

.ts-elig-pill-section[b-j5wf75drdz] {
    font-weight: 700;
    font-family: var(--display, inherit);
}

.ts-elig-pill-subject[b-j5wf75drdz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-elig-pill-count[b-j5wf75drdz] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cyan-deep, #0e7490);
}

.ts-more-link[b-j5wf75drdz] {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cyan-deep, #0e7490);
    font: inherit;
    font-size: var(--fs-sm, 12.5px);
    cursor: pointer;
    text-decoration: underline;
}

/* ---------- suggestions ---------- */
.ts-suggest-grid[b-j5wf75drdz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.ts-suggest-card[b-j5wf75drdz] {
    padding: 10px 12px;
    border: 1px solid var(--cyan, #06b6d4);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--cyan-wash, #e8f7fb);
}

.ts-suggest-when[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-weight: 700;
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

.ts-suggest-target[b-j5wf75drdz] {
    margin-top: 1px;
    font-size: var(--fs-sm, 12.5px);
}

.ts-suggest-reason[b-j5wf75drdz] {
    margin-top: 4px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.ts-empty-hint[b-j5wf75drdz] {
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

/* ---------- empty state ---------- */
.ts-empty[b-j5wf75drdz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--surface-2, #f7fcfd);
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r, 12px);
}

.ts-empty-title[b-j5wf75drdz] {
    font-family: var(--display, inherit);
    font-weight: 600;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Dashboard/AdminDashboard.razor.rz.scp.css */
/* Six KPI tiles: a smaller flex-basis than the global 190px so they spread 6 across from ~880px up
   (global basis wrapped 5+1 at 1032) and stay 2-per-row on phones (3 x 140 does not fit under ~430px). */
.admin-dash-kpis[b-nesw8nf64u]  .et-stat-strip__item {
    flex-basis: 140px;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Design/DesignShowcase.razor.rz.scp.css */
.et-gallery[b-jevln8sxj4] {
    padding: 20px 24px 80px;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--canvas);
    min-height: 100vh;
}

.et-sec[b-jevln8sxj4] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-top: 16px;
}

.et-sec > h3[b-jevln8sxj4] {
    font-family: var(--display);
    font-size: var(--fs-h3);
    color: var(--ink);
    margin: 0 0 14px;
}

.et-sec .row[b-jevln8sxj4] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.et-sec .col[b-jevln8sxj4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tiles[b-jevln8sxj4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.formgrid[b-jevln8sxj4] {
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 24px;
    align-items: start;
}

.et-demo-input[b-jevln8sxj4] {
    width: 100%;
    font: inherit;
    font-size: var(--fs-ui);
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-input);
    padding: 9px 12px;
}

@media (max-width: 1024px) {
    .tiles[b-jevln8sxj4] { grid-template-columns: repeat(2, 1fr); }
    .formgrid[b-jevln8sxj4] { grid-template-columns: 1fr; }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Fees/FeeReceiptView.razor.rz.scp.css */
.receipt-body[b-s00x139ukl] {
    position: relative;
}

.receipt-voided[b-s00x139ukl] {
    opacity: 0.75;
}

.receipt-void-stamp[b-s00x139ukl] {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    font-size: 5rem;
    font-weight: 800;
    letter-spacing: 0.5rem;
    color: rgba(211, 47, 47, 0.28);
    border: 6px solid rgba(211, 47, 47, 0.28);
    padding: 0.25rem 1.5rem;
    pointer-events: none;
    z-index: 2;
}

.receipt-void-note[b-s00x139ukl] {
    text-align: center;
    color: #d32f2f;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* A void stamp that vanishes on print is worse than none — the paper is the thing that
   circulates. Force colour rendering so the watermark survives the print stylesheet. */
@media print {
    .receipt-void-stamp[b-s00x139ukl],
    .receipt-void-note[b-s00x139ukl] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/LessonPlanning/LessonPlanning.razor.rz.scp.css */
/* Most lesson-plan styles live in wwwroot/css/app.css. Rules here are scoped overrides (UI-022/025/026). */

/* UI-073: app.css gives .lp-page-content 1rem on all sides, which inset the panels 16px from the filter card; the scoped selector outranks it. */
.lp-page-content[b-lu8l46ap0k] { padding-left: 0; padding-right: 0; }

/* UI-022 contrast. #64748b on white is 4.76:1; #1e293b on the info-lighter wash is >12:1. */
.lp-title-label[b-lu8l46ap0k] { color: #64748b; }
.lp-page-content[b-lu8l46ap0k]  .lp-card-date { color: #64748b; }
/* 0.72rem = 11.5px; was 0.68rem (10.9px). White at .85 alpha on the card header fill. */
.lp-page-content[b-lu8l46ap0k]  .lp-card-subject { font-size: .72rem; color: rgba(255,255,255,.9); }
/* !important: Radzen's info/lighter alert colour rule outranks a scoped selector. */
.lesson-plan-html-stack[b-lu8l46ap0k]  .rz-alert.rz-info,
.lp-dialog-body[b-lu8l46ap0k]  .rz-alert.rz-info { color: #1e293b !important; }
.lesson-plan-html-stack[b-lu8l46ap0k]  .rz-alert.rz-info .rz-alert-icon,
.lesson-plan-html-stack[b-lu8l46ap0k]  .rz-alert.rz-info .rz-icon,
.lp-dialog-body[b-lu8l46ap0k]  .rz-alert.rz-info .rz-alert-icon,
.lp-dialog-body[b-lu8l46ap0k]  .rz-alert.rz-info .rz-icon { color: #1e293b !important; }

/* UI-025: the disabled Grade/Subject controls must read as disabled. */
.lesson-plan-control.rz-state-disabled[b-lu8l46ap0k],
.lesson-plan-control.rz-dropdown.rz-state-disabled[b-lu8l46ap0k],
.lesson-plan-control:disabled[b-lu8l46ap0k] {
    opacity: .6 !important; /* beats the app.css control rule */
    background-color: #eef0f2 !important;
    cursor: not-allowed;
}

/* UI-025: edit-mode title inputs must show "Literacy (Reading and Writing)" without clipping. */
.lp-chapter-input[b-lu8l46ap0k] { width: 100%; min-width: 0; }
.lp-chapter-input[b-lu8l46ap0k]  input.rz-textbox,
.lp-title-section[b-lu8l46ap0k]  input.rz-textbox {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
}
@media (max-width: 880px) {
    .lp-chapter-input[b-lu8l46ap0k]  input.rz-textbox,
    .lp-title-section[b-lu8l46ap0k]  input.rz-textbox {
        font-size: 1rem !important; /* inline Style on the textbox sets 1.25rem */
    }
}
@media (max-width: 480px) {
    .lp-chapter-input[b-lu8l46ap0k]  input.rz-textbox,
    .lp-title-section[b-lu8l46ap0k]  input.rz-textbox {
        font-size: .8125rem !important;
        font-weight: 500 !important; /* inline style sets 600 */
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

@media (max-width: 400px) {
    .lp-chapter-input[b-lu8l46ap0k]  input.rz-textbox,
    .lp-title-section[b-lu8l46ap0k]  input.rz-textbox {
        font-size: .75rem !important;
        padding-left: .375rem;
        padding-right: .375rem;
        letter-spacing: -.01em;
    }
}

/* UI-026: the Generate dialog footer rules live in wwwroot/css/app.css (.lp-dialog-*): dialog content is outside this component's scope. */
/* Keep the spinner arrows clear of the typed value. */
.lp-dialog-body[b-lu8l46ap0k]  .rz-numeric .rz-numeric-input { padding-right: 2.25rem; }
/* _content/ETuteApp.UI.Shared/Components/Pages/LessonPlanning/LessonPlanTabView.razor.rz.scp.css */
/* Most lesson-plan styles live in wwwroot/css/app.css. Rules here are scoped overrides (UI-022/025). */

/* UI-025: "Discard changes" stays on one line; the bar already wraps whole buttons. */
.lp-action-bar[b-vk86xyjby3]  .rz-button { white-space: nowrap; }
/* _content/ETuteApp.UI.Shared/Components/Pages/LessonPlanning/PendingApprovalsPanel.razor.rz.scp.css */
/* Column widths sum to ~1110px (Curriculum 160px so its header clears the filter icon, UI-061): at every viewport the grid keeps at least that width and the wrapper
   scrolls it horizontally, instead of squeezing columns or clipping the View column (UI-023, UI-042).
   Scoped ::deep because the grid is a Radzen child. */
.pa-scroll[b-qqep18a508] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll cue: overlays on a static wrapper sit above the opaque th/td, which hide background shadows. */
@media (max-width: 1180px) {
    .pa-scroll-wrap[b-qqep18a508] {
        position: relative;
        container-type: inline-size;
    }

    .pa-scroll-wrap[b-qqep18a508]::before,
    .pa-scroll-wrap[b-qqep18a508]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 14px;
        pointer-events: none;
        z-index: 3;
    }

    /* Without scroll-driven animations the left fade cannot know the scroll position, so only the right-edge hint shows. */
    .pa-scroll-wrap[b-qqep18a508]::before {
        left: 0;
        display: none;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
    }

    .pa-scroll-wrap[b-qqep18a508]::after {
        right: 0;
        background: linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0));
    }

    /* Left fade only once scrolled right, right fade only while content remains: both driven by .pa-scroll's scroll position. */
    @supports (animation-timeline: scroll()) {
        .pa-scroll-wrap[b-qqep18a508] {
            timeline-scope: --pa-x;
        }

        .pa-scroll[b-qqep18a508] {
            scroll-timeline: --pa-x inline;
        }

        .pa-scroll-wrap[b-qqep18a508]::before,
        .pa-scroll-wrap[b-qqep18a508]::after {
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: --pa-x;
        }

        .pa-scroll-wrap[b-qqep18a508]::before {
            display: block;
            animation-name: pa-fade-in-b-qqep18a508;
            animation-range: 0 40px;
        }

        .pa-scroll-wrap[b-qqep18a508]::after {
            animation-name: pa-fade-out-b-qqep18a508;
            animation-range: calc(100% - 40px) 100%;
        }
    }

    /* position:sticky binds to the nearest ancestor with overflow != visible. Radzen (and app.css <=880px
       `.rz-data-grid-data { overflow-x:auto !important }`) make .rz-data-grid/.rz-datatable a clipping box, so the
       pager stuck to that instead of .pa-scroll and left the card when scrolled. Same fix as the Time Table grid. */
    .pa-scroll[b-qqep18a508]  .rz-data-grid,
    .pa-scroll[b-qqep18a508]  .rz-datatable {
        overflow: visible !important;
    }

    /* The pager lives inside the 1110px grid: pin it to the card width so it does not scroll away or clip. */
    .pa-scroll[b-qqep18a508]  .rz-pager {
        position: sticky;
        left: 0;
        width: min(100%, calc(100vw - 32px));
        width: 100cqw;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pa-scroll[b-qqep18a508]  .rz-pager .rz-pager-element,
    .pa-scroll[b-qqep18a508]  .rz-pager .rz-paginator-element {
        min-width: 32px;
    }
}

@keyframes pa-fade-in-b-qqep18a508 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pa-fade-out-b-qqep18a508 {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (max-width: 479.98px) {
    .pa-scroll[b-qqep18a508]  .rz-pager-summary {
        display: none;
    }
}

.pa-scroll[b-qqep18a508]  .rz-data-grid,
.pa-scroll[b-qqep18a508]  .rz-datatable {
    min-width: 1110px;
}

/* One scroller (the wrapper) at every width, so header and body move together. */
.pa-scroll[b-qqep18a508]  .rz-data-grid-data,
.pa-scroll[b-qqep18a508]  .rz-datatable-data {
    overflow-x: visible !important;
}

/* UI-053: the 120px Curriculum header cell clipped its filter icon; tighter cell padding and a
   non-shrinking icon keep title + icon inside the column without changing column widths. */
.pa-scroll[b-qqep18a508]  th {
    padding-inline: 6px;
}

/* UI-061: a filterable header reserves the icon's width (+4px) at its end, so the shrinking title
   gives way and the icon stays inside the cell instead of past its border. */
.pa-scroll[b-qqep18a508]  th:has(.rz-grid-filter-icon) {
    padding-inline-end: 24px;
}

/* UI-060: title and filter icon sit side by side in a flex row, so the icon never overlaps the label. */
.pa-scroll[b-qqep18a508]  th .rz-cell-data {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pa-scroll[b-qqep18a508]  th .rz-cell-data .rz-column-title {
    min-width: 0;
    flex: 1 1 auto;
}

.pa-scroll[b-qqep18a508]  th .rz-grid-filter-icon {
    flex: none;
    position: static;
    margin: 0;
}

/* beats Radzen nowrap/ellipsis so headers read in full or wrap */
.pa-scroll[b-qqep18a508]  .rz-column-title,
.pa-scroll[b-qqep18a508]  th .rz-column-title-content,
.pa-scroll[b-qqep18a508]  th {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Nili/Ask.razor.rz.scp.css */
.nili-ask-page__header[b-osgqt9pnmt] {
    flex: none;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px;
}

.nili-ask-page__back[b-osgqt9pnmt] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nili-ask-page[b-osgqt9pnmt]  .et-ask-content {
    flex: 1 1 auto;
    min-height: 0;
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepAssignTeachers.razor.rz.scp.css */
/* Step 1 — teacher coverage matrix.
   ---------------------------------------------------------------------------
   This screen answers two questions and nothing else: WHERE IS THERE NO
   TEACHER, and WHO IS OVER THEIR HOURS. Everything here is arranged so those
   two answers are visible without reading.

   Design notes:
   - Uses the Fresh Campus tokens (--canvas/--ink/--line/--cyan/--green/--amber/
     --red and their washes) rather than the generic --rz-base-* greys. The
     earlier pass boxed every cell in a 1px grey border, which made a status
     report read as a spreadsheet.
   - State is carried by a soft wash plus a 3px left accent, the same language
     step 3 uses for subject colour, so the two screens feel related.
   - Numbers use tabular figures so hour columns line up vertically.
*/

/* ---------- shared panel ---------- */
.wf[b-16hqd3y09q] {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    box-shadow: var(--shadow, 0 2px 5px rgba(11,23,51,.05));
    padding: 14px 16px;
    width: 100%;
    overflow-x: auto;
}

/* ---------- problem banner ---------- */
.problem-banner[b-16hqd3y09q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    border: 1px solid var(--red, #e11d48);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--red-wash, #fdeaef);
    color: var(--ink, #0B1733);
    padding: 10px 14px;
    font-size: var(--fs-ui, 13.5px);
}

/* ---------- the matrix ---------- */
.coverage-matrix[b-16hqd3y09q] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--body, inherit);
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

/* Hairlines between rows only. No cell grid: colour carries the state. */
.coverage-matrix th[b-16hqd3y09q],
.coverage-matrix td[b-16hqd3y09q] {
    padding: 9px 12px;
    vertical-align: top;
    text-align: left;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.coverage-matrix th[b-16hqd3y09q] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2, #f7fcfd);
    border-bottom: 1px solid var(--line, #e3eef2);
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    white-space: nowrap;
}

/* Subject column: the row's anchor, so it stays put on a wide grade. */
/* "Section" prefix on the column heads: present, but subordinate to the letter. */
.coverage-matrix .mx-col-kind[b-16hqd3y09q] {
    opacity: .6;
    font-weight: 500;
}

.coverage-matrix .mx-subject-head[b-16hqd3y09q],
.coverage-matrix td.mx-subject[b-16hqd3y09q] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface, #fff);
    border-right: 1px solid var(--line, #e3eef2);
    font-weight: 600;
    color: var(--ink, #0B1733);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coverage-matrix .mx-subject-head[b-16hqd3y09q] {
    z-index: 3;
    background: var(--surface-2, #f7fcfd);
}

.coverage-matrix tr:last-child td[b-16hqd3y09q] {
    border-bottom: 0;
}

/* ---------- cell states ----------
   Only a cell with NO eligible teacher is interactive. A covered cell already names its
   teacher, so opening an explanation panel on it was pure noise -- and offering a pointer
   cursor on every cell invited a click that had nothing to say. */
.mx-cell[b-16hqd3y09q] {
    border-left: 3px solid transparent;
    transition: background-color .15s var(--ease, ease), border-color .15s var(--ease, ease);
}

.mx-cell--empty[b-16hqd3y09q] {
    cursor: pointer;
}

.mx-cell--empty:hover[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    filter: brightness(.98);
}

.mx-cell--empty:focus-visible[b-16hqd3y09q] {
    outline: 2px solid var(--red, #e11d48);
    outline-offset: -2px;
}

/* exactly one eligible teacher — settled */
.mx-cell--ok[b-16hqd3y09q] {
    background: var(--green-wash, #e7f8f0);
    border-left-color: var(--green, #059669);
}

/* several eligible — the generator will choose */
.mx-cell--multi[b-16hqd3y09q] {
    background: var(--amber-wash, #fef3e2);
    border-left-color: var(--amber, #d97706);
}

/* Deliberately more than one teacher: the user said "either may take it". A decision, not a
   gap -- so it must not wear the amber that means "you still have to look at this". */
.mx-cell--shared[b-16hqd3y09q] {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

/* Switched off: the subject needs no teachers in this timetable.
   Deliberately NOT red -- an unstaffed cell here is an intention, not a problem. The row
   recedes so the eye skips it while scanning for real gaps. Nothing is cleared underneath:
   switching back on restores the row exactly as it was. */
.mx-row-off .mx-subject[b-16hqd3y09q] {
    opacity: .55;
}

.mx-cell--off[b-16hqd3y09q] {
    background: repeating-linear-gradient(
        135deg,
        var(--gray-50, #f8fafc),
        var(--gray-50, #f8fafc) 6px,
        var(--surface, #fff) 6px,
        var(--surface, #fff) 12px);
    cursor: default;
}

.mx-off[b-16hqd3y09q] {
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-style: italic;
}

/* nobody can teach this subject in this section */
.mx-cell--empty[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    border-left-color: var(--red, #e11d48);
}

.mx-empty[b-16hqd3y09q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--red, #e11d48);
    font-weight: 700;
    font-size: var(--fs-xs, 11.5px);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mx-teacher[b-16hqd3y09q] {
    display: block;
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.3;
}

.mx-hours[b-16hqd3y09q] {
    display: block;
    margin-top: 2px;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

/* ---------- hours strip ---------- */
.hours-strip[b-16hqd3y09q] {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line, #e3eef2);
}

.hrsbox[b-16hqd3y09q] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-ui, 13.5px);
    font-variant-numeric: tabular-nums;
}

.hrsbox th[b-16hqd3y09q],
.hrsbox td[b-16hqd3y09q] {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

.hrsbox th[b-16hqd3y09q] {
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    background: var(--surface-2, #f7fcfd);
    white-space: nowrap;
}

.hrsbox tr:last-child td[b-16hqd3y09q] {
    border-bottom: 0;
}

.hrsbox .muted[b-16hqd3y09q] {
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
}

.hrsbox .bad-t[b-16hqd3y09q] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

/* Second term of the total: hours the teacher already has in other grades. Sits under the
   figure so the arithmetic reads -- this grade + elsewhere = total. */
.hrs-elsewhere[b-16hqd3y09q] {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-xs, 11.5px);
    font-weight: 400;
    color: var(--muted, #64748b);
}

.hrs-row-warn[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
}

.hrs-row-warn td:first-child[b-16hqd3y09q] {
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

/* ---------- teacher load rail ---------- */
.teacher-load-rail[b-16hqd3y09q] {
    max-height: 480px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    padding: 4px;
}

.rail-item[b-16hqd3y09q] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: var(--r-input, 10px);
    cursor: pointer;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    transition: background-color .15s var(--ease, ease);
}

.rail-item:last-child[b-16hqd3y09q] {
    border-bottom: 0;
}

.rail-item:hover[b-16hqd3y09q] {
    background: var(--cyan-wash, #ecfeff);
}

.rail-item:focus-visible[b-16hqd3y09q] {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: -2px;
}

/* Over capacity: the one thing on this rail that must not be missable. */
.rail-item--over[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

.rail-item--over:hover[b-16hqd3y09q] {
    background: var(--red-wash, #fdeaef);
}

.rail-item--over .rail-hours[b-16hqd3y09q] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

/* The capacity meter — the signature device of this screen.
   "Who is over their hours" is the question the rail exists to answer, and a number alone
   makes you read and compare. A bar makes it a glance.

   TWO segments, because there are two different true quantities and one bar showing their sum
   would hide which is which:
     <i>  solid  — hours REALLY on the timetable this week. Does not move when a subject is toggled.
     <b>  ghost  — the projection this screen's selections would reach, an UPPER BOUND. Moves.
   The ghost is drawn first and the solid sits on top of it, so the solid is always readable and
   the ghost reads as the headroom being claimed.

   Both fill toward the WEEKLY capacity (MaxHoursPerDay x teaching days). It used to fill toward
   the DAILY cap while being fed weekly hours, which is how a teacher with nothing scheduled
   showed a full red bar. aria-hidden: the figures beside it carry the values and the row's title
   states both in full, so the bar is pure redundancy for screen readers. */
.rail-meter[b-16hqd3y09q] {
    position: relative;
    flex: 1 1 auto;
    min-width: 40px;
    max-width: 120px;
    height: 6px;
    border-radius: var(--r-pill, 999px);
    background: var(--gray-200, #e2e8f0);
    overflow: hidden;
}

.rail-meter > i[b-16hqd3y09q],
.rail-meter > b[b-16hqd3y09q] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width .2s var(--ease, ease);
}

/* projection — underneath, deliberately faint: it is what COULD happen, not what has */
.rail-meter > b[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--cyan, #06b6d4) 32%, transparent);
}

/* actually scheduled — on top, full strength */
.rail-meter > i[b-16hqd3y09q] {
    background: var(--cyan, #06b6d4);
}

.rail-item--over .rail-meter[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--red, #e11d48) 18%, transparent);
}

.rail-item--over .rail-meter > b[b-16hqd3y09q] {
    background: color-mix(in srgb, var(--red, #e11d48) 38%, transparent);
}

.rail-item--over .rail-meter > i[b-16hqd3y09q] {
    background: var(--red, #e11d48);
}

.rail-name[b-16hqd3y09q] {
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink, #0B1733);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-hours[b-16hqd3y09q] {
    flex: none;
    font-family: var(--display, inherit);
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    color: var(--ink-soft, #33415c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The "+2h 30m" that this screen's selections would add. Lighter than the scheduled figure
   beside it, because it is a projection and must never be mistaken for the teacher's real load. */
.rail-planned[b-16hqd3y09q] {
    margin-left: 4px;
    font-weight: 500;
    color: var(--placeholder, #94a3b8);
}

.rail-item--over .rail-planned[b-16hqd3y09q] {
    color: var(--red, #e11d48);
}

@media (prefers-reduced-motion: reduce) {
    .mx-cell[b-16hqd3y09q],
    .rail-item[b-16hqd3y09q],
    .rail-meter > i[b-16hqd3y09q],
    .rail-meter > b[b-16hqd3y09q] {
        transition: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepGenerateGrid.razor.rz.scp.css */
/* Step 3 — the generated week grid.
   ---------------------------------------------------------------------------
   Shares its visual language with step 1: Fresh Campus tokens, state carried by
   a soft wash plus a 3px left accent, tabular figures, hairline separators
   instead of a full cell grid.

   Note on ::deep: classes placed on RadzenTable / RadzenTableCell land on a CHILD
   component's rendered markup, which Blazor's CSS isolation does not scope. Those
   selectors need ::deep to apply at all; plain element classes in this component's
   own markup do not.
*/

/* The scope anchor added so the ::deep rules below have an ancestor carrying the scope attribute.
   Explicit width because the parent stack is a flex column with align-items:flex-start, where a
   plain block child shrink-wraps to its content rather than stretching. */
.generate-grid-scope[b-1ni1arkiad] {
    width: 100%;
}

/* ---------- step-3 toolbar ---------- */

/* Holds its height when the cluster inside is empty - a non-admin in view mode has no Edit button,
   and a row that collapses to nothing makes the grid jump up as the mode changes. */
.tt-toolbar-row[b-1ni1arkiad] {
    min-height: 34px;
}


/* The .tt-toolbar ink rules that used to sit here are gone.

   They existed because ButtonStyle.Light renders its label in --rz-base-200 - a near-white grey -
   so Copy from, Auto-fill and Clear read as disabled. That is not a step-3 problem: it is how
   Radzen styles the outlined and text variants of a Light button, which are built for a dark
   surface and are used here on white. Patching it per container is why it was reported four
   separate times, each on whichever Light button had not been patched yet.

   It is now fixed once, for every Light button in the app, in wwwroot/css/app.css - search for
   "ButtonStyle.Light, fixed once". Nothing about it is specific to this component, so nothing
   about it belongs in this file. */

/* ---------- section tabs ---------- */
.tt-tabs[b-1ni1arkiad] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.tt-tab[b-1ni1arkiad] {
    cursor: pointer;
    min-width: 104px;
    padding: 7px 14px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    background: var(--surface, #fff);
    transition: background-color .15s var(--ease, ease),
                border-color .15s var(--ease, ease),
                box-shadow .15s var(--ease, ease);
}

.tt-tab:hover[b-1ni1arkiad] {
    border-color: var(--cyan, #06b6d4);
    background: var(--cyan-wash, #ecfeff);
}

.tt-tab:focus-visible[b-1ni1arkiad] {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: 2px;
}

.tt-tab-active[b-1ni1arkiad] {
    border-color: var(--cyan, #06b6d4);
    background: var(--cyan-wash, #ecfeff);
    box-shadow: inset 0 -2px 0 var(--cyan, #06b6d4);
}

.tt-tab-name[b-1ni1arkiad] {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.25;
}

.tt-tab-status[b-1ni1arkiad] {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.tt-tab-status-bad[b-1ni1arkiad] {
    color: var(--red, #e11d48);
    font-weight: 700;
}

.tt-tab-status-ok[b-1ni1arkiad] {
    color: var(--green, #059669);
    font-weight: 700;
}

.tt-tab-status-draft[b-1ni1arkiad] {
    color: var(--amber, #d97706);
    font-weight: 700;
}

/* A section whose only remaining clash is one somebody accepted. Amber, not red: there is
   nothing left to fix, but the double-booking is still true and still worth saying. */
.tt-tab-status-warn[b-1ni1arkiad] {
    color: var(--amber, #d97706);
    font-weight: 700;
}

/* ---------- unsaved indicator ---------- */
.tt-unsaved-dot[b-1ni1arkiad] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--r-pill, 999px);
    background: var(--amber-wash, #fef3e2);
    color: var(--amber-ink, #92400e);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- problem banner ---------- */

/* Amber by default, red only for a real clash.

   An unstaffed period is a vacancy, not a mistake - the wizard deliberately lets you publish over
   one - so dressing it in the same alarm red as a teacher double-booked in two rooms overstates
   it, and having every draft permanently wear a red banner trains the user to ignore the banner
   that actually matters. .tt-problem-banner--blocking is added only when ConflictCount > 0. */
.tt-problem-banner[b-1ni1arkiad] {
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fff7ed);
    color: var(--ink, #0B1733);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: var(--fs-ui, 13.5px);
}

.tt-problem-banner--blocking[b-1ni1arkiad] {
    border-color: var(--red, #e11d48);
    background: var(--red-wash, #fdeaef);
}

/* The reason for whichever cell Jump to next has landed on. Secondary to the counts above it. */
.tt-problem-reason[b-1ni1arkiad] {
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
}

/* A named-but-ineligible teacher: marked, but not in conflict red. The fix is to pick a different
   teacher, not to resolve a clash. */
[b-1ni1arkiad] .timetable-cell-ineligible {
    box-shadow: inset 3px 0 0 0 var(--amber, #d97706);
    background: var(--amber-wash, #fff7ed);
}

/* ---------- subject legend ---------- */
.subject-legend-chip[b-1ni1arkiad] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r-pill, 999px);
    background: var(--surface, #fff);
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-soft, #33415c);
    white-space: nowrap;
}

.subject-legend-swatch[b-1ni1arkiad] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
}

/* .tt-cell-trigger removed with the whole-cell click target it styled. The cell now has three
   distinct targets - subject, teacher, and the gutter icons - so a single hover wash across the
   entire cell would have fought all of them for the same pixels. See THE PERIOD CELL below. */

/* ---------- grid layout ---------- */

/* Plain divs in this component's own markup, so no ::deep - they carry the scope attribute. */
.tt-grid-wrap[b-1ni1arkiad] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;          /* lets the scroller actually shrink inside a flex parent */
}

.tt-grid-scroll[b-1ni1arkiad] {
    width: 100%;
    overflow-x: auto;      /* the table's min-width wins here rather than squeezing the columns */
}

/* ---------- grid cells (child-component markup, needs ::deep) ---------- */
[b-1ni1arkiad] .session-allocation-table {
    font-variant-numeric: tabular-nums;
    /* Fixed layout is what makes "periods share the leftover width equally" work: every column
       that does NOT declare a width gets an equal cut of what Day and Break leave behind. With
       the default auto layout the browser sizes columns by their CONTENT, so a period holding
       "Social Studies-Political Science" would bully its neighbours. */
    table-layout: fixed;
}

/* Day: narrow, and left aligned so the eye has a straight edge to run down the week. A right
   hairline separates it from the week, exactly as .ts-day does in the teacher overlay. */
[b-1ni1arkiad] .session-allocation-table .tt-col-day {
    text-align: left;
    padding-left: 10px !important;
    border-right: 1px solid var(--line, #e3eef2);
    background: var(--surface, #fff);
}

[b-1ni1arkiad] .session-allocation-table thead .tt-col-day {
    background: var(--surface-2, #f7fcfd);
}

/* The header's two lines stack and sit left, like .ts-slot-name over .ts-slot-time. */
[b-1ni1arkiad] .session-allocation-table thead .period-type,
[b-1ni1arkiad] .session-allocation-table thead .period-time {
    display: block;
    line-height: 1.35;
}

[b-1ni1arkiad] .tt-day-name {
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    color: var(--ink-soft, #33415c);
    margin: 0;
}

/* A break earns less room than a lesson - it carries two times and no content. */
[b-1ni1arkiad] .session-allocation-table .tt-col-break .period-type {
    font-size: 10px;
    letter-spacing: .04em;
}

[b-1ni1arkiad] .session-allocation-table .tt-col-break .period-time {
    font-size: 10px;
    line-height: 1.2;
}

[b-1ni1arkiad] .period-type {
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

[b-1ni1arkiad] .period-time {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* .subject-name / .teacher-name were the step-3 cell's text classes before the redesign; the cell
   now uses .tt-subject / .tt-teacher, styled under THE PERIOD CELL below. These two rules stay
   because the same class names are used by the read-only week rendered elsewhere on this page. */
[b-1ni1arkiad] .subject-name {
    font-weight: 600;
    color: var(--ink, #0B1733);
    line-height: 1.25;
}

[b-1ni1arkiad] .teacher-name {
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

/* A break is structure, not content — recede it. */
[b-1ni1arkiad] .timetable-cell-break {
    background: var(--gray-50, #f8fafc);
}

/* Matches .ts-break in the teacher overlay. */
[b-1ni1arkiad] .tt-break-label {
    display: block;
    padding: 0 10px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-style: italic;
}

/* This day simply does not run at this time. Not a gap to fill, not an error --
   read it as "outside the day", so it must not draw the eye like an empty period. */
[b-1ni1arkiad] .timetable-cell-none {
    background: repeating-linear-gradient( 135deg, transparent, transparent 6px, var(--gray-100, #f1f5f9) 6px, var(--gray-100, #f1f5f9) 12px );
    border: none;
}

[b-1ni1arkiad] .timetable-cell-dirty {
    box-shadow: inset 0 0 0 2px var(--amber, #d97706);
}

[b-1ni1arkiad] .timetable-cell-highlighted {
    outline: 2px solid var(--cyan, #06b6d4);
    outline-offset: -2px;
}

/* Now that subjects no longer tint the whole cell, a wash here reads clearly on its own without
   having to shout over thirty other tinted blocks. */
[b-1ni1arkiad] .timetable-cell-unassigned {
    background: var(--red-wash, #fdeaef) !important;
    border: 1px dashed var(--red, #e11d48) !important;
}

/* Hairline separators, so the grid reads as rows of cells rather than a block of colour. */
[b-1ni1arkiad] .timetable-cell {
    border-bottom: 1px solid var(--line-2, #eef4f6);
}

[b-1ni1arkiad] .timetable-cell-conflict {
    box-shadow: inset 3px 0 0 var(--red, #e11d48);
}

/* An ALLOWED clash. Same 3px bar so the eye reads it as the same family of thing, amber so it
   reads as "we know" rather than "fix this". */
[b-1ni1arkiad] .timetable-cell-clash-allowed {
    box-shadow: inset 3px 0 0 var(--amber, #d97706);
}

/* ============================================================================================
   THE PERIOD CELL
   ============================================================================================

   Anchored on .generate-grid-scope, never on the inner class directly. The cell's contents are
   inside RadzenTableCell - a CHILD COMPONENT - and Blazor stamps the b-xxx scope attribute only
   on plain elements in THIS file's own markup. A rule written as `.tt-cell-body ::deep ...`
   compiles to `.tt-cell-body[b-xxx] ...`, matches nothing, and is silently dead. That mistake
   shipped once in this very file, on the toolbar, and cost a round trip to find.

   Two hard rules the geometry has to keep, both learned the hard way:
     1. NOTHING is drawn outside the cell's border box. No negative offsets. A floating chip
        lands on the row above the moment the grid is dense.
     2. NOTHING moves on hover. The gutter is always present at a fixed width; revealing it by
        animating the text column resized the text on every cell the cursor crossed, so sweeping
        the grid set off a wave of columns breathing. Hover changes colour only.
   ============================================================================================ */

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body {
    display: grid;
    grid-template-columns: 1fr var(--tt-gutter, 0px);
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;              /* the guarantee behind rule 1 */
}

/* Edit mode is the only mode with actions, so it is the only mode that reserves the space. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell .tt-cell-body:has(.tt-cell-gutter) {
    --tt-gutter: 56px;
}

/* A clash carries a third icon. Decided by the cell's STATE, fixed for its lifetime - never by
   where the pointer is. An allowed clash keeps that icon -- it is how the allowance is
   withdrawn -- so it reserves the same width. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-conflict .tt-cell-body:has(.tt-cell-gutter),
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-cell-body:has(.tt-cell-gutter) {
    --tt-gutter: 80px;
}

/* ---- a period publish refused ------------------------------------------------------------

   The whole cell is one button, so the click target matches the thing the reader is looking at.
   It keeps the grid's geometry exactly (same grid, same height, no gutter reserved) because a
   cell that changes size when it goes into error makes the row jump underneath the cursor.
   Rule 2 still applies: hover changes colour only. */
.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked {
    --tt-gutter: 0px;
    appearance: none;
    border: 0;
    padding: 0 2px;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked:hover {
    background: rgba(220, 38, 38, .08);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-body--blocked:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: -2px;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject--blocked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-weight: 600;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-error-icon {
    font-size: 15px;
    line-height: 1;
    color: #dc2626;
    flex: 0 0 auto;
}

/* The section switcher's own warning. Sits with the letter, not the status line, because the
   letter is what the eye lands on first when picking a tab. */
.tt-tab-icon[b-1ni1arkiad] {
    font-size: 15px;
    line-height: 1;
    vertical-align: -2px;
    margin-right: 3px;
}

.tt-tab-icon--bad[b-1ni1arkiad] {
    color: #dc2626;
}

/* Left aligned, matching the teacher overlay's week grid. Centred text gave every column a
   different left edge, so scanning down a day meant re-finding where each subject started. */
.generate-grid-scope[b-1ni1arkiad]  .tt-cell-text {
    min-width: 0;                  /* lets the children ellipsis instead of shoving the gutter out */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0 4px 0 8px;
    gap: 0;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0 2px;
    margin: 0 -2px;                /* keeps the hover wash off the text's left edge */
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 1.3;
    text-align: left;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject {
    font-size: var(--fs-ui, 13.5px);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ink, #0B1733);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-teacher {
    font-size: var(--fs-sm, 12.5px);
    color: var(--ink-soft, #33415c);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-teacher--empty {
    color: var(--amber, #b45309);
    font-style: italic;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-subject:hover,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher:hover,
.generate-grid-scope[b-1ni1arkiad]  .tt-subject:focus-visible,
.generate-grid-scope[b-1ni1arkiad]  .tt-teacher:focus-visible {
    background: var(--cyan-wash, #e8f7fb);
    color: var(--cyan-deep, #0e7490);
    text-decoration: underline;
    text-underline-offset: 2px;
    outline: none;
}

/* State carried by the teacher line's colour, alongside the word CellStateSuffix appends. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-ineligible .tt-teacher { color: var(--amber, #b45309); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-conflict   .tt-teacher { color: var(--red, #be123c); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-ignore-conflict .tt-teacher { color: var(--green, #047857); }
 .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-teacher { color: var(--amber-ink, #b45309); }

/* The exclamation mark. Drawn with ::before on the teacher line rather than as an element,
   because rule 1 above forbids anything outside the cell's border box and the 40px row has no
   vertical room for a chip. It rides the text it qualifies, so it can never collide with the
   row above and never changes the cell's geometry. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell-clash-allowed .tt-teacher::before {
    content: "\26A0";              /* U+26A0 WARNING SIGN */
    margin-right: 3px;
    font-weight: 700;
    color: var(--amber, #d97706);
}

/* ---------- the gutter ---------- */

.generate-grid-scope[b-1ni1arkiad]  .tt-cell-gutter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    height: 100%;
    padding-right: 5px;
    overflow: hidden;
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: var(--placeholder, #94a3b8);   /* quiet at rest - thirty cells of these */
    transition: color .1s ease, background-color .1s ease, border-color .1s ease;
}

/* The glyph itself comes from RadzenIcon, so only its SIZE is set here. Declaring a font-family
   was the bug: this app loads "Material Icons Outlined" and a stack naming any other family falls
   back to sans-serif, rendering the ligature as the literal word "edit". */
.generate-grid-scope[b-1ni1arkiad]  .tt-ic .rzi,
.generate-grid-scope[b-1ni1arkiad]  .tt-ic .rz-icon,
.generate-grid-scope[b-1ni1arkiad]  .tt-ic i {
    font-size: 15px;
    line-height: 1;
    width: auto;
    height: auto;
    margin: 0;
    color: inherit;
}

/* Pointing at the cell brings its icons up to readable. Nothing moves. */
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:hover .tt-ic,
.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:focus-within .tt-ic {
    color: var(--ink-soft, #33415c);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic:hover {
    border-color: var(--cyan-deep, #0e7490);
    color: var(--cyan-deep, #0e7490);
    background: var(--cyan-wash, #e8f7fb);
}

.generate-grid-scope[b-1ni1arkiad]  .tt-ic:focus-visible {
    outline: 2px solid var(--cyan-deep, #0e7490);
    outline-offset: 1px;
    color: var(--ink-soft, #33415c);
}

/* An engaged toggle - combined class, or an allowed clash - stays lit whether or not the cursor
   is anywhere near it. It is a state of the timetable, not a hover affordance. */
.generate-grid-scope[b-1ni1arkiad]  .tt-ic--on {
    color: var(--green, #047857);
    border-color: var(--green, #047857);
    background: var(--green-wash, #ecfdf5);
}

.generate-grid-scope[b-1ni1arkiad]  .timetable-cell:hover .tt-ic--on {
    color: var(--green, #047857);
}

/* The subject overview dialog is styled INLINE, in the markup.

   Radzen renders dialogs into a body-level portal, so that markup is outside this component's DOM
   and unreachable from here: ::deep only reaches child components inside this component's own
   subtree, and Blazor scoped CSS has no :global() - a block of :global(...) rules here compiles to
   nothing at all, which is how the dialog first shipped as a stack of unstyled text. The sibling
   cell popover has always been inline for the same reason. */

/* ---------- phone / small tablet ----------------------------------------------------------------

   Root cause of the 3-character subjects: a period column is 130px (minPeriodWidth in the razor),
   the edit-mode gutter reserves 56px (80px on a clash) of it, and .tt-subject is nowrap, so the
   name got ~50px. The table already scrolls inside .tt-grid-scroll; it just never got wider.
   Below 880px each period column is given a real width (the table grows past its min-width and
   the scroller scrolls), the gutter buttons become 28px tap targets, and the subject wraps to two
   lines. At >= 880px none of this applies, so the desktop grid is unchanged. */
@media (max-width: 879.98px) {
    .generate-grid-scope[b-1ni1arkiad] {
        min-width: 0;
    }

    .tt-grid-scroll[b-1ni1arkiad] {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    [b-1ni1arkiad] .session-allocation-table .tt-col-period {
        width: 176px;
    }

    /* position:sticky binds to the nearest ancestor with overflow != visible. app.css gives the
       Radzen wrapper (.rz-data-grid-data, and .rz-datatable on some builds) overflow:hidden for
       its rounded corners, so that wrapper - not .tt-grid-scroll - was the sticky container, and
       it never scrolls. Letting it overflow makes .tt-grid-scroll the scrollport. */
    .generate-grid-scope[b-1ni1arkiad]  .session-allocation-table {
        overflow: visible;
    }

    /* The global app.css rule `.rz-data-grid-data { overflow-x:auto !important }` (<=880px) made the
       Radzen wrapper a scroller that never scrolls, so the sticky day column stuck to it and slid
       away with .tt-grid-scroll. Same !important, higher specificity, scoped to this table only. */
    .tt-grid-scroll[b-1ni1arkiad]  .session-allocation-table .rz-data-grid-data,
    .tt-grid-scroll[b-1ni1arkiad]  .session-allocation-table .rz-datatable-data,
    .tt-grid-scroll[b-1ni1arkiad]  .session-allocation-table .rz-datatable {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Period labels stay in view while the week scrolls. Background is already opaque. */
    [b-1ni1arkiad] .session-allocation-table .tt-col-day {
        position: sticky;
        left: 0;
        z-index: 2;
    }

    [b-1ni1arkiad] .session-allocation-table .tt-col-break .period-type,
    [b-1ni1arkiad] .session-allocation-table .tt-col-break .period-time {
        font-size: var(--fs-xs, 11.5px);
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-break-label {
        font-size: var(--fs-xs, 11.5px);
    }

    /* Edit mode: the icons go UNDER the text instead of in a side gutter, so the subject gets the
       column's full width rather than ~17px. The row grows to fit. */
    .generate-grid-scope[b-1ni1arkiad]  .tt-cell-body {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        height: auto;
        min-height: 100%;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-ic {
        width: 30px;
        height: 30px;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-cell-gutter {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2px;
        height: auto;
        padding: 0 4px 4px 6px;
        overflow: visible;
    }

    /* Clash label: #e11d48 on the red wash was 4.07:1; #be123c is ~5.6:1. */
    .generate-grid-scope[b-1ni1arkiad]  .timetable-cell-conflict .tt-teacher {
        color: #be123c;
    }

    /* Toolbar and banner items wrap whole rather than breaking a label across lines. */
    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar-row,
    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar,
    .generate-grid-scope[b-1ni1arkiad]  .tt-problem-banner {
        flex-wrap: wrap;
    }

    .generate-grid-scope[b-1ni1arkiad]  .add-teachers-title,
    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar .rz-button,
    .generate-grid-scope[b-1ni1arkiad]  .tt-problem-banner .rz-button {
        white-space: nowrap;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-problem-banner .rz-button {
        flex: none;
    }

    /* flex:none on the toolbar cluster stopped it wrapping, so Save draft / Finalize ran past the
       viewport. The cluster may shrink to the row and wrap its BUTTONS whole; each button keeps
       its label on one line (nowrap above) at a 32px tap height. */
    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar-row > * {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar-row,
    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar {
        row-gap: 6px;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-toolbar .rz-button {
        min-height: 32px;
        flex: none;
    }

    /* Wrap to two lines, ellipsis only beyond that. */
    .generate-grid-scope[b-1ni1arkiad]  .tt-subject {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
        min-height: 28px;
        align-content: center;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-teacher {
        min-height: 28px;
        align-content: center;
    }

    .subject-legend-chip[b-1ni1arkiad] {
        box-sizing: border-box;
        min-height: 28px;
        padding-block: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-tab[b-1ni1arkiad] {
        transition: none;
    }

    .generate-grid-scope[b-1ni1arkiad]  .tt-ic {
        transition: none;
    }
}
/* _content/ETuteApp.UI.Shared/Components/Pages/Timetable/StepPeriodTimes.razor.rz.scp.css */
/* Step 2 — the day-shape editor.
   ---------------------------------------------------------------------------
   Two panels: the shape of a school day on the left, which weekday uses which
   shape on the right. Shares the Fresh Campus token system with steps 1 and 3,
   so the three wizard steps read as one screen rather than three.

   Everything here is prefixed `.period-times-stack ::deep` because these classes
   sit on Radzen components (RadzenCard / RadzenStack), whose rendered markup is a
   child component's output and therefore outside this component's CSS isolation
   scope. Without ::deep none of it applies.
*/

/* The scope anchor (see the comment in the .razor). It needs an explicit width: the parent stack
   in ClassScheduler is a flex column with align-items:flex-start, which makes a plain block child
   shrink-wrap to its content instead of stretching. The RadzenStack that used to carry this class
   had width:100% set inline, so the constraint was invisible until the class moved to a real div. */
.period-times-stack[b-kneumkocml] {
    width: 100%;
}

/* ---------- panels ---------- */
.period-times-stack[b-kneumkocml]  .shape-panel,
.period-times-stack[b-kneumkocml]  .day-assign-panel,
.period-times-stack[b-kneumkocml]  .week-preview-panel {
    width: 100%;
    padding: 14px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3eef2);
    border-radius: var(--r, 12px);
    box-shadow: var(--shadow, 0 2px 5px rgba(11,23,51,.05));
}

.period-times-stack[b-kneumkocml]  .week-preview-panel {
    margin-top: 12px;
}

.period-times-stack[b-kneumkocml]  .shape-hint {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
}

/* P6 (D11, AC12): informational only, never an error state and never blocking. Same amber
   notice family as the generate-grid step's non-blocking problem banner (--amber / --amber-wash),
   reproduced here because that step's CSS is isolated to its own component and cannot be reused. */
.period-times-stack[b-kneumkocml]  .divergence-note {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid var(--amber, #d97706);
    border-left-width: 3px;
    border-radius: var(--r-input, 10px);
    background: var(--amber-wash, #fff7ed);
    color: var(--ink, #0B1733);
    font-size: var(--fs-ui, 13.5px);
}

.period-times-stack[b-kneumkocml]  .day-start-row {
    margin: 10px 0 8px;
}

/* ---------- the ordered day shape ---------- */
.period-times-stack[b-kneumkocml]  .shape-rows {
    max-height: 420px;
    overflow-y: auto;
    border-top: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .shape-row {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line-2, #eef4f6);
    background: var(--surface, #fff);
    border-left: 3px solid var(--cyan, #06b6d4);
    transition: background-color .15s var(--ease, ease);
}

.period-times-stack[b-kneumkocml]  .shape-row:hover {
    background: var(--cyan-wash, #ecfeff);
}

/* A break is not a lesson — different accent, receded surface. */
.period-times-stack[b-kneumkocml]  .shape-row-break {
    background: var(--amber-wash, #fef3e2);
    border-left-color: var(--amber, #d97706);
}

.period-times-stack[b-kneumkocml]  .row-label {
    width: 52px;
    font-family: var(--display, inherit);
    font-weight: 600;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .row-time {
    min-width: 46px;
    font-size: var(--fs-ui, 13.5px);
    color: var(--ink-soft, #33415c);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .row-dash {
    color: var(--placeholder, #94a3b8);
}

.period-times-stack[b-kneumkocml]  .row-duration {
    min-width: 52px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .row-actions {
    margin-left: auto;
}

/* Radzen's ButtonStyle.Light on a Text variant renders a grey so pale that every one of these
   reads as disabled - which matters most here, because two of them GENUINELY are (move-up on the
   first row, move-down on the last) and there was no way to tell the two states apart. Enabled
   controls take ink; disabled ones fade properly and lose the pointer. */
.period-times-stack[b-kneumkocml]  .row-actions .rz-button {
    width: 28px;
    height: 28px;
    color: var(--ink-soft, #33415c);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button:hover:not(:disabled) {
    background: var(--cyan-wash, #e8f7fb);
    color: var(--cyan-deep, #0e7490);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button:disabled {
    color: var(--placeholder, #94a3b8);
    opacity: .45;
    cursor: not-allowed;
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button.rz-danger {
    color: var(--red, #e11d48);
}

.period-times-stack[b-kneumkocml]  .row-actions .rz-button.rz-danger:hover:not(:disabled) {
    background: var(--red-wash, #fdeaef);
    color: var(--red, #e11d48);
}

/* Add period / Add break.
   Plain buttons owned by this stylesheet - see the comment in the .razor. Both are enabled and
   both should look it; the difference between them is which one is the usual next move, carried by
   colour rather than by making one of them look switched off. */
.period-times-stack .add-btn[b-kneumkocml] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: var(--canvas, #fff);
    font: inherit;
    font-size: var(--fs-sm, 12.5px);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s var(--ease, ease);
}

.period-times-stack .add-btn-plus[b-kneumkocml] {
    font-size: 15px;
    line-height: 1;
}

.period-times-stack .add-btn--period[b-kneumkocml] {
    color: var(--cyan-deep, #0e7490);
}

.period-times-stack .add-btn--period:hover[b-kneumkocml] {
    background: var(--cyan-wash, #e8f7fb);
}

.period-times-stack .add-btn--break[b-kneumkocml] {
    color: var(--amber, #d97706);
}

.period-times-stack .add-btn--break:hover[b-kneumkocml] {
    background: var(--amber-wash, #fef3e2);
}

.period-times-stack[b-kneumkocml]  .shape-append-row {
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ---------- summaries ---------- */
/* Neutral, not green. These state what the day and week currently add up to; they are not a
   success message, and two full-width green bands on one screen made the page shout. */
.period-times-stack[b-kneumkocml]  .shape-summary,
.period-times-stack[b-kneumkocml]  .week-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    color: var(--ink-soft, #33415c);
    font-size: var(--fs-sm, 12.5px);
    font-variant-numeric: tabular-nums;
}

.period-times-stack[b-kneumkocml]  .sum-item b {
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .sum-item--key {
    margin-left: auto;
    color: var(--ink, #0B1733);
}

/* ---------- day → shape assignment ---------- */
.period-times-stack[b-kneumkocml]  .day-assign-title {
    display: block;
    font-family: var(--display, inherit);
    font-size: var(--fs-xs, 11.5px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
    margin-bottom: 10px;
}

.period-times-stack[b-kneumkocml]  .day-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: var(--r-input, 10px);
    background: var(--surface-2, #f7fcfd);
    border: 1px solid var(--line-2, #eef4f6);
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.period-times-stack[b-kneumkocml]  .day-row--off {
    background: transparent;
    border-style: dashed;
}

.period-times-stack[b-kneumkocml]  .day-row--off .day-name,
.period-times-stack[b-kneumkocml]  .day-row--off .day-hours {
    color: var(--placeholder, #94a3b8);
}

/* ---------- segmented control ---------- */
/* Three joined options read as one choice. Three separate Radzen buttons per row, times seven
   rows, was twenty-one individually-bordered targets stacked in one narrow column. */
.period-times-stack[b-kneumkocml]  .seg {
    display: inline-flex;
    border: 1px solid var(--line, #e3eef2);
    border-radius: 999px;
    background: var(--canvas, #fff);
    overflow: hidden;
}

.period-times-stack[b-kneumkocml]  .seg-btn {
    padding: 4px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .12s var(--ease, ease), color .12s var(--ease, ease);
}

.period-times-stack[b-kneumkocml]  .seg-btn + .seg-btn {
    border-left: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .seg-btn:hover {
    background: var(--surface-2, #f7fcfd);
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .seg-btn--on {
    background: var(--cyan, #06b6d4);
    color: #fff;
    font-weight: 600;
}

.period-times-stack[b-kneumkocml]  .seg-btn--on:hover {
    background: var(--cyan-deep, #0e7490);
    color: #fff;
}

.period-times-stack[b-kneumkocml]  .day-name {
    width: 44px;
    font-family: var(--display, inherit);
    font-weight: 600;
    color: var(--ink, #0B1733);
}

.period-times-stack[b-kneumkocml]  .day-hours {
    margin-left: auto;
    color: var(--muted, #64748b);
    font-size: var(--fs-xs, 11.5px);
    font-variant-numeric: tabular-nums;
}

/* ---------- week preview ---------- */
.period-times-stack[b-kneumkocml]  .preview-week {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.period-times-stack[b-kneumkocml]  .preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-times-stack[b-kneumkocml]  .preview-day {
    flex: 0 0 34px;
    font-family: var(--display, inherit);
    font-weight: 600;
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

.period-times-stack[b-kneumkocml]  .preview-track {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    border-radius: var(--r-input, 10px);
    overflow: hidden;
    border: 1px solid var(--line-2, #eef4f6);
}

.period-times-stack[b-kneumkocml]  .preview-block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    background: var(--cyan-wash, #e8f7fb);
    border-right: 1px solid var(--canvas, #fff);
    overflow: hidden;
}

.period-times-stack[b-kneumkocml]  .preview-block:last-child {
    border-right: 0;
}

.period-times-stack[b-kneumkocml]  .preview-block--break {
    background: var(--amber-wash, #fef3e2);
}

.period-times-stack[b-kneumkocml]  .preview-block-label {
    font-size: var(--fs-xs, 11.5px);
    color: var(--ink-soft, #33415c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

.period-times-stack[b-kneumkocml]  .preview-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: var(--fs-xs, 11.5px);
    color: var(--muted, #64748b);
}

.period-times-stack[b-kneumkocml]  .legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--line, #e3eef2);
}

.period-times-stack[b-kneumkocml]  .legend-swatch--period {
    background: var(--cyan-wash, #e8f7fb);
}

.period-times-stack[b-kneumkocml]  .legend-swatch--break {
    background: var(--amber-wash, #fef3e2);
    margin-left: 8px;
}

.period-times-stack[b-kneumkocml]  .legend-note {
    margin-left: auto;
}

.period-times-stack[b-kneumkocml]  .preview-empty {
    padding: 12px;
    border: 1px dashed var(--line, #e3eef2);
    border-radius: var(--r-input, 10px);
    font-size: var(--fs-sm, 12.5px);
    color: var(--muted, #64748b);
}

@media (max-width: 768px), (pointer: coarse) {
    .period-times-stack[b-kneumkocml]  .row-actions .rz-button {
        width: 32px;
        height: 32px;
    }

    .period-times-stack[b-kneumkocml]  .seg-btn {
        padding: 6px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .period-times-stack[b-kneumkocml]  .shape-row,
    .period-times-stack[b-kneumkocml]  .seg-btn {
        transition: none;
    }
}