@import '_content/Erkan.Blazor.Chartjs/Erkan.Blazor.Chartjs.70t1zzya7j.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Account/ForgotPasswordPage.razor.rz.scp.css */
/* The page title is now a real <h1> (see the comment at its markup). This rule reproduces
   EXACTLY what the <FluentText Weight="TextWeight.Bold" Block="true"> it replaced computed to,
   so promoting it to a heading moves nothing on screen.

   The three values are the ones rc.4's <fluent-text> shadow stylesheet applies to its :host
   (read from Microsoft.FluentUI.AspNetCore.Components.lib.module.js, 5.0.0-rc.4-26180.1):
       :host                 { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300);
                               font-weight: var(--fontWeightRegular) }
       :host([weight='bold']) { font-weight: var(--fontWeightBold) }
   No Size was set, so the size/line-height stayed at the :host defaults — Base300. The old
   As="TextTag.H4" contributed NOTHING to any of this; it is inert.

   margin: 0 is load-bearing. default-fuib.css:28-36 zeroes h1's margin-TOP and sets
   font-size: var(--fontSizeHero900) — but the UA's 0.67em margin-BOTTOM survives, and at
   Hero900 that is ~27px of new space under the title. Zeroing the whole margin restores the
   FluentText box, which had none; the 24px gap under the title still comes from the wrapping
   <div style="margin-bottom: 24px">, exactly as before.

   Block="true" is not reproduced because it does not need to be: it made <fluent-text>
   display: block, and an <h1> is block already. */
.forgot-password-title[b-x5d72afvu3] {
    margin: 0;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    font-weight: var(--fontWeightBold);
}

.isolated-page[b-x5d72afvu3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .isolated-page[b-x5d72afvu3] {
        padding: 15px 10px;
    }
}

/* Password strength indicator */
.password-strength[b-x5d72afvu3] {
    margin-top: 4px;
}

.password-strength-bar[b-x5d72afvu3] {
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-fill[b-x5d72afvu3] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength-1[b-x5d72afvu3] {
    background-color: #d32f2f;
}

.password-strength-2[b-x5d72afvu3] {
    background-color: #f57c00;
}

.password-strength-3[b-x5d72afvu3] {
    background-color: #fbc02d;
}

.password-strength-4[b-x5d72afvu3] {
    background-color: #388e3c;
}

.password-strength-5[b-x5d72afvu3] {
    background-color: #1b5e20;
}
/* /Components/Account/KvkkAcceptPage.razor.rz.scp.css */
/* The page title is now a real <h1> (see the comment at its markup for why, and for the
   seeded-consent-body <h1> caveat). This rule reproduces EXACTLY what the
   <FluentText Weight="TextWeight.Bold" Block="true"> it replaced computed to, so promoting it
   to a heading moves nothing on screen.

   The three values are the ones rc.4's <fluent-text> shadow stylesheet applies to its :host
   (read from Microsoft.FluentUI.AspNetCore.Components.lib.module.js, 5.0.0-rc.4-26180.1):
       :host                  { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300);
                                font-weight: var(--fontWeightRegular) }
       :host([weight='bold']) { font-weight: var(--fontWeightBold) }
   No Size was set, so size/line-height stayed at the :host defaults — Base300. The old
   As="TextTag.H3" contributed NOTHING to any of this; it is inert.

   margin: 0 is load-bearing. default-fuib.css:28-36 zeroes h1's margin-TOP and sets
   font-size: var(--fontSizeHero900) — but the UA's 0.67em margin-BOTTOM survives, and at
   Hero900 that is ~27px of new space under the title. Zeroing the whole margin restores the
   FluentText box, which had none; the 24px gap under the title still comes from the wrapping
   <div style="margin-bottom: 24px">, exactly as before.

   Block="true" is not reproduced because it does not need to be: it made <fluent-text>
   display: block, and an <h1> is block already.

   This file is the page's FIRST scoped stylesheet — it did not exist before. Everything else
   on this page is still inline-styled; that is pre-existing and out of scope here. */
.kvkk-accept-title[b-cw213kt474] {
    margin: 0;
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    font-weight: var(--fontWeightBold);
}
/* /Components/Account/SchoolAccessBlockedPage.razor.rz.scp.css */
/* The "blocked guard" card shape from PAGE-PATTERNS §1 (max-width ~560px, centred, generous
   padding, centred text), authored here rather than as a FluentCard so the page owes nothing to
   the shell it is deliberately outside of.

   min-height: 100vh, matching /hesap/giris and /hesap/erisim-engellendi: EmptyLayout's wrapper is
   the scroll container (EmptyLayout.razor.css) and its children are expected to size themselves
   this way. */
.blocked-wrapper[b-1ij5ke8qzp] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.blocked-card[b-1ij5ke8qzp] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    text-align: center;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    background: var(--colorNeutralBackground1);
    box-shadow: var(--shadow8);
}

/* Pinned to the same values default-fuib.css would have given an h2, so promoting this to the
   page's <h1> (which FocusOnNavigate needs) is visually a no-op — the same reasoning AccessDenied
   and PageCard both carry. */
.blocked-title[b-1ij5ke8qzp] {
    margin: 0;
    font-size: var(--fontSizeHero800);
    line-height: var(--lineHeightHero800);
    color: var(--colorNeutralForeground1);
}

.blocked-body[b-1ij5ke8qzp] {
    margin: 0;
    color: var(--colorNeutralForeground2);
}

.blocked-subhead[b-1ij5ke8qzp] {
    margin: 8px 0 0;
    font-size: var(--fontSizeBase200);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.blocked-schools[b-1ij5ke8qzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.blocked-contact[b-1ij5ke8qzp] {
    margin: 8px 0 0;
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
}

.blocked-signout[b-1ij5ke8qzp] {
    margin: 8px 0 0;
}
/* /Components/Home/HomeStatsCards.razor.rz.scp.css */
.home-stats[b-orj7rji7zd] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hs-card[b-orj7rji7zd] {
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke1);
}

.hs-label[b-orj7rji7zd] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colorNeutralForeground3);
    font-weight: 600;
}

.hs-value[b-orj7rji7zd] {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1;
}

.hs-hint[b-orj7rji7zd] {
    font-size: 0.74rem;
    color: var(--colorNeutralForeground3);
    margin-top: 4px;
}

.hs-blue[b-orj7rji7zd] { background: #e3f2fd; }
.hs-blue .hs-value[b-orj7rji7zd] { color: #0d47a1; }
.hs-orange[b-orj7rji7zd] { background: #fff3e0; }
.hs-orange .hs-value[b-orj7rji7zd] { color: #e65100; }
.hs-amber[b-orj7rji7zd] { background: #fff8e1; }
.hs-amber .hs-value[b-orj7rji7zd] { color: #b26a00; }
.hs-rose[b-orj7rji7zd] { background: #ffebee; }
.hs-rose .hs-value[b-orj7rji7zd] { color: #b71c1c; }

@media (max-width: 768px) {
    .home-stats[b-orj7rji7zd] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Home/PreRegistrationPanel.razor.rz.scp.css */
.prereg-panel[b-yd1lg1njwo] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 12px;
    overflow: hidden;
}

.pp-header[b-yd1lg1njwo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-weight: 600;
}

.pp-count[b-yd1lg1njwo] {
    margin-left: auto;
    background: #fde7ea;
    color: #c62828;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: 600;
}

.pp-empty[b-yd1lg1njwo] {
    padding: 24px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.pp-item[b-yd1lg1njwo] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    background: transparent;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
}

.pp-item:hover[b-yd1lg1njwo] {
    background: var(--colorNeutralBackground3);
}

.pp-avatar[b-yd1lg1njwo] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--avatar-radius);
    display: grid;
    place-items: center;
    background: #fde7ea;
    color: #c62828;
    font-size: 0.8rem;
    font-weight: 600;
}

.pp-main[b-yd1lg1njwo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.pp-name[b-yd1lg1njwo] {
    font-size: 0.88rem;
    font-weight: 500;
}

.pp-sub[b-yd1lg1njwo] {
    font-size: 0.74rem;
    color: var(--colorNeutralForeground3);
}

.pp-badge[b-yd1lg1njwo] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 999px;
}

.b-waiting[b-yd1lg1njwo] {
    background: #fff3e0;
    color: #b26a00;
}

.b-overdue[b-yd1lg1njwo] {
    background: #fde7ea;
    color: #c62828;
}

.b-new[b-yd1lg1njwo] {
    background: var(--colorNeutralBackground4, #eee);
    color: var(--colorNeutralForeground1);
}

.pp-footer[b-yd1lg1njwo] {
    display: block;
    width: 100%;
    border: none;
    border-top: 1px solid var(--colorNeutralStroke2);
    background: transparent;
    padding: 10px 16px;
    text-align: center;
    color: var(--colorBrandForeground1, #0f6cbd);
    cursor: pointer;
    font: inherit;
}

.pp-footer:hover[b-yd1lg1njwo] {
    background: var(--colorNeutralBackground3);
}
/* /Components/Home/TaskList.razor.rz.scp.css */
.task-list[b-dmxsqelmob] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 12px;
    overflow: hidden;
}

.tl-header[b-dmxsqelmob] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-weight: 600;
}

.tl-count[b-dmxsqelmob] {
    margin-left: auto;
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand, #fff);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.78rem;
}

.tl-empty[b-dmxsqelmob] {
    padding: 28px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.tl-body[b-dmxsqelmob] {
    max-height: 460px;
    overflow-y: auto;
}

.tl-item[b-dmxsqelmob] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    background: transparent;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
}

.tl-item:hover[b-dmxsqelmob] {
    background: var(--colorNeutralBackground3);
}

.tl-chip[b-dmxsqelmob] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    color: #fff;
}

/* chip fill colours per kind */
.tl-chip.k-teach[b-dmxsqelmob] { background: #2682d2; }
.tl-chip.k-gag[b-dmxsqelmob] { background: #7c3aed; }
.tl-chip.k-note[b-dmxsqelmob] { background: #f59e0b; }
.tl-chip.k-survey[b-dmxsqelmob] { background: #0d9488; }
.tl-chip.k-prereg[b-dmxsqelmob] { background: #0d9488; }
.tl-chip.k-approval[b-dmxsqelmob] { background: #7c3aed; }
.tl-chip.k-assign[b-dmxsqelmob] { background: #7c3aed; }
.tl-chip.k-task[b-dmxsqelmob] { background: #0d9488; }

.tl-main[b-dmxsqelmob] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tl-text[b-dmxsqelmob] {
    font-size: 0.86rem;
    line-height: 1.2;
}

.tl-meta[b-dmxsqelmob] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--colorNeutralForeground3);
}

.tl-undated[b-dmxsqelmob] {
    background: var(--colorNeutralBackground4, #eee);
    border-radius: 4px;
    padding: 0 6px;
}

.tl-due.s-overdue[b-dmxsqelmob] {
    color: #c62828;
    font-weight: 600;
}

.tl-due.s-pending[b-dmxsqelmob] {
    color: var(--colorNeutralForeground3);
}
/* /Components/Home/WeeklyCalendar.razor.rz.scp.css */
.weekly-calendar[b-4ifss3llrg] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 12px;
    overflow: hidden;
}

.wc-header[b-4ifss3llrg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.wc-title[b-4ifss3llrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.wc-range[b-4ifss3llrg] {
    color: var(--colorNeutralForeground3);
    font-weight: 400;
    font-size: 0.85rem;
}

.wc-nav[b-4ifss3llrg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wc-legend[b-4ifss3llrg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-size: 0.78rem;
}

.wc-legend .lg[b-4ifss3llrg] {
    position: relative;
    padding-left: 16px;
    color: var(--colorNeutralForeground1);
}

.wc-legend .lg[b-4ifss3llrg]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.wc-legend-status[b-4ifss3llrg] {
    margin-left: auto;
    color: var(--colorNeutralForeground3);
}

.wc-grid[b-4ifss3llrg] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.wc-day[b-4ifss3llrg] {
    min-height: 170px;
    border-right: 1px solid var(--colorNeutralStroke2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.wc-day:nth-child(7n)[b-4ifss3llrg] {
    border-right: none;
}

.wc-day.is-weekend[b-4ifss3llrg] {
    background: var(--colorNeutralBackground3);
}

.wc-day.is-today .wc-day-head[b-4ifss3llrg] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand, #fff);
}

.wc-day-head[b-4ifss3llrg] {
    text-align: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.wc-dow[b-4ifss3llrg] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.wc-day.is-today .wc-dow[b-4ifss3llrg] {
    color: inherit;
}

.wc-dom[b-4ifss3llrg] {
    font-weight: 600;
}

.wc-day-body[b-4ifss3llrg] {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The item kind used to be encoded by a 3px coloured border-left. The `::before`
   rules further down looked like they already carried the same signal, but they do
   NOT on the items: only `.wc-legend .lg::before` supplies `content`/size/position,
   so on a `.wc-item` those `.k-*::before { background }` declarations generated no
   box at all. The dot is therefore defined here for every item, and the three kinds
   that had no `::before` at all (.k-approval / .k-assign / .k-task) get one below,
   so the colour code is uniform — then the bars go. */
.wc-item[b-4ifss3llrg] {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    padding: 4px 6px 4px 18px;
    cursor: pointer;
    font: inherit;
}

.wc-item[b-4ifss3llrg]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--colorNeutralStroke1);
}

.wc-item:hover[b-4ifss3llrg] {
    filter: brightness(0.97);
}

.wc-item-title[b-4ifss3llrg] {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.15;
}

.wc-item-sub[b-4ifss3llrg],
.wc-item-status[b-4ifss3llrg] {
    display: block;
    font-size: 0.68rem;
    color: var(--colorNeutralForeground3);
}

.s-done[b-4ifss3llrg] {
    color: #2e7d32;
}

.s-overdue[b-4ifss3llrg] {
    color: #c62828;
}

.s-pending[b-4ifss3llrg] {
    color: var(--colorNeutralForeground3);
}

/* Kind colours — one dot colour per kind, used by BOTH the legend swatch
   (.wc-legend .lg::before) and the item marker (.wc-item::before), so the two
   always agree. Hex values are kept verbatim: they are a deliberate categorical
   palette shared with TaskList.razor.css's .tl-chip and have no Fluent token
   equivalents. All eight kinds from HomeFeedDisplay.KindClass are covered — the
   last three previously had a border colour but no dot. */
.k-teach[b-4ifss3llrg]::before { background: #2682d2; }
.k-gag[b-4ifss3llrg]::before { background: #7c3aed; }
.k-note[b-4ifss3llrg]::before { background: #f59e0b; }
.k-survey[b-4ifss3llrg]::before { background: #0d9488; }
.k-prereg[b-4ifss3llrg]::before { background: #0d9488; }
.k-approval[b-4ifss3llrg]::before { background: #7c3aed; }
.k-assign[b-4ifss3llrg]::before { background: #7c3aed; }
.k-task[b-4ifss3llrg]::before { background: #0d9488; }

.wc-footer[b-4ifss3llrg] {
    padding: 8px 16px;
    font-size: 0.72rem;
    color: var(--colorNeutralForeground3);
    border-top: 1px solid var(--colorNeutralStroke2);
}

@media (max-width: 768px) {
    .wc-grid[b-4ifss3llrg] {
        grid-template-columns: 1fr;
    }

    .wc-day[b-4ifss3llrg] {
        min-height: auto;
        border-right: none;
    }

    .wc-day-body:empty[b-4ifss3llrg] {
        display: none;
    }
}
/* /Components/Layout/HeaderProfileMenu.razor.rz.scp.css */
/* HeaderProfileMenu — the popover body.

   Every selector here anchors on a PAGE-AUTHORED element (.hpm-body / .hpm-identity /
   .hpm-actions are plain <div>s written literally in HeaderProfileMenu.razor), so they all
   receive Blazor's b-xxxxxxxxxx scope attribute and actually match. A class handed to a
   Fluent component would NOT — that is the "Class=" corollary in DESIGN-GUIDELINES.md, and
   it is why the two Fluent components that need sizing (the trigger button and the
   FluentSelect) are styled with inline Style=/Width= in the markup instead.

   Note these rules still apply even though the content is SLOTTED into fluent-popover-b's
   shadow root: the scope attribute lives on the element itself, and slotting does not
   change which selectors match it. */

/* ---------------------------------------------------------------------------
   THE TRIGGER — avatar + the signed-in user's name, inside the header bar.

   Both selectors sit on page-authored <span>s (see the comment in the .razor), which is
   what makes them receive the scope attribute at all.
   --------------------------------------------------------------------------- */
.hpm-trigger[b-zf9mtlyrwg] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS, 8px);
    /* The button's inline padding is 2px on all four sides, sized for a bare avatar. With a name
       beside it that would leave the text flush against the button's right edge, so the chip gets
       its horizontal breathing room here rather than by editing the inline Style= (which carries
       the shared --avatar-radius token from the app-wide avatar-shape work — leave it alone). */
    padding-right: var(--spacingHorizontalS, 8px);
    min-width: 0;
}

/* No colour declared on purpose. .main-header pins `color: var(--colorNeutralForeground1)` on a
   `background: var(--colorNeutralBackground1)` — the pair that fixed the white-on-white header —
   and fluent-button's transparent appearance resolves to --colorNeutralForeground2 on top of it.
   MEASURED on the live header: background rgb(255,255,255), button colour rgb(66,66,66). Adding
   a third colour here would be a fourth thing to keep in step for no gain. */
.hpm-trigger-name[b-zf9mtlyrwg] {
    /* Turkish names get long and the header is a fixed-height three-zone bar whose area is
       `overflow: hidden` in rc.4's own CSS — an un-clamped name would be silently CLIPPED, not
       wrapped or scrolled. 14rem holds "Ayşe Nur Küçükoğlu" whole and ellipsises past that.
       min-width: 0 above is what lets this shrink at all inside the flex row. */
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fontSizeBase300, 14px);
    font-weight: var(--fontWeightSemibold, 600);
    line-height: var(--lineHeightBase300, 20px);
}

/* 768 is FluentLayout.MobileBreakdownWidth — the same number .hpm-school below and app.css's
   grid override are coupled to. Below it the bar is hamburger + title + trigger with no room to
   spare, so the name drops out of the bar; the popover's identity block still shows it in full,
   which is the same trade the school name already makes in the other direction. */
@media (max-width: 768px) {
    .hpm-trigger-name[b-zf9mtlyrwg] {
        display: none;
    }

    .hpm-trigger[b-zf9mtlyrwg] {
        padding-right: 0;
    }
}

.hpm-body[b-zf9mtlyrwg] {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM, 12px);
    padding: var(--spacingVerticalM, 12px) var(--spacingHorizontalM, 12px);

    /* Foreground AND background together, always (the header white-on-white rule).
       fluent-popover-b's own shadow stylesheet already sets this exact pair on its
       `div[popover]`, so this is redundant TODAY — it is here so that this surface stops
       depending on that remaining true, and so the pair is never split by a later edit. */
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
}

.hpm-identity[b-zf9mtlyrwg] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM, 12px);
}

/* min-width: 0 is what makes FluentText's Truncate work here: without it the flex item's
   automatic minimum size is its content width, so a long name widens the row instead of
   ellipsising. */
.hpm-identity-text[b-zf9mtlyrwg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* The e-mail and (on mobile) the school name are secondary. FluentText has no "muted"
   parameter that maps to Foreground3, and colour DOES inherit into fluent-text (its shadow
   root pins font-family/-size/-weight/line-height, but NOT color) — so a page-authored
   wrapper is the correct lever, and it must be page-authored to receive the scope attribute. */
.hpm-email[b-zf9mtlyrwg],
.hpm-school[b-zf9mtlyrwg] {
    color: var(--colorNeutralForeground3);
    min-width: 0;
}

/* The role in the selected school. One step LESS muted than the e-mail above it
   (Foreground2, not Foreground3) plus semibold, so a three-line stack still has a hierarchy
   instead of reading as three identical grey lines. Same page-authored-wrapper trick as
   .hpm-email: colour is one of the few properties fluent-text does NOT re-declare on :host,
   so it inherits (diary 0034), and only a wrapper written in the .razor carries the b-xxxxx
   scope attribute this rule compiles against.

   No `display: none` counterpart at any width, and that is NOT an oversight. The trigger's
   name hides below 768px because the header BAR runs out of room and clips (its area is
   `overflow: hidden`). This line is inside the POPOVER, which is a fixed 330px in the top
   layer at every viewport width — it has exactly as much room at 375px as at 1920px. The
   mobile case is in fact the one that needs it MOST: below 768px the trigger shows no name
   at all, so the popover is the only place any identity is legible. Compare .hpm-school
   below, which moves the OTHER way for the same reason — it appears on mobile precisely
   because the bar stops showing it. */
.hpm-role[b-zf9mtlyrwg] {
    color: var(--colorNeutralForeground2);
    min-width: 0;
}

/* Desktop shows the school name in the header bar; the popover copy is for mobile only,
   where the bar has no room. 768 is FluentLayout.MobileBreakdownWidth — the same number
   app.css's grid override is coupled to. Change one, change both. */
.hpm-school[b-zf9mtlyrwg] {
    display: none;
}

@media (max-width: 768px) {
    .hpm-school[b-zf9mtlyrwg] {
        display: block;
    }
}

.hpm-actions[b-zf9mtlyrwg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacingHorizontalS, 8px);
}
/* /Components/Layout/MainHeader.razor.rz.scp.css */
.main-header[b-va4t5i40jt] {
    display: flex;
    align-items: center;
    /* rc.4 makes the header area itself a flex container
       (`.fluent-layout-item[area=header] { display: flex; justify-content: start }`), so
       .main-header is a flex ITEM and sizes to its content. With an opaque background that
       rendered as a 436px white pill on a 1440px brand-blue band (measured, diary 0034).
       flex: 1 makes it fill the band. */
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    gap: 0.5rem;
    /* Dead v4 token fixed in diary 0030: --neutral-layer-1 does not exist in v5, so this
       always fell through to the `transparent` fallback. Mapped per the token table.
       Matches v4's explicitly-white .app-header. */
    background: var(--colorNeutralBackground1, #ffffff);
    /* The other half of the diary-0034 defect. The header area sets
       `color: var(--colorNeutralForegroundOnBrand)` (white) for its own brand-blue
       background, and FluentText inherits colour from its wrapper (measured, diary 0034)
       — so overriding only the background produced a white title on white. The foreground
       has to be overridden together with the background, always. */
    color: var(--colorNeutralForeground1);
    /* v4's .app-header carried a 1px #e5e7eb bottom border + a soft shadow to separate the
       header from the content. Kept, using tokens rather than v4's literal hexes. */
    border-bottom: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   THREE ZONES — v4 MainHeader.razor.css:18-40, portable plain flexbox.

   left   = mobile hamburger only (the school name that used to live here was removed —
            it was rendering twice on screen, once here and once in NavMenu's brand block
            under the logo, and the decision was to keep only the NavMenu copy); equal-weight
            with .header-right above 900px (see below), content-sized at and below it
   centre = app title, sized to its own content and centred between the two equal-weight
            side zones above 900px, hidden below it
   right  = account actions; equal-weight with .header-left above 900px, content-sized
            (but pinned right via margin-left: auto) at and below it

   min-width: 0 on the flexible zones is load-bearing, not tidiness: a flex item's
   automatic minimum size is its content width, so without it the centred title (or, at
   ≤900px, the profile menu row) would push the header wider than its grid area instead of
   ellipsising — and rc.4 puts `overflow: hidden` on the layout area, so that overflow
   would be silently CLIPPED rather than scrolled.

   .header-left and .header-right are flex: 1 1 0 (equal-weight, zero basis) rather than
   content-sized, and this is a DIRECT CONSEQUENCE of removing the school name above. With
   the school name gone, .header-left holds nothing but a hamburger that is display: none
   above the 768px mobile breakpoint, so on desktop it used to collapse to ~0 width while
   .header-right stayed content-sized (the profile menu's width). .header-center's own
   justify-content: center only centres the title WITHIN .header-center's box — and that
   box ran from x=0 (the collapsed left zone) to the left edge of .header-right, so its
   midpoint was NOT the header's midpoint: the title sat visibly left of true centre by
   roughly half of .header-right's width. Giving .header-left and .header-right the same
   flex-grow factor (1) and the same flex-basis (0) forces the flexbox algorithm to grow
   them to EQUAL widths from the space left over after .header-center (flex: 0 1 auto, sized
   to its own content) takes what it needs — so whatever .header-center's width ends up
   being, it is flanked by two equal-width zones and its centre lands exactly on the
   header's centre, regardless of how big .header-right's content is.
   --------------------------------------------------------------------------- */
.header-left[b-va4t5i40jt],
.header-center[b-va4t5i40jt],
.header-right[b-va4t5i40jt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-left[b-va4t5i40jt] {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start;
}

.header-center[b-va4t5i40jt] {
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}

.header-right[b-va4t5i40jt] {
    flex: 1 1 0;
    justify-content: flex-end;
    /* Same load-bearing reason as .header-left/.header-center above, and it only started
       mattering when the profile trigger stopped being a bare 38px circle and gained the
       signed-in user's name. A flex item's automatic minimum size is its content width, so
       without this the right zone REFUSES to shrink below its content and the "two equal-weight
       side zones" arrangement that centres the title silently stops holding.

       MEASURED with a long name (49 chars) before adding it: at 1440 the zones were equal and
       the title's midpoint sat exactly on the header's (845 == 845), but at 1024 the right zone
       clamped at its 278px content width while the left got the 167px remainder, and the title
       landed 80px LEFT of centre (557 vs 637). With min-width: 0 the zone shrinks to its 1:1
       share and the trigger's name ellipsises instead — .hpm-trigger sets min-width: 0 and
       .hpm-trigger-name sets overflow: hidden, so the shrink has somewhere to go. */
    min-width: 0;
    /* margin-left: auto is NOT redundant with the flex: 1 1 0 above, even though the two
       equal-grow zones already keep .header-right pinned to the right edge at this width.
       MEASURED at 900px before this margin was added: once the media query below sets
       .header-center to display: none AND (see that query) .header-left/.header-right fall
       back to content-sized (flex: 0 * auto) because there is no third zone left to centre
       against, the actions collapsed back against the left zone (trigger at x=384 in a
       650px-wide header instead of at its right edge) rather than staying pinned right. The
       auto margin is what actually does the pinning in that content-sized state; here, at
       widths above 900px, the flex-grow symmetry already leaves no free space for the auto
       margin to consume, so it is inert but harmless — see CSS Flexbox §9.5, auto margins
       only absorb free space still unclaimed after flex-grow has been resolved. */
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY

   Both classes below sit on page-authored <div> wrappers, NOT passed to the Fluent
   component via Class= — see the comment in MainHeader.razor. v4 passed them to a
   <FluentLabel Class="…">, where the b-xxxxx scope attribute never lands, so neither rule
   has ever applied in v4 either: its centred uppercase title has been rendering as plain
   unstyled text since it was written.

   Only INHERITED properties are set here. font-size / font-weight / line-height would be
   thrown away — <fluent-text>'s shadow root sets all three on :host from its own
   size/weight attributes — so those come from FluentText's Size=/Weight= parameters
   instead. color, letter-spacing and text-transform are inherited and DO reach the
   slotted text.
   --------------------------------------------------------------------------- */
.header-center-text[b-va4t5i40jt] {
    /* v4's literal #111827. --colorNeutralForeground1 is the token equivalent and is what
       .main-header already sets, so this mostly documents the intent — and keeps the rule
       correct if the header's own colour ever changes. */
    color: var(--colorNeutralForeground1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   DEGRADATION

   ~900px: the centred title is the first thing to go. Below that the three zones start
   competing and the title would be reduced to an ellipsis, which reads worse than absent.

   Once .header-center is removed from the flex flow (display: none takes it out entirely,
   not just visually), .header-left and .header-right are the only two flex items left. If
   they kept the flex: 1 1 0 equal-grow from above — the rule that centres the title against
   these two zones when .header-center IS present — they would split 100% of the container's
   width evenly between them, because there is no third item's content-size left to grow
   around. That would put .header-right's box at 50% width, and justify-content: flex-end
   would then park the profile menu at the header's MIDPOINT instead of its right edge. So
   both zones fall back to their pre-fix content-sized flex here, and margin-left: auto on
   .header-right (declared unconditionally above) is what does the actual right-pinning in
   this state, exactly as it did before the school name was removed.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .header-center[b-va4t5i40jt] {
        display: none;
    }

    /* Restores each zone's pre-fix flex value (the one it had before .header-left/.header-right
       became equal-grow to centre the title against). .header-left keeps its shrink factor of
       1 — harmless, since it holds at most a small hamburger icon — while .header-right goes
       back to fully non-flexible, exactly as it was when margin-left: auto was first measured
       as necessary for this state. */
    .header-left[b-va4t5i40jt] {
        flex: 0 1 auto;
    }

    .header-right[b-va4t5i40jt] {
        flex: 0 0 auto;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-65x2bc1xqv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-65x2bc1xqv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================
   NAVMENU — school brand section (logo + school name)

   Ported from v4 Components/Layout/NavMenu.razor.css:23-40 (.brand-section,
   .school-logo-img), :42-52 (.brand-logo-placeholder) and :55-64 (the
   "expanded" 80px sizing, which is the only size v5 needs — see below). V5 stacks
   the school NAME under the logo (.brand-school-name) and enlarges the logo to
   100px, neither of which v4 does.

   RETOKENISED, not copied: v4's --neutral-layer-1 / --neutral-foreground-rest /
   --neutral-fill-stealth-* do not exist in v5 and silently resolve to nothing
   (DESIGN-GUIDELINES.md token table). v4's plain rgba()/gradient values carry
   over unchanged — they were never tokens.

   DELIBERATELY NOT PORTED from v4's file:
   - The 250px<->50px collapsing rail (.expanded-sitenav / .unexpanded-sitenav and
     the whole @media (min-width: 769px) .sitenav block). FluentNav has no
     Collapsible/Expanded/CustomToggle in rc.4, and v4's own collapse was dead
     code — nothing ever flipped `expanded`. The nav's geometry now comes from
     FluentLayoutItem (Width/Height/border-right in MainLayout.razor) instead.
   - The @media (max-width: 768px) hamburger + slide-out panel + backdrop
     (v4 :136-248). rc.4's FluentLayoutHamburger + <fluent-drawer> replace it
     (see MainHeader.razor).
   - Every [data-theme="dark"] rule (v4 :251-259). V5 sets no data-theme attribute
     at all, on <body> or <html> — measured in diary 0034, filed as issue #282 —
     so those rules can never match. Ported dark CSS would be dead weight.
   - The @media (prefers-color-scheme: dark) block (v4 :449-482). Same conclusion
     for a different reason: v5's design tokens respond only to the library's own
     JS theme API (Blazor.theme.setThemeMode), NOT to the OS preference, so honouring
     prefers-color-scheme here would darken the brand section's border and gradient
     while every surface around it stayed light.
   - The ::deep fluent-nav-menu / fluent-nav-item / fluent-nav-group / fluent-nav-link
     restyling (v4 :267-443). Those are v4 tag names; v5 renamed the whole family
     and `fluent-nav` is a CSS class, not a tag. Re-skinning v5's nav is a design
     task, out of scope for restoring the logo.
   ============================================ */

.navmenu[b-cz7d3sakda] {
    /* Still no background of its own, and now that is load-bearing rather than
       incidental: this component renders into TWO different containers, and each one
       already paints the right colour.

       - Desktop: the nav LAYOUT AREA. rc.4 paints it --colorNeutralBackground2
         (#fafafa); MainLayout.razor's inline Style= overrides that to
         --colorNeutralBackground4 (#f0f0f0) so the column matches the nav.
       - Below 768px: rc.4's <fluent-drawer>, whose shadow-root `dialog.dialog`
         already computes rgb(240,240,240) unaided (MEASURED, diary 0063).

       Painting .navmenu here would be a third copy of a value both containers already
       have, and it would have to be kept in sync with them by hand. Leave it
       transparent and let whichever container it is in show through. */
    min-height: 100%;
}

/* ============================================
   BRAND SECTION - SCHOOL LOGO + SCHOOL NAME
   ============================================ */

.brand-section[b-cz7d3sakda] {
    display: flex;
    /* Column, so the school name stacks UNDER the logo rather than beside it. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    /* The ONLY separation between the brand block and the nav list, on purpose.
       v4's `border-bottom: 1px solid rgba(0, 0, 0, 0.08)` was ported here and then
       removed (diary 0063): once the column and the nav list are the same colour, a
       full-bleed hairline right under the school name is the one thing left that still
       draws the rail as two stacked panels — which is exactly the complaint the colour
       change was fixing. Whitespace separates them instead.

       This also lines the block up with what rc.4 does for the equivalent slot: its own
       `.fluent-nav .appitem` (the logo/title row at the top of a v5 nav) carries no
       divider either, just the shared nav background. */
    margin-bottom: 8px;
    overflow: hidden;
    /* No height/max-height here ON PURPOSE: the section grows to fit however many lines
       the school name wraps to. Do not "fix" this later by capping it — a cap plus the
       overflow:hidden above would clip the last line of a long name. */
}

.school-logo-img[b-cz7d3sakda] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
}

.brand-logo-placeholder[b-cz7d3sakda] {
    /* Must stay numerically identical to .school-logo-img above: the placeholder and the
       real logo occupy the same slot, so any size change applies to both. */
    width: 100px;
    height: 100px;
    min-width: 100px;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.15) 0%, rgba(0, 188, 242, 0.15) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.15);
}

.brand-school-name[b-cz7d3sakda] {
    /* Load-bearing, not decoration. The parent is flex-direction:column with
       align-items:center, which overrides the column default of `stretch` — so a bare text
       child sizes to shrink-to-fit/max-content on the cross axis instead of filling it, and
       can render wider than the ~234px of usable rail width before wrapping engages.
       width:100% pins the wrap box to the container's real width, which is what makes the
       break rules below reachable at all. */
    width: 100%;
    text-align: center;
    color: var(--colorNeutralForeground2);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    /* Both properties, deliberately: a single unbroken token (a long compound name, a URL-ish
       string) must break mid-word rather than overflow the 250px rail. overflow-wrap:anywhere
       is the modern spelling; word-break:break-word is the legacy fallback still honoured by
       engines that ignore `anywhere`.

       NOT set here, on purpose: white-space:nowrap, text-overflow:ellipsis, overflow:hidden,
       or any fixed/max height. Long Turkish school names are meant to WRAP to 2-3 lines, not
       get truncated (MainHeader's .school-name truncates; this one must not). */
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
/* NotificationBell — the trigger in the header band, and the popover body.

   Every selector here anchors on a PAGE-AUTHORED element (.hdr-bell, .nb-body, .nb-item …
   are plain <span>/<div>/<button> written literally in NotificationBell.razor), so they all
   receive Blazor's b-xxxxxxxxxx scope attribute and actually match. A class handed to a
   Fluent component would NOT — the "Class=" corollary in DESIGN-GUIDELINES.md — which is
   why the two Fluent components that need sizing are given inline Style=/Width= in the
   markup instead. */

/* ---------------------------------------------------------------------------
   THE TRIGGER

   position: relative only so the count bubble has something to anchor to; the button
   itself is untouched, which is the point. The bubble is a SIBLING of <fluent-button>,
   not its child — see the .razor's header for why (ChildContent would drop the
   `icon-only` attribute and with it the shadow sheet's
   `:host([icon-only]) { min-width: 32px; max-width: 32px }`, leaving a stretched pill).
   --------------------------------------------------------------------------- */
.hdr-bell[b-bjzt976z1w] {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Keeps the bubble from being what sets this wrapper's box: the bubble is
       position: absolute and therefore out of flow, so the wrapper measures the button
       alone and .header-right's gap stays even across all three of its items. */
    flex: 0 0 auto;
}

/* The unread bubble. Deliberately NOT centred on the corner: it is nudged INSIDE the
   button's box (top/right 2px rather than a negative offset) because the header band is
   `overflow: hidden` in rc.4's own CSS and a bubble hanging past the button's edge at the
   top of a 60px band has been clipped here before.

   min-width + padding rather than a fixed width: "3" and "99+" have to be the same shape
   family, and a fixed 16px box would either crop the three-character form or leave the
   one-character form lopsided. border-radius: 999px makes it a circle at one character and
   a pill at three, which is the standard behaviour and needs no branch in C#. */
.hdr-bell-count[b-bjzt976z1w] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 10px;
    font-weight: var(--fontWeightSemibold, 600);
    line-height: 1;
    /* Foreground AND background together, always. v4 hard-coded #e91e63 on #ffffff; these
       are the token equivalents, so the bubble follows the theme instead of staying pink in
       a dark one. Both MEASURED live rather than grepped — the guidelines are explicit that
       a grep hit proves nothing about whether a token is defined. */
    background-color: var(--colorPaletteRedBackground3);
    color: var(--colorNeutralForegroundOnBrand);
    /* The ring is what keeps the bubble legible where it overlaps the bell glyph. It has to
       repeat .main-header's background rather than be transparent, since the bubble sits on
       the button, not on the header. */
    box-shadow: 0 0 0 2px var(--colorNeutralBackground1);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   THE POPOVER BODY
   --------------------------------------------------------------------------- */
.nb-body[b-bjzt976z1w] {
    display: flex;
    flex-direction: column;

    /* Foreground AND background together (the header white-on-white rule). fluent-popover-b's
       shadow stylesheet already sets this exact pair on its `div[popover]`, so this is
       redundant TODAY — it is here so this surface stops depending on that staying true. */
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
}

.nb-header[b-bjzt976z1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacingHorizontalS, 8px);
    padding: var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);
}

/* A cap, not a height: with fewer than five rows the popover shrinks to fit, and only a full
   list scrolls. 5 rows is what LoadAsync asks the service for, so this number and the `5` in
   NotificationBell.razor.cs are coupled — change one, look at the other. */
.nb-list[b-bjzt976z1w] {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
}

/* Neutralises the <button> user-agent defaults (border, background, centred text, inherited
   font: caption) so the row reads as a list item. This is exactly what a <div> would have
   given for free — the <button> is here for the keyboard and screen-reader behaviour, and
   this block is the rent. */
.nb-item[b-bjzt976z1w] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS, 8px);
    width: 100%;
    padding: var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.nb-item:hover[b-bjzt976z1w] {
    background-color: var(--colorNeutralBackground1Hover);
}

/* Unread rows carry the emphasis, matching v4's `.notification-item.unread`. */
.nb-unread[b-bjzt976z1w] {
    background-color: var(--colorNeutralBackground3);
}

.nb-unread:hover[b-bjzt976z1w] {
    background-color: var(--colorNeutralBackground3Hover);
}

.nb-item-text[b-bjzt976z1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Lets the message ellipsise instead of widening the popover: a flex item's automatic
       minimum size is its content width, so without this a long message wins. */
    min-width: 0;
    flex: 1;
}

.nb-item-message[b-bjzt976z1w] {
    font-size: var(--fontSizeBase300, 14px);
    line-height: var(--lineHeightBase300, 20px);
    /* Two lines, then ellipsis. A notification message is a sentence, not a label — clamping
       to one line loses too much of it to be worth the tidier row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nb-item-time[b-bjzt976z1w] {
    font-size: var(--fontSizeBase200, 12px);
    line-height: var(--lineHeightBase200, 16px);
    color: var(--colorNeutralForeground3);
}

/* v4's `.priority-indicator`. A 4px bar rather than v4's dot: at the right-hand end of a
   two-line row a bar reads as "this row", where a dot reads as another piece of content. */
.nb-priority[b-bjzt976z1w] {
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
}

.nb-urgent[b-bjzt976z1w] {
    background-color: var(--colorPaletteRedBackground3);
}

.nb-high[b-bjzt976z1w] {
    background-color: var(--colorPaletteMarigoldBackground3);
}

.nb-state[b-bjzt976z1w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacingVerticalXL, 20px) var(--spacingHorizontalM, 12px);
    color: var(--colorNeutralForeground3);
}

.nb-footer[b-bjzt976z1w] {
    display: flex;
    justify-content: center;
    padding: var(--spacingVerticalXS, 4px) var(--spacingHorizontalM, 12px) var(--spacingVerticalS, 8px);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8fi7wd3b89],
.components-reconnect-repeated-attempt-visible[b-8fi7wd3b89],
.components-reconnect-failed-visible[b-8fi7wd3b89],
.components-pause-visible[b-8fi7wd3b89],
.components-resume-failed-visible[b-8fi7wd3b89],
.components-rejoining-animation[b-8fi7wd3b89] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-retrying[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-failed[b-8fi7wd3b89],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8fi7wd3b89] {
    display: block;
}


#components-reconnect-modal[b-8fi7wd3b89] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8fi7wd3b89 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8fi7wd3b89 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-8fi7wd3b89 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8fi7wd3b89]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-8fi7wd3b89 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8fi7wd3b89 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8fi7wd3b89 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8fi7wd3b89 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8fi7wd3b89] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8fi7wd3b89] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-8fi7wd3b89] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8fi7wd3b89] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-8fi7wd3b89] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-8fi7wd3b89] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8fi7wd3b89] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-8fi7wd3b89 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8fi7wd3b89] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8fi7wd3b89 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Bop/BopCreatePage.razor.rz.scp.css */
/*
    v4 source: Modules/Module.Students/Pages/BopCreate/BopCreatePage.razor.css (diary 0021).

    v4 -> v5 token renames applied (DESIGN-GUIDELINES.md token table):
      --neutral-layer-1            -> --colorNeutralBackground1
      --neutral-layer-2            -> --colorNeutralBackground3
      --neutral-layer-3            -> --colorNeutralBackground4
      --neutral-foreground-rest    -> --colorNeutralForeground1
      --neutral-foreground-hint    -> --colorNeutralForeground3
      --neutral-stroke-divider-rest-> --colorNeutralStroke2
      --accent-fill-rest           -> --colorBrandBackground
      --accent-foreground-rest     -> --colorBrandForeground1
      (--error / --success carried over unchanged.)

    Rules dropped rather than translated:
      - `.bop-field > fluent-text-field | fluent-text-area | fluent-select |
         fluent-number-field | fluent-combobox` — these tag names do not exist in v5
        (rc.4 renders <fluent-text-input>, <fluent-textarea>, <fluent-dropdown>), and the
        rules were already inert in v4 anyway: scoped CSS without ::deep only decorates
        the component's OWN markup, never a child component's rendered element. Every
        input already carries Style="width: 100%;" instead.
      - `.bop-suggestion-chip::part(control)` — the chip look is now produced natively by
        FluentButton's Size="ButtonSize.Small" Shape="ButtonShape.Circular".
      - `.bop-student-banner`, `.bop-avatar*`, `.bop-student-info`, `.bop-student-name`,
        `.bop-student-meta`, `.bop-error-text` — dead in v4 too (no markup ever used these
        class names; verified by grep against the v4 .razor).
*/

.bop-page[b-dq9cffxkpg] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bop-title[b-dq9cffxkpg] {
    text-align: center;
    margin: 1rem 0 0.5rem;
}

.bop-title-main[b-dq9cffxkpg],
.bop-title-sub[b-dq9cffxkpg] {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.bop-title-sub[b-dq9cffxkpg] {
    margin-top: 0.25rem;
}

/* Section banner: a real heading (weight + a rule under it), not a coloured tab.
   The 4px brand border-left this used to carry encoded nothing — it was pure
   decoration — so it is gone; the bottom rule now separates head from body. */
.bop-section-header[b-dq9cffxkpg] {
    background-color: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground1);
    padding: 0.75rem 1rem;
    font-weight: 600;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px 4px 0 0;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

.bop-section[b-dq9cffxkpg] {
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 0.5rem 1.25rem 1.25rem;
}

.bop-heading[b-dq9cffxkpg] {
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    margin-bottom: 0.75rem;
}

.bop-fields[b-dq9cffxkpg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bop-field[b-dq9cffxkpg] {
    display: block;
}

.bop-inline-field[b-dq9cffxkpg] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.bop-inline-label[b-dq9cffxkpg] {
    color: var(--colorNeutralForeground1);
}

.bop-inline-value[b-dq9cffxkpg] {
    color: var(--colorBrandForeground1);
    font-weight: 600;
}

.bop-inline-empty[b-dq9cffxkpg] {
    color: var(--colorNeutralForeground3);
    font-weight: 500;
    font-style: italic;
}

.bop-suggestions[b-dq9cffxkpg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.bop-suggestions-label[b-dq9cffxkpg] {
    font-size: 0.78rem;
    color: var(--colorNeutralForeground3);
}

/* Info callout — fully enclosed box instead of a left bar. */
.bop-help-text[b-dq9cffxkpg] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--colorBrandForeground1);
    background-color: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.bop-help-text[b-dq9cffxkpg]::before {
    content: "ℹ";
    font-weight: 700;
    flex-shrink: 0;
}

.green-line[b-dq9cffxkpg] {
    color: var(--success);
    font-weight: 600;
}

.bop-actions[b-dq9cffxkpg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.bop-school-approval-status[b-dq9cffxkpg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bop-supervisor-action-bar[b-dq9cffxkpg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: color-mix(in srgb, var(--colorBrandBackground) 8%, transparent);
    border: 1px solid var(--colorBrandBackground);
    border-radius: 4px;
}

.bop-supervisor-action-label[b-dq9cffxkpg] {
    font-weight: 600;
    color: var(--colorBrandForeground1);
    margin-right: auto;
}

/* Secondary "previously approved value" note — same enclosed-callout shape as
   .bop-help-text but deliberately quieter (flatter background, muted text). */
.bop-revision-note[b-dq9cffxkpg] {
    color: var(--colorNeutralForeground3);
    background-color: var(--colorNeutralBackground2);
    border: 1px solid var(--colorNeutralStroke2);
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    white-space: pre-wrap;
}

.bop-revision-note[b-dq9cffxkpg]::before {
    content: "Önceki onaylı: ";
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}
/* /Components/Pages/Bop/BopTerminatePage.razor.rz.scp.css */
/*
    v4 source: Modules/Module.Students/Pages/BopTerminate/BopTerminatePage.razor.css
    (diary 0021).

    v4 -> v5 token renames applied (DESIGN-GUIDELINES.md token table):
      --neutral-layer-1             -> --colorNeutralBackground1
      --neutral-layer-3             -> --colorNeutralBackground4
      --neutral-foreground-rest     -> --colorNeutralForeground1
      --neutral-stroke-divider-rest -> --colorNeutralStroke2
      --accent-fill-rest            -> --colorBrandBackground
      --accent-foreground-rest      -> --colorBrandForeground1

    Dropped: `.terminate-field > fluent-text-field | fluent-text-area | fluent-select`.
    Those tag names do not exist in v5 (rc.4 renders <fluent-text-input>,
    <fluent-textarea>, <fluent-dropdown>), and the rules were already inert in v4 —
    scoped CSS without ::deep never decorates a child component's rendered element.
    Every input carries Style="width: 100%;" instead.
*/

.terminate-page[b-92cx96gmkt] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Section banner: a real heading (weight + a rule under it), not a coloured tab.
   Matches BopCreatePage.razor.css / ParentBopApprovalPage.razor.css. */
.terminate-section-header[b-92cx96gmkt] {
    background-color: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground1);
    padding: 0.75rem 1rem;
    font-weight: 600;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px 4px 0 0;
    letter-spacing: 0.02em;
}

.terminate-section[b-92cx96gmkt] {
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 1rem 1.25rem 1.25rem;
}

.terminate-fields[b-92cx96gmkt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Info callout — fully enclosed box instead of a left bar. */
.terminate-help-text[b-92cx96gmkt] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--colorBrandForeground1);
    background-color: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.terminate-help-text[b-92cx96gmkt]::before {
    content: "ℹ";
    font-weight: 700;
    flex-shrink: 0;
}

.terminate-actions[b-92cx96gmkt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--colorNeutralStroke2);
}
/* /Components/Pages/ConsentFormsPage.razor.rz.scp.css */
/* Section layout only. The `.grid-scroll` overflow-x wrapper that used to be the whole of
   this file is GONE: it existed to hide the consequence of a fixed 200px İşlemler track, and
   that track is now `auto` under the data-grid-fullwidth contract, so there is nothing left to
   scroll around.

   Every selector below hangs off a plain element authored literally in ConsentFormsPage.razor
   — that is the only reason they match. Blazor stamps its b-xxxxxxxxxx scope attribute onto
   page-authored HTML and never onto a component or anything a component rendered, so a Class=
   handed to a Fluent component could not be reached from here.
   (DESIGN-GUIDELINES.md, "Reason 2 — the scope attribute is never on the Fluent element".) */

/* One consent-form type. Replaces the <FluentCard Style="padding: 1.5rem"> each type used to
   sit in — the page needs the vertical rhythm, not a second card surface inside PageCard.
   min-width: 0 lets an over-wide grid shrink instead of widening the section. */
.consent-section[b-mnqscifwwv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* PageCard is a flex column with a 12px gap, which is the right distance between a heading and
   its own grid but too tight between one section's grid and the NEXT section's heading. */
.consent-section + .consent-section[b-mnqscifwwv] {
    margin-top: 16px;
}

/* `.consent-empty` is GONE. It styled a page-level "Henüz form bulunmuyor." <div> that only
   rendered because the grid was wrapped in an emptiness @if — which also meant the grid was
   absent while the page loaded and could never show its spinner. The empty state now lives
   inside the grid (EmptyMessage=/EmptyIcon=/EmptyDescription= -> GridEmptyState), which owns
   its own padding, so there is nothing left for this file to style.
   PAGE-PATTERNS.md § Empty, loading and error states. */
/* /Components/Pages/DemoIconsPage.razor.rz.scp.css */
/* DemoIconsPage scoped styles. Layout only — every COLOUR is a FluentUI design token applied
   inline from the code-behind/markup, so the cards stay theme-adaptive.

   All styled elements are authored in DemoIconsPage.razor MARKUP so the b-xxxxxxxxxx scope
   attribute lands on them. Blazor never stamps it onto a child component or onto anything a child
   component rendered, so a rule aimed at a Fluent element needs ::deep AND a page-authored
   ancestor. See docs/fluentui-v5/DESIGN-GUIDELINES.md, "Reason 2". */

.icon-browser-controls[b-al3nul9of6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.icon-browser-search[b-al3nul9of6] {
    flex: 1 1 260px;
    max-width: 420px;
}

/* The FluentTextInput host is intrinsically sized — stretching needs this ::deep rule, which works
   only because .icon-browser-search sits on a plain <div> authored in the page's own markup. */
.icon-browser-search[b-al3nul9of6]  fluent-text-input {
    display: block;
    width: 100%;
}

/* FIXED height: the browse area never resizes with page, match count or icon size, so paging
   causes no layout jump. A page that does not fit (48px icons, narrow window) scrolls INSIDE. */
.icon-browser-grid[b-al3nul9of6] {
    height: 620px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 8px;
    width: 100%;
}

.icon-browser-card[b-al3nul9of6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    min-width: 0;
}

/* FluentIcon renders a plain <svg> in v5 (its custom element is gone), and that svg is
   component-internal, so it carries no page scope attribute — reach it with ::deep. */
.icon-browser-card[b-al3nul9of6]  svg {
    flex-shrink: 0;
}

.icon-browser-name[b-al3nul9of6] {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-all;
    min-width: 0;
    color: var(--colorNeutralForeground2);
}

/* Empty state spans the whole grid and centres inside the fixed-height area. */
.icon-browser-empty[b-al3nul9of6] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}
/* /Components/Pages/DemoPage.razor.rz.scp.css */
/* DemoPage scoped styles. Layout only — every COLOUR here is either a FluentUI design token
   (var(--color…)) or comes from a typed constant applied inline in the markup, so the swatches and
   cards stay theme-adaptive.

   Every selector below targets a plain HTML element authored in DemoPage.razor MARKUP. That is not
   a stylistic choice: Blazor stamps the b-xxxxxxxxxx scope attribute only onto elements written
   literally in the .razor file, so a rule aimed at a Fluent component (or at a class passed to one
   via Class="…") compiles to `.that-class[b-…]` and matches nothing. Reaching inside a child
   component needs ::deep, and ::deep still requires a page-authored ancestor to hang off.
   See docs/fluentui-v5/DESIGN-GUIDELINES.md, "Reason 2 — the scope attribute is never on the
   Fluent element". */

.demo-swatch-grid[b-l1j0x5nrxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    width: 100%;
}

.demo-swatch[b-l1j0x5nrxy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The height is load-bearing: with no height the block collapses to 0px and the colour is
   invisible. This exact rule failing to match (because the element was built in a code-behind
   RenderFragment) is what made the swatches invisible on the page this was ported from. */
.demo-swatch-block[b-l1j0x5nrxy] {
    height: 56px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
}

.demo-swatch-label[b-l1j0x5nrxy] {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-all;
    color: var(--colorNeutralForeground2);
}

.demo-form-grid[b-l1j0x5nrxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
}

/* (The old `.demo-paginator` centring wrapper is gone with the hand-written <FluentPaginator>.
   <GridPager> owns its own full-width, space-between row — see GridPager.razor.css.) */

/* ── Icon finder (section 8) ── */

.demo-icon-search[b-l1j0x5nrxy] {
    width: 100%;
    max-width: 420px;
}

/* The FluentTextInput host is intrinsically sized, so Style="width:100%" on the component is not
   enough — stretching needs this ::deep rule, and it only works because .demo-icon-search is a
   plain <div> authored in the page's own markup. */
.demo-icon-search[b-l1j0x5nrxy]  fluent-text-input {
    display: block;
    width: 100%;
}

.demo-icon-grid[b-l1j0x5nrxy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    width: 100%;
}

.demo-icon-card[b-l1j0x5nrxy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    min-width: 0;
}

/* FluentIcon renders a plain <svg> in v5 (its custom element is gone), and that svg is
   component-internal, so it carries no page scope attribute — reach it with ::deep. */
.demo-icon-card[b-l1j0x5nrxy]  svg {
    flex-shrink: 0;
}

.demo-icon-name[b-l1j0x5nrxy] {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-all;
    min-width: 0;
    color: var(--colorNeutralForeground2);
}
/* /Components/Pages/Developer/DeveloperSmsSettingsPage.razor.rz.scp.css */
/* Key/value read-out tables for the environment and effective-value blocks. */
.kv-table[b-zd5qlh3ut9] {
    border-collapse: collapse;
    margin-top: 0.75rem;
}

.kv-table td[b-zd5qlh3ut9] {
    padding: 4px 16px 4px 0;
    vertical-align: top;
}

.kv-key[b-zd5qlh3ut9] {
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.kv-source[b-zd5qlh3ut9] {
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}
/* /Components/Pages/Dialogs/FamilyApprovalRequestDialog.razor.rz.scp.css */
/* v4 source: the inline <style> block at the bottom of
   Modules/Module.Students/Pages/StudentView/Dialogs/FamilyApprovalRequestDialog.razor.

   Moved into a real scoped stylesheet (diary 0031). Every selector below targets a
   plain <div>/<span> written literally in FamilyApprovalRequestDialog.razor, so
   Blazor stamps the b-xxxxx scope attribute directly onto those elements and the
   rules match with no ::deep. Nothing here reaches into a child component's markup.

   v4 -> v5 token renames:
     --neutral-stroke-rest      -> --colorNeutralStroke1
     --neutral-foreground-rest  -> --colorNeutralForeground1
     --neutral-foreground-hint  -> --colorNeutralForeground3 */

.parent-option-row[b-9jyfyqxf3b] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 6px;
}

.parent-option-name[b-9jyfyqxf3b] {
    font-weight: 600;
    font-size: 14px;
}

.parent-option-phone[b-9jyfyqxf3b] {
    font-size: 13px;
    color: var(--colorNeutralForeground1);
}

.parent-option-no-phone[b-9jyfyqxf3b] {
    font-size: 13px;
    color: var(--colorNeutralForeground3);
    font-style: italic;
}
/* /Components/Pages/Dialogs/PersonnelEditDialog.razor.rz.scp.css */
/* User-option template — used by every personnel picker (Eğitim
   Direktörü / Eğitim Koordinatörü / Süpervizör / Program Sorumlusu /
   Öğretmenler / Diğer).

   v5 note (⚠️ REASONING CORRECTED IN DIARY 0030): the v4 version of this file
   also had `::deep fluent-select`/`::deep fluent-option` rules to hide the
   role-subtitle line inside the FluentSelect trigger specifically. Those were
   dropped during the port on the claim that "v5's FluentSelect/FluentOption
   render as plain Blazor markup, not custom elements" — that claim is FALSE.
   rc.4 renders `<fluent-dropdown>` (v4's `fluent-select`, renamed) and
   `<fluent-option>` (unchanged), and `fluent-option` still exposes `content`
   and `description` parts. So the rules were dead on the TAG NAME, and are in
   principle revivable as `::deep fluent-dropdown` / `::deep fluent-option` —
   but only from an anchor that carries the b-xxxxxxxxxx scope attribute, and
   `fluent-dropdown` itself exposes no parts at all in rc.4.
   Left dropped: the role subtitle now shows in both the trigger and the
   dropdown list; a cosmetic difference from v4, not a functional gap, and
   restoring it is a design call for a browser-verified pass. */

.user-option[b-d7ulmmwspu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    min-height: 40px;
    flex: 1;
}

.user-option-avatar[b-d7ulmmwspu] {
    width: 28px;
    height: 28px;
    border-radius: var(--avatar-radius);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--colorNeutralBackground4);
    overflow: hidden;
}

.user-option-avatar img[b-d7ulmmwspu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-option-text[b-d7ulmmwspu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.user-option-name[b-d7ulmmwspu] {
    line-height: 1.2;
}

.user-option-role[b-d7ulmmwspu] {
    color: var(--colorNeutralForeground3);
    font-size: 0.85em;
    line-height: 1.1;
}
/* /Components/Pages/GagTimeline.razor.rz.scp.css */
/* v4 source: Module.Students/Pages/Gag/GagTimeline.razor.css. Ported for diary
   0026. No `::deep fluent-*` / `::part(...)` selectors existed in the v4 file
   (grepped before porting) - this component's markup was always plain
   divs/spans, not FluentUI custom elements, so nothing needed dropping there.

   Token translation applied (DESIGN-GUIDELINES's "v4 CSS custom property names
   are different" section):
   - The one v4-only token this file used, `var(--neutral-foreground-hint)`
     (on .gag-empty), does not exist in v5 and silently resolves to nothing ->
     replaced with the documented v5 equivalent `--colorNeutralForeground3`.
   - `--success`/`--error`/`--info` are the guideline's confirmed-unchanged
     status names (verified again here by grepping the installed rc.4 JS
     bundle for literal `--success`/`--error`/`--info`/`--warning` - all four
     present verbatim) - used below for the done/missed/upcoming status colors
     instead of the v4 mock's hardcoded hex, so the timeline's own semantic
     colors react to the FluentUI runtime theme.
   - Everything else in the v4 file was a hardcoded hex color (Tailwind-slate-
     style mockup palette, see docs/mockups/gag-timeline.html), not a v4 token -
     those don't "break" in v5 (they're just CSS, not custom properties), but
     large hardcoded-white panel backgrounds (.gag-board/.gag-labels) would sit
     as a jarring light box against a dark FluentUI theme, the same problem
     WorkersPage.razor.css's [data-theme="dark"] overrides exist to solve. This
     port takes the alternative (and, for plain neutral surfaces, more v5-
     idiomatic) route of mapping the board's structural chrome - panel
     backgrounds, dividers, and body text - onto real FluentUI neutral tokens
     (--colorNeutralBackground1/3/4, --colorNeutralStroke2,
     --colorNeutralForeground1/2/3) instead of hand-rolled dark-theme
     overrides, since those tokens are themselves theme-reactive at runtime
     (JS-injected by the FluentUI bundle - see DESIGN-GUIDELINES). The
     Foreground1/2/3 "which shade for which text" choice is an ORDINAL
     inference (1 = strongest/.gag-code, 2 = medium/.gag-check,.gag-legend,
     .gag-tick-year, 3 = hint/.gag-name,.gag-dates,.gag-tick,.gag-summary,
     matching the one pairing DESIGN-GUIDELINES already documents:
     neutral-foreground-hint -> Foreground3) - NOT pixel-verified against a
     browser, flagged in the diary.
   - A handful of small, purely decorative accents were deliberately LEFT as
     literal hex rather than tokenized, to keep this pass focused and low-risk:
     .pill-active (green "Devam ediyor" chip), .gag-today/.today-legend (the
     pink "today" line), .gag-scroll::-webkit-scrollbar-thumb. None of these
     are large surfaces, so a plain hex on a dark background is a much smaller
     visual risk than the panel backgrounds were. Flagged in the diary rather
     than silently left inconsistent. */

.gag-subtitle[b-js7t1xvf5q] {
    color: var(--colorNeutralForeground2);
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}

.gag-empty[b-js7t1xvf5q] {
    text-align: center;
    padding: 3rem;
    color: var(--colorNeutralForeground3);
}

.gag-toolbar[b-js7t1xvf5q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.gag-check[b-js7t1xvf5q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--colorNeutralForeground2);
}

.gag-legend[b-js7t1xvf5q] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--colorNeutralForeground2);
    margin-bottom: 0.75rem;
}

.gag-legend > span[b-js7t1xvf5q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dot[b-js7t1xvf5q] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: inline-block;
}

.dot-done[b-js7t1xvf5q] {
    background: var(--success);
}

.dot-missed[b-js7t1xvf5q] {
    background: var(--error);
}

.dot-upcoming[b-js7t1xvf5q] {
    background: #eaf3fb;
    border: 2px solid var(--info);
}

.relbadge-legend[b-js7t1xvf5q] {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--colorBrandBackground);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.today-legend[b-js7t1xvf5q] {
    display: inline-block;
    width: 0.85rem;
    border-top: 2px solid #fb7185;
    height: 0;
}

/* ── Board ───────────────────────────────────────────────────────────── */

.gag-board[b-js7t1xvf5q] {
    display: flex;
    overflow: hidden;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
}

.gag-labels[b-js7t1xvf5q] {
    flex: 0 0 236px;
    width: 236px;
    border-right: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
    z-index: 2;
}

.gag-labels-head[b-js7t1xvf5q] {
    height: 44px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    display: flex;
    align-items: flex-end;
    padding: 0 0.75rem 0.25rem;
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
}

.gag-label[b-js7t1xvf5q] {
    height: 60px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.75rem;
}

.gag-label-top[b-js7t1xvf5q] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gag-code[b-js7t1xvf5q] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.gag-name[b-js7t1xvf5q] {
    font-size: 0.7rem;
    color: var(--colorNeutralForeground3);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gag-dates[b-js7t1xvf5q] {
    font-size: 0.62rem;
    color: var(--colorNeutralForeground3);
    line-height: 1.2;
}

.pill[b-js7t1xvf5q] {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 4px;
}

.pill-done[b-js7t1xvf5q] {
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground2);
}

.pill-active[b-js7t1xvf5q] {
    background: #d1fae5;
    color: #047857;
}

/* ── Track ───────────────────────────────────────────────────────────── */

.gag-scroll[b-js7t1xvf5q] {
    overflow-x: auto;
    flex: 1;
    position: relative;
}

.gag-scroll[b-js7t1xvf5q]::-webkit-scrollbar {
    height: 10px;
}

.gag-scroll[b-js7t1xvf5q]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

.gag-track[b-js7t1xvf5q] {
    position: relative;
}

.gag-axis[b-js7t1xvf5q] {
    position: relative;
    height: 44px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.gag-tick[b-js7t1xvf5q] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--colorNeutralStroke2);
    font-size: 10px;
    color: var(--colorNeutralForeground3);
    padding-left: 3px;
}

.gag-tick-month[b-js7t1xvf5q] {
    position: absolute;
    bottom: 0.25rem;
}

.gag-tick-year[b-js7t1xvf5q] {
    position: absolute;
    top: 0.25rem;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
}

.gag-lanes[b-js7t1xvf5q] {
    position: relative;
}

.gag-lane[b-js7t1xvf5q] {
    position: relative;
    height: 60px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.lane-base[b-js7t1xvf5q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--colorNeutralBackground3);
}

.lane-span[b-js7t1xvf5q] {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: var(--colorNeutralBackground4);
    border-radius: 2px;
}

.gag-marker[b-js7t1xvf5q] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.m-done[b-js7t1xvf5q] {
    background: var(--success);
    color: #fff;
}

.m-missed[b-js7t1xvf5q] {
    background: var(--error);
    color: #fff;
}

.m-upcoming[b-js7t1xvf5q] {
    background: #eaf3fb;
    color: #0c5697;
    border: 2px solid var(--info);
}

.relbadge[b-js7t1xvf5q] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--colorBrandBackground);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    padding: 0 2px;
    border: 1.5px solid var(--colorNeutralBackground1);
}

.gag-today[b-js7t1xvf5q] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #fb7185;
    z-index: 3;
}

.gag-summary[b-js7t1xvf5q] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    margin-top: 0.5rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---- Role-dependent cockpit layout (#269) ---- */
.home-greeting[b-bt9zkwhyg0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.hg-title[b-bt9zkwhyg0] {
    font-size: 1.5rem;
    /* Pinned for the same reason .page-card-title pins it: default-fuib.css:33-36 sets BOTH
       font-size and line-height on h1 (--fontSizeHero900 / --lineHeightHero900), so pinning
       only font-size leaves a 24px title sitting in a MEASURED 52px line box. Home is the one
       page that supplies its own <h1> (it passes no PageCard Title), so it needed its own fix.
       32px == --lineHeightBase600, Fluent's own pairing for a 24px face.
       Standing rule: whenever you pin a heading's font-size, pin its line-height in the same
       rule. */
    line-height: 32px;
    font-weight: 600;
    margin: 0;
}

.hg-sub[b-bt9zkwhyg0] {
    color: var(--colorNeutralForeground3);
    font-size: 0.86rem;
    margin-top: 2px;
}

.home-section[b-bt9zkwhyg0] {
    margin-bottom: 24px;
}

.cockpit-grid[b-bt9zkwhyg0] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: start;
}

.cockpit-main[b-bt9zkwhyg0] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.cockpit-side[b-bt9zkwhyg0] {
    min-width: 0;
}

@media (max-width: 1100px) {
    .cockpit-grid[b-bt9zkwhyg0] {
        grid-template-columns: 1fr;
    }
}

.urgent-strip[b-bt9zkwhyg0] {
    background: #fff5f5;
    border: 1px solid #f3c6c6;
    border-radius: 12px;
    padding: 16px;
}

.us-head[b-bt9zkwhyg0] {
    font-weight: 600;
    color: #b71c1c;
    margin-bottom: 12px;
}

.us-items[b-bt9zkwhyg0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.us-item[b-bt9zkwhyg0] {
    text-align: left;
    border: 1px solid #f3c6c6;
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}

.us-item:hover[b-bt9zkwhyg0] {
    border-color: #e09b9b;
}

.us-item-title[b-bt9zkwhyg0] {
    font-weight: 500;
    font-size: 0.86rem;
}

.us-item-sub[b-bt9zkwhyg0] {
    color: #c0392b;
    font-size: 0.74rem;
    margin-top: 2px;
}

/* Responsive Table/Card View */
.desktop-view[b-bt9zkwhyg0] {
    display: block;
}

.mobile-view[b-bt9zkwhyg0] {
    display: none;
}

@media (max-width: 768px) {
    .desktop-view[b-bt9zkwhyg0] {
        display: none;
    }

    .mobile-view[b-bt9zkwhyg0] {
        display: block;
    }
}

.student-card[b-bt9zkwhyg0] {
    background: var(--colorNeutralBackground1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--colorNeutralStroke1);
}

.student-card-header[b-bt9zkwhyg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--colorNeutralStroke1);
    padding-bottom: 8px;
}

.student-name[b-bt9zkwhyg0] {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--colorBrandBackground);
}

.student-detail-row[b-bt9zkwhyg0] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.student-detail-label[b-bt9zkwhyg0] {
    color: var(--colorNeutralForeground1);
    font-weight: 600;
    margin-right: 10px;
}

.student-detail-value[b-bt9zkwhyg0] {
    color: var(--colorNeutralForeground1);
    text-align: right;
    flex: 1;
}

/* ---- Clickable student grid / cards (#271) ---- */
/* REVIVED in diary 0030. These two rules were dead: `clickable-grid` used to be passed as
   Class= to <CocukDataGrid>, which puts the class on the rendered <table> but NOT the
   b-xxxxxxxxxx scope attribute, so `.clickable-grid[b-…] tbody tr` matched nothing. The
   class now sits on the page-authored <div> wrapper in Home.razor instead, which does carry
   the scope attribute. rc.4's FluentDataGrid renders a real <table>/<thead>/<tbody>
   (decompile-verified), so `::deep tbody tr` is the correct way in. */
.clickable-grid[b-bt9zkwhyg0]  tbody tr {
    cursor: pointer;
}

.clickable-grid[b-bt9zkwhyg0]  tbody tr:hover {
    background: var(--colorNeutralBackground3);
}

.clickable-card[b-bt9zkwhyg0] {
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

.clickable-card:hover[b-bt9zkwhyg0] {
    border-color: var(--colorBrandBackground);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ---- Parent hub (#271) ---- */
.parent-hub-head[b-bt9zkwhyg0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.parent-hub-emoji[b-bt9zkwhyg0] {
    font-size: 1.2rem;
}

.parent-hub-count[b-bt9zkwhyg0] {
    margin-left: auto;
}

.child-card-grid[b-bt9zkwhyg0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.child-card[b-bt9zkwhyg0] {
    text-align: left;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 10px;
    background: var(--colorNeutralBackground1);
    padding: 14px;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s, border-color .15s;
}

.child-card:hover[b-bt9zkwhyg0] {
    border-color: var(--colorBrandBackground);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.child-card-top[b-bt9zkwhyg0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.child-avatar[b-bt9zkwhyg0] {
    width: 44px;
    height: 44px;
    border-radius: var(--avatar-radius);
    background: var(--colorBrandBackground);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.child-avatar-img[b-bt9zkwhyg0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.child-name[b-bt9zkwhyg0] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.child-teacher[b-bt9zkwhyg0] {
    font-size: 0.78rem;
    color: var(--colorNeutralForeground3);
    margin-top: 2px;
}

.child-card-row[b-bt9zkwhyg0] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
}

.child-card-label[b-bt9zkwhyg0] {
    color: var(--colorNeutralForeground3);
    flex-shrink: 0;
}

.child-card-value[b-bt9zkwhyg0] {
    color: var(--colorNeutralForeground1);
    font-weight: 500;
    text-align: right;
}

.child-card-detail[b-bt9zkwhyg0] {
    color: var(--colorBrandBackground);
    font-size: 0.84rem;
    font-weight: 500;
}

.pending-list[b-bt9zkwhyg0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pending-item[b-bt9zkwhyg0] {
    text-align: left;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
    transition: border-color .15s;
}

.pending-item:hover[b-bt9zkwhyg0] {
    border-color: var(--colorBrandBackground);
}

.pending-item-title[b-bt9zkwhyg0] {
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--colorNeutralForeground1);
}

.pending-item-sub[b-bt9zkwhyg0] {
    color: var(--colorBrandBackground);
    font-size: 0.76rem;
    margin-top: 2px;
}
/* /Components/Pages/Notifications/NotificationList.razor.rz.scp.css */
/* Main Container */
.notification-list-container[b-mawfcorwdr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

/* Filter Row */
.filters-row[b-mawfcorwdr] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}

.filter-item[b-mawfcorwdr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 150px;
}

.filter-label[b-mawfcorwdr] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    padding-left: 2px;
}

.filter-actions[b-mawfcorwdr] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Filter and Action Buttons Mobile Optimization */
@media (max-width: 768px) {
    .filters-row[b-mawfcorwdr] {
        gap: 8px;
    }

    .filter-item[b-mawfcorwdr] {
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .filter-item[b-mawfcorwdr] {
        min-width: 100%;
    }

    .filter-actions[b-mawfcorwdr] {
        width: 100%;
    }
}

/* Card Style */
.notification-card[b-mawfcorwdr] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* THE CLICKABLE CARD — cursor and hover together, and only where the click does something.

   `.clickable` is emitted per card by IsClickable() in NotificationList.razor.cs: the card has
   an ActionUrl to follow, or it is unread and the click marks it read. A read card with no
   ActionUrl gets none of this, because clicking it would do nothing — that is the same rule
   CocukDataGrid derives ShowHover from (diary 0068, DESIGN-GUIDELINES {#grid-hover}), applied
   per card instead of per grid.

   `cursor: pointer` and the hover state arrive TOGETHER and leave together, exactly as rc.4
   ships them for the DataGrid (`.hover…:hover td { cursor: pointer; background-color: … }`).
   Neither half is decorative: one without the other is the same lie in one direction or the
   other. History: diary 0068 removed a `translateY(-2px)` + `0 8px 24px` lift (and an icon
   scale) from this card because the click did not exist; diary 0069 wired the click and gave
   the affordance back — deliberately NOT as that lift. */
.notification-card.clickable[b-mawfcorwdr] {
    cursor: pointer;
}

/* Restrained on purpose: a background and border shift, which is the DataGrid's own hover
   vocabulary. NOT the old lift + elevation bump — a lifting, shadow-casting card reads as a
   BUTTON, and a page of them reads as a page of buttons, which is the complaint that started
   this. Hex rather than tokens because every other colour on this card is hex: a themed hover
   sitting on a hard-coded #ffffff base would come apart in a dark theme, not hold together. */
.notification-card.clickable:hover[b-mawfcorwdr] {
    background: #fafafa;
    border-color: #e5e7eb;
}

/* Unread Styling */
.notification-card.unread[b-mawfcorwdr] {
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    border-color: #dbeafe;
}

.notification-card.unread[b-mawfcorwdr]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    /* Brand Blue Gradient */
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.3);
}

/* The unread variant of the hover: one step deeper than `.unread`'s own gradient, rather than
   the flat #fafafa, so the blue wash does not vanish for as long as the pointer is on it. Same
   `#bfdbfe` border 0068 removed — honest now that the card is clickable. Three classes, so it
   outranks `.notification-card.clickable:hover` regardless of order. */
.notification-card.unread.clickable:hover[b-mawfcorwdr] {
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    border-color: #bfdbfe;
}

/* Priority Indicators (Left Border Color Override) */
.notification-card.priority-urgent[b-mawfcorwdr]::before {
    background: #ef4444;
    /* Red */
    width: 4px;
}

.notification-card.priority-high[b-mawfcorwdr]::before {
    background: #f97316;
    /* Orange */
}

/* Icon Section */
.card-icon-wrapper[b-mawfcorwdr] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #4b5563;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* `.notification-card:hover .card-icon-wrapper { transform: scale(1.05); … }` was removed in
   diary 0068 (the icon grew on hover, for a click the card did not accept) and is STAYING
   removed now that the click exists — diary 0069. The card needs one hover signal, not a
   second one that animates a piece of its content; a growing icon is what made the card read
   as a control rather than as a list item. */

.notification-card.unread .card-icon-wrapper[b-mawfcorwdr] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}

.notification-card.priority-urgent .card-icon-wrapper[b-mawfcorwdr] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
    animation: urgentPulse-b-mawfcorwdr 2s infinite;
}

@keyframes urgentPulse-b-mawfcorwdr {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
    }
}

/* Content Section */
.card-content[b-mawfcorwdr] {
    flex: 1;
    min-width: 0;
    /* Text truncation fix */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-header[b-mawfcorwdr] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notification-type[b-mawfcorwdr] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.notification-card.unread .notification-type[b-mawfcorwdr] {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #0369a1;
    border-color: #93c5fd;
}

.notification-date[b-mawfcorwdr] {
    font-size: 12px;
    color: #9ca3af;
}

.card-message[b-mawfcorwdr] {
    font-size: 15px;
    color: #374151;
    line-height: 1.5;
}

.notification-card.unread .card-message[b-mawfcorwdr] {
    font-weight: 600;
    color: #111827;
}

/* THE HIT AREA. `.card-hit` is the same element as `.card-message` — a real <button> the
   markup swaps in when the card is clickable — so this block is only the <button> user-agent
   reset. Every typographic property is left to `.card-message` above (and to the media
   queries below, which are class-only selectors and would LOSE to an element-qualified
   `button.card-message`; that is why this is a second class and not `button.card-message`). */
.card-hit[b-mawfcorwdr] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    appearance: none;
    text-align: left;
    white-space: normal;
    font-family: inherit;
    font-weight: inherit;
    cursor: pointer;
}

/* What makes ONE button cover the WHOLE card. `.notification-card` is `position: relative`
   already, so `inset: 0` resolves against the card; z-index stays auto so `.card-actions`
   (z-index: 1) keeps its own clicks. This is the standard "stretched link" pattern, and it is
   what lets the card be entirely clickable while remaining a <div> that legally contains the
   three İşlemler <button>s. */
.card-hit[b-mawfcorwdr]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Focus lands on the message but the ring is drawn around the CARD, by outlining the stretched
   overlay instead of the text box — keyboard focus should look like "this card", the same
   region the pointer gets. `outline-offset: -2px` keeps it inside the card's own
   `overflow: hidden`; the radius matches `.notification-card`'s 12px. */
.card-hit:focus-visible[b-mawfcorwdr] {
    outline: none;
}

.card-hit:focus-visible[b-mawfcorwdr]::after {
    outline: 2px solid #0284c7;
    outline-offset: -2px;
    border-radius: 12px;
}

.card-meta[b-mawfcorwdr] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    align-items: center;
}

/* Actions Section */
.card-actions[b-mawfcorwdr] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    /* Push to right */
    padding-left: 16px;
    /* ABOVE `.card-hit::after`, which otherwise covers the whole card: a positioned element
       with z-index: 1 paints (and hit-tests) over a positioned element with z-index: auto.
       Without this the card's click would swallow Sil / Okundu yap / Tamamlandı. */
    position: relative;
    z-index: 1;
    /* And the gaps BETWEEN those buttons are not part of the card's hit area, so they do not
       get the card's pointer. The buttons bring their own. */
    cursor: auto;
}

/* Overdue Badge */
.overdue-badge[b-mawfcorwdr] {
    color: #dc2626;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 6px;
    border: 1px solid #fca5a5;
    animation: overdueShake-b-mawfcorwdr 3s ease-in-out infinite;
}

@keyframes overdueShake-b-mawfcorwdr {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-1px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(1px);
    }
}

/* Due Date */
.due-date[b-mawfcorwdr] {
    font-size: 12px;
    color: #6b7280;
}

.due-date.overdue[b-mawfcorwdr] {
    color: #ef4444;
}

/* Empty State */
.notification-empty-state[b-mawfcorwdr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px dashed #e5e7eb;
    text-align: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.notification-empty-state:hover[b-mawfcorwdr] {
    border-color: #d1d5db;
    background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);
}

.empty-state-text[b-mawfcorwdr] {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Tablet Responsive */
@media (max-width: 768px) {
    .notification-list-container[b-mawfcorwdr] {
        gap: 12px;
        padding: 4px 0;
    }

    .notification-card[b-mawfcorwdr] {
        padding: 16px;
        gap: 12px;
    }

    .card-icon-wrapper[b-mawfcorwdr] {
        width: 42px;
        height: 42px;
    }

    .card-content[b-mawfcorwdr] {
        gap: 4px;
    }

    .card-message[b-mawfcorwdr] {
        font-size: 14px;
    }

    .card-actions[b-mawfcorwdr] {
        gap: 4px;
        padding-left: 8px;
    }
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .notification-list-container[b-mawfcorwdr] {
        gap: 8px;
        padding: 0;
    }

    .notification-card[b-mawfcorwdr] {
        flex-direction: column;
        gap: 12px;
        padding: 14px;
        border-radius: 10px;
    }

    .card-icon-wrapper[b-mawfcorwdr] {
        width: 40px;
        height: 40px;
    }

    .card-header[b-mawfcorwdr] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .notification-type[b-mawfcorwdr] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .notification-date[b-mawfcorwdr] {
        font-size: 11px;
    }

    .card-message[b-mawfcorwdr] {
        font-size: 14px;
        line-height: 1.4;
    }

    .card-meta[b-mawfcorwdr] {
        gap: 8px;
        margin-top: 2px;
    }

    .due-date[b-mawfcorwdr] {
        font-size: 11px;
    }

    .overdue-badge[b-mawfcorwdr] {
        font-size: 11px;
    }

    .card-actions[b-mawfcorwdr] {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
        justify-content: flex-end;
        gap: 6px;
    }

    /* Empty state mobile optimization */
    .notification-empty-state[b-mawfcorwdr] {
        padding: 48px 16px;
        gap: 12px;
    }

    .empty-state-text[b-mawfcorwdr] {
        font-size: 14px;
    }
}
/* /Components/Pages/ParentActivationPage.razor.rz.scp.css */
/* The form section's label is now a real <h2> (see the comment at its markup). Identical rule
   to WorkerActivationPage.razor.css — these two pages are twins and their scoped stylesheets
   were already byte-identical; keep them that way.

   This reproduces EXACTLY what the <FluentText Weight="TextWeight.Bold"
   Size="TextSize.Size600" Style="margin-bottom: 20px;"> it replaced computed to, so the
   promotion moves nothing.

   Values read from rc.4's <fluent-text> shadow stylesheet
   (Microsoft.FluentUI.AspNetCore.Components.lib.module.js, 5.0.0-rc.4-26180.1):
       :host([size='600'])    { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600) }
       :host([weight='bold']) { font-weight: var(--fontWeightBold) }

   margin: 0 0 20px restores the old inline margin-bottom AND kills the browser's own <h2>
   margin. Neither half is optional: default-fuib.css:28-40 zeroes h2's margin-TOP and sets
   font-size: var(--fontSizeHero800), but the UA's 0.83em margin-BOTTOM survives, which at
   Hero800 is ~27px — it would silently replace the 20px this element has always had.

   No display rule is needed. <fluent-text> is display: inline by default (no Block was set),
   but this element is a direct child of a FluentStack — a plain flex <div> — and flex items are
   blockified, so the old inline value never applied either. An <h2> lands in the same box. */
.activation-section-title[b-4kumxx4hql] {
    margin: 0 0 20px;
    font-size: var(--fontSizeBase600);
    line-height: var(--lineHeightBase600);
    font-weight: var(--fontWeightBold);
}

.isolated-page[b-4kumxx4hql] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 20px;
    background-color: #f5f5f5;
    z-index: 1;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .isolated-page[b-4kumxx4hql] {
        padding: 15px 10px;
    }
}

/* Password strength indicator */
.password-strength[b-4kumxx4hql] {
    margin-top: 4px;
}

.password-strength-bar[b-4kumxx4hql] {
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-fill[b-4kumxx4hql] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength-1[b-4kumxx4hql] {
    background-color: #d32f2f;
}

.password-strength-2[b-4kumxx4hql] {
    background-color: #f57c00;
}

.password-strength-3[b-4kumxx4hql] {
    background-color: #fbc02d;
}

.password-strength-4[b-4kumxx4hql] {
    background-color: #388e3c;
}

.password-strength-5[b-4kumxx4hql] {
    background-color: #1b5e20;
}
/* /Components/Pages/ParentBopApprovalPage.razor.rz.scp.css */
/*
   v4 source: Modules/Module.Students/Pages/ParentApproval/ParentBopApprovalPage.razor.css.

   v5 adaptations — v4's Fast-era CSS custom properties do not exist in v5 and would
   silently resolve to nothing, so every token was renamed per DESIGN-GUIDELINES.md's
   token table:
     --neutral-layer-3           -> --colorNeutralBackground4
     --neutral-foreground-rest   -> --colorNeutralForeground1
     --neutral-stroke-divider-rest -> --colorNeutralStroke2
     --accent-fill-rest          -> --colorBrandBackground
     --neutral-layer-1           -> --colorNeutralBackground1
     --neutral-layer-2           -> --colorNeutralBackground3
     --accent-foreground-rest    -> --colorBrandForeground1
     --neutral-foreground-hint   -> --colorNeutralForeground3   (only used inline in the .razor)

   DROPPED: v4's `.bop-field > fluent-text-field, .bop-field > fluent-text-area { … }`
   rule. It was already dead code in v4 and stays dead in v5: Blazor CSS isolation only
   stamps its scope attribute onto elements written directly in this component's own
   .razor file, so a plain (non-::deep) descendant selector can never match an element
   rendered by a child COMPONENT like <FluentTextArea>. (⚠️ The second reason this comment
   used to give — "v5 components no longer render as `fluent-*` custom elements at all" —
   was WRONG and is corrected in diary 0030: rc.4 does render custom elements, v4's
   `fluent-text-area`/`fluent-text-field` were merely renamed to
   `fluent-textarea`/`fluent-text-input`. The first reason above stands on its own, so the
   rule stays dropped.) The `width: 100%` it was trying to apply is already set inline on
   each FluentTextArea.
*/

.bop-page[b-l4iid317qy] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 88px; /* room for sticky footer */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bop-title[b-l4iid317qy] {
    text-align: center;
    margin: 1rem 0 0.5rem;
}

.bop-title-main[b-l4iid317qy],
.bop-title-sub[b-l4iid317qy] {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.bop-title-sub[b-l4iid317qy] {
    margin-top: 0.25rem;
}

/* Section banner: a real heading (weight + a rule under it), not a coloured tab.
   Kept byte-identical to BopCreatePage.razor.css / BopTerminatePage.razor.css so
   the three BÖP screens stay consistent. */
.bop-section-header[b-l4iid317qy] {
    background-color: var(--colorNeutralBackground4);
    color: var(--colorNeutralForeground1);
    padding: 0.75rem 1rem;
    font-weight: 600;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px 4px 0 0;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

.bop-section[b-l4iid317qy] {
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 0.5rem 1.25rem 1.25rem;
}

.bop-fields[b-l4iid317qy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bop-field[b-l4iid317qy] {
    display: block;
}

.bop-inline-field[b-l4iid317qy] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.bop-inline-label[b-l4iid317qy] {
    color: var(--colorNeutralForeground1);
}

.bop-inline-value[b-l4iid317qy] {
    color: var(--colorBrandForeground1);
    font-weight: 600;
}

.parent-approval-history[b-l4iid317qy] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.parent-approval-history li[b-l4iid317qy] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background-color: var(--colorNeutralBackground3);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.parent-approval-history li:last-child[b-l4iid317qy] {
    margin-bottom: 0;
}

.parent-approval-pending[b-l4iid317qy] {
    color: var(--colorBrandForeground1);
}

.parent-approval-forceapply[b-l4iid317qy] {
    color: var(--colorNeutralForeground3);
    font-size: 0.85rem;
}

.parent-approval-footer[b-l4iid317qy] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--colorNeutralBackground1);
    border-top: 1px solid var(--colorNeutralStroke2);
    z-index: 5;
}

.parent-approval-footer-spacer[b-l4iid317qy] {
    flex: 1;
}
/* /Components/Pages/PreRegistrationPage.razor.rz.scp.css */
/*
    v4 source: Modules/Module.Students/Pages/PreRegistration/PreRegistrationPage.razor.css
    (diary 0027).

    v5 token remapping (DESIGN-GUIDELINES.md's token table — every v4 name below does NOT
    exist in v5 and would silently resolve to nothing, giving unstyled defaults with no
    error anywhere):
      --neutral-layer-2               -> --colorNeutralBackground3
      --neutral-layer-1               -> --colorNeutralBackground1
      --neutral-layer-card-container  -> --colorNeutralBackground3
      --neutral-stroke-divider-rest   -> --colorNeutralStroke2   (the "-rest" suffixed
                                         form of --neutral-stroke-divider, same mapping)
      --neutral-foreground-rest       -> --colorNeutralForeground1
      --neutral-foreground-hint       -> --colorNeutralForeground3
      --accent-fill-rest              -> --colorBrandBackground   where v4 used it as a
                                         FILL/BORDER (.interview-header + .appointment-card
                                         left borders), and
                                      -> --colorBrandForeground1  where v4 used it as TEXT
                                         (.header-value, plus the two inline
                                         style="color: var(--accent-fill-rest)" spans in
                                         the .razor). v4's single token covered both roles;
                                         v5 splits them, and the table's foreground row
                                         (--accent-foreground-rest -> --colorBrandForeground1,
                                         diary 0010) is the right one for text.
    --error is left alone: that token name carried over from v4 unchanged.

    DROPPED (v4's last rule):
        fluent-text-field, fluent-date-picker, fluent-time-picker, fluent-combobox
        { width: 100%; }
    The decision to drop it stands, but the REASON recorded here was the old, since-corrected
    guidance ("v5 renders no custom elements"). Settled rule (DESIGN-GUIDELINES.md
    "the settled rule", diary 0030): v5 DOES render custom elements — but two of those four
    tags were renamed (fluent-text-field -> fluent-text-input, fluent-combobox is gone), and
    more importantly Blazor stamps the b-xxxxxxxxxx scope attribute only onto plain HTML
    elements written literally in the .razor, never onto a component or anything a component
    renders. So an un-::deep'd tag selector aimed at a child component matched nothing in v4
    either. Replaced at the call sites with the components' own Width="100%" parameter, which
    is the v5 way to say the same thing.

    DEAD RULES REMOVED at the final merge (diary 0033) after a CSS-isolation sweep:
    `.text-area`, `.form-actions` and `.hidden`. The first two were handed to a
    FluentTextArea / FluentStack via Class=, which puts the class on the rendered element but
    NOT the scope attribute, so `.text-area[b-x]` matched nothing; both call sites already
    carry an equivalent (and more specific) inline Style=, so removing them is a no-op. `.hidden`
    had no referent anywhere in the .razor or .razor.cs. All three were equally inert in v4 —
    this is not a v5 regression, and deleting them changes nothing visually.
*/

/* Interview Header
   The 4px brand border-left was decoration only — nothing about the interview is
   encoded by it. Replaced with the same fully-enclosed 1px outline the .form-card
   sections below use, so the header reads as part of the page's card language
   instead of a coloured tab. */
.interview-header[b-kmk94tgllt] {
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    color: var(--colorNeutralForeground1);
}

.header-item[b-kmk94tgllt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-label[b-kmk94tgllt] {
    color: var(--colorNeutralForeground3);
    font-size: 0.875rem;
}

.header-value[b-kmk94tgllt] {
    font-weight: 600;
    color: var(--colorBrandForeground1);
}

/* Form Card Sections */
.form-card[b-kmk94tgllt] {
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.card-header[b-kmk94tgllt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

/* Form Grid
   ⚠️ DEAD RULE, DELIBERATELY LEFT IN PLACE (flagged at the final merge, diary 0033).
   `form-grid` is handed to <FluentGrid Class="form-grid"> at .razor:82 and :261. FluentGrid
   renders <div class="fluent-grid form-grid"> with NO b-xxxxxxxxxx scope attribute, so this
   compiles to `.form-grid[b-x]` and matches nothing. It was equally dead in v4.
   NOT removed and NOT revived, because unlike the three rules deleted alongside it this one
   has no equivalent inline Style= backing it: reviving it (wrap each FluentGrid in a
   page-authored <div class="form-grid">) would actually change the gutter on both form
   sections — a visible layout change that needs a browser, not a merge. */
.form-grid[b-kmk94tgllt] {
    gap: 0.5rem;
}

/* Form Row */
.form-row[b-kmk94tgllt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-label[b-kmk94tgllt] {
    min-width: 110px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
}

/* Parent Columns */
.parent-column[b-kmk94tgllt] {
    /*background: var(--colorNeutralBackground1);*/
    border-radius: 0.375rem;
    padding: 0.75rem;
    height: 100%;
}

.parent-title[b-kmk94tgllt] {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--colorNeutralStroke2);
}

/* Appointment Card
   `appointment-card` is still on the <div class="form-card appointment-card"> at
   .razor:256 as a semantic hook, but it carries no styling of its own any more: the
   4px brand border-left it used to add was pure decoration stacked on a card that
   already has its own background, outline and radius from .form-card. */

/* Question Items */
.question-item[b-kmk94tgllt] {
    padding: 0.75rem;
    background: var(--colorNeutralBackground1);
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.question-item:last-child[b-kmk94tgllt] {
    margin-bottom: 0;
}

/* Required Indicator */
.required-indicator[b-kmk94tgllt] {
    color: var(--error);
}

/* /Components/Pages/PreRegistrationQuestionsPage.razor.rz.scp.css */
/*
    v4 source: Modules/Module.Students/Pages/PreRegistrationQuestion/PreRegistrationQuestionsPage
    .razor.css (diary 0027).

    ── What was deleted when the card list became a DataGrid ─────────────────────────────────
    Sixteen rules went with the cards, and one of them is the whole reason this page was
    converted:

        .question-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.05);
                               border-color: #e5e7eb;
                               transform: translateY(-1px); }

    a lift-and-shadow on a card that was never clickable. Gone with it:
    .empty-state-card, .empty-state-content (the empty state is now the same FluentCard shape
    /okullar uses), .questions-list, .question-card, .question-card.inactive,
    .question-card-content, .question-index-badge, .question-card.inactive .question-index-badge,
    .question-text-area, .question-text, .question-meta, .creation-date, .status-badge-inactive,
    .question-actions and the whole `@media (max-width: 600px)` block that repositioned them.

    That also removes every hardcoded hex this file used to carry (#ffffff / #fdfdfd / #f0f0f0 /
    #e5e7eb / #111827 / #6b7280 / #9ca3af / #f9fafb / #fee2e2 / #ef4444 / #f3f4f6). Those literals
    were theme-blind — they did not follow the dark theme — and the port had kept them deliberately
    as a faithful reproduction of a v4 gap. Nothing below is a hex: the mobile card is drawn from
    v5 tokens, so it follows the theme.

    ── Why a scoped @media works here, when StudentsPage needed an inline <style> ─────────────
    Blazor stamps its b-xxxxxxxxxx scope attribute onto plain HTML elements authored literally in
    the .razor file, and NEVER onto a child component (or onto anything that component rendered).
    `.questions-desktop` / `.questions-mobile` are plain <div>s in the .razor, so they get it and
    the rules below compile to `.questions-desktop[b-xxxxxxxxxx]` and match. StudentsPage and
    WorkersPage put the same classes on a <FluentStack>, which is a component — their rules would
    have matched nothing, which is why those two pages carry a global inline <style> block instead.
    Nothing here targets the grid's own <table>/<td>: those are emitted by FluentDataGrid and never
    carry the scope attribute (the full-width rule lives in global app.css for exactly that reason).
*/

/* Main Container */
.questions-page-container[b-np3n47z91r] {
    padding-bottom: 32px;
}

/* Header Section */
.page-header[b-np3n47z91r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-description[b-np3n47z91r] {
    color: var(--colorNeutralForeground1);
    font-size: 14px;
}

/* ── Desktop grid / mobile cards, one at a time ─────────────────────────────────────────── */

.questions-mobile[b-np3n47z91r] {
    display: none;
}

/* 768px is the app's phone breakpoint — the same one /ogrenci and /okullar/calisanlar switch
   their grids out at, and the same one FluentLayout.MobileBreakdownWidth defaults to. */
@media (max-width: 768px) {
    .questions-desktop[b-np3n47z91r] {
        display: none;
    }

    .questions-mobile[b-np3n47z91r] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Mobile card ────────────────────────────────────────────────────────────────────────── */

/* NO :hover rule, deliberately. The card is not a click target — its actions are the RowActions
   cluster in the footer — so it must not animate under the pointer the way the old .question-card
   did. Nor is there a coloured left-border accent: those were removed app-wide in b1c6c95. */
.question-mobile-card[b-np3n47z91r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.question-mobile-head[b-np3n47z91r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-mobile-index[b-np3n47z91r] {
    flex-shrink: 0;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.question-mobile-text[b-np3n47z91r] {
    /* Long single-word input (a pasted URL, say) must not push the card wider than the phone. */
    word-break: break-word;
    font-size: 14px;
    line-height: 1.4;
    color: var(--colorNeutralForeground1);
}

.question-mobile-foot[b-np3n47z91r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* nowrap: the footer is a space-between flex row, so without it the date is the item that
   shrinks and "06.07.2026 03:55" breaks onto two lines at 390px. */
.question-mobile-date[b-np3n47z91r] {
    white-space: nowrap;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}
/* /Components/Pages/PreRegistrationsPage.razor.rz.scp.css */
/*
    v4 source: Modules/Module.Students/Pages/PreRegistrations/PreRegistrationsPage.razor.css
    (diary 0027).

    v5 token remapping (DESIGN-GUIDELINES.md's token table — v4's names do not exist in v5
    and silently resolve to nothing):
      --accent-fill-rest -> --colorBrandBackground   (.student-avatar-initial background)

    That was the only var(--…) in the file. Everything else is hardcoded hex
    (#ffffff / #111827 / #6b7280 / #fefce8 / …) and carries over byte-for-byte — already
    theme-blind in v4, so this is a faithful port of a pre-existing gap, not a new one.

    No ::deep fluent-* / ::part(...) selectors in this file — nothing to drop.
*/

/* Main Layout */
.registrations-grid[b-21s6nhctuk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding-bottom: 32px;
}

/* Card Style */
.registration-card[b-21s6nhctuk] {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

/* NO :hover rule, deliberately. `.registration-card` is a plain <div> with no @onclick — the
   card's actions are the buttons inside it — so a lift (`transform: translateY(-2px)` plus a
   0 10px 25px shadow) advertised a click the card does not accept. Same call as the row hover
   CocukDataGrid now withholds from every grid with no OnRowClick, and the same call already
   made for the /ogrenci/on-gorusme-gundemleri cards. */

/* Header Section */
.card-header[b-21s6nhctuk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #f9fafb;
    padding-bottom: 12px;
}

.student-info[b-21s6nhctuk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar-initial[b-21s6nhctuk] {
    width: 40px;
    height: 40px;
    border-radius: var(--avatar-radius);
    background: var(--colorBrandBackground);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.student-details[b-21s6nhctuk] {
    display: flex;
    flex-direction: column;
}

.student-name[b-21s6nhctuk] {
    font-weight: 700;
    font-size: 16px;
    color: #111827;
}

.registration-date[b-21s6nhctuk] {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Info Grid (Body) */
.card-body[b-21s6nhctuk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1;
}

.info-section[b-21s6nhctuk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.section-title[b-21s6nhctuk] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    font-weight: 600;
}

.info-item[b-21s6nhctuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
}

.info-item .label[b-21s6nhctuk] {
    color: #6b7280;
    font-size: 12px;
    min-width: 36px;
}

.info-item .value[b-21s6nhctuk] {
    font-weight: 500;
}

.assigned-info[b-21s6nhctuk] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fdfdfd;
    padding: 8px;
    border-radius: 8px;
    border: 1px dashed #e5e7eb;
}

/* Actions Footer */
.card-actions[b-21s6nhctuk] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f9fafb;
}

/* Status Indicator */
.status-badge[b-21s6nhctuk] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending[b-21s6nhctuk] {
    background: #fefce8;
    color: #ca8a04;
}

/* Responsive */
@media (max-width: 480px) {
    .registrations-grid[b-21s6nhctuk] {
        grid-template-columns: 1fr;
    }

    .card-body[b-21s6nhctuk] {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* /Components/Pages/SchoolPage.razor.rz.scp.css */
.form-card[b-lrsi0tpech] {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: var(--colorNeutralBackground1);
}

.card-header[b-lrsi0tpech] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h3[b-lrsi0tpech] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.form-section[b-lrsi0tpech] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title[b-lrsi0tpech] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--colorBrandBackground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.field-hint[b-lrsi0tpech] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    margin-top: 0.25rem;
    font-style: italic;
}

.user-card[b-lrsi0tpech] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
    transition: border-color 0.15s;
}

.user-card:hover[b-lrsi0tpech] {
    border-color: var(--colorBrandBackground);
}

.user-card-selected[b-lrsi0tpech] {
    border-color: var(--colorBrandBackground);
    background: rgba(0, 120, 212, 0.05);
}

.user-detail[b-lrsi0tpech] {
    font-size: 0.85rem;
    color: var(--colorNeutralForeground3);
}

.selected-user-summary[b-lrsi0tpech] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: rgba(0, 120, 212, 0.05);
    border: 1px solid var(--colorBrandBackground);
}

@media (max-width: 768px) {
    .form-card[b-lrsi0tpech] {
        padding: 1.5rem;
    }

    .card-header h3[b-lrsi0tpech] {
        font-size: 1.1rem;
    }

    .section-title[b-lrsi0tpech] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .form-card[b-lrsi0tpech] {
        padding: 1rem;
        border-radius: 8px;
    }

    .card-header[b-lrsi0tpech] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .card-header h3[b-lrsi0tpech] {
        font-size: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    .form-card[b-lrsi0tpech] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}
/* /Components/Pages/SchoolsPage.razor.rz.scp.css */
/* Main Layout */
/* No padding here: PageCard (V5) is deliberately flat and contributes no gutter of its
   own, so this container's padding was the ONLY source of this page's horizontal gutter
   — box-sizing: border-box made the content box 1142 - 16 = 1126px, 16px narrower than
   /okullar/calisanlar and /ogrenci (both 1142px), whose containers use padding: 0 at this
   same level (see WorkersPage.razor's outer FluentStack `padding: 0; margin: 0;` and
   StudentsPage.razor's outer FluentStack, neither of which adds any padding here either).
   Vertical spacing does not need it either: .page-header below already carries its own
   margin-bottom (32px desktop / 20px mobile). */
.schools-page-container[b-m1bzx4i51e] {
}

/* Header Section */
/* justify-content: flex-end was removed from here because the child FluentStack (see
   SchoolsPage.razor) is now width: 100% with its own justify-content: flex-end inline
   style, so it fills this flex container completely — a parent-level justify-content
   would have no visible effect and would misleadingly look like it's doing the
   alignment work. */
.page-header[b-m1bzx4i51e] {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .page-header[b-m1bzx4i51e] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        gap: 12px;
    }
}
/* /Components/Pages/SetEditorPage.razor.rz.scp.css */
/* Ported from Module.Students/Pages/SetEditor/SetEditorPage.razor.css (diary 0024).

   v4 -> v5 CSS custom-property translation applied throughout (v4's token names
   do NOT exist in v5 and silently resolve to nothing — DESIGN-GUIDELINES.md):
     --neutral-foreground-rest    -> --colorNeutralForeground1
     --neutral-foreground-hint    -> --colorNeutralForeground3
     --neutral-stroke-divider     -> --colorNeutralStroke2
     --accent-fill-rest           -> --colorBrandBackground
     --neutral-fill-stealth-rest  -> --colorNeutralBackground3   (best-effort; no
         exact 1:1 exists. Same choice earlier diaries made for the neighbouring
         --neutral-fill-* / stealth-hover tokens.)

   No `::deep fluent-*` / `::part(...)` selectors existed in the v4 file, so
   nothing had to be dropped on that count (grep-verified).

   One further change beyond a straight token swap: `.set-editor-window-row`
   had a hard-coded `background: white`. Replaced with `var(--colorNeutralBackground1)`
   — still the token-correct choice, and one that would follow a theme automatically
   if one is ever wired up. V5 has no theme mechanism today (no `data-theme`,
   `setThemeMode()` never called, #282), so both currently render as white.
   The remaining literal hex colours (the amber "locked"/warn banners and the
   ok/error window badges) are kept verbatim from v4 — they are a deliberate
   semantic palette with no Fluent token equivalent, and are a pre-existing
   light-theme-only wart in v4 too. Flagged in the diary rather than invented
   away. */

/* Flat section layout.
   Sections were previously FluentCard boxes; they're now plain page-owned
   containers — a heading with a light divider, then a flex-column body. No
   borders, shadows or card backgrounds. The old cards also provided inset
   and outer margin; that breathing room is restored flat-style below:
   page gutter on .set-editor-page, horizontal inset on the section bodies. */
/* The outer horizontal gutter comes from MainLayout's .content wrapper
   (app.css, padding: 1.5rem) — PageCard is flat and adds no padding of its
   own. The 4px here is just this page's own horizontal breathing room on top
   of that gutter; it is not compensating for anything, since FluentGrid in
   rc.4 lays out with `gap` (`.fluent-grid > div { margin: 0 }`) and has no
   negative gutter to overhang the padding box. */
.set-editor-page[b-mj7kqjcdxx] {
    padding: 12px 4px 32px;
}

.set-editor-section[b-mj7kqjcdxx] {
    margin-bottom: 32px;
}

.set-editor-section-header[b-mj7kqjcdxx] {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.set-editor-section-title[b-mj7kqjcdxx] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.set-editor-section-sub[b-mj7kqjcdxx] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--colorNeutralForeground3);
}

/* 18px horizontal inset mirrors the old card's inner padding so fields
   don't hug the section edge; vertical rhythm comes from the flex gap. */
.set-editor-section-body[b-mj7kqjcdxx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 18px;
}

/* When a section is locked (new mode for activities/columns) we dim its
   content so the empty state reads as "not yet usable". */
.set-editor-locked[b-mj7kqjcdxx] {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.set-editor-locked-banner[b-mj7kqjcdxx] {
    padding: 10px 14px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(234, 179, 8, 0.08),
        rgba(234, 179, 8, 0.08) 8px,
        transparent 8px,
        transparent 16px);
    border: 1px solid #f0d28a;
    border-radius: 6px;
    color: #6a4e0b;
    font-size: 0.85rem;
    /* Horizontal margin keeps the banner aligned with the inset body. */
    margin: 0 18px 16px;
}

.set-editor-field[b-mj7kqjcdxx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.set-editor-help[b-mj7kqjcdxx] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    margin-top: 2px;
}

.set-editor-warn[b-mj7kqjcdxx] {
    font-size: 0.75rem;
    color: #b07000;
    background: #fff8e6;
    border: 1px solid #f0d28a;
    border-radius: 4px;
    padding: 4px 8px;
    margin-top: 4px;
}

.set-editor-row-2[b-mj7kqjcdxx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 768px) {
    .set-editor-row-2[b-mj7kqjcdxx] {
        grid-template-columns: 1fr;
    }
}

/* Zaman Kontrol block */
.set-editor-zaman-block[b-mj7kqjcdxx] {
    padding: 12px;
    background: rgba(255, 248, 230, 0.4);
    border: 1px solid #f0d28a;
    border-radius: 6px;
}

.set-editor-windows-header[b-mj7kqjcdxx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.set-editor-window-row[b-mj7kqjcdxx] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 6px;
    /* No wrap: keep #idx | label | input | label | input | badge | trash on one line.
       The badge has margin-left:auto so it pushes to the right. Container is wide
       enough at Md=8 cols (Periyod is Md=4) and on narrower viewports the parent
       FluentGridItem stacks first, giving us full width here. */
    flex-wrap: nowrap;
    min-width: 0;
}

.set-editor-window-idx[b-mj7kqjcdxx] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    width: 24px;
    flex-shrink: 0;
}

.set-editor-window-inline-label[b-mj7kqjcdxx] {
    font-size: 0.8rem;
    color: var(--colorNeutralForeground1);
    flex-shrink: 0;
}

.set-editor-window-badge[b-mj7kqjcdxx] {
    font-size: 0.75rem;
    border: 1px solid;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: auto;
}

.set-editor-window-badge-neutral[b-mj7kqjcdxx] {
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground3);
    border-color: var(--colorNeutralStroke2);
}

.set-editor-window-badge-ok[b-mj7kqjcdxx] {
    background: #e6f0fa;
    color: #0c5697;
    border-color: #c2dbf3;
}

.set-editor-window-badge-error[b-mj7kqjcdxx] {
    background: #fdecea;
    color: #b00020;
    border-color: #f5c2bc;
}

/* Activity/column inline rows */
.set-editor-row-item[b-mj7kqjcdxx] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    padding: 8px 10px;
}

.set-editor-row-idx[b-mj7kqjcdxx] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    width: 24px;
}

.set-editor-actions[b-mj7kqjcdxx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.set-editor-label[b-mj7kqjcdxx] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
}

/* Right sidebar — a flat summary block (no card box), with a restrained
   accent heading.
   Note: the sidebar is pinned via position:sticky on a wrapper div in the
   .razor. Previously a sticky + overflow:hidden combo trapped wheel events
   once the sidebar grew taller than the viewport; overflow is no longer set
   here so scroll bubbles up to the page's scroll ancestor,
   .fluent-layout-item[area="content"]. */
.set-editor-summary-header[b-mj7kqjcdxx] {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--colorBrandBackground);
}

.set-editor-summary-header h4[b-mj7kqjcdxx] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--colorBrandBackground);
}

/* Same flat inset treatment as the section bodies (slightly narrower —
   the sidebar column is small). */
.set-editor-summary-body[b-mj7kqjcdxx] {
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.set-editor-summary-body div[b-mj7kqjcdxx] {
    display: flex;
    flex-direction: column;
}

.set-editor-summary-body dt[b-mj7kqjcdxx] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--colorNeutralForeground3);
}

.set-editor-summary-body dd[b-mj7kqjcdxx] {
    margin: 0;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
}
/* /Components/Pages/Settings/Components/RolePermissionsTab.razor.rz.scp.css */
.permission-category[b-2ufwng2d95] {
    background: var(--colorNeutralBackground3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    min-height: 200px;
}

.permission-category.not-implemented[b-2ufwng2d95] {
    opacity: 0.5;
    filter: blur(1px);
    position: relative;
}

.permission-category.not-implemented[b-2ufwng2d95]::after {
    content: "Henüz uygulanmadı";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--colorNeutralBackground6);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
    z-index: 1;
    filter: blur(0);
    opacity: 1;
}

.category-header h4[b-2ufwng2d95] {
    margin: 0 0 8px 0;
    color: var(--colorBrandBackground);
    font-weight: 600;
}

.permission-item[b-2ufwng2d95] {
    padding: 4px 0;
}

.permission-item.not-implemented[b-2ufwng2d95] {
    opacity: 0.4;
}

.permission-item.not-implemented .permission-label[b-2ufwng2d95] {
    text-decoration: line-through;
    color: var(--colorNeutralForeground3);
}

.permission-label[b-2ufwng2d95] {
    font-size: 0.9rem;
}

/* REVIVED in diary 0030. This was dropped during the port on the (false) grounds that
   "v5 components no longer render as custom elements, so no replacement selector exists".
   Both halves of that were wrong: rc.4's FluentSwitch really does emit <fluent-switch>
   (decompile-verified), and CSS custom properties DO inherit through the shadow boundary,
   so a token override set on the host reaches the shadow internals. What actually killed
   v4's rule under v5 was the TOKEN NAME, not the selector.

   `.permission-item` is a page-authored <div> in RolePermissionsTab.razor, so it carries
   the b-xxxxxxxxxx scope attribute and `.permission-item ::deep fluent-switch` compiles to
   `.permission-item[b-…] fluent-switch` — a real match.

   v4 set --accent-fill-rest/-hover/-active. rc.4's checked-indicator reads the compound-
   brand family instead (grep-verified in the rc.4 shadow stylesheet:
   `:host([checked]) .checked-indicator { background-color: var(--colorCompoundBrandBackground) }`,
   `:host([checked]:hover)` → …Hover, `:host([checked]:active)` → …Pressed, and the checked
   border reads --colorCompoundBrandStroke). Greens carried over verbatim from v4. */
.permission-item[b-2ufwng2d95]  fluent-switch {
    --colorCompoundBrandBackground: #10b981;
    --colorCompoundBrandBackgroundHover: #059669;
    --colorCompoundBrandBackgroundPressed: #047857;
    --colorCompoundBrandStroke: #10b981;
}
/* /Components/Pages/SmsManagementPage.razor.rz.scp.css */
/*
   The /admin/sms-yonetimi filter row.

   WHY THIS FILE EXISTS — the buttons used to sit 18px below the dropdowns.

   Every LABELLED FluentUI input (FluentSelect, FluentDatePicker, ...) renders its host
   as a <fluent-field>, and rc.4 stamps the library's default class on it whenever it has
   a label: LibraryConfiguration.DefaultStyles.FluentFieldClass = "my-3-o", which is
   `margin-top/bottom: var(--spacingVerticalM)` = 12px. <fluent-button> carries no such
   margin. In a flex row that makes the two impossible to line up with align-items /
   align-self alone, because BOTH keywords resolve against the MARGIN box: a
   bottom-aligned button lands 12px below the field's border box, and the field's own
   `label / input / message` grid puts a further 2-4px between the visible input and that
   border box (the trailing row-gap, plus an empty [slot=message] element that FluentSelect
   emits and FluentDatePicker does not).

   MEASURED at 1440x900 with the old `Style="align-self: flex-end"` markup:
     Başlangıç Tarihi / Bitiş Tarihi inputs  y=290 h=32  centre 306
     Okul / Durum dropdowns                  y=290 h=34  centre 307
     Filtrele / Temizle buttons              y=308 h=32  centre 324   <- 17-18px low

   So: drop the field's block margin inside this row (the row supplies its own row-gap),
   keep every item TOP-aligned — which is what makes all four input rows share one y by
   construction, since every label is one line of the same type ramp — and push the action
   cluster down by exactly one label row.

   That offset is written in the same two tokens FluentField's own shadow stylesheet uses
   (`::slotted(label) { line-height: var(--lineHeightBase300) }` and
   `:host([label-position="above"]) { row-gap: var(--spacingVerticalXXS) }`), so it tracks
   the theme's type ramp instead of being a pixel nudge that only holds at one size.
*/

.filter-bar[b-4nauaox5qv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--spacingHorizontalM);
    row-gap: var(--spacingVerticalM);
    margin-bottom: var(--spacingVerticalL);
}

/* Specificity 0,2,1 vs the library's 0,1,0 `.my-3-o`, so no !important is needed. */
.filter-bar[b-4nauaox5qv]  fluent-field {
    margin-block: 0;
}

.filter-actions[b-4nauaox5qv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingHorizontalS);
    /* One label row: the label's line box + FluentField's label-to-input row-gap. */
    padding-block-start: calc(var(--lineHeightBase300) + var(--spacingVerticalXXS));
}

/*
   The label-row offset only earns its keep while the buttons share a line with a field;
   once they wrap onto a line of their own it is just space above them.

   CSS cannot ask "did I wrap", so this is keyed on the one range where the answer is
   always yes. MEASURED at 320 / 360 / 400 / 420 / 440 / 470 / 500 / 530 / 560 / 590 /
   620 / 640px: the action cluster is alone on its line at every one of them — the
   narrowest layout that can still fit Okul (250) + Durum (150) + both buttons (~212) +
   two 12px gaps into the content column needs ~684px of viewport. Above 640px the
   offset stays on; where the buttons happen to be alone there it reads as extra
   separation between the fields and their actions, which is harmless — the failure that
   matters is the opposite one (offset dropped while sharing a line), and the measurements
   above show it cannot happen in this range.
*/
@media (max-width: 640px) {
    .filter-actions[b-4nauaox5qv] {
        padding-block-start: 0;
    }
}
/* /Components/Pages/StudentsPage.razor.rz.scp.css */
/* ============================================
   STUDENTS PAGE - STYLES
   Component-scoped styles for StudentsPage.razor

   v5 note (diary 0020, ⚠️ REASONING CORRECTED IN DIARY 0030): v4's `::deep fluent-*`
   selectors were dropped here rather than carried over inert. The stated reason —
   "components no longer render as custom elements" — was wrong; rc.4 does render real
   custom elements, the v4 tag names were merely renamed or removed. Dropping them was
   still the right call, but for the other reason: the search/filter row's every ancestor
   is a component, so there is no b-xxxxxxxxxx scope attribute for `::deep` to anchor to.
   Everything else ported verbatim, including the plain hex colors already used throughout
   the v4 source (this page never used v4 CSS custom properties, so there was nothing to
   remap against the v4->v5 token table).
   ============================================ */

/* Desktop Grid Styles */
/* ⚠️ DEAD — deliberately not revived (diary 0030), same shape as WorkersPage.razor.css.
   `student-grid` is passed as Class="student-grid" to <CocukDataGrid>, so the rendered
   `<table>` gets the class but not the b-xxxxxxxxxx scope attribute; the compiler emits
   `.student-grid[b-7j5uak298c]` and `.student-grid .fluent-data-grid-row[b-…]`, which
   cannot match. (`.fluent-data-grid-row` IS the correct v5 name — a class on the `<tr>`,
   not a tag — but FluentDataGridRow renders it, so it never carries the parent's scope
   attribute either.)
   To revive: wrap the grid in a page-authored `<div class="student-grid">` (the existing
   `.desktop-view` is a FluentStack Class=, so it does not qualify) and rewrite the row
   rules as `.student-grid ::deep .fluent-data-grid-row`. Not done: these have been inert
   since the port, so turning them on would make every row 180px tall and add grid chrome
   to one of the app's busiest list pages — a design change, not a porting fix, and there
   is no browser here to check it. Flagged in diary 0030.

   ⚠️ DO NOT REVIVE THE ROW-HEIGHT RULE — row height is the library's job now. Both grids
   inherit `RowSize = DataGridRowSize.Large` (58px, written inline by rc.4 from its own
   enum) from CocukDataGrid's constructor (Components/Shared/CocukDataGrid.cs); reviving
   `--row-height: 180px` would fight it.

   ⚠️ THE ROW-HOVER RULE IS DELETED, NOT DORMANT. `.student-grid .fluent-data-grid-row:hover
   { background: linear-gradient(…); transform: scale(1.005) }` used to sit here. It was
   inert (see the scope-attribute note above), but it encoded the wrong contract, and the
   revive instructions above would have brought a LIE back: /ogrenci rows are not clickable
   — their actions live in the İşlemler cell — so nothing on the row may promise a click.
   That is now enforced at the source: CocukDataGrid.SetParametersAsync defaults ShowHover
   to `OnRowClick != null`, so this grid renders no `hover` class, and rc.4's shipped
   `.fluent-data-grid .hover…:hover td { cursor:pointer; background-color: … }` never
   applies. Do not re-add a row `:hover` here in any form — it would reintroduce exactly the
   affordance the parameter was turned off to remove. Only `.student-grid`'s radius/shadow
   chrome is still an open design question. */
.student-grid[b-7j5uak298c] {
    --row-height: 180px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.student-grid:hover[b-7j5uak298c] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.student-grid .fluent-data-grid-row[b-7j5uak298c] {
    height: 180px;
    min-height: 180px;
    transition: all 0.2s ease;
}

/* The 4px `border-left: 4px solid #0078d4` edge bar is GONE (with the hover rule that only
   widened it to 6px, and the fixed-blue `background: linear-gradient(…)` that paired with it).
   Unlike WorkersPage's, this bar was a FIXED colour — it encoded nothing at all, it was pure
   decoration, so nothing replaces it. The paired background also had to go on its own merits:
   painted on this div it would sit ON TOP of the row-hover background that `ShowHover="true"`
   finally turned on and punch a dead rectangle through it.
   The 12px left padding went with the bar it was offsetting — horizontal spacing is rc.4's own
   18px cell gutter now that the columns no longer override `padding: 0`. */
.student-name-cell[b-7j5uak298c] {
    padding: 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    height: 100%;
    transition: all 0.2s ease;
}

.student-avatar[b-7j5uak298c] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--avatar-radius);
    overflow: hidden;
}

.student-avatar-sm[b-7j5uak298c] {
    width: 36px;
    height: 36px;
}

.student-avatar-img[b-7j5uak298c] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--avatar-radius);
}

.student-avatar-placeholder[b-7j5uak298c] {
    width: 100%;
    height: 100%;
    border-radius: var(--avatar-radius);
    background: rgba(0, 120, 212, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-name-info[b-7j5uak298c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.student-name[b-7j5uak298c] {
    font-weight: 600;
    color: #323130;
    line-height: 1.3;
    margin-bottom: 4px;
    font-size: 15px;
}

/* THE "STRAY BORDER-BOTTOM UNDER THE STUDENT NAMES" LIVED HERE, and it is the same bug as
   WorkersPage's `.user-role`: `display: inline-block` inside `.student-name-info`, which is
   `display: flex; flex-direction: column`. A flex item is not inline — `align-items` defaults to
   `stretch`, so the "inline" pill was blown out to the full column width. For a student WITH a
   disability that made a full-width tinted bar; for a student WITHOUT one (the common case) the
   div still rendered, collapsed to its 2px + 2px padding, and painted a full-width ~4px pale blue
   line directly under the name — indistinguishable from a decorative border-bottom.
   `align-self: flex-start` fixes the stretch; StudentsPage.razor now also guards the div with an
   @if so an empty disability renders nothing at all. */
.student-type[b-7j5uak298c] {
    font-size: 12px;
    color: #0078d4;
    line-height: 1.2;
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(0, 120, 212, 0.08);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
}

/* Dark mode text color fix */
[data-theme="dark"] .student-name[b-7j5uak298c] {
    color: #ffffff;
}

/* ============================================
   MOBILE CARD VIEW
   ============================================ */
.mobile-view[b-7j5uak298c] {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.students-card-container[b-7j5uak298c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
    animation: fadeIn-b-7j5uak298c 0.4s ease-out;
    width: 100%;
    box-sizing: border-box;
}

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

/* Same as the desktop cell: the fixed-blue 4px left edge is gone. It encoded nothing. */
.student-card[b-7j5uak298c] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* NO :hover / :active rule, deliberately. `.student-card` is the MOBILE rendering of the
   /ogrenci grid — a plain <div>, not a button, with no @onclick anywhere on it; its actions
   are the .card-action-btn cluster inside. It used to lift on hover
   (`transform: translateY(-3px)` + a 0 8px 20px shadow + a blue `::before` wash) and press
   down on `:active` (`translateY(-1px)`) — a press-and-release animation on something that
   cannot be pressed. That is the same lie the desktop grid told through `ShowHover`, and it
   is removed for the same reason: the desktop rows lost their hover tint and pointer cursor
   when CocukDataGrid started defaulting ShowHover to `OnRowClick != null`, so the mobile
   cards must not keep promising a click either. The `::before` overlay is kept (the mobile
   card still has no hover state, so it simply never fades in) only because removing it would
   also require unwinding `position: relative` / `overflow: hidden` above; it is inert at
   opacity 0. If a row/card click target is ever added here, wire a real handler AND make the
   desktop grid pass `OnRowClick` — then both affordances become honest together. */

.student-card[b-7j5uak298c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 120, 212, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.student-card-header[b-7j5uak298c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.student-card-name[b-7j5uak298c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.name-text[b-7j5uak298c] {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.student-card-disability[b-7j5uak298c] {
    font-size: 13px;
    color: #0078d4;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(0, 120, 212, 0.1);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
}

.student-card-body[b-7j5uak298c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-card-info-row[b-7j5uak298c] {
    display: grid;
    grid-template-columns: 24px auto 1fr;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* NO :hover rule. `.student-card-info-row:hover { background: rgba(0,0,0,.02) }` was a
   row-highlight on a static label/value pair (icon + caption + text) with no handler of any
   kind — the mobile echo of the grid row-hover lie. The `transition: background` above went
   with it: nothing animates that property any more. */

.info-icon[b-7j5uak298c] {
    color: #6b7280;
}

.info-label[b-7j5uak298c] {
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.info-value[b-7j5uak298c] {
    color: #374151;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: right;
    max-width: 100%;
}

/* Flex, not `grid-template-columns: repeat(4, 1fr)`. The hand-rolled buttons that template was
   counting are now a single <RowActions>, which lays its own buttons out in a 4px-gap
   FluentStack — a 4-column grid would squeeze the whole cluster into one quarter of the card. */
.student-card-actions[b-7j5uak298c] {
    display: flex;
    gap: 8px;
    padding-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

.card-action-btn[b-7j5uak298c] {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 4px !important;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.card-action-btn:hover[b-7j5uak298c] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-action-btn:active[b-7j5uak298c] {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    /* Ensure no horizontal scroll */
    body[b-7j5uak298c], html[b-7j5uak298c] {
        overflow-x: hidden;
    }

    /* Card optimizations */
    .students-card-container[b-7j5uak298c] {
        gap: 12px;
        padding: 0;
        width: 100%;
    }

    .student-card[b-7j5uak298c] {
        padding: 14px;
        width: 100%;
    }

    .name-text[b-7j5uak298c] {
        font-size: 15px;
    }

    .student-card-disability[b-7j5uak298c] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .student-card-info-row[b-7j5uak298c] {
        font-size: 12px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    /* Mobile card optimizations */
    .students-card-container[b-7j5uak298c] {
        gap: 12px;
        padding: 0;
        width: 100%;
    }

    .student-card[b-7j5uak298c] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
        width: 100%;
    }

    .student-card-header[b-7j5uak298c] {
        padding-bottom: 10px;
        gap: 4px;
    }

    .name-text[b-7j5uak298c] {
        font-size: 14px;
    }

    .student-card-disability[b-7j5uak298c] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .student-card-info-row[b-7j5uak298c] {
        font-size: 12px;
        gap: 6px;
        grid-template-columns: 20px minmax(60px, auto) 1fr;
        width: 100%;
    }

    .info-icon[b-7j5uak298c] {
        width: 16px;
        height: 16px;
    }

    .student-card-actions[b-7j5uak298c] {
        gap: 6px;
        padding-top: 8px;
    }

    .card-action-btn[b-7j5uak298c] {
        padding: 6px 2px !important;
        font-size: 12px;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .students-card-container[b-7j5uak298c] {
        gap: 10px;
        padding: 0;
        width: 100%;
    }

    .student-card[b-7j5uak298c] {
        padding: 12px;
        gap: 10px;
        width: 100%;
    }

    .name-text[b-7j5uak298c] {
        font-size: 13px;
    }

    .student-card-disability[b-7j5uak298c] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .student-card-info-row[b-7j5uak298c] {
        font-size: 11px;
        gap: 4px;
        grid-template-columns: 18px minmax(50px, auto) 1fr;
        width: 100%;
    }

    .info-label[b-7j5uak298c] {
        font-size: 10px;
    }

    .info-value[b-7j5uak298c] {
        font-size: 11px;
    }

    .student-card-actions[b-7j5uak298c] {
        gap: 4px;
        padding-top: 6px;
    }

    .card-action-btn[b-7j5uak298c] {
        padding: 4px 2px !important;
        font-size: 11px;
    }

    /* (The nested 360px `grid-template-columns: repeat(2, 1fr)` fallback was deleted with the grid
       layout above — .student-card-actions is a flex row holding one <RowActions> now, and a
       grid-only property on a flex container does nothing.) */
}
/* /Components/Pages/StudentView/StudentBepTab.razor.rz.scp.css */
/* v4 source: Modules/Module.Students/Pages/StudentView/Tabs/StudentBepTab.razor.css.
   Ported for diary 0031.

   CSS-isolation audit (DESIGN-GUIDELINES.md's corrected rule):
   - Grep-confirmed the v4 file contains NO `::deep fluent-` and NO `::part(`
     selectors — every rule here targets a plain <div>/<span>/<h4>/<strong> written
     literally in StudentBepTab.razor, so Blazor stamps the b-xxxxx scope attribute
     directly onto each of them and the rules match unchanged. Nothing had to be
     re-pointed at a renamed v5 custom element and nothing had to be deleted as dead.
   DELIBERATE DEVIATION FROM v4 — the dark-mode block below.
   v4 wrote all 10 dark-mode rules as `:global(body[data-theme="dark"]) .bep-x { … }`.
   `:global()` is a CSS-Modules/webpack keyword; it is NOT part of CSS and NOT part of
   Blazor's scoped-CSS syntax (Blazor's own keyword is `::deep`). Blazor's rewriter
   passes it straight through — the generated .rz.scp.css literally contains
   `:global(body[data-theme="dark"]) .bep-left[b-xxxxx]` — and a browser then discards
   the whole rule, because an unknown pseudo-class invalidates the entire selector.
   Measured in headless Chrome against a two-rule stylesheet: only the non-:global
   rule survives parsing (document.styleSheets reports cssRules.length === 1) and the
   :global-prefixed element computes the default colour. So **every one of these dark-
   mode rules has been dead in v4 too, since the day they were written** — this is not
   a v4→v5 regression.
   Rewritten here to the plain `body[data-theme="dark"] X` form, which Blazor rewrites
   correctly to `body[data-theme="dark"] X[b-xxxxx]` (scope on the element this
   component owns, `body` left unscoped) and which V5's own PageCard.razor.css already
   uses. NOTE: this means the tab renders DIFFERENTLY from v4 in dark theme — v4 shows
   the light palette there, V5 will show the intended dark one. That is the rules'
   evident intent, but it is NOT visually verified (no browser run of the app).

   v4 -> v5 token renames (the only colour work needed — everything else in this file
   is literal hex from the start, a deliberate blue/green semantic palette with no
   Fluent token equivalent, kept verbatim so the diff stays honest):
     --neutral-foreground-rest -> --colorNeutralForeground1

   Added in V5, not present in v4: the :focus-visible rule on .bep-module-item. The
   rows became keyboard-activatable in this port (role="button" + tabindex="0" +
   @onkeydown), and a focusable element with no visible focus ring is a worse
   accessibility bug than the one being fixed. */

.bep-container[b-4f95fg7i74] {
    margin-top: 0.5rem;
}

.bep-layout[b-4f95fg7i74] {
    display: flex;
    gap: 1.5rem;
    min-height: 500px;
}

/* ── Left Panel ── */
.bep-left[b-4f95fg7i74] {
    width: 280px;
    min-width: 280px;
    border-right: 2px solid #e3e8f0;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
}

.bep-left-header[b-4f95fg7i74] {
    margin-bottom: 8px;
}

.bep-section-title[b-4f95fg7i74] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a3a5c;
}

.bep-module-list[b-4f95fg7i74] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Selection / hover used to be doubled up: a background AND a coloured
   border-left (transparent -> #90b4e0 on hover -> #0D47A1 when selected).
   The background alone already carries both states unambiguously — .selected has a
   solid blue gradient fill, white text, font-weight 600 and a shadow — so the bars
   are removed and nothing is lost. */
.bep-module-item[b-4f95fg7i74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
    transition: all 0.2s ease;
    background: transparent;
}

.bep-module-item:hover[b-4f95fg7i74] {
    background: #e8f0fe;
}

.bep-module-item:focus-visible[b-4f95fg7i74] {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 2px;
}

.bep-module-item.selected[b-4f95fg7i74] {
    background: linear-gradient(135deg, #1565C0, #1976D2);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(21, 101, 192, 0.3);
}

.bep-module-name[b-4f95fg7i74] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Main Panel ── */
.bep-main[b-4f95fg7i74] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 0.5rem;
}

.bep-main-header[b-4f95fg7i74] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.bep-submodule-list[b-4f95fg7i74] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── SubModule Card ──
   The 4px #1976D2 border-left encoded "this is the long-term-goal tier", which the
   nesting (top-level card inside .bep-submodule-list) already says. Removed; the
   card's own 1px outline + blue-tinted background keep it distinct from the
   .bep-program rows nested inside it. */
.bep-submodule-card[b-4f95fg7i74] {
    padding: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #d0dbe8;
    border-radius: 8px;
    background: #fafcff;
}

.bep-card-header[b-4f95fg7i74] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e8f0;
}

.bep-card-header > div:first-child[b-4f95fg7i74] {
    flex: 1;
    min-width: 0;
}

.bep-card-header strong[b-4f95fg7i74] {
    color: #1a3a5c;
}

.bep-add-program[b-4f95fg7i74] {
    margin-bottom: 12px;
}

/* ── Program Item ──
   Same story one tier down: the 3px #66BB6A border-left restated the nesting.
   Removed; the green-tinted background, the 1px outline and the green
   .bep-program-name already mark this tier. */
.bep-program[b-4f95fg7i74] {
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #dce4ee;
    border-radius: 6px;
    background: #f8faf8;
}

.bep-program-header[b-4f95fg7i74] {
    margin-bottom: 8px;
}

.bep-program-name[b-4f95fg7i74] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #2e5a3a;
}


.bep-program-code[b-4f95fg7i74] {
    font-weight: 400;
    color: #7a9a87;
    margin-left: 4px;
}

.bep-program-details[b-4f95fg7i74] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bep-detail-item[b-4f95fg7i74] {
    display: flex;
    gap: 6px;
    font-size: 0.8rem;
    padding: 2px 0;
}

.bep-detail-label[b-4f95fg7i74] {
    font-weight: 600;
    color: #5a6a7a;
    white-space: nowrap;
}

.bep-detail-value[b-4f95fg7i74] {
    color: #9aaab8;
}

/* ── Shared ── */
.bep-hint-text[b-4f95fg7i74] {
    font-size: 0.75rem;
    color: #8a9ab0;
    margin-top: 2px;
    margin-bottom: 8px;
}

.bep-empty-hint[b-4f95fg7i74] {
    text-align: center;
    padding: 1.5rem;
    color: #8a9ab0;
    font-size: 0.85rem;
}

/* ── Dark Mode ── */
body[data-theme="dark"] .bep-left[b-4f95fg7i74] {
    border-right-color: #4a4a70;
}

body[data-theme="dark"] .bep-section-title[b-4f95fg7i74] {
    color: #c0d0e8;
}

body[data-theme="dark"] .bep-module-item:hover[b-4f95fg7i74] {
    background: #404060;
}

body[data-theme="dark"] .bep-module-item.selected[b-4f95fg7i74] {
    background: linear-gradient(135deg, #1565C0, #1976D2);
}

body[data-theme="dark"] .bep-submodule-card[b-4f95fg7i74] {
    background: #353550;
    border-color: #4a4a70;
}

body[data-theme="dark"] .bep-card-header[b-4f95fg7i74] {
    border-bottom-color: #4a4a70;
}

body[data-theme="dark"] .bep-card-header strong[b-4f95fg7i74] {
    color: #c0d0e8;
}

body[data-theme="dark"] .bep-program[b-4f95fg7i74] {
    background: #404060;
    border-color: #4a4a70;
}

body[data-theme="dark"] .bep-program-name[b-4f95fg7i74] {
    color: #a0d8a8;
}

body[data-theme="dark"] .bep-program-code[b-4f95fg7i74] {
    color: #7aaa88;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bep-layout[b-4f95fg7i74] {
        flex-direction: column;
    }

    .bep-left[b-4f95fg7i74] {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 2px solid #e3e8f0;
        padding-right: 0;
        padding-bottom: 1rem;
    }
}
/* /Components/Pages/StudentViewPage.razor.rz.scp.css */
/*
   v5 note (diary 0020): v4 CSS custom properties remapped to their v5 equivalents
   per the token table in DESIGN-GUIDELINES.md:
     --neutral-layer-2            -> --colorNeutralBackground3
     --neutral-layer-3            -> --colorNeutralBackground4
     --neutral-foreground-rest    -> --colorNeutralForeground1
     --neutral-foreground-hint    -> --colorNeutralForeground3
     --neutral-stroke-divider-rest -> --colorNeutralStroke2
     --accent-fill-rest           -> --colorBrandBackground
   The header period/progress-bar section and the four hardcoded stat tiles
   ("Program Sayısı 44" / "Tamamlanan 31" / …) from the v4 source were dropped —
   they were never wired to real data in v4 either (literal hardcoded numbers,
   not a computed value), so porting them here would present fake data as real.
   Their styles (.header-section/.header-row/.period-badge/.progress-*/.stats-*)
   are dropped along with the markup.
*/

.student-view-container[b-ocjidsd6cr] {
}

/* Profile Picture */

.profile-picture-container[b-ocjidsd6cr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.student-name[b-ocjidsd6cr] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    text-align: center;
}

/* Personnel - Compact vertical */

.personnel-section[b-ocjidsd6cr] {
    background: var(--colorNeutralBackground3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    height: 100%;
}

.personnel-header[b-ocjidsd6cr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.personnel-title[b-ocjidsd6cr] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.personnel-list[b-ocjidsd6cr] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.personnel-row[b-ocjidsd6cr] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.personnel-row:last-child[b-ocjidsd6cr] {
    border-bottom: none;
}

.personnel-label[b-ocjidsd6cr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    min-width: 120px;
    white-space: nowrap;
}

.personnel-value[b-ocjidsd6cr] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
}

/* Card Header */

.card-header[b-ocjidsd6cr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title-section[b-ocjidsd6cr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title[b-ocjidsd6cr] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

/* Parent Card */

/* The 3px #ca5010 border-left this row used to carry encoded nothing (a raw hex,
   not even a token, identical on every parent). Removed — the tinted background
   is what separates a parent row from the card behind it. */
.parent-item[b-ocjidsd6cr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
}

.parent-info[b-ocjidsd6cr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.parent-name[b-ocjidsd6cr] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.parent-actions[b-ocjidsd6cr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.parent-badges[b-ocjidsd6cr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Info Section */

.info-section[b-ocjidsd6cr] {
    padding: 0.5rem 0;
}

.section-title[b-ocjidsd6cr] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorBrandBackground);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--colorBrandBackground);
}

/* Profile Row */

.profile-row[b-ocjidsd6cr] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    background: var(--colorNeutralBackground3);
    border-radius: 6px;
}

.profile-row-label[b-ocjidsd6cr] {
    min-width: 140px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--colorNeutralForeground3);
}

.profile-row-value[b-ocjidsd6cr] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
    padding-left: 1rem;
}

/* Responsive */

@media (max-width: 768px) {
    .personnel-label[b-ocjidsd6cr] {
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .profile-row[b-ocjidsd6cr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .profile-row-label[b-ocjidsd6cr] {
        min-width: auto;
        font-size: 0.75rem;
    }

    .profile-row-value[b-ocjidsd6cr] {
        padding-left: 0;
    }
}
/* /Components/Pages/Surveys/PeerRatingRatePage.razor.rz.scp.css */
/*
    v4 kept these as inline style="" attributes. Token remap applied:
      --neutral-stroke-rest     -> --colorNeutralStroke1
      --neutral-foreground-hint -> --colorNeutralForeground3
      #e65100 / rgba(230,81,0,.05) -> the real Fluent DarkOrange palette tokens, which exist
      in rc.4's runtime token set (verified by grepping the shipped JS bundle) and adapt to
      the active theme.

    NOTE: `.explanation-required-title` deliberately sits on a page-authored <div> WRAPPING a
    FluentText rather than on FluentText's own Class parameter — Blazor stamps the
    CSS-isolation scope attribute only onto plain HTML elements written literally in this
    component's .razor file, never onto markup a child component renders, so a scoped rule
    targeting FluentText's own output would silently match nothing.

    ⚠️ The rule that note describes was never actually written — caught by the CSS-isolation
    sweep at the final merge (diary 0033) and added below. Without it the port silently lost
    v4's `color: #e65100; margin-bottom: 4px;` on that label (v4 PeerRatingRatePage.razor:84):
    the font-weight survived as Weight="TextWeight.Semibold", the orange did not. The wrapper
    div was created for exactly this and then left empty-handed.
    UNVERIFIED: this relies on FluentText inheriting `color` from the wrapping <div>, which
    it should when its own `Color` parameter is unset (it is unset here) — reasoned from
    rc.4 source, not observed in a browser.
*/

.panel[b-o6jf8cwjmk] {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
}

.header-bar[b-o6jf8cwjmk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.question-description[b-o6jf8cwjmk] {
    color: var(--colorNeutralForeground3);
    margin: 0 0 4px 0;
    font-size: 0.85rem;
}

.option-weight[b-o6jf8cwjmk] {
    color: var(--colorNeutralForeground3);
}

.explanation-required[b-o6jf8cwjmk] {
    border: 2px solid var(--colorPaletteDarkOrangeBorder1);
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
    background-color: var(--colorPaletteDarkOrangeBackground1);
}

/* v4: style="color: #e65100; font-weight: 600; margin-bottom: 4px;" on the FluentLabel.
   font-weight is carried by Weight="TextWeight.Semibold" on the FluentText; colour and
   spacing live here, on the page-authored wrapper (see the header note).
   --colorPaletteDarkOrangeForeground1 verified present in the rc.4 token set. */
.explanation-required-title[b-o6jf8cwjmk] {
    color: var(--colorPaletteDarkOrangeForeground1);
    margin-bottom: 4px;
}
/* /Components/Pages/Surveys/PeerRatingSurveyCreatePage.razor.rz.scp.css */
/*
    v4 kept all of this as inline style="" attributes on the page's own <div>s. Moved into a
    scoped stylesheet per the house convention (prefer CSS classes over inline styles), which
    also gives one place to do the v4 -> v5 design-token remap:
      --neutral-stroke-rest    -> --colorNeutralStroke1
      --neutral-layer-2        -> --colorNeutralBackground3
      --neutral-foreground-hint-> --colorNeutralForeground3
      #1565C0 / #6A1B9A        -> --colorPaletteBlueForeground2 / --colorPalettePurpleForeground2
    Every selector here targets an element this component renders itself, so no ::deep is
    needed (and ::deep fluent-* would be dead anyway — DESIGN-GUIDELINES).
*/

.settings-row[b-bkhbaw7m6s] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
}

.panel[b-bkhbaw7m6s] {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 12px;
}

.panel-muted[b-bkhbaw7m6s] {
    background-color: var(--colorNeutralBackground3);
}

.scroll-list[b-bkhbaw7m6s] {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 6px;
}

.worker-row[b-bkhbaw7m6s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.assigned-row[b-bkhbaw7m6s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.assigned-name[b-bkhbaw7m6s] {
    font-size: 0.9rem;
}

.muted[b-bkhbaw7m6s] {
    font-size: 0.85rem;
    color: var(--colorNeutralForeground3);
}

.empty-hint[b-bkhbaw7m6s] {
    color: var(--colorNeutralForeground3);
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
}

.assigned-grid[b-bkhbaw7m6s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.action-bar[b-bkhbaw7m6s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.group-a-title[b-bkhbaw7m6s] {
    color: var(--colorPaletteBlueForeground2);
}

.group-b-title[b-bkhbaw7m6s] {
    color: var(--colorPalettePurpleForeground2);
}
/* /Components/Pages/Surveys/PeerRatingSurveyDetailPage.razor.rz.scp.css */
/*
    v4 kept these as inline style="" attributes. Moved into a scoped stylesheet (house
    convention) with the v4 -> v5 token remap:
      --neutral-stroke-rest     -> --colorNeutralStroke1
      --neutral-layer-2         -> --colorNeutralBackground3
      --neutral-foreground-hint -> --colorNeutralForeground3
    Every selector below targets a plain HTML element this component writes itself, which is
    the only kind of element Blazor stamps the CSS-isolation scope attribute onto.
*/

.panel[b-w5wwc4b0qr] {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
}

.action-bar[b-w5wwc4b0qr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-row[b-w5wwc4b0qr] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
}

.stats-row[b-w5wwc4b0qr] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
}

.stats-progress[b-w5wwc4b0qr] {
    flex: 1;
    min-width: 100px;
}

.add-section[b-w5wwc4b0qr] {
    padding: 8px;
    margin-bottom: 8px;
    background-color: var(--colorNeutralBackground3);
    border-radius: 4px;
}

.scroll-list[b-w5wwc4b0qr] {
    max-height: 200px;
    overflow-y: auto;
}

.worker-row[b-w5wwc4b0qr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.empty-hint[b-w5wwc4b0qr] {
    color: var(--colorNeutralForeground3);
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
}
/* /Components/Pages/Surveys/PeerRatingSurveyResultsPage.razor.rz.scp.css */
/*
    Ported from v4's PeerRatingSurveyResultsPage.razor.css. Token remap:
      --neutral-stroke-rest -> --colorNeutralStroke1
      --accent-fill-rest    -> --colorBrandForeground1  (see the .razor header: the
                               DESIGN-GUIDELINES row maps --accent-fill-rest to
                               --colorBrandBackground, which is a FILL colour; here it is
                               used as table-header TEXT, so the foreground token is the
                               correct v5 counterpart.)
    Every selector targets a plain HTML element the page writes itself, so no ::deep and no
    child-component styling is involved.
*/

.summary-bar[b-7uht50w3bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
    font-size: 0.85rem;
}

.results-section[b-7uht50w3bu] {
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.results-section-title[b-7uht50w3bu] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
}

.results-scroll[b-7uht50w3bu] {
    overflow-x: auto;
}

.results-table[b-7uht50w3bu] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85rem;
}

.results-table th[b-7uht50w3bu],
.results-table td[b-7uht50w3bu] {
    padding: 10px 6px;
    border-bottom: 1px dashed var(--colorNeutralStroke1);
}

.question-col[b-7uht50w3bu] {
    text-align: left;
    width: auto;
}

.dist-col[b-7uht50w3bu] {
    text-align: center;
    width: 36px;
    font-weight: 600;
}

.avg-col[b-7uht50w3bu] {
    text-align: center;
    width: 80px;
    font-weight: 700;
}

.results-table thead th[b-7uht50w3bu] {
    color: var(--colorBrandForeground1);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

.results-table tfoot td[b-7uht50w3bu] {
    border-top: 1px dashed var(--colorNeutralStroke1);
    font-weight: 700;
    padding-top: 12px;
}

.footer-label[b-7uht50w3bu] {
    text-align: right;
    padding-right: 12px;
}
/* /Components/Pages/Surveys/SurveyTemplatesPage.razor.rz.scp.css */
/*
    New file — this page had no scoped stylesheet before, because it had nothing to style: the grid
    was the whole body and a FluentDataGrid's <table>/<td> can never be reached from a page's
    .razor.css anyway (they are emitted by the component and never carry the b-xxxxxxxxxx scope
    attribute — that is why the full-width rule lives in global app.css).

    Everything below targets plain <div>/<span> elements authored literally in SurveyTemplatesPage
    .razor, which DO carry the scope attribute, so these rules compile to
    `.templates-desktop[b-xxxxxxxxxx]` and match. Nothing here is a ::deep, a fluent-* tag or a
    :global(...) — all three are documented dead ends in this codebase.

    v5 tokens only. A v4 `--neutral-*` name resolves to nothing, silently.
*/

/* ── Desktop grid / mobile cards, one at a time ─────────────────────────────────────────── */

.templates-mobile[b-n00ij8fsun] {
    display: none;
}

/* 768px — the app's phone breakpoint, matching /ogrenci and /okullar/calisanlar (and
   FluentLayout.MobileBreakdownWidth's default). */
@media (max-width: 768px) {
    .templates-desktop[b-n00ij8fsun] {
        display: none;
    }

    .templates-mobile[b-n00ij8fsun] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Mobile card ────────────────────────────────────────────────────────────────────────── */

/* No :hover rule and no coloured left-border accent. The card is not a click target — its actions
   are the RowActions cluster in the footer — so it must not animate under the pointer. (The
   accent was removed app-wide in b1c6c95.) */
.template-mobile-card[b-n00ij8fsun] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
}

.template-mobile-name[b-n00ij8fsun] {
    /* A pasted long token in a form name must not push the card wider than the phone. */
    word-break: break-word;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--colorNeutralForeground1);
}

.template-mobile-badges[b-n00ij8fsun] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.template-mobile-foot[b-n00ij8fsun] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* nowrap: the footer is a space-between flex row, so without it "8 soru" is the item that
   shrinks and breaks onto two lines at 390px. */
.template-mobile-count[b-n00ij8fsun] {
    white-space: nowrap;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}
/* /Components/Pages/Surveys/SurveyWizardPage.razor.rz.scp.css */
/*
    Ported from v4's SurveyWizardPage.razor.css.

    Every selector here targets a plain HTML element the page authors itself — which is the
    only kind of element Blazor stamps the CSS-isolation scope attribute onto. v4's two
    `::deep .step-answered` / `::deep .step-visited` rules existed because those classes were
    handed to a FluentBadge (a child component); the step indicators are now real <button>
    elements written in this page, so ::deep is neither needed nor correct here.

    Token remap:
      --neutral-stroke-rest     -> --colorNeutralStroke1
      --neutral-foreground-hint -> --colorNeutralForeground3
      --accent-fill-rest        -> --colorBrandBackground (used as a real fill in both places)
      #2E7D32 (answered)        -> --colorPaletteGreenBackground3
      #F9A825 (visited/missing) -> --colorPaletteMarigoldBackground3 / …BorderActive / …Foreground2
    The literal #fff foregrounds below sit on saturated brand/green/marigold FILLS, where a
    theme token would not be more correct; everything else uses tokens.
*/

.survey-header[b-980ifpoa2s] {
    margin-bottom: 24px;
}

/*
    v4 rendered this as <FluentLabel Typo="Typography.H4">. It is an <h1> now so
    <FocusOnNavigate Selector="h1"> has something to focus (this PageCard has no Title).
    font-size/line-height/margin are pinned so the promotion is visually neutral.
*/
.survey-title[b-980ifpoa2s] {
    margin: 0;
    font-size: var(--fontSizeBase600);
    line-height: var(--lineHeightBase600);
    font-weight: 700;
}

.step-indicators[b-980ifpoa2s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.step-connector[b-980ifpoa2s] {
    width: 20px;
    height: 2px;
    background: var(--colorNeutralStroke1);
    flex-shrink: 0;
}

.step-badge[b-980ifpoa2s] {
    cursor: pointer;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
    /* <button> reset — v4 got these for free from FluentBadge. */
    border: none;
    padding: 0;
    font-family: inherit;
    background: var(--colorNeutralBackground3);
    color: var(--colorNeutralForeground1);
}

.step-badge:focus-visible[b-980ifpoa2s] {
    outline: 2px solid var(--colorBrandBackground);
    outline-offset: 2px;
}

.step-current[b-980ifpoa2s] {
    background: var(--colorBrandBackground);
    color: #fff;
    box-shadow: 0 0 0 3px var(--colorBrandBackground);
}

.step-answered[b-980ifpoa2s] {
    background-color: var(--colorPaletteGreenBackground3);
    color: #fff;
}

.step-visited[b-980ifpoa2s] {
    background-color: var(--colorPaletteMarigoldBackground3);
    color: #fff;
}

.progress-section[b-980ifpoa2s] {
    margin-bottom: 24px;
}

.step-content[b-980ifpoa2s] {
    min-height: 300px;
}

.info-row[b-980ifpoa2s] {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.info-label[b-980ifpoa2s] {
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    min-width: 100px;
}

.info-value[b-980ifpoa2s] {
    font-weight: 500;
}

.question-number[b-980ifpoa2s] {
    position: absolute;
    top: -12px;
    left: 16px;
    background: var(--colorBrandBackground);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* v4 parity: this is v4's own `Style="color: var(--warning);"` on the "cevaplanmadı"
   label, lifted into the stylesheet. Diary 0029 originally substituted
   --colorPaletteMarigoldForeground2 partly on the strength of a reported (and since
   REFUTED) claim that --warning dangles in rc.4. Measured twice in headless Chrome:
   --warning resolves to #bc4b09. Reverted to v4's token at the final merge (diary 0033).
   See DESIGN-GUIDELINES § status tokens + diary 0032. */
.summary-answer-missing[b-980ifpoa2s] {
    color: var(--warning);
}
/* /Components/Pages/TaskAssignPage.razor.rz.scp.css */
/* v4 source: Modules/Module.School/Pages/TaskAssignPage.razor.css (the rewritten,
   uncommitted version). Ported with the v4 -> v5 changes noted inline, then reworked
   for the presentation redesign that moved the create form into a FluentCard and
   replaced the always-visible month calendar with a FluentDatePicker.

   CSS-isolation audit (DESIGN-GUIDELINES.md's corrected rule): every selector below —
   the `::deep` ones especially — hangs off a plain <div> written literally in
   TaskAssignPage.razor. That is the ONLY reason any of them match. Blazor stamps the
   b-xxxxx scope attribute onto page-authored HTML elements and never onto a component
   or anything a component rendered, so a Class= handed to a Fluent component would
   land on markup with no scope attribute and the matching rule here would die
   silently. That is why the page styles Fluent components with inline Style= and
   reserves this file for its own <div>s. Do not "tidy" those wrappers away.

   v4 -> v5 token renames:
     --neutral-foreground-hint -> --colorNeutralForeground3
   (v4's whole --neutral-* family does not exist in v5.) */

/* ══════════════ Page shell ══════════════ */

/* Replaces v4's <FluentStack Orientation="Vertical" VerticalGap="24"> wrapper.
   A plain flex column does the same job, gets the scope attribute, and keeps the
   presentation out of an inline Style= (house rule). */
.task-assign-page[b-qu6ooba11t] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ══════════════ Yeni görev (inside the FluentCard) ══════════════ */

/* The card itself is NOT styled from here — rc.4's .fluent-card already supplies the
   border, background, radius and shadow, and its padding/width come from an inline
   Style= on the component (a Class= there would not carry the scope attribute).
   Everything below is a page-authored <div> inside that card. */

.form-head[b-qu6ooba11t] {
    margin-bottom: 4px;
}

/* Muted, small: this is the explanation of what the form does, not a field label. */
.form-intro[b-qu6ooba11t] {
    color: var(--colorNeutralForeground3);
    font-size: 13px;
    margin-bottom: 16px;
}

/* One anchor per grid cell. A flex column so a field that carries a hint under it
   (the day picker's SelectedDayHint) spaces it consistently instead of relying on
   whatever margin the component happens to ship. */
.form-field[b-qu6ooba11t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Submit row: last child of the card, separated from the fields by a rule so the
   button reads as the end of the form rather than a twelfth field. Left-aligned with
   the primary action first — the house/Mercury convention. */
.form-actions[b-qu6ooba11t] {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

/* ══════════════ Görev listeleri ══════════════ */

/* The lists are a sibling of the card, not part of it. The <h2> inside is also the
   only heading between PageCard's <h1> and the body — the page had none before. */
.list-section[b-qu6ooba11t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Replaces v4's <FluentStack VerticalGap="8" Style="padding-top: 12px"> inside each
   FluentTab. rc.4's FluentTabs renders the panel <div> itself, so this wrapper is
   ours and carries the scope attribute. */
.tab-panel[b-qu6ooba11t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-top: 12px;
}

/* Replaces the per-tab heading that just restated the tab name above it. Muted and
   small because it is a description of the filter, not a title. */
.tab-caption[b-qu6ooba11t] {
    color: var(--colorNeutralForeground3);
    font-size: 13px;
}

/* Empty tabs used to render their message as a bare line of body text hard against
   the tab strip. Centred and given room, it reads as a state rather than as content. */
.empty-state[b-qu6ooba11t] {
    padding: 24px 0;
    color: var(--colorNeutralForeground3);
    text-align: center;
}

.task-grid-wrap[b-qu6ooba11t] {
    width: 100%;
    /* The column minimums total ~930px. Narrower cards scroll the table here
       rather than crushing the action buttons off the edge of the card. */
    overflow-x: auto;
}

/* The grid renders its own <table>, so everything below has to reach into another
   component's markup via ::deep. v4's comment here said the library ships its rules
   as SCOPED css (`.fluent-data-grid[b-ppmhrkw1mj]`, specificity 0,2,0) and that each
   selector needed an extra element to outrank it. That is NOT true of rc.4: its
   bundle.scp.css contains ZERO b-xxxxx attributes (grep-verified), so the library
   rules are plain (`.fluent-data-grid td:not(.col-select)`, 0,2,1 at the worst).
   The extra element/class on each selector below is kept anyway — with the page's
   own b-xxxxx attribute in play these all land at 0,3,1 or better, so they win
   deterministically instead of relying on stylesheet order.
   NOTE `fluent-data-grid` is a CLASS on a real <table> in v5, not a tag name.

   The grid's WIDTH is deliberately NOT here. It used to be
   `.task-grid-wrap ::deep table.fluent-data-grid { width: 100% }`; it is now
   `Class="data-grid-fullwidth"` on the grid itself, i.e. the shared contract in
   app.css (DESIGN-GUIDELINES.md "Full-width DataGrids" / override register row
   12). Keeping both would work, and that is exactly the problem: the local rule
   is higher-specificity, so it would keep this one page looking correct on the
   day rc.4's `.fluent-data-grid { width: auto }` outgrows the shared selector and
   every other opted-in grid collapses. One mechanism, one failure. */

/* MultiLine="true" on the grid replaces the inline `height: {RowSize}px` that the
   grid otherwise stamps on every <td> with `height: 100%`, and tags the cells
   `.multiline-text` (rc.4: `white-space: inherit; overflow: auto;
   word-break: break-word; align-content: start`, so text wraps). The grid row track
   then sizes to its tallest cell, which is what stops the two-line "Görev" cell from
   being sliced by the row's bottom border. `.multiline-text` also flips
   `align-content` from the default `center` to `start`; put it back so the short
   cells stay centred against a two-line neighbour. */
.task-grid-wrap[b-qu6ooba11t]  td.multiline-text {
    align-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* "İşlemler" is the last column and sits against the card edge, so add to the cell's
   default inline-end padding to keep the buttons clear of it. (rc.4's default is 18px —
   `.fluent-data-grid td:not(.col-select) { padding: 0 18px }` — where v4's was 16px,
   so this is +2px rather than v4's +4px. Not browser-verified; left at v4's literal
   value rather than guessing a new one.) */
.task-grid-wrap[b-qu6ooba11t]  td:last-child,
.task-grid-wrap[b-qu6ooba11t]  th:last-child {
    padding-inline-end: 20px;
}

/* Açıklama sub-line under the task text. Same treatment as .kid-line — the two
   stack, in that order, when a task carries both. The pre-rewrite page painted
   this with an inline `color: var(--colorNeutralForeground3); font-size: 12px`;
   a plain class works here (no ::deep needed, unlike the grid rules above)
   because the <div> lives literally in TaskAssignPage.razor — inside a
   TemplateColumn's RenderFragment, but page-authored all the same, so Blazor
   stamps it with the page's b-xxxxx scope attribute. */
.detail-line[b-qu6ooba11t] {
    color: var(--colorNeutralForeground3);
    font-size: 12px;
    margin-top: 2px;
}

.kid-line[b-qu6ooba11t] {
    color: var(--colorNeutralForeground3);
    font-size: 12px;
    margin-top: 2px;
}

/* Cells wrap now that MultiLine is on; the date is a single unit. */
.nowrap[b-qu6ooba11t] {
    white-space: nowrap;
}
/* /Components/Pages/VeriGirisi/VeriGirisiEntryPage.razor.rz.scp.css */
/*
    Ported from Modules/Module.Students/Pages/VeriGirisi/VeriGirisiEntryPage.razor.css
    (diary 0028). Every metric (sizes, spacing, radii, the sticky-column z-index
    stack, the media query) is byte-for-byte v4; only colour sources changed, plus
    the <button> resets the two markup changes below require.

    1. v4 token -> v5 token (DESIGN-GUIDELINES token table):
         --neutral-fill-layer-rest     -> --colorNeutralBackground1
         --neutral-fill-stealth-hover  -> --colorSubtleBackgroundHover
         --neutral-stroke-divider      -> --colorNeutralStroke2
         --neutral-stroke-rest         -> --colorNeutralStroke1
         --neutral-foreground-rest     -> --colorNeutralForeground1
         --neutral-foreground-hint     -> --colorNeutralForeground3
         --accent-fill-rest            -> --colorBrandBackground
         --foreground-on-accent-rest   -> --colorNeutralForegroundOnBrand

    2. Hard-coded neutral literals (#fff / #fafafa / #f4f4f8) were NOT copied
       verbatim: on a dark theme they turn the whole grid into a white slab. They
       now read --colorNeutralBackground1/2/3, which the FluentUI theme object
       actually re-defines per theme.

    3. The semantic ✓/✗/K and accepted/rejected colours below stay LITERAL, with
       [data-theme="dark"] overrides for the pale tints that would otherwise glare —
       the same convention StudentsPage.razor.css / WorkersPage.razor.css established.
       This is v4 parity, not a workaround: v4's own stylesheet already hard-coded
       #51cf66 / #ff6b6b / #fcc419 here and never used a status token on this page.
       ⚠️ Diary 0028's header originally justified it with a claim that
       --success/--warning/--error dangle in rc.4. THAT CLAIM IS REFUTED — measured
       twice in headless Chrome driving the full Blazor JS-initializer lifecycle, all
       four resolve: --success #0e700e, --warning #bc4b09, --error #bc2f32,
       --info #616161. The false positive came from a probe harness calling only
       `beforeWebStart`; the alias stylesheet is adopted by Theme.applyStyles() from
       `afterStarted`. See DESIGN-GUIDELINES § status tokens and diary 0032. The
       literals below are kept because v4 had them, not because the tokens are broken.
*/

/* Two-column layout: fixed-width rail on the left, scrollable main area on
   the right. Mirrors the POC's grid template. */
.de-grid[b-6ztu9nvomp] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    width: 100%;
    align-items: start;
}

.de-rail[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    padding: 12px;
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.rail-list[b-6ztu9nvomp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* v4 rendered this as <div @onclick> — focusable by nobody, activatable by no
   key. It is a real <button type="button"> in v5, so the first six declarations
   below exist purely to undo the UA button defaults (background, border, font,
   text-align, width, margin). Everything after them is v4 verbatim. */
.rail-item[b-6ztu9nvomp] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;

    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
    user-select: none;
    border: 1px solid transparent;
}

.rail-item:hover[b-6ztu9nvomp] {
    background: var(--colorSubtleBackgroundHover);
}

.rail-item:focus-visible[b-6ztu9nvomp] {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 1px;
}

.rail-item.active[b-6ztu9nvomp] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    border-color: var(--colorBrandBackground);
}

.rail-code[b-6ztu9nvomp] {
    font-weight: 600;
}

.rail-sub[b-6ztu9nvomp] {
    font-size: 11px;
    opacity: 0.85;
}

.rail-foot[b-6ztu9nvomp] {
    padding-top: 12px;
    border-top: 1px solid var(--colorNeutralStroke2);
    margin-top: 12px;
}

.de-main[b-6ztu9nvomp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── Grid card ── */
.grid-card[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    overflow: hidden;
}

.meta[b-6ztu9nvomp] {
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.meta-row[b-6ztu9nvomp] {
    display: flex;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.meta-row:last-child[b-6ztu9nvomp] {
    border-bottom: 0;
}

.meta-cell[b-6ztu9nvomp] {
    padding: 8px 12px;
    flex: 1;
    font-size: 13px;
}

.meta-cell.label-half[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground2);
    font-weight: 600;
    flex: 0 0 220px;
}

/* v4's `.meta-cell input[type="date"]` rule was dropped at the final merge (diary 0033):
   VeriGirisiEntryPage.razor renders no <input> of any kind — every .meta-cell is a text
   <div> — so the rule had no referent in v4 either. Not a scope-attribute problem; a
   page-authored descendant WOULD get the scope attribute if one existed. */

/* ── Click-state legend ── */
.click-legend[b-6ztu9nvomp] {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 8px 12px;
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-size: 12px;
    color: var(--colorNeutralForeground3);
    flex-wrap: wrap;
}

.click-legend .legend-label[b-6ztu9nvomp] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.click-legend .lg-item[b-6ztu9nvomp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.click-legend .lg-ck[b-6ztu9nvomp] {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid var(--colorNeutralStroke1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.click-legend .lg-ck.empty[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground1);
}

.click-legend .lg-ck.v1[b-6ztu9nvomp] {
    background: #51cf66;
    border-color: #51cf66;
}

.click-legend .lg-ck.v0[b-6ztu9nvomp] {
    background: #ff6b6b;
    border-color: #ff6b6b;
}

/* v4's `.click-legend .lg-ck.vK` chip was dropped at the final merge (diary 0033): the
   legend only ever emits `lg-ck empty` / `lg-ck v0` / `lg-ck v1`, so there is no vK chip to
   style. Reviving it would need new markup, so it cannot be switched on by accident.
   NOTE this is NOT the same thing as `.cellbox.v-K` further down, which IS live-capable:
   "K" is unreachable from the UI but still a stored value, and GetCellValue interpolates it
   into class="cellbox v-@val". Do not delete that one. */

.click-legend .arrow[b-6ztu9nvomp] {
    color: var(--colorNeutralForeground3);
    font-size: 11px;
}

/* ── ZamanKontrol info strip ── */
.zk-info[b-6ztu9nvomp] {
    padding: 8px 12px;
    background: var(--colorBrandBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-size: 12px;
    color: var(--colorBrandForeground2);
    font-weight: 500;
}

/* ── Activity grid ── */
/* Horizontal scroll wrapper: wide trial grids scroll within the card instead
   of clipping. The sticky activity-label column (below) keeps the row label
   visible while the trial columns scroll under it. */
.ag-scroll[b-6ztu9nvomp] {
    overflow-x: auto;
}

table.ag[b-6ztu9nvomp] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

table.ag th[b-6ztu9nvomp],
table.ag td[b-6ztu9nvomp] {
    padding: 0;
    border-right: 1px solid var(--colorNeutralStroke2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
    text-align: center;
    min-width: 44px;
}

table.ag th[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground3);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
}

table.ag th.act-col[b-6ztu9nvomp] {
    text-align: left;
    min-width: 220px;
    padding: 8px 12px;
    /* Keep the activity-label header pinned while trial columns scroll. */
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--colorNeutralBackground3);
}

table.ag th.col-group[b-6ztu9nvomp] {
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
}

table.ag td.act-cell[b-6ztu9nvomp] {
    text-align: left;
    padding: 8px 12px;
    background: var(--colorNeutralBackground2);
    /* Pin the activity name so it stays visible while trials scroll right.
       z-index below the header (.act-col) so the header corner wins. */
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 220px;
}

/* ── Cell box (clickable trial cell) ── */
/* Same story as .rail-item: v4 had a click-only <div>. It is a real
   <button type="button"> now, so the first block undoes the UA button defaults
   and the rest is v4 verbatim. */
.cellbox[b-6ztu9nvomp] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 4px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Placeholder activity rows ("(Hedef davranış tanımlı değil)") are not scorable —
   v4 silently swallowed the click in OnCellClick; v5 also renders the button
   disabled so keyboard users are not sent to a dead control. */
.cellbox:disabled[b-6ztu9nvomp] {
    cursor: default;
    opacity: 0.55;
}

.cellbox .ck[b-6ztu9nvomp] {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--colorNeutralStroke1);
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.cellbox:hover:not(:disabled)[b-6ztu9nvomp] {
    background: var(--colorSubtleBackgroundHover);
}

.cellbox:focus-visible[b-6ztu9nvomp] {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: -2px;
}

.cellbox.v-1 .ck[b-6ztu9nvomp] {
    background: #51cf66;
    border-color: #51cf66;
}

.cellbox.v-1 .ck[b-6ztu9nvomp]::after {
    content: "✓";
}

.cellbox.v-0 .ck[b-6ztu9nvomp] {
    background: #ff6b6b;
    border-color: #ff6b6b;
}

.cellbox.v-0 .ck[b-6ztu9nvomp]::after {
    content: "✗";
}

.cellbox.v-K .ck[b-6ztu9nvomp] {
    background: #fcc419;
    border-color: #fcc419;
    color: #1a1a1f;
}

.cellbox.v-K .ck[b-6ztu9nvomp]::after {
    content: "K";
}

/* ── Counter cell (Replikli's Repliksiz column) ── */
.counter[b-6ztu9nvomp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 36px;
    font-size: 13px;
    position: relative;
}

.counter button[b-6ztu9nvomp] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    border: 1px solid var(--colorNeutralStroke1);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    cursor: pointer;
}

.counter button:hover[b-6ztu9nvomp] {
    background: var(--colorSubtleBackgroundHover);
}

.counter button:focus-visible[b-6ztu9nvomp] {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 1px;
}

.counter .val[b-6ztu9nvomp] {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
}

/* ── Footer & summary ── */
.grid-foot[b-6ztu9nvomp] {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    background: var(--colorNeutralBackground2);
}

.summary[b-6ztu9nvomp] {
    margin: 12px;
    padding: 10px 14px;
    background: #fff8db;
    border: 1px solid #fcc419;
    border-radius: 6px;
    font-size: 13px;
    color: #1a1a1f;
}

.summary.good[b-6ztu9nvomp] {
    background: #d3f9d8;
    border-color: #51cf66;
}

.post-success-actions[b-6ztu9nvomp] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px;
    background: var(--colorNeutralBackground2);
    border-top: 1px solid var(--colorNeutralStroke2);
}

/* ── GAG agreement status banner (#258) ──
   Sits above the meta block on GAG cards. Mirrors the success/failure colour
   scheme used elsewhere in the file (51cf66 / ff6b6b families) so the
   accept/reject state lands visually with the cell ✓/✗ glyphs. */
.gag-status[b-6ztu9nvomp] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-size: 13px;
    font-weight: 500;
}

.gag-status.pending[b-6ztu9nvomp] {
    color: var(--colorNeutralForeground3);
    background: #fffbe6;
}

.gag-status.accepted[b-6ztu9nvomp] {
    color: #2b8a3e;
    background: #ebfbee;
}

.gag-status.rejected[b-6ztu9nvomp] {
    color: #c92a2a;
    background: #fff5f5;
}

/* ── Per-cell save indicator (#253) ──
   Tiny corner dot that signals the lifecycle of the cell's auto-save.
   Lives top-right so it never overlaps the ✓/✗/K glyph (cellbox) or the
   counter number. Pointer-events disabled so the dot never steals a click
   from the underlying cellbox / counter button. */
.cell-indicator[b-6ztu9nvomp] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

.cell-indicator.s-pending[b-6ztu9nvomp] {
    background: var(--colorBrandBackground);
    animation: cell-pulse-b-6ztu9nvomp 1s ease-in-out infinite;
}

.cell-indicator.s-saved[b-6ztu9nvomp] {
    background: #51cf66;
}

.cell-indicator.s-error[b-6ztu9nvomp] {
    background: #ff6b6b;
    /* Re-enable pointer events on error only so the title tooltip surfaces on
       hover. Click events bubble up to the parent .cellbox / .counter button
       so the re-click retry path still fires. */
    pointer-events: auto;
    cursor: help;
}

@keyframes cell-pulse-b-6ztu9nvomp {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ── Dark theme: the pale semantic tints only ──
   Everything else on this page rides FluentUI tokens and re-themes on its own.
   These five blocks exist because the ✓/✗/agreement colours are literal in v4 too
   (see note 3 in the header) and their v4 backgrounds are near-white. */
[data-theme="dark"] .summary[b-6ztu9nvomp] {
    background: rgba(252, 196, 25, 0.14);
    border-color: #a37a00;
    color: var(--colorNeutralForeground1);
}

[data-theme="dark"] .summary.good[b-6ztu9nvomp] {
    background: rgba(81, 207, 102, 0.16);
    border-color: #2f9e44;
}

[data-theme="dark"] .gag-status.pending[b-6ztu9nvomp] {
    background: rgba(252, 196, 25, 0.12);
}

[data-theme="dark"] .gag-status.accepted[b-6ztu9nvomp] {
    color: #8ce99a;
    background: rgba(81, 207, 102, 0.14);
}

[data-theme="dark"] .gag-status.rejected[b-6ztu9nvomp] {
    color: #ffa8a8;
    background: rgba(255, 107, 107, 0.14);
}

/* The indicator's white halo exists to separate the dot from a light cell; on a
   dark surface it has to invert or it reads as a bright ring. */
[data-theme="dark"] .cell-indicator[b-6ztu9nvomp] {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* ── Small screens ──
   Collapse the two-column layout to a single column so the fixed 280px rail
   stops stealing width from the data grid. The rail un-sticks and drops its
   height cap so it flows as a normal block above the cards. */
@media (max-width: 768px) {
    .de-grid[b-6ztu9nvomp] {
        grid-template-columns: 1fr;
    }

    .de-rail[b-6ztu9nvomp] {
        position: static;
        max-height: none;
    }
}
/* /Components/Pages/VeriGirisi/VeriGirisiSecimPage.razor.rz.scp.css */
/*
    Ported from Modules/Module.Students/Pages/VeriGirisi/VeriGirisiSecimPage.razor.css
    (diary 0028). Layout/metrics are byte-for-byte v4; only colour sources changed.

    v4 token -> v5 token (DESIGN-GUIDELINES token table):
      --neutral-stroke-rest          -> --colorNeutralStroke1
      --neutral-stroke-divider-rest  -> --colorNeutralStroke2
      --neutral-foreground-rest      -> --colorNeutralForeground1
      --neutral-foreground-hint      -> --colorNeutralForeground3
      --neutral-fill-input-rest      -> --colorNeutralBackground1
      --neutral-fill-secondary-rest  -> --colorNeutralBackground2
      --accent-fill-rest             -> --colorBrandBackground

    --error is v4's, kept verbatim. Diary 0028 originally replaced it with a literal
    #c50f1f (plus [data-theme="dark"] overrides) on the belief that --error/--success/
    --warning dangle in rc.4. THAT CLAIM IS REFUTED — measured twice in headless Chrome
    driving the full Blazor JS-initializer lifecycle, all four status tokens resolve:
    --success #0e700e, --warning #bc4b09, --error #bc2f32, --info #616161. The false
    positive came from a probe harness that called only `beforeWebStart`; the alias
    stylesheet is adopted by Theme.applyStyles() from `afterStarted`. See
    DESIGN-GUIDELINES § "--success / --warning / --error / --info WORK" and diary 0032.
    The literal-hex edits (and the dark overrides that existed only to prop them up)
    were reverted at the final merge — diary 0033.
*/

.veri-formu-select[b-73movpkz50] {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 4px;
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* The chevron is a baked-in data URI, so it can't read a token — swap the whole
   image for a light-stroked copy in dark theme instead of leaving a near-black
   arrow on a near-black field. */
[data-theme="dark"] .veri-formu-select[b-73movpkz50] {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23adadb2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.veri-formu-select:hover[b-73movpkz50] {
    border-color: var(--colorBrandBackground);
}

.veri-formu-select:focus[b-73movpkz50] {
    outline: 2px solid var(--colorBrandBackground);
    outline-offset: 1px;
}

/* ── Program selection table ─────────────────────────────────────── */
.secim-tablo[b-73movpkz50] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.secim-tablo th[b-73movpkz50] {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--colorNeutralForeground3);
    font-weight: 600;
    padding: 6px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.secim-tablo td[b-73movpkz50] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    vertical-align: middle;
}

/* Uppercase accent header row that spans the table, one per education area. */
.grup-baslik td[b-73movpkz50] {
    background-color: var(--colorNeutralBackground2);
    color: var(--colorBrandForeground1);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 6px 10px;
}

.program-hucre[b-73movpkz50] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.program-ad[b-73movpkz50] {
    font-weight: 600;
}

.program-alt[b-73movpkz50] {
    font-size: 11px;
    color: var(--colorNeutralForeground3);
}

.islem-hucre[b-73movpkz50] {
    width: 80px;
    text-align: right;
}

/* ── GAG section ─────────────────────────────────────────────────── */
.gag-bolum[b-73movpkz50] {
    margin-top: 28px;
}

.gag-baslik[b-73movpkz50] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--error, #b00020);
    margin: 0 0 6px;
}

.gag-chip[b-73movpkz50] {
    display: inline-block;
    background-color: var(--error, #b00020);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 1px 7px;
}

.gag-not[b-73movpkz50] {
    font-size: 0.78rem;
    color: var(--colorNeutralForeground3);
    margin: 0 0 8px;
}

.gag-onay-hucre[b-73movpkz50] {
    width: 36px;
}

/* ── Start button bar ────────────────────────────────────────────── */
.baslat-cubugu[b-73movpkz50] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}
/* /Components/Pages/WorkerActivationPage.razor.rz.scp.css */
/* The form section's label is now a real <h2> (see the comment at its markup). This rule
   reproduces EXACTLY what the <FluentText Weight="TextWeight.Bold" Size="TextSize.Size600"
   Style="margin-bottom: 20px;"> it replaced computed to, so the promotion moves nothing.

   Values read from rc.4's <fluent-text> shadow stylesheet
   (Microsoft.FluentUI.AspNetCore.Components.lib.module.js, 5.0.0-rc.4-26180.1):
       :host([size='600'])    { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600) }
       :host([weight='bold']) { font-weight: var(--fontWeightBold) }

   margin: 0 0 20px restores the old inline margin-bottom AND kills the browser's own <h2>
   margin. Neither half is optional: default-fuib.css:28-40 zeroes h2's margin-TOP and sets
   font-size: var(--fontSizeHero800), but the UA's 0.83em margin-BOTTOM survives, which at
   Hero800 is ~27px — it would silently replace the 20px this element has always had.

   No display rule is needed. <fluent-text> is display: inline by default (no Block was set),
   but this element is a direct child of a FluentStack — a plain flex <div> — and flex items are
   blockified, so the old inline value never applied either. An <h2> lands in the same box. */
.activation-section-title[b-7s9wr27tyj] {
    margin: 0 0 20px;
    font-size: var(--fontSizeBase600);
    line-height: var(--lineHeightBase600);
    font-weight: var(--fontWeightBold);
}

.isolated-page[b-7s9wr27tyj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 20px;
    background-color: #f5f5f5;
    z-index: 1;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .isolated-page[b-7s9wr27tyj] {
        padding: 15px 10px;
    }
}

/* Password strength indicator */
.password-strength[b-7s9wr27tyj] {
    margin-top: 4px;
}

.password-strength-bar[b-7s9wr27tyj] {
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-fill[b-7s9wr27tyj] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.password-strength-1[b-7s9wr27tyj] {
    background-color: #d32f2f;
}

.password-strength-2[b-7s9wr27tyj] {
    background-color: #f57c00;
}

.password-strength-3[b-7s9wr27tyj] {
    background-color: #fbc02d;
}

.password-strength-4[b-7s9wr27tyj] {
    background-color: #388e3c;
}

.password-strength-5[b-7s9wr27tyj] {
    background-color: #1b5e20;
}
/* /Components/Pages/WorkersAddPage.razor.rz.scp.css */
/* ============================================
   WORKER ADD/EDIT PAGE - MODERN FORM STYLES
   Ported from v4's WorkersAdd.razor.css (diary 0016) — v4 CSS custom-property tokens
   remapped per docs/fluentui-v5/DESIGN-GUIDELINES.md's token table (--neutral-layer-1 ->
   --colorNeutralBackground1, --neutral-foreground-rest -> --colorNeutralForeground1,
   --accent-fill-rest -> --colorBrandBackground, --neutral-stroke-rest ->
   --colorNeutralStroke1, --neutral-layer-2 -> --colorNeutralBackground3,
   --neutral-foreground-hint -> --colorNeutralForeground3).

   ⚠️ CORRECTED IN DIARY 0030. The comment that used to stand here claimed the
   `::deep fluent-text-field` / `fluent-select` / `::part(root)` / `::part(control)` rules
   were inert because "v5's FluentTextInput/FluentSelect render as plain Blazor markup, not
   custom elements". That is FALSE — rc.4's FluentTextInput really does emit
   `<fluent-text-input>` (decompile-verified), and unlike WorkersPage the anchors here WERE
   fine: every input on this page sits inside a page-authored `<div class="form-field">` /
   `<div class="form-section">`, which does carry the b-xxxxxxxxxx scope attribute. So the
   rules were dead purely on tag/part names, and were individually revivable. They were
   nonetheless DELETED, one reason each:

     `::deep fluent-text-field, ::deep fluent-select { width: 100%; }`
        → redundant. Every FluentTextInput/FluentSelect on this page already carries an
          inline Style="width: 100%;". Reviving it as `fluent-text-input`/`fluent-dropdown`
          would change nothing.

     `::deep fluent-text-field::part(root) { border-radius: 6px; min-height: 40px; }`
     `::deep fluent-select::part(control) { … }`
     `::deep …:focus-within { box-shadow: 0 0 0 2px …; }`
     `::deep fluent-text-field.invalid::part(root) { border-color: #d13438; }`
        → `fluent-text-input` does still expose a `root` part, so the first of these was
          literally revivable by renaming the tag. `fluent-dropdown`, however, exposes NO
          parts at all in rc.4, so the `fluent-select::part(control)` half has no
          translation. Reviving only the text-input half would leave inputs and dropdowns
          with different corner radii and heights, and would override v5's own control-size
          design tokens with v4's hardcoded chrome. Judged a design decision rather than a
          porting fix and left off. Flagged in diary 0030.

     `::deep .validation-message { … }`
        → v5 never renders that class. `FluentValidationSummary` emits
          `<ul class="fluent-validation-errors"><li class="fluent-validation-message">`
          (decompile-verified) and styles them itself. Dead by absence of the element, not
          by selector shape.
   ============================================ */

/* Form Card */
.form-card[b-ixzkk4ia47] {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: var(--colorNeutralBackground1);
}

/* Card Header */
.card-header[b-ixzkk4ia47] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-header h3[b-ixzkk4ia47] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

/* Form Section */
.form-section[b-ixzkk4ia47] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title[b-ixzkk4ia47] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--colorBrandBackground);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

/* Form Field */
.form-field[b-ixzkk4ia47] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.field-label[b-ixzkk4ia47] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colorNeutralForeground1);
    margin-bottom: 0.25rem;
}

.field-label .required[b-ixzkk4ia47] {
    color: #d13438;
}

.field-hint[b-ixzkk4ia47] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
    margin-top: 0.25rem;
    font-style: italic;
}

/* (Text-field / select `::deep` + `::part()` rules deleted in diary 0030 — see the file
   header for the per-rule reasoning.) */

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .form-card[b-ixzkk4ia47] {
        padding: 1.5rem;
    }

    .card-header h3[b-ixzkk4ia47] {
        font-size: 1.1rem;
    }

    .section-title[b-ixzkk4ia47] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .form-card[b-ixzkk4ia47] {
        padding: 1rem;
        border-radius: 8px;
    }

    .card-header[b-ixzkk4ia47] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .card-header h3[b-ixzkk4ia47] {
        font-size: 1rem;
    }
}

/* ============================================
   USER SEARCH CARDS
   ============================================ */

.user-card[b-ixzkk4ia47] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
    transition: border-color 0.15s;
}

.user-card:hover[b-ixzkk4ia47] {
    border-color: var(--colorBrandBackground);
}

.user-card-selected[b-ixzkk4ia47] {
    border-color: var(--colorBrandBackground);
    background: rgba(0, 120, 212, 0.05);
}

.user-card-warning[b-ixzkk4ia47] {
    border-color: #d83b01;
    opacity: 0.7;
}

.user-detail[b-ixzkk4ia47] {
    font-size: 0.85rem;
    color: var(--colorNeutralForeground3);
}

.warning-text[b-ixzkk4ia47] {
    font-size: 0.8rem;
    color: #d83b01;
    font-weight: 500;
}

.selected-user-summary[b-ixzkk4ia47] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: rgba(0, 120, 212, 0.05);
    border: 1px solid var(--colorBrandBackground);
}

/* ============================================
   VALIDATION STYLES — all deleted in diary 0030. v5 renders
   `.fluent-validation-errors` / `.fluent-validation-message`, not `.validation-message`,
   and styles them itself; and `fluent-dropdown` has no shadow parts to target.
   ============================================ */

/* ============================================
   SECTION DIVIDER
   ============================================ */

.section-divider[b-ixzkk4ia47] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.divider-text[b-ixzkk4ia47] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .form-card[b-ixzkk4ia47] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}
/* /Components/Pages/WorkersPage.razor.rz.scp.css */
/* ============================================
   WORKER PAGE - USER GRID STYLES
   Component-scoped styles for WorkersPage.razor
   ============================================ */

/* Copied verbatim from v4's Workers.razor.css (diary 0016) — no v4-only CSS
   custom-property tokens used here (only the page-local --role-color inline var, set from
   RoleEntity.ColorHex in WorkersPage.razor), so no token remap was needed.

   ⚠️ `--role-color-rgb` is NOT a variable this file may read. v4 referenced it in four places
   and NOTHING in either codebase ever set it, so every `rgba(var(--role-color-rgb, …), …)`
   silently rendered its hardcoded fallback — grey where a role colour was intended. All four
   are now `color-mix(in srgb, var(--role-color) N%, transparent)`, which works directly with
   the hex already in --role-color and needs no parallel -rgb variable. Do not reintroduce it.

   ⚠️ CORRECTED IN DIARY 0030. The comment that used to stand here claimed every
   `::deep fluent-*` selector in this file was an inert no-op because "v5 components render
   as plain Blazor markup, not custom elements". That is FALSE — rc.4 does render real
   custom elements (`FluentButton` → `<fluent-button>`, decompile-verified). The rules below
   were audited individually against the compiler's own output in
   obj/…/scopedcss/Components/Pages/WorkersPage.razor.rz.scp.css:

     LIVE  — the `::deep fluent-button { … }` rules (see "BUTTON IMPROVEMENTS" at the bottom
             and the two inside the 768px/600px media queries). They compile to
             `[b-…] fluent-button` and DO apply to the mobile-card action buttons, because
             those sit inside the page-authored `<div class="user-card-actions">`, which
             carries the scope attribute. Do not "clean these up" — they are working CSS.

     DEAD, DELETED — the `::deep fluent-grid` / `fluent-text-field` / `fluent-stack` /
             `fluent-grid-item` search-and-filter rules. Two independent reasons, either
             one fatal: (a) the tags are gone or renamed in v5 (`fluent-text-field` →
             `fluent-text-input`; `fluent-grid`/`fluent-grid-item`/`fluent-stack` are plain
             `<div>`s now), and (b) the search box's every ancestor up to the page root is a
             *component* (FluentStack → FluentGridItem → FluentGrid → FluentStack → …), so
             no scope attribute exists above it and `::deep` had nothing to anchor to.
             Reviving them would need a plain `<div class="…">` wrapper added around the
             search row in WorkersPage.razor; judged not worth the markup churn for a
             transition + focus shadow. Recorded in diary 0030.

     DEAD, KEPT AND FLAGGED — `.user-grid` and `.user-grid .fluent-data-grid-row*` below.
             See the note directly above them. */

/* View Toggle handled by inline styles in Razor file */

/* ⚠️ DEAD — deliberately not revived (diary 0030). `user-grid` is passed as
   Class="user-grid" to <CocukDataGrid>, so rc.4 renders
   `<table class="fluent-data-grid user-grid">` with NO b-xxxxxxxxxx scope attribute; the
   compiler emits `.user-grid[b-4k5fbiccbd]` and `.user-grid .fluent-data-grid-row[b-…]`,
   neither of which can ever match. (`.fluent-data-grid-row` IS the right v5 selector — it
   is a class on the `<tr>`, not a tag — but it is rendered by FluentDataGridRow, so it
   never carries the parent's scope attribute either.)

   To revive: wrap the grid in a page-authored `<div class="user-grid">` in
   WorkersPage.razor (the existing `.desktop-view` wrapper is a FluentStack Class=, so it
   does not qualify) and rewrite the row rules as `.user-grid ::deep .fluent-data-grid-row`.

   NOT DONE ON PURPOSE: these rules have been inert since the page was ported, so the page
   as it ships today has default-height rows and no grid chrome. Turning them on would make
   every row 160px tall and add a radius/shadow/gradient-hover to one of the app's busiest
   list pages — a design decision, not a porting fix, and there is no browser here to check
   it against. Flagged in diary 0030 for a browser-verified pass.

   ⚠️ DO NOT REVIVE THE ROW-HEIGHT RULE — row height is the library's job now. Both grids
   inherit `RowSize = DataGridRowSize.Large` (58px, written inline by rc.4 from its own
   enum) from CocukDataGrid's constructor (Components/Shared/CocukDataGrid.cs); reviving
   `--row-height: 160px` would fight it.

   ⚠️ THE ROW-HOVER RULE IS DELETED, NOT DORMANT. `.user-grid .fluent-data-grid-row:hover
   { background: linear-gradient(…); transform: scale(1.005) }` used to sit here. It was
   inert (see the scope-attribute note above), but it encoded the wrong contract, and the
   revive instructions above would have brought a LIE back: /okullar/calisanlar rows are not
   clickable — their actions live in the İşlemler cell — so nothing on the row may promise a
   click. That is now enforced at the source: CocukDataGrid.SetParametersAsync defaults
   ShowHover to `OnRowClick != null`, so this grid renders no `hover` class, and rc.4's
   shipped `.fluent-data-grid .hover…:hover td { cursor:pointer; background-color: … }`
   never applies. Do not re-add a row `:hover` here in any form. Only `.user-grid`'s
   radius/shadow chrome is still an open design question. */
.user-grid[b-4k5fbiccbd] {
    --row-height: 160px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.user-grid:hover[b-4k5fbiccbd] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.user-grid .fluent-data-grid-row[b-4k5fbiccbd] {
    height: 160px;
    min-height: 160px;
    transition: all 0.2s ease;
}

/* The 4px `border-left: solid var(--role-color)` edge bar is GONE (and with it the hover rule
   that only widened it to 6px, and the `background: linear-gradient(…)` that paired with it).
   Three reasons, any one sufficient:
     1. It bled off the row edge and read as decoration, not data.
     2. The gradient read `--role-color-rgb`, which is set NOWHERE in this codebase, so it always
        fell back to `rgba(0, 0, 0, 0.02)` — a grey wash, not the role colour it advertised.
     3. Any background painted on this div now sits ON TOP of the row-hover background that
        `ShowHover="true"` finally turned on, punching a dead rectangle through it.
   The role is still shown, and better: `.user-role` below is now a correctly tinted pill.
   The 12px left padding went with the bar it was offsetting — horizontal spacing is rc.4's own
   18px cell gutter now that the columns no longer override `padding: 0`. */
.user-name-cell[b-4k5fbiccbd] {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    transition: all 0.2s ease;
}

.user-name[b-4k5fbiccbd] {
    font-weight: 600;
    color: #323130;
    line-height: 1.3;
    margin-bottom: 4px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* The role pill. It was ALREADY here and ALREADY rendered — it just did not look like a badge,
   for two independent reasons, both fixed below.

   1. `display: inline-block` inside `.user-name-cell`, which is `display: flex; flex-direction:
      column`. A flex item is not inline; `align-items` defaults to `stretch`, so the "inline"
      pill was blown out to the full column width and read as a full-width bar.
      `align-self: flex-start` makes it hug its text.

   2. The background was `rgba(var(--role-color-rgb, 0, 0, 0), 0.08)` and `--role-color-rgb` is
      set NOWHERE in this codebase — so the fallback always won and every role, whatever its
      colour, got the same grey. `color-mix()` takes the hex in `--role-color` directly and needs
      no parallel `-rgb` variable, which is exactly why that variable never existed and could
      quietly stay missing. */
.user-role[b-4k5fbiccbd] {
    font-size: 12px;
    color: var(--role-color);
    line-height: 1.2;
    font-weight: 500;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--role-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-color) 30%, transparent);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
}

/* ============================================
   CONTACT QUICK ACTIONS (desktop grid cells)
   ============================================ */

/* `.contact-cell` is a <div> written literally in WorkersPage.razor, which is the ONLY reason
   these rules can work: a Class= handed to a Fluent COMPONENT never receives Blazor's
   b-xxxxxxxxxx scope attribute (that is why `.user-grid` above is permanently dead), whereas a
   page-authored element does. Anything targeting the button itself therefore has to go through
   `::deep` anchored here — <fluent-anchor-button> is rendered by the component and carries no
   scope attribute of its own. */
.contact-cell[b-4k5fbiccbd] {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Without this a flex item refuses to shrink below its content width, so a long e-mail would
       widen the 1fr track instead of ellipsising inside it. */
    min-width: 0;
}

.contact-text[b-4k5fbiccbd] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The button is the fixed part of the cell; the text absorbs the slack. Without this the icon is
   the thing that gets squeezed when the column is tight, which is the one element that must not
   change size. */
.contact-cell[b-4k5fbiccbd]  fluent-anchor-button {
    flex: 0 0 auto;
}

.status-badge[b-4k5fbiccbd] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.status-badge:hover[b-4k5fbiccbd] {
    transform: scale(1.05);
}

/* ============================================
   STATUS BADGES - LIGHT MODE
   ============================================ */
.status-approved[b-4k5fbiccbd] {
    background: linear-gradient(135deg, #d4f7d4 0%, #b8f0b8 100%);
    color: #107c10;
    border-color: #9cdb9c;
}

.status-pending[b-4k5fbiccbd] {
    background: linear-gradient(135deg, #fff4ce 0%, #ffe9a6 100%);
    color: #8a8886;
    border-color: #f0dc88;
}

/* ============================================
   STATUS BADGES - DARK MODE
   ============================================ */
[data-theme="dark"] .status-approved[b-4k5fbiccbd] {
    background-color: rgba(16, 124, 16, 0.3);
    color: #92e892;
}

[data-theme="dark"] .status-pending[b-4k5fbiccbd] {
    background-color: rgba(138, 136, 134, 0.3);
    color: #d4d4d4;
}

/* Dark mode text color fix */
[data-theme="dark"] .user-name[b-4k5fbiccbd] {
    color: #ffffff;
}

/* ============================================
   MOBILE CARD VIEW
   ============================================ */
.mobile-view[b-4k5fbiccbd] {
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.users-card-container[b-4k5fbiccbd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
    animation: fadeIn-b-4k5fbiccbd 0.4s ease-out;
    width: 100%;
    box-sizing: border-box;
}

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

/* Same as the desktop cell: the 4px role-coloured left edge is gone. `.user-card-role` below is
   the role badge now. */
.user-card[b-4k5fbiccbd] {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.user-card[b-4k5fbiccbd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* color-mix, not rgba(var(--role-color-rgb, …)): that variable is set nowhere, so this hover
       wash was permanently the hardcoded blue fallback regardless of the card's actual role. */
    background: linear-gradient(135deg, color-mix(in srgb, var(--role-color) 3%, transparent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* NO :hover / :active rule, deliberately — same call as `.student-card` on /ogrenci.
   `.user-card` is the MOBILE rendering of the /okullar/calisanlar grid: a plain <div> with
   no @onclick, whose actions are the .card-action-btn cluster inside it. It used to lift
   (`transform: translateY(-3px)` + shadow + the `::before` wash) and press down on `:active`
   — a full press animation on something that cannot be pressed. Removed together with the
   desktop row hover, which CocukDataGrid now withholds from every grid that passes no
   OnRowClick. The `::before` overlay stays but is inert at opacity 0 (nothing fades it in);
   it is kept only because `position: relative` / `overflow: hidden` above are shaped for it. */

.user-card-header[b-4k5fbiccbd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.user-card-name[b-4k5fbiccbd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.name-text[b-4k5fbiccbd] {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/* Same `--role-color-rgb`-never-set bug as `.user-role`; same color-mix fix. (This one already
   had align-self: flex-start, which is why the mobile pill looked like a pill and the desktop one
   did not.) */
.user-card-role[b-4k5fbiccbd] {
    font-size: 13px;
    color: var(--role-color);
    font-weight: 600;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--role-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-color) 30%, transparent);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
}

.user-card-body[b-4k5fbiccbd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-card-info-row[b-4k5fbiccbd] {
    display: grid;
    grid-template-columns: 24px auto 1fr;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* NO :hover rule. `.user-card-info-row:hover { background: rgba(0,0,0,.02) }` highlighted a
   static icon/label/value row that has no handler — the mobile echo of the grid row-hover
   lie. The `transition: background` above went with it. */

.info-icon[b-4k5fbiccbd] {
    color: #6b7280;
}

.info-label[b-4k5fbiccbd] {
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

.info-value[b-4k5fbiccbd] {
    color: #374151;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: right;
    max-width: 100%;
}

/* Contact rows only (E-Posta / Telefon, and only when there is actually an action to show).
   The value and its icon share the row's EXISTING third grid track as a flex row rather than
   getting a fourth `auto` track: a fourth track would still charge its 8px `gap` on the rows
   that have no action (Kayıt / Arşiv Tarihi), knocking those values out of right-alignment with
   these. `justify-content: flex-end` reproduces what `text-align: right` was doing for the plain
   rows, which no longer applies once the span becomes a flex container. */
.info-value-contact[b-4k5fbiccbd] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

/* word-break / overflow-wrap are inherited properties, so this span still breaks long addresses
   exactly as .info-value did; it only needs permission to shrink below its content width. */
.info-value-text[b-4k5fbiccbd] {
    min-width: 0;
}

.info-value-contact[b-4k5fbiccbd]  fluent-anchor-button {
    flex: 0 0 auto;
}

/* Flex, not `grid-template-columns: repeat(4, 1fr)`. The four hand-rolled buttons that template
   was counting are now a single <RowActions>, which lays its own buttons out in a 4px-gap
   FluentStack — a 4-column grid would squeeze that whole cluster into one quarter of the card. */
.user-card-actions[b-4k5fbiccbd] {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    width: 100%;
    box-sizing: border-box;
}

.card-action-btn[b-4k5fbiccbd] {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 8px 4px !important;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.card-action-btn:hover[b-4k5fbiccbd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-action-btn:active[b-4k5fbiccbd] {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* (Search-and-filter `::deep fluent-grid` / `fluent-text-field` rules deleted in diary 0030
   — dead twice over: renamed/removed tags AND no scoped ancestor. See the file header.) */

/* Tablet */
@media (max-width: 768px) {
    /* Ensure no horizontal scroll */
    body[b-4k5fbiccbd], html[b-4k5fbiccbd] {
        overflow-x: hidden;
    }

    /* LIVE: applies to the mobile-card action buttons (inside the page-authored
       <div class="user-card-actions">, which carries the scope attribute). */
    [b-4k5fbiccbd] fluent-button {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* Card optimizations */
    .users-card-container[b-4k5fbiccbd] {
        gap: 12px;
        padding: 0;
        width: 100%;
    }

    .user-card[b-4k5fbiccbd] {
        padding: 14px;
        width: 100%;
    }

    .name-text[b-4k5fbiccbd] {
        font-size: 15px;
    }

    .user-card-role[b-4k5fbiccbd] {
        font-size: 12px;
        padding: 3px 8px;
    }

    .user-card-info-row[b-4k5fbiccbd] {
        font-size: 12px;
    }

    .status-badge[b-4k5fbiccbd] {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    /* (`::deep fluent-grid-item` / `fluent-text-field` / `fluent-stack` mobile rules deleted
       in diary 0030 — those tags no longer exist in v5 at all, they render as plain <div>s,
       and there was no scoped ancestor to anchor `::deep` to either.) */

    /* LIVE: the mobile-card action buttons. */
    [b-4k5fbiccbd] fluent-button {
        width: 100%;
        justify-content: center;
        font-size: 13px;
    }

    /* Mobile card optimizations */
    .users-card-container[b-4k5fbiccbd] {
        gap: 12px;
        padding: 0;
        width: 100%;
    }

    .user-card[b-4k5fbiccbd] {
        padding: 14px;
        gap: 12px;
        border-radius: 10px;
        width: 100%;
    }

    .user-card-header[b-4k5fbiccbd] {
        padding-bottom: 10px;
        gap: 4px;
    }

    .name-text[b-4k5fbiccbd] {
        font-size: 14px;
    }

    .user-card-role[b-4k5fbiccbd] {
        font-size: 11px;
        padding: 3px 8px;
    }

    .user-card-info-row[b-4k5fbiccbd] {
        font-size: 12px;
        gap: 6px;
        grid-template-columns: 20px minmax(60px, auto) 1fr;
        width: 100%;
    }

    .info-icon[b-4k5fbiccbd] {
        width: 16px;
        height: 16px;
    }

    .user-card-actions[b-4k5fbiccbd] {
        gap: 6px;
        padding-top: 10px;
    }

    .card-action-btn[b-4k5fbiccbd] {
        padding: 6px 2px !important;
        font-size: 12px;
    }

    .status-badge[b-4k5fbiccbd] {
        font-size: 9px;
        padding: 2px 6px;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .users-card-container[b-4k5fbiccbd] {
        gap: 10px;
        padding: 0;
        width: 100%;
    }

    .user-card[b-4k5fbiccbd] {
        padding: 12px;
        gap: 10px;
        width: 100%;
    }

    .name-text[b-4k5fbiccbd] {
        font-size: 13px;
    }

    .user-card-role[b-4k5fbiccbd] {
        font-size: 10px;
        padding: 2px 6px;
    }

    .user-card-info-row[b-4k5fbiccbd] {
        font-size: 11px;
        gap: 4px;
        grid-template-columns: 18px minmax(50px, auto) 1fr;
        width: 100%;
    }

    .info-label[b-4k5fbiccbd] {
        font-size: 10px;
    }

    .info-value[b-4k5fbiccbd] {
        font-size: 11px;
    }

    .user-card-actions[b-4k5fbiccbd] {
        gap: 4px;
        padding-top: 8px;
    }

    .card-action-btn[b-4k5fbiccbd] {
        padding: 4px 2px !important;
        font-size: 11px;
    }

    /* (The nested 360px `grid-template-columns: repeat(2, 1fr)` fallback was deleted with the
       grid layout above — .user-card-actions is a flex row holding one <RowActions> now, and a
       grid-only property on a flex container does nothing.) */
}

/* ============================================
   BUTTON IMPROVEMENTS
   LIVE CSS — verified in diary 0030, do not delete. Compiles to `[b-…] fluent-button` and
   matches the mobile-card action buttons, which sit inside the page-authored
   <div class="user-card-actions">. rc.4's FluentButton really does render <fluent-button>.
   ============================================ */
[b-4k5fbiccbd] fluent-button {
    transition: all 0.2s ease;
}

[b-4k5fbiccbd] fluent-button:hover {
    transform: translateY(-1px);
}

[b-4k5fbiccbd] fluent-button:active {
    transform: translateY(0);
}
/* /Components/Shared/ChangelogPage.razor.rz.scp.css */
.changelog-container[b-jkd8huqul6] {
    max-width: 800px;
    padding: 2rem;
}

.changelog-header[b-jkd8huqul6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.changelog-header h2[b-jkd8huqul6] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.changelog-description[b-jkd8huqul6] {
    color: var(--colorNeutralForeground3);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.changelog-date-group[b-jkd8huqul6] {
    margin-bottom: 2rem;
}

.changelog-date[b-jkd8huqul6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--colorNeutralForeground1);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--colorNeutralStroke1);
}

/* The entry type (Feature / Improvement / Technical) used to be encoded ONLY by the
   colour of a 4px border-left, which nothing on the page decoded. It is now a
   labelled FluentBadge in .entry-header (see ChangelogPage.razor +
   GetEntryBadgeColor/GetEntryTypeLabel), so the bar and its three
   .entry-feature/.entry-improvement/.entry-technical overrides are gone.
   A full 1px outline replaces it so each entry still reads as a discrete card. */
.changelog-entry[b-jkd8huqul6] {
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease;
}

.changelog-entry:hover[b-jkd8huqul6] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.entry-header[b-jkd8huqul6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.entry-header h3[b-jkd8huqul6] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.entry-items[b-jkd8huqul6] {
    margin: 0;
    padding-left: 1.75rem;
    color: var(--colorNeutralForeground1);
}

.entry-items li[b-jkd8huqul6] {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.entry-items li:last-child[b-jkd8huqul6] {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .changelog-container[b-jkd8huqul6] {
        padding: 1rem;
    }

    .changelog-header h2[b-jkd8huqul6] {
        font-size: 1.5rem;
    }

    .changelog-entry[b-jkd8huqul6] {
        padding: 1rem;
    }

    .entry-header h3[b-jkd8huqul6] {
        font-size: 1rem;
    }
}
/* /Components/Shared/EmptyLayout.razor.rz.scp.css */
/* This layout's scroll container. See EmptyLayout.razor's banner for why a bare
   @Body cannot scroll at all.

   `height: 100%` and NOT `100dvh`: it has to resolve against <body>, which
   default-fuib.css gives a definite `height: 100dvh`. Following the parent means
   the scrollport stays exactly the visible area even if FluentUI (or we) ever
   change what that height is. The pages hosted here size themselves with
   `min-height: 100vh`, so on a mobile browser whose URL bar is showing they are a
   few px taller than the 100dvh scrollport — that is correct, and is precisely
   the slack this container exists to let the user reach.

   `overflow: auto` and not `scroll`: EmptyLayout pages that fit (the two
   activation pages, /hesap/sifremi-unuttum — MEASURED at 0px overflow, 390x844
   and 1440x900) must keep showing no scrollbar.

   Scoped CSS is safe here, unlike every FluentLayout rule in wwwroot/app.css:
   this <div> is authored in EmptyLayout.razor, so it really does receive the
   b-xxxxxxxxxx scope attribute. */
.empty-layout[b-9tayl9yqt6] {
    height: 100%;
    overflow: auto;
}
/* /Components/Shared/FeedbackPanel.razor.rz.scp.css */
/* FeedbackPanel — LAYOUT AND POSITION ONLY.
   Colour, shadow and radius come from the typed token constants applied as inline style= in the
   markup (see FeedbackPanel.razor.cs) — DESIGN-GUIDELINES §1 forbids hand-typed var(--…) strings
   because a typo there fails silently, while a wrong constant is a compile error.

   This file only loads because App.razor links our own bundle,
   <link rel="stylesheet" href="@Assets["AntikCocuk.V5.styles.css"]> — the
   _content/Microsoft.FluentUI…/…css links are the LIBRARY's styles, not ours.

   Every selector below targets an element authored in FeedbackPanel.razor's markup, which is the
   only place Blazor stamps the b-xxxxx scope attribute. A rule written against a FluentX component
   (even one given a Class=) would compile to `.x[b-…]` and match nothing. */

.feedback-panel[b-7mzb2xrg9a] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    /* Above the app shell. rc.4's FluentLayout header/nav sit at z-index 80-85; v5's toast and
       dialog layers render in the browser's top layer (native popover/dialog), so they still
       appear above this panel — which is what we want for the send confirmation. */
    z-index: 900;
}

/* Hidden = display: none and nothing else. The component is NOT unmounted, so the draft state and
   the JS listeners survive. Note this is also why feedback-panel.js tests visibility with
   getClientRects() rather than offsetParent — offsetParent is always null for position: fixed. */
.feedback-panel--hidden[b-7mzb2xrg9a] {
    display: none;
}

.feedback-panel__header[b-7mzb2xrg9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 16px;
    flex-shrink: 0;
}

.feedback-panel__body[b-7mzb2xrg9a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    /* If the content outgrows max-height the PANEL scrolls internally; the page behind it never
       moves, which matters because the user is expected to keep using the app while this is open. */
    overflow-y: auto;
}

.feedback-panel__section[b-7mzb2xrg9a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
}

.feedback-panel__status[b-7mzb2xrg9a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feedback-panel__hint[b-7mzb2xrg9a] {
    font-size: 12px;
    line-height: 1.4;
}

/* max-height keeps a full-page screenshot from turning the panel into a scrolling column; the user
   only needs to recognise the page, and can open the full image from the issue. */
.feedback-panel__preview[b-7mzb2xrg9a] {
    display: block;
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    object-position: top;
}

.feedback-panel__actions[b-7mzb2xrg9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feedback-panel__dropzone[b-7mzb2xrg9a] {
    padding: 10px 12px;
    text-align: center;
}

/* Permanently in the DOM but never visible: the file picker is opened programmatically from JS
   (feedbackPanelInterop.openFilePicker), and its change listener must never detach. */
.feedback-panel__file-input[b-7mzb2xrg9a] {
    display: none;
}

.feedback-panel__footer[b-7mzb2xrg9a] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    flex-shrink: 0;
}
/* /Components/Shared/GridEmptyState.razor.rz.scp.css */
/*
    24px here + the 24px app.css puts on `.empty-content-cell` = the 48px the three hand-rolled
    empty-state <FluentCard>s used (`padding: 48px; text-align: center`), and is deliberately
    identical to GridLoadingState's, so a grid switching from "loading" to "empty" does not make
    the page jump.

    No border, no background, no shadow: this renders INSIDE the grid's own empty row, which
    already sits on the grid surface. A card here would be a box inside a box.
*/
.grid-empty[b-ksiyv5kma6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;

    padding: 24px 16px;
    width: 100%;
    text-align: center;

    /* .empty-content-cell is `user-select: none` — fine for the label, wrong for a call to
       action that a user may want to read carefully. */
    user-select: text;
}

.grid-empty-action[b-ksiyv5kma6] {
    display: flex;
    gap: 8px;

    /* .empty-content-cell sets font-weight: 600 on the whole cell; a button inheriting it reads
       heavier than every other Outline button in the app. */
    font-weight: 400;
}
/* /Components/Shared/GridLoadingState.razor.rz.scp.css */
/*
    Centred spinner + label, sized so the loading row does not read as a 21px sliver.

    24px here + the 24px app.css puts on `.loading-content-cell` = 48px, deliberately the same
    figure as the empty state's, so switching from "loading" to "empty" does not make the table
    jump.
*/
.grid-loading[b-4i5xmgw6sx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    /* The library's .loading-content-cell is `text-align: center; user-select: none` and nothing
       else — it supplies no height at all, which is why the un-padded default rendered as a
       one-line sliver. */
    padding: 24px 0;
    width: 100%;
}

.grid-loading-text[b-4i5xmgw6sx] {
    /* Normal weight on purpose: .loading-content-cell sets font-weight 600 on the cell, which
       makes a bold "Yükleniyor…" shout louder than the data it is standing in for. */
    font-weight: 400;
    color: var(--colorNeutralForeground2);
}
/* /Components/Shared/GridPager.razor.rz.scp.css */
/* GridPager — scoped layout for the shared grid pagination row.

   EVERY selector below matches a plain <div> authored literally in GridPager.razor. That is not
   a style preference, it is the only thing that works: Blazor stamps its b-xxxxxxxxxx scope
   attribute onto plain HTML elements written in this file and never onto a child component or
   onto anything a child component rendered, so a class handed to FluentSelect/FluentPaginator
   via Class= would reach the DOM WITHOUT the attribute and the rule would compile to
   `.that-class[b-…]` and match nothing. (DESIGN-GUIDELINES.md, "Reason 2 — the scope attribute is
   never on the Fluent element".)

   Tokens are v5 names only. v4's `--neutral-*` family was never ported to V5, so those names
   resolve to nothing and fail SILENTLY — a declaration that is invalid at computed-value time
   simply disappears with no error anywhere. */

.grid-pager[b-a4ff9vxgcy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacingHorizontalL, 16px);
    /* The whole point of the wrap: at narrow widths the right-hand group drops onto its own
       line under the summary instead of pushing the row past its container and giving the
       content area a horizontal scrollbar. */
    flex-wrap: wrap;
    width: 100%;
    padding-top: var(--spacingVerticalM, 12px);
}

.grid-pager-summary[b-a4ff9vxgcy] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200, 12px);
    line-height: var(--lineHeightBase200, 16px);
    /* Rendered even when ShowSummary is false (empty), so `space-between` keeps the controls
       pinned right instead of collapsing them to the left edge. */
    white-space: nowrap;
}

.grid-pager-controls[b-a4ff9vxgcy] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalL, 16px);
    /* Second-level wrap: on a phone the page-size group and the paginator separate onto two
       lines rather than overflowing. */
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Lets this group actually shrink inside the outer flex row — a flex item's default
       min-width:auto would otherwise hold it at its content width and force the overflow this
       whole file exists to avoid. */
    min-width: 0;
}

.grid-pager-page-size[b-a4ff9vxgcy] {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS, 8px);
    color: var(--colorNeutralForeground3);
    /* Inherited into FluentText's rendered element, which is what keeps "Sayfa başına" on one
       line when the row is squeezed. */
    white-space: nowrap;
}

/* rc.4's shipped bundle gives the paginator `.fluent-paginator { margin-top: .5rem }`, which is
   right when it is the only thing under a grid and wrong here: inside `align-items: center` an
   8px top margin with no bottom margin pushes the arrows ~4px below the page-size selector they
   sit beside. ::deep is required — the paginator's own <div> is rendered by the library, so it
   carries no scope attribute; ::deep moves the attribute onto the ancestor `.grid-pager`, which
   IS authored here. That also settles the cascade: `.grid-pager[b-…] .fluent-paginator` is
   (0,3,0) against the library's (0,1,0), so it wins outright and does not depend on source
   order — which matters, because App.razor links AntikCocuk.V5.styles.css (whose first line
   @imports the package bundle) AFTER app.css, i.e. a TIE with the library is a LOSS in this app. */
.grid-pager[b-a4ff9vxgcy]  .fluent-paginator {
    margin-top: 0;
}
/* /Components/Shared/PageCard.razor.rz.scp.css */
/* PageCard is deliberately FLAT: no border, no background, no shadow, no fixed height.
   Mercury's v5 PageCard (Mercury.Portal.Web.V5/Components/Shared/PageCard.razor) is the
   reference — a bare vertical stack — and this is the same shape one step tighter (12px
   instead of Mercury's 16px).

   Why flat rather than "restore the chrome":
   The chrome this file used to declare was already invisible. `--neutral-stroke-color`,
   `--theme-content-bg`, `--theme-card-header-bg`, `--theme-card-body-bg` and
   `--theme-card-footer-bg` are v4 app-local variables (v4 wwwroot/app.css) that V5 never
   ported, so the borders were invalid-at-computed-value-time and the backgrounds fell back
   to transparent. Only the literal `box-shadow: 0 4px 12px rgba(0,0,0,0.15)` still rendered
   — a drop shadow around a transparent, borderless rectangle, on all 50 pages. Reviving the
   chrome means porting v4's whole theme-variable block, which puts borders and card
   backgrounds on every page at once; that is the deferred whole-app theming decision
   (issue #282), not this change.

   Why no fixed height:
   The old rule was `height: calc(100vh - var(--header-height, 60px) - 40px)`, and
   `--header-height` is defined only in v4's app.css — V5 never ported it, so the fallback
   60px always won. MEASURED at 1440x900: the card came out 800px + 16px of margin inside an
   840px content row, i.e. 24px taller than its container, giving every page a permanent
   second scrollbar stacked on top of .card-body's own. Scrolling belongs to
   `.fluent-layout-item[area=content]`, which rc.4 already gives `overflow-y: auto`
   (FluentLayoutItem.razor.css:46-49). */

.page-card[b-2f3jk3kt48] {
    display: flex;
    flex-direction: column;
    gap: 12px;              /* one step tighter than Mercury's 16px */
    width: 100%;
    min-width: 0;           /* lets over-wide DataGrids shrink instead of widening the column */
}

/* BOTH font-size and line-height are pinned, and the second one is not cosmetic:
   default-fuib.css:33-36 sets `h1 { font-size: var(--fontSizeHero900); line-height:
   var(--lineHeightHero900) }`. The old `.card-title` pinned only font-size, so an 18px
   title sat in a MEASURED 52px line box — 28px of pure waste on every page. */
.page-card-title[b-2f3jk3kt48] {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;

    /* Keeps the title on screen when an over-wide grid makes the CONTENT COLUMN scroll
       horizontally (MEASURED at 375px on /okullar: 76px of overflow, and the <h1>'s `left`
       went 24 -> -52 as the user scrolled). This is new-since-the-flattening: the title used
       to be inside .card-header, a sibling of the scrolling .card-body, so it never moved.
       Now it lives inside the scroller with everything else.

       `align-self: flex-start` is REQUIRED, not cosmetic. .page-card is a flex column, so a
       stretched <h1> is exactly as wide as its containing block and sticky has zero slack to
       move it into — the rule would compute correctly and do nothing (the same quiet failure
       mode diary 0041's native-scroll experiment hit). Shrinking the h1 to its content width
       gives sticky the room it needs. Visually identical for a left-aligned heading with no
       background or border.

       No z-index or background is needed: the h1 is the first flex item, so it never overlaps
       the grid vertically — it only slides horizontally in its own row.
       The 76px overflow itself is pre-existing and out of scope; this fixes the symptom the
       PageCard change introduced. */
    position: sticky;
    left: 0;
    align-self: flex-start;
}

.page-card-actions[b-2f3jk3kt48] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
/* /Components/Shared/ProfilePictureUpload.razor.rz.scp.css */
.profile-picture-upload[b-y6fgc2e3kd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.picture-container[b-y6fgc2e3kd] {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: var(--avatar-radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--colorNeutralStroke1);
    transition: border-color 0.2s;
}

.picture-container:hover[b-y6fgc2e3kd] {
    border-color: var(--colorBrandBackground);
}

.picture-img[b-y6fgc2e3kd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.picture-placeholder[b-y6fgc2e3kd] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colorNeutralBackground3);
}

.picture-overlay[b-y6fgc2e3kd] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.picture-container:hover .picture-overlay[b-y6fgc2e3kd] {
    opacity: 1;
}

.picture-actions[b-y6fgc2e3kd] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.picture-error[b-y6fgc2e3kd] {
    color: var(--error);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}