@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;
    /* The sign-in backdrop, as on /hesap/giris (#418). */
    background: linear-gradient(135deg, var(--colorNeutralBackground3) 0%, color-mix(in srgb, var(--colorBrandBackground) 20%, var(--colorNeutralBackground3)) 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. The track is FluentProgressBar's (rc.5 lib.module.js:
   `background-color: var(--colorNeutralBackground6)`); each level's fill is a palette hue's solid
   mark (BorderActive), red through green, which stays saturated in both themes (#418). */
.password-strength[b-x5d72afvu3] {
    margin-top: 4px;
}

.password-strength-bar[b-x5d72afvu3] {
    height: 4px;
    background-color: var(--colorNeutralBackground6);
    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: var(--colorPaletteRedBorderActive);
}

.password-strength-2[b-x5d72afvu3] {
    background-color: var(--colorPaletteDarkOrangeBorderActive);
}

.password-strength-3[b-x5d72afvu3] {
    background-color: var(--colorPaletteMarigoldBorderActive);
}

.password-strength-4[b-x5d72afvu3] {
    background-color: var(--colorPaletteLightGreenBorderActive);
}

.password-strength-5[b-x5d72afvu3] {
    background-color: var(--colorPaletteGreenBorderActive);
}
/* /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/Account/SignOutRequiredPage.razor.rz.scp.css */
/* Same card as /hesap/giris, and like it built from FluentUI tokens (#418, docs/design.md). This
   page is static SSR, but that does not keep the tokens away: blazor.web.js still starts on it and
   FluentUI's lib.module.js adopts its token sheet. MEASURED in headless Chromium on
   /hesap/oturum-kapat: after load `typeof Blazor.theme.setThemeMode` is 'function', and
   setThemeMode('dark') resolves --colorNeutralBackground1 to #292929. Before that sheet lands,
   app.css's pre-JS floor already resolves the card surface and its text. */
.signout-wrapper[b-v3jaoxgsc1] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    /* The sign-in backdrop, as on /hesap/giris. */
    background: linear-gradient(135deg, var(--colorNeutralBackground3) 0%, color-mix(in srgb, var(--colorBrandBackground) 20%, var(--colorNeutralBackground3)) 100%);
}

.signout-card[b-v3jaoxgsc1] {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    text-align: center;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--colorNeutralShadowAmbientLighter);
}

.signout-title[b-v3jaoxgsc1] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--colorNeutralForeground1);
}

.signout-body[b-v3jaoxgsc1] {
    margin: 0;
    color: var(--colorNeutralForeground2);
}

.signout-button[b-v3jaoxgsc1] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.signout-button:hover[b-v3jaoxgsc1] {
    background: var(--colorBrandBackgroundHover);
}
/* /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;
}

/* Four tinted cards (#418): each is a palette tint surface with that hue's foreground for the number —
   pale with a dark number in the light theme, deep with a light number in the dark one. Blue uses the
   brand tint, the only blue with a pale step. */
.hs-blue[b-orj7rji7zd] { background: var(--colorBrandBackground2); }
.hs-blue .hs-value[b-orj7rji7zd] { color: var(--colorBrandForeground2); }
.hs-orange[b-orj7rji7zd] { background: var(--colorPaletteDarkOrangeBackground1); }
.hs-orange .hs-value[b-orj7rji7zd] { color: var(--colorPaletteDarkOrangeForeground1); }
.hs-amber[b-orj7rji7zd] { background: var(--colorPaletteMarigoldBackground1); }
.hs-amber .hs-value[b-orj7rji7zd] { color: var(--colorPaletteMarigoldForeground2); }
.hs-rose[b-orj7rji7zd] { background: var(--colorPaletteRedBackground1); }
.hs-rose .hs-value[b-orj7rji7zd] { color: var(--colorPaletteRedForeground1); }

@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;
}

/* The count and the two status pills are FluentBadge's Tint recipe (#418): a status Background1
   surface, its Foreground1 text and its Border1 edge — drawn as an inset shadow so the pill keeps its
   size. The pale surface alone is too close to the panel's own background to read as a pill. */
.pp-count[b-yd1lg1njwo] {
    margin-left: auto;
    background: var(--colorStatusDangerBackground1);
    color: var(--colorStatusDangerForeground1);
    box-shadow: inset 0 0 0 1px var(--colorStatusDangerBorder1);
    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;
    /* FluentAvatar's colourful recipe: the hue's Background2 with its Foreground2. */
    background: var(--colorPaletteRedBackground2);
    color: var(--colorPaletteRedForeground2);
    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: var(--colorStatusWarningBackground1);
    color: var(--colorStatusWarningForeground1);
    box-shadow: inset 0 0 0 1px var(--colorStatusWarningBorder1);
}

.b-overdue[b-yd1lg1njwo] {
    background: var(--colorStatusDangerBackground1);
    color: var(--colorStatusDangerForeground1);
    box-shadow: inset 0 0 0 1px var(--colorStatusDangerBorder1);
}

.b-new[b-yd1lg1njwo] {
    background: var(--colorNeutralBackground4);
    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);
    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);
    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;
}

/* Chip colours per kind: the app's --antik-kind-* properties (wwwroot/app.css), shared with
   WeeklyCalendar. A tinted chip with its own contrasting text rather than the old solid fill with
   white text (#418): white on a saturated fill had no dark-theme equivalent, and on the amber fill it
   was never legible (about 2:1). */
.tl-chip.k-teach[b-dmxsqelmob] { background: var(--antik-kind-teach-tint); color: var(--antik-kind-teach-text); }
.tl-chip.k-gag[b-dmxsqelmob] { background: var(--antik-kind-review-tint); color: var(--antik-kind-review-text); }
.tl-chip.k-note[b-dmxsqelmob] { background: var(--antik-kind-note-tint); color: var(--antik-kind-note-text); }
.tl-chip.k-survey[b-dmxsqelmob] { background: var(--antik-kind-task-tint); color: var(--antik-kind-task-text); }
.tl-chip.k-prereg[b-dmxsqelmob] { background: var(--antik-kind-task-tint); color: var(--antik-kind-task-text); }
.tl-chip.k-approval[b-dmxsqelmob] { background: var(--antik-kind-review-tint); color: var(--antik-kind-review-text); }
.tl-chip.k-assign[b-dmxsqelmob] { background: var(--antik-kind-review-tint); color: var(--antik-kind-review-text); }
.tl-chip.k-task[b-dmxsqelmob] { background: var(--antik-kind-task-tint); color: var(--antik-kind-task-text); }

.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);
    border-radius: 4px;
    padding: 0 6px;
}

.tl-due.s-overdue[b-dmxsqelmob] {
    color: var(--colorStatusDangerForeground1);
    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);
}

.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);
}

/* The item's own surface one step darker, from the theme (#418). It was filter: brightness(0.97),
   which on a dark-theme item darkens something already near-black — no visible hover at all. */
.wc-item:hover[b-4ifss3llrg] {
    background: var(--colorNeutralBackground3Hover);
}

.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: var(--colorStatusSuccessForeground1);
}

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

.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. They are the app's --antik-kind-*-mark properties (wwwroot/app.css),
   the categorical palette shared with TaskList.razor.css's .tl-chip — FluentUI
   palette tokens, so the dots follow the theme (#418); the old hexes did not. 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: var(--antik-kind-teach-mark); }
.k-gag[b-4ifss3llrg]::before { background: var(--antik-kind-review-mark); }
.k-note[b-4ifss3llrg]::before { background: var(--antik-kind-note-mark); }
.k-survey[b-4ifss3llrg]::before { background: var(--antik-kind-task-mark); }
.k-prereg[b-4ifss3llrg]::before { background: var(--antik-kind-task-mark); }
.k-approval[b-4ifss3llrg]::before { background: var(--antik-kind-review-mark); }
.k-assign[b-4ifss3llrg]::before { background: var(--antik-kind-review-mark); }
.k-task[b-4ifss3llrg]::before { background: var(--antik-kind-task-mark); }

.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 in the light theme. No literal fallback (#418):
       a white one would be wrong in the dark theme, and app.css's pre-JS floor defines this token. */
    background: var(--colorNeutralBackground1);
    /* 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 — the shadow
       keeps v4's geometry with the theme's lightest ambient shadow colour (0.06 black in light,
       0.12 in dark, where a shadow has to be darker to show at all). */
    border-bottom: 1px solid var(--colorNeutralStroke2);
    box-shadow: 0 4px 12px var(--colorNeutralShadowAmbientLighter);
    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/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) and the @media
     (prefers-color-scheme: dark) block (v4 :449-482). Not needed rather than dead:
     every colour below is a FluentUI token, and the tokens themselves switch with
     the theme the user picks in the header (#418). (This note used to say V5 never
     sets data-theme — false: FluentUI sets it on <body> in the dark theme, see
     docs/design.md.)
   - 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;
    /* v4's brand-tinted glow, rgba(0,120,212,.15), as 15% of the theme's own brand colour. */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--colorBrandBackground) 15%, transparent);
}

.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;
    /* v4's 15% blue -> 15% cyan wash, from the theme's brand blue and light-teal tokens. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--colorBrandBackground) 15%, transparent) 0%,
        color-mix(in srgb, var(--colorPaletteLightTealBorderActive) 15%, transparent) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--colorBrandBackground) 15%, transparent);
}

.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;
}

/* The degraded-menu note (issue #408 §1.2). Rendered only when the gate resolution threw, in
   which case the rail is short of items and the user deserves to know why. Authored as a plain
   <div> in NavMenu.razor, so the b-xxxxx scope attribute really does land on it. */
.navmenu-degraded[b-cz7d3sakda] {
    padding: 12px 16px;
    color: var(--colorStatusDangerForeground1);
    font-size: 0.8125rem;
    line-height: 1.3;
}
/* /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;
}


/* Colours are FluentUI tokens (#418), so the dialog follows the light/dark theme. A <dialog>'s own
   UA colours come from color-scheme, so the text colour is set explicitly next to the background —
   a background and its foreground are always overridden together. */
#components-reconnect-modal[b-8fi7wd3b89] {
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--shadow28);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8fi7wd3b89 0.5s both;
}

/* A flat rule, NOT a nested `&[open]` inside the one above. A browser without CSS nesting
   (Safari before 16.5, Chrome/WebView before 112) drops the nested block, so the open dialog kept
   the `opacity: 0` above: an invisible modal that still makes the whole page inert — the "buttons
   do nothing until I reload" report. */
#components-reconnect-modal[open][b-8fi7wd3b89] {
    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 {
    /* theme-literal: fallback for browsers whose ::backdrop does not inherit custom properties (Chrome < 122, Safari < 17.4), where the token alone resolved to transparent */
    background-color: var(--colorBackgroundOverlay, 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: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-8fi7wd3b89] {
        background-color: var(--colorBrandBackgroundHover);
    }

    #components-reconnect-modal button:active[b-8fi7wd3b89] {
        background-color: var(--colorBrandBackgroundPressed);
    }

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

    .components-rejoining-animation div[b-8fi7wd3b89] {
        position: absolute;
        border: 3px solid var(--colorBrandStroke1);
        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/BepDeclaration/BepDeclarationBar.razor.rz.scp.css */
.decl-bar[b-ig06wdhzak] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    background: var(--colorNeutralBackground2);
}

.decl-bar-text[b-ig06wdhzak] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.decl-bar-title[b-ig06wdhzak] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.decl-bar-status[b-ig06wdhzak] {
    font-size: 0.875rem;
    color: var(--colorNeutralForeground3);
}

.decl-bar-actions[b-ig06wdhzak] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Pages/BepDeclaration/BepDeclarationExplanationDialog.razor.rz.scp.css */
.explanation-text[b-9at2v428bs] {
    white-space: pre-wrap;
    line-height: 1.5;
    color: var(--colorNeutralForeground1);
}
/* /Components/Pages/BepDeclaration/BepDeclarationForm.razor.rz.scp.css */
.decl-form[b-yhfbpnnp5p] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--colorNeutralForeground1);
}

.decl-title[b-yhfbpnnp5p] {
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
}

.decl-date[b-yhfbpnnp5p] {
    font-size: 0.95rem;
}

/* The table may be wider than a phone; it scrolls inside its own box, the page does not. */
.decl-table-wrap[b-yhfbpnnp5p] {
    overflow-x: auto;
}

.decl-table[b-yhfbpnnp5p] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
}

.decl-table th[b-yhfbpnnp5p],
.decl-table td[b-yhfbpnnp5p] {
    border: 1px solid var(--colorNeutralStroke1);
    padding: 0.4rem 0.5rem;
    vertical-align: top;
    font-size: 0.9rem;
}

.decl-table th[b-yhfbpnnp5p] {
    background: var(--colorNeutralBackground3);
    font-weight: 600;
    text-align: center;
}

.decl-no[b-yhfbpnnp5p] {
    width: 3rem;
    text-align: center;
}

.decl-item[b-yhfbpnnp5p] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.decl-item-code[b-yhfbpnnp5p] {
    font-weight: 600;
    color: var(--colorBrandForeground1);
    margin-right: 0.35rem;
}

.decl-signatures[b-yhfbpnnp5p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--colorNeutralStroke1);
}

.decl-signature[b-yhfbpnnp5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--colorNeutralStroke1);
    text-align: center;
}

.decl-signature:last-child[b-yhfbpnnp5p] {
    border-right: none;
}

.decl-signature-title[b-yhfbpnnp5p] {
    font-weight: 600;
}

.decl-signature-ok[b-yhfbpnnp5p] {
    color: var(--colorStatusSuccessForeground1);
    font-weight: 600;
    font-size: 0.85rem;
}

.decl-signature-muted[b-yhfbpnnp5p] {
    color: var(--colorNeutralForeground3);
    font-size: 0.85rem;
}
/* /Components/Pages/BepDeclaration/BepDeclarationPage.razor.rz.scp.css */
.decl-page[b-7pw92smv78] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.decl-status[b-7pw92smv78] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.decl-status-hint[b-7pw92smv78] {
    color: var(--colorNeutralForeground3);
    font-size: 0.9rem;
}

.decl-family[b-7pw92smv78] {
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.decl-family-title[b-7pw92smv78] {
    font-weight: 600;
}

.decl-family-row[b-7pw92smv78] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.decl-actions[b-7pw92smv78] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Components/Pages/BepDeclaration/ParentBepDeclarationPage.razor.rz.scp.css */
.parent-decl[b-5lezy7gblb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.parent-decl-actions[b-5lezy7gblb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /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;
}

/* Starting height of every text area on this page (2026-10-17). They take AutoResize, so a long
   entry grows the box instead of hiding behind a scrollbar; this gives an empty one room for six
   lines. ::deep because <fluent-textarea> is FluentTextArea's markup, not this page's, and
   ::part(control) because the <textarea> itself sits in its shadow root — a min-height on the
   host leaves the inner control at one line (MEASURED: 38px). em, not lh: lh needs Safari 16.4. */
.bop-field[b-dq9cffxkpg]  fluent-textarea::part(control) {
    min-height: 7.5em;
}

.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(--colorBrandStroke1);
    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);
}

/* "Ön Tanımlı Program Olarak Ekle" (Admin / Developer), above the form's title. */
.bop-predefined-capture[b-dq9cffxkpg] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}
/* /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/BepQuickPlanDialog.razor.rz.scp.css */
.plan-root[b-93uav5spfq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 420px;
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 4px;
}

.plan-heading[b-93uav5spfq] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--colorNeutralForeground3);
    margin: 4px 0;
}

.plan-module[b-93uav5spfq] {
    display: flex;
    flex-direction: column;
}

.plan-level[b-93uav5spfq] {
    display: flex;
    flex-direction: column;
    margin: 2px 0 6px 28px;
    padding-left: 12px;
    border-left: 2px solid var(--colorNeutralStroke2);
}

.plan-empty[b-93uav5spfq] {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colorNeutralForeground3);
}

@media (max-width: 600px) {
    .plan-root[b-93uav5spfq] {
        min-width: 0;
    }
}
/* /Components/Pages/Dialogs/BepShortTermGoalDialog.razor.rz.scp.css */
/* Shown only when the search text matches nothing. Without it the select silently
   collapses to just "Seçiniz" and reads as a broken control rather than an empty result. */
.stg-search-empty[b-s9x707fsax] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
    margin-top: -4px;
}

/* Says which ön tanımlı row filled the fields below. */
.stg-prefill-note[b-s9x707fsax] {
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}
/* /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/ParentListDialog.razor.rz.scp.css */
/* The WhatsApp / e-posta links in the parent list. They are real anchors rather than
   FluentButtons (see the comments at their call sites, #408 §3.7), so the icon-button
   affordance a FluentButton gave for free is rebuilt here — nothing more than that. */
.parent-contact-link[b-t0moevfctx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--borderRadiusMedium);
    color: var(--colorNeutralForeground1);
    text-decoration: none;
}

.parent-contact-link:hover[b-t0moevfctx] {
    background-color: var(--colorNeutralBackground1Hover);
}

.parent-contact-link:focus-visible[b-t0moevfctx] {
    outline: 2px solid var(--colorStrokeFocus2);
    outline-offset: 1px;
}
/* /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;
    /* #363 — this one declaration is what makes these pickers selectable with a mouse.
       rc.4's dropdown clickHandler reads e.target and tests it with
       `tagName.toLowerCase().endsWith('-option')`, with NO closest() fallback:

         clickHandler(e){ … let o=e.target; … if(Yo(o)){ … this.selectOption(…) } }

       A plain option's nearest element to a click IS the <fluent-option>, which is why
       every other picker in the app works. This template puts divs/spans/img inside the
       option, so e.target was one of those, the test failed, selectOption was never
       reached, and NOTHING happened — no exception, no change event, an empty console.
       Making the row hit-transparent hands the click back to <fluent-option> itself.
       Nothing inside is interactive, so one rule covers avatar, name and role.
       Keyboard selection never had the bug: keydownHandler goes by activeIndex. */
    pointer-events: none;
}

.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/Dialogs/PreRegistrationFormsDialog.razor.rz.scp.css */
.forms-list[b-5lwoeiwvat] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forms-row[b-5lwoeiwvat] {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
}

.forms-row-selected[b-5lwoeiwvat] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorNeutralBackground2);
}

.forms-row-text[b-5lwoeiwvat] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.forms-row-name[b-5lwoeiwvat] {
    font-weight: 600;
}

.forms-row-parent[b-5lwoeiwvat] {
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
}

.forms-answers[b-5lwoeiwvat] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.forms-section[b-5lwoeiwvat] {
    margin-top: 8px;
    font-weight: 700;
    color: var(--colorNeutralForeground2);
}

.forms-question-text[b-5lwoeiwvat] {
    font-weight: 500;
}

.forms-answer[b-5lwoeiwvat] {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    white-space: pre-wrap;
}

.forms-answer-missing[b-5lwoeiwvat] {
    color: var(--colorNeutralForeground3);
    font-style: italic;
}
/* /Components/Pages/Dialogs/PreRegistrationNoteDialog.razor.rz.scp.css */
.note-required[b-lk9ac234sf] {
    color: var(--colorPaletteRedForeground1);
    font-size: 0.875rem;
}
/* /Components/Pages/Dialogs/StudentFormsSendDialog.razor.rz.scp.css */
.send-grid[b-0b8hpvepb4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 600px) {
    .send-grid[b-0b8hpvepb4] {
        grid-template-columns: 1fr;
    }
}

.pick-title[b-0b8hpvepb4] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: var(--colorNeutralForeground1);
}

.pick-list[b-0b8hpvepb4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.375rem;
}

.pick-empty[b-0b8hpvepb4] {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colorNeutralForeground3);
}

.send-hint[b-0b8hpvepb4] {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
}
/* /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.
   - #418 (docs/design.md) tokenized the accents that pass left as literal hex:
     .pill-active is the success status pill recipe, the "today" line is the
     palette's Pink mark, the scrollbar thumb is a control stroke, and the
     upcoming marker is the brand tint with its own text token.
   - The done/missed markers and their legend dots are the STATUS Background3
     fills, not --success/--error. Those two aliases are text colours: MEASURED
     on rc.5 the way docs/design.md's token table was (getComputedStyle on
     <html> after the library's lifecycle hooks, dark emulated OS), --success is
     #54b054 and --error #e37d80 in the dark theme, so the white percentage on
     a marker read at about 2.7:1 there. Background3 is the same saturated
     fill in both themes (#107c10, #c50f1f, 5.4:1 and 6.1:1 under white), and
     its text is --colorNeutralForegroundOnBrand. */

.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(--colorStatusSuccessBackground3);
}

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

.dot-upcoming[b-js7t1xvf5q] {
    background: var(--colorBrandBackground2);
    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: var(--colorNeutralForegroundOnBrand);
    font-size: 9px;
    font-weight: 700;
}

.today-legend[b-js7t1xvf5q] {
    display: inline-block;
    width: 0.85rem;
    border-top: 2px solid var(--colorPalettePinkBorderActive);
    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: var(--colorStatusSuccessBackground1);
    color: var(--colorStatusSuccessForeground1);
    box-shadow: inset 0 0 0 1px var(--colorStatusSuccessBorder1);
}

/* ── 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: var(--colorNeutralStroke1);
    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(--colorStatusSuccessBackground3);
    color: var(--colorNeutralForegroundOnBrand);
}

.m-missed[b-js7t1xvf5q] {
    background: var(--colorStatusDangerBackground3);
    color: var(--colorNeutralForegroundOnBrand);
}

.m-upcoming[b-js7t1xvf5q] {
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    border: 2px solid var(--info);
}

.relbadge[b-js7t1xvf5q] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    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: var(--colorPalettePinkBorderActive);
    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;
    }
}

/* The urgent strip is the danger status recipe (#418): a tinted surface, its edge and its text. */
.urgent-strip[b-bt9zkwhyg0] {
    background: var(--colorStatusDangerBackground1);
    border: 1px solid var(--colorStatusDangerBorder1);
    border-radius: 12px;
    padding: 16px;
}

.us-head[b-bt9zkwhyg0] {
    font-weight: 600;
    color: var(--colorStatusDangerForeground1);
    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 var(--colorStatusDangerBorder1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}

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

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

.us-item-sub[b-bt9zkwhyg0] {
    color: var(--colorStatusDangerForeground1);
    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: var(--shadow4);
    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;
    /* Brand TEXT, not the brand fill: --colorBrandBackground is #115ea3 on the dark theme's
       #292929 surface, about 2.2:1. The same swap applies to the other brand-coloured text and
       hover borders below; in the light theme both tokens are #0f6cbd, so nothing moves there. */
    color: var(--colorBrandForeground1);
}

.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(--colorBrandStroke1);
    box-shadow: 0 3px 10px var(--colorNeutralShadowAmbient);
}

/* ---- 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(--colorBrandStroke1);
    box-shadow: 0 3px 10px var(--colorNeutralShadowAmbient);
}

.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: var(--colorNeutralForegroundOnBrand);
    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(--colorBrandForeground1);
    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(--colorBrandStroke1);
}

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

.pending-item-sub[b-bt9zkwhyg0] {
    color: var(--colorBrandForeground1);
    font-size: 0.76rem;
    margin-top: 2px;
}
/* /Components/Pages/MySchoolPage.razor.rz.scp.css */
/* /okulum. Every colour is a Fluent token, so the page follows the OS theme the library applies
   (DESIGN-GUIDELINES.md, "THE LIBRARY SETS data-theme FROM THE OS"). Numbers and labels wear text
   tokens; colour lives only on the decorative icon chips and the role bars. Every rule targets a
   plain element authored in MySchoolPage.razor — a Class= on a Fluent component would never carry
   this file's scope attribute. Nothing here is clickable except the real links and buttons, so
   there is no :hover anywhere. */

/* ── School header ─────────────────────────────────────────────────────────────── */

.school-header[b-g47xoxz36c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.school-identity[b-g47xoxz36c] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.school-logo[b-g47xoxz36c] {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: var(--avatar-radius);
    border: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.school-logo-empty[b-g47xoxz36c] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground3);
}

.school-title[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Full school names are long ("ÖZEL … EĞİTİM VE REHABİLİTASYON MERKEZİ"): wrap, never truncate. */
.school-contact[b-g47xoxz36c] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--colorNeutralForeground2);
}

.school-contact span[b-g47xoxz36c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.school-contact .school-address[b-g47xoxz36c] {
    flex-basis: 100%;
    color: var(--colorNeutralForeground3);
}

.panel-subtitle[b-g47xoxz36c] {
    margin: 24px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.school-name[b-g47xoxz36c] {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    overflow-wrap: anywhere;
}

.quick-links[b-g47xoxz36c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Summary tiles ─────────────────────────────────────────────────────────────── */

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

.tile[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    background: var(--colorNeutralBackground1);
}

.tile-head[b-g47xoxz36c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tile-icon[b-g47xoxz36c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
}

.tile-icon-staff[b-g47xoxz36c] {
    background: var(--colorPaletteBlueBackground2);
    color: var(--colorPaletteBlueForeground2);
}

.tile-icon-students[b-g47xoxz36c] {
    background: var(--colorPaletteTealBackground2);
    color: var(--colorPaletteTealForeground2);
}

.tile-icon-bop[b-g47xoxz36c] {
    background: var(--colorPaletteMarigoldBackground2);
    color: var(--colorPaletteMarigoldForeground2);
}

.tile-icon-sms[b-g47xoxz36c] {
    background: var(--colorPalettePurpleBackground2);
    color: var(--colorPalettePurpleForeground2);
}

/* Same label treatment as the home page's stat cards (HomeStatsCards.razor.css .hs-label). */
.tile-label[b-g47xoxz36c] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3);
}

.tile-figures[b-g47xoxz36c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 24px;
}

.figure[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.figure-value[b-g47xoxz36c] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--colorNeutralForeground1);
}

.figure-secondary .figure-value[b-g47xoxz36c] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
}

.figure-caption[b-g47xoxz36c],
.tile-hint[b-g47xoxz36c] {
    font-size: 0.74rem;
    color: var(--colorNeutralForeground3);
}

/* ── Detail panels ─────────────────────────────────────────────────────────────── */

.detail-columns[b-g47xoxz36c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.panel[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    background: var(--colorNeutralBackground1);
    min-width: 0;
}

.panel-title[b-g47xoxz36c] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.panel-empty[b-g47xoxz36c],
.panel-note[b-g47xoxz36c] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--colorNeutralForeground3);
}

.role-list[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.role-row[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.role-line[b-g47xoxz36c] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
}

.role-name[b-g47xoxz36c] {
    color: var(--colorNeutralForeground1);
}

.role-count[b-g47xoxz36c] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--colorNeutralForeground1);
}

.role-track[b-g47xoxz36c] {
    height: 6px;
    border-radius: 3px;
    background: var(--colorNeutralBackground4);
    overflow: hidden;
}

.role-fill[b-g47xoxz36c] {
    height: 100%;
    border-radius: 3px;
    background: var(--colorBrandBackground);
}

.logo-editor[b-g47xoxz36c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.field-hint[b-g47xoxz36c] {
    font-size: 0.75rem;
    color: var(--colorNeutralForeground3);
}

/* A wrapper rather than a Style= on the summary: FluentValidationSummary writes its own style
   attribute (the error colour) and a passed Style= replaces it (diary 0037/0038). */
.validation-summary[b-g47xoxz36c] {
    margin-bottom: 8px;
}

.form-actions[b-g47xoxz36c] {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}

/* ── Narrow screens ────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .overview-tiles[b-g47xoxz36c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 768px is the app's breakpoint (PAGE-PATTERNS.md §2). */
@media (max-width: 768px) {
    .detail-columns[b-g47xoxz36c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel[b-g47xoxz36c] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .overview-tiles[b-g47xoxz36c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .school-logo[b-g47xoxz36c] {
        width: 56px;
        height: 56px;
    }

    .quick-links[b-g47xoxz36c] {
        width: 100%;
    }
}
/* /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: var(--colorNeutralForeground2);
    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: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke3);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px var(--colorNeutralShadowAmbientLighter);
}

/* 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. Both halves are tokens now (#418): the surface's own Hover step and the next stroke step. */
.notification-card.clickable:hover[b-mawfcorwdr] {
    background: var(--colorNeutralBackground1Hover);
    border-color: var(--colorNeutralStroke2);
}

/* Unread Styling. The wash is the pale brand tint mixed into the card surface, so it stays a faint
   blue on Açık's white and on Koyu's dark card alike (#418). */
.notification-card.unread[b-mawfcorwdr] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--colorBrandBackground2) 40%, var(--colorNeutralBackground1)) 0%, var(--colorNeutralBackground1) 100%);
    border-color: color-mix(in srgb, var(--colorBrandStroke2) 50%, var(--colorNeutralBackground1));
}

.notification-card.unread[b-mawfcorwdr]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--colorBrandForeground1) 0%, var(--colorBrandForeground2) 100%);
    /* Brand Blue Gradient */
    box-shadow: 0 0 8px color-mix(in srgb, var(--colorBrandForeground1) 30%, transparent);
}

/* The unread variant of the hover: one step deeper than `.unread`'s own gradient, rather than
   the flat hover surface, so the blue wash does not vanish for as long as the pointer is on it.
   The stronger brand 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, color-mix(in srgb, var(--colorBrandBackground2) 75%, var(--colorNeutralBackground1)) 0%, color-mix(in srgb, var(--colorBrandBackground2) 40%, var(--colorNeutralBackground1)) 100%);
    border-color: var(--colorBrandStroke2);
}

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

.notification-card.priority-high[b-mawfcorwdr]::before {
    background: var(--colorStatusWarningBorderActive);
    /* 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, var(--colorNeutralBackground2) 0%, var(--colorNeutralBackground3) 100%);
    color: var(--colorNeutralForeground2);
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px var(--colorNeutralShadowAmbientLighter);
}

/* `.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, var(--colorBrandBackground2) 0%, var(--colorBrandBackground2Hover) 100%);
    color: var(--colorBrandForeground2);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--colorBrandForeground1) 15%, transparent);
}

.notification-card.priority-urgent .card-icon-wrapper[b-mawfcorwdr] {
    background: linear-gradient(135deg, var(--colorStatusDangerBackground1) 0%, color-mix(in srgb, var(--colorStatusDangerBackground2) 50%, var(--colorStatusDangerBackground1)) 100%);
    color: var(--colorStatusDangerForeground1);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--colorStatusDangerForeground1) 20%, transparent);
    animation: urgentPulse-b-mawfcorwdr 2s infinite;
}

@keyframes urgentPulse-b-mawfcorwdr {
    0%, 100% {
        box-shadow: 0 2px 8px color-mix(in srgb, var(--colorStatusDangerForeground1) 20%, transparent);
    }
    50% {
        box-shadow: 0 4px 16px color-mix(in srgb, var(--colorStatusDangerForeground1) 40%, transparent);
    }
}

/* 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, var(--colorNeutralBackground2) 0%, var(--colorNeutralBackground3) 100%);
    color: var(--colorNeutralForeground3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--colorNeutralStroke2);
    transition: all 0.2s ease;
}

.notification-card.unread .notification-type[b-mawfcorwdr] {
    background: linear-gradient(135deg, var(--colorBrandBackground2) 0%, var(--colorBrandBackground2Hover) 100%);
    color: var(--colorBrandForeground2);
    border-color: var(--colorBrandStroke2);
}

.notification-date[b-mawfcorwdr] {
    font-size: 12px;
    color: var(--colorNeutralForeground4);
}

.card-message[b-mawfcorwdr] {
    font-size: 15px;
    color: var(--colorNeutralForeground2);
    line-height: 1.5;
}

.notification-card.unread .card-message[b-mawfcorwdr] {
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

/* 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 var(--colorBrandStroke1);
    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: var(--colorStatusDangerForeground1);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, var(--colorStatusDangerBackground1) 0%, color-mix(in srgb, var(--colorStatusDangerBackground2) 50%, var(--colorStatusDangerBackground1)) 100%);
    border-radius: 6px;
    border: 1px solid var(--colorStatusDangerBorder1);
    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: var(--colorNeutralForeground3);
}

.due-date.overdue[b-mawfcorwdr] {
    color: var(--colorStatusDangerForeground1);
}

/* 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, var(--colorNeutralBackground2) 0%, var(--colorNeutralBackground1) 100%);
    border-radius: 16px;
    border: 2px dashed var(--colorNeutralStroke2);
    text-align: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.notification-empty-state:hover[b-mawfcorwdr] {
    border-color: var(--colorNeutralStroke1);
    background: linear-gradient(135deg, var(--colorNeutralBackground3) 0%, var(--colorNeutralBackground2) 100%);
}

.empty-state-text[b-mawfcorwdr] {
    font-size: 16px;
    color: var(--colorNeutralForeground3);
    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 var(--colorNeutralStroke3);
        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: var(--colorNeutralBackground3);
    z-index: 1;
}

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

/* Password strength indicator. The track is FluentProgressBar's (rc.5 lib.module.js:
   `background-color: var(--colorNeutralBackground6)`); each level's fill is a palette hue's solid
   mark (BorderActive), red through green, which stays saturated in both themes (#418). */
.password-strength[b-4kumxx4hql] {
    margin-top: 4px;
}

.password-strength-bar[b-4kumxx4hql] {
    height: 4px;
    background-color: var(--colorNeutralBackground6);
    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: var(--colorPaletteRedBorderActive);
}

.password-strength-2[b-4kumxx4hql] {
    background-color: var(--colorPaletteDarkOrangeBorderActive);
}

.password-strength-3[b-4kumxx4hql] {
    background-color: var(--colorPaletteMarigoldBorderActive);
}

.password-strength-4[b-4kumxx4hql] {
    background-color: var(--colorPaletteLightGreenBorderActive);
}

.password-strength-5[b-4kumxx4hql] {
    background-color: var(--colorPaletteGreenBorderActive);
}
/* /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);
}


/* ── Ön görüşme flow (2026-09 brief) ─────────────────────────────────────── */

.interview-header-row[b-kmk94tgllt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
}

.header-spacer[b-kmk94tgllt] {
    flex: 1;
}

/* "Sayfa Kullanımı": a native <details>, open on a new interview, folded on an existing one. */
.guide-card[b-kmk94tgllt] {
    background: var(--colorNeutralBackground3);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.guide-card summary[b-kmk94tgllt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.guide-text[b-kmk94tgllt] {
    margin-top: 0.75rem;
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 0.875rem;
    color: var(--colorNeutralForeground2);
}

.match-note[b-kmk94tgllt] {
    margin: -0.25rem 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--colorBrandForeground1);
}

.section-hint[b-kmk94tgllt] {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
}

.section-actions[b-kmk94tgllt],
.page-actions[b-kmk94tgllt] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.page-actions[b-kmk94tgllt] {
    margin-top: 1.5rem;
}

.pick-title[b-kmk94tgllt] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: var(--colorNeutralForeground1);
}

.pick-list[b-kmk94tgllt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.375rem;
}

.pick-empty[b-kmk94tgllt] {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--colorNeutralForeground3);
}

.sent-title[b-kmk94tgllt] {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.sent-list[b-kmk94tgllt] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.sent-row[b-kmk94tgllt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--colorNeutralBackground1);
    border-radius: 0.375rem;
}

.sent-name[b-kmk94tgllt] {
    font-weight: 500;
    flex: 1;
    min-width: 12rem;
}

.sent-parent[b-kmk94tgllt] {
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
}

/* Kimlik ve rapor bilgileri (StudentReportFields) under the student's own fields. */
.report-block[b-kmk94tgllt] {
    margin-top: 1rem;
}
/* /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);
}

/* ── "Sayfa Kullanımı" text for the ön görüşme page ─────────────────────────────────────── */

.guide-editor[b-np3n47z91r] {
    margin-top: 24px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--colorNeutralBackground3);
}

.guide-editor summary[b-np3n47z91r] {
    cursor: pointer;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.guide-editor-body[b-np3n47z91r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.guide-editor-actions[b-np3n47z91r] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Pages/PreRegistrationsPage.razor.rz.scp.css */
/*
    The Ön Görüşmeler queue (2026-09 rebuild; the card grid it replaced is in git history).
    `.queue-desktop` / `.queue-mobile` are plain <div>s authored in the .razor, so they carry the
    scope attribute and these rules match. Nothing here targets the grid's own table cells — those
    are FluentDataGrid's and never carry it.
*/

.queue-filter[b-21s6nhctuk] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.queue-actions[b-21s6nhctuk] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* The grid scrolls inside its own box on a narrow desktop, never the whole page. */
.queue-desktop[b-21s6nhctuk] {
    overflow-x: auto;
}

.queue-mobile[b-21s6nhctuk] {
    display: none;
}

/* 768px is the app's phone breakpoint — the same one /ogrenci and /okullar/calisanlar use. */
@media (max-width: 768px) {
    .queue-desktop[b-21s6nhctuk] {
        display: none;
    }

    .queue-mobile[b-21s6nhctuk] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

.queue-card[b-21s6nhctuk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
}

.queue-card-head[b-21s6nhctuk] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.queue-card-name[b-21s6nhctuk] {
    font-weight: 600;
}

.queue-card-status[b-21s6nhctuk],
.queue-card-line[b-21s6nhctuk] {
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
}

.queue-card-actions[b-21s6nhctuk] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/SchoolPage.razor.rz.scp.css */
.form-card[b-lrsi0tpech] {
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--colorNeutralShadowAmbient);
    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(--colorBrandForeground1);
    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);
    color: var(--colorNeutralForeground1);
    transition: border-color 0.15s;
}

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

.user-card-selected[b-lrsi0tpech] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorBrandBackground2);
}

.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: var(--colorBrandBackground2);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorBrandStroke1);
}

@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;
    }
}
/* /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)`.

   #418 (light/dark theme switch) converted the rest of v4's literals, which were a
   light-theme-only palette:
     amber locked/warn banners, zaman block  -> --colorPaletteMarigold* (Background1,
                                                Border1, Foreground2; the stripes are
                                                BorderActive at 8% via color-mix)
     window badge ok (blue)                  -> the brand tint: --colorBrandBackground2,
                                                --colorBrandForeground2, --colorBrandStroke2
     window badge error (red)                -> the status pill recipe: --colorStatusDanger*
   so every surface here follows the theme and needs no [data-theme="dark"] rule.

   Set oluşturma v2 added the gösterim şekli buttons, the approval strip and footer,
   and per-window period pickers; it removed the "Set Bilgisi" heading rules along
   with the heading itself. */

/* 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;
}

/* A one-line note that sits between a section header and its body. */
.set-editor-inset[b-mj7kqjcdxx] {
    margin: 0 18px 12px;
}

/* 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,
        color-mix(in srgb, var(--colorPaletteMarigoldBorderActive) 8%, transparent),
        color-mix(in srgb, var(--colorPaletteMarigoldBorderActive) 8%, transparent) 8px,
        transparent 8px,
        transparent 16px);
    border: 1px solid var(--colorPaletteMarigoldBorder1);
    border-radius: 6px;
    color: var(--colorPaletteMarigoldForeground2);
    font-size: 0.85rem;
    /* Horizontal margin keeps the banner aligned with the inset body. */
    margin: 0 18px 16px;
}

/* The approved-set banner sits above the first section, not inside one. */
.set-editor-banner-flush[b-mj7kqjcdxx] {
    margin: 0 0 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: var(--colorPaletteMarigoldForeground2);
    background: var(--colorPaletteMarigoldBackground1);
    border: 1px solid var(--colorPaletteMarigoldBorder1);
    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;
    }
}

/* Gösterim şekli: three toggle buttons in a row. */
.set-editor-display-modes[b-mj7kqjcdxx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Approval status strip, supervisor action bar and the footer button. */
.set-editor-approval[b-mj7kqjcdxx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.set-editor-approval-bar[b-mj7kqjcdxx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.set-editor-approval-footer[b-mj7kqjcdxx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 0;
    border-top: 1px solid var(--colorNeutralStroke2);
}

/* Zaman Kontrol block */
.set-editor-zaman-block[b-mj7kqjcdxx] {
    padding: 12px;
    background: color-mix(in srgb, var(--colorPaletteMarigoldBackground1) 40%, transparent);
    border: 1px solid var(--colorPaletteMarigoldBorder1);
    border-radius: 6px;
}

.set-editor-windows-header[b-mj7kqjcdxx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    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;
    /* Wraps since v2: a window row now also carries two period pickers, which no
       longer fit beside the times on one line at Lg=8. */
    flex-wrap: wrap;
    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-period[b-mj7kqjcdxx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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: var(--colorBrandBackground2);
    color: var(--colorBrandForeground2);
    border-color: var(--colorBrandStroke2);
}

.set-editor-window-badge-error[b-mj7kqjcdxx] {
    background: var(--colorStatusDangerBackground1);
    color: var(--colorStatusDangerForeground1);
    border-color: var(--colorStatusDangerBorder1);
}

/* 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-hand summary — a flat, read-only definition list (no card box and, since
   set oluşturma v2, no heading).
   Note: the column is pinned via position:sticky on a wrapper div in the
   .razor. Previously a sticky + overflow:hidden combo trapped wheel events
   once the column 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-body[b-mj7kqjcdxx] {
    margin: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 2px solid var(--colorBrandStroke1);
}

.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);
    overflow-wrap: anywhere;
}

/* Replikli's "S" (silikleştirme) button: a one-letter label, sized like the 32px icon
   buttons beside it instead of FluentButton's 96px text-button minimum. The class lands
   on the child component's <fluent-button>, hence ::deep. */
.set-editor-row-item[b-mj7kqjcdxx]  .set-editor-letter-button {
    min-width: 32px;
    max-width: 32px;
}
/* /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(--colorBrandForeground1);
    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).

   The green is the theme's success mark now, not v4's #10b981 (#418). It has to change with the
   theme the way the brand pair it replaces does: the checked thumb is --colorNeutralForegroundInverted,
   white in Açık and #242424 in Koyu (measured on rc.5), so the track is dark green in Açık and light
   green in Koyu. --colorStatusSuccessBorderActive is exactly that (#107c10 / #54b054; the thumb reads
   5.4:1 and 5.7:1 on it, where white on v4's #10b981 was 2.5:1). Hover and pressed lean toward the
   primary text colour, which is darker in Açık and lighter in Koyu — the direction the library's own
   CompoundBrand hover steps take in each theme. */
.permission-item[b-2ufwng2d95]  fluent-switch {
    --colorCompoundBrandBackground: var(--colorStatusSuccessBorderActive);
    --colorCompoundBrandBackgroundHover: color-mix(in srgb, var(--colorStatusSuccessBorderActive) 85%, var(--colorNeutralForeground1));
    --colorCompoundBrandBackgroundPressed: color-mix(in srgb, var(--colorStatusSuccessBorderActive) 70%, var(--colorNeutralForeground1));
    --colorCompoundBrandStroke: var(--colorStatusSuccessBorderActive);
}

/* Under a category whose switches are locked for this role (Veli × the student-record write
   rights, #408 §0.4): says why they cannot be turned on. */
.permission-locked-note[b-2ufwng2d95] {
    margin: 12px 0 0 0;
    font-size: 0.8rem;
    color: var(--colorNeutralForeground3);
}
/* /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.

   Colours (#418, docs/design.md): the v4 hex palette is now FluentUI tokens, so the page
   follows the Açık / Koyu theme and the `[data-theme="dark"] .student-name` override is gone.
   The pale-blue avatar placeholder and disability pills are the brand tint with its own text
   token; the mobile card is a neutral surface.
   ============================================ */

/* Desktop Grid Styles */
/* `.student-grid` / `.student-grid .fluent-data-grid-row` used to sit here and were DELETED in
   #408 §4.6 after being banner-marked "DEAD, KEPT" since diary 0030 — same shape as
   WorkersPage.razor.css. They could never match: `student-grid` is passed as Class= to
   <CocukDataGrid>, so the rendered `<table>` gets the class but not the b-xxxxxxxxxx scope
   attribute, while the compiler emitted `.student-grid[b-…]`. The Class= is still on the grid
   in StudentsPage.razor — harmless, and the hook to aim at if the chrome is ever wanted.

   If you ever bring it back, three things stay true:
     - wrap the grid in a page-authored `<div class="student-grid">` and write the row rules as
       `.student-grid ::deep .fluent-data-grid-row`; the `.desktop-view` FluentStack Class= does
       not qualify;
     - DO NOT revive the 180px row height — CocukDataGrid sets RowSize = DataGridRowSize.Large
       (58px, written inline by rc.4) and the two would fight;
     - DO NOT revive a row `:hover` in any form. /ogrenci rows are not clickable (actions live
       in the İşlemler cell), and CocukDataGrid.SetParametersAsync defaults ShowHover to
       `OnRowClick != null` precisely so nothing promises a click. */

/* 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: var(--colorBrandBackground2);
    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: var(--colorNeutralForeground1);
    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: var(--colorBrandForeground2);
    line-height: 1.2;
    font-weight: 500;
    padding: 2px 8px;
    background: var(--colorBrandBackground2);
    border-radius: 6px;
    display: inline-block;
    align-self: flex-start;
    margin-top: 2px;
}

/* ============================================
   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, var(--colorNeutralBackground1) 0%, var(--colorNeutralBackground2) 100%);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px var(--colorNeutralShadowAmbientLighter);
    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, color-mix(in srgb, var(--colorBrandBackground) 3%, transparent) 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 var(--colorNeutralStroke3);
}

.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: var(--colorNeutralForeground1);
}

.student-card-disability[b-7j5uak298c] {
    font-size: 13px;
    color: var(--colorBrandForeground2);
    font-weight: 600;
    padding: 4px 10px;
    background: var(--colorBrandBackground2);
    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: var(--colorNeutralForeground3);
}

.info-label[b-7j5uak298c] {
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.info-value[b-7j5uak298c] {
    color: var(--colorNeutralForeground2);
    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 var(--colorNeutralShadowAmbient);
}

.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.
   Colours (#418, docs/design.md): every colour is a FluentUI token, so the tab follows
   the Açık / Koyu theme with no dark-mode rules of its own. The 10
   `body[data-theme="dark"]` overrides this port carried (v4's `:global(...)` versions
   of them never parsed at all) are deleted. The old blue/green hex palette maps onto
   roles: dividers and outlines are neutral strokes, the long-term-goal card is a
   Background2 section holding Background1 program rows, the selected module is a
   solid brand fill with its on-brand text, and the program name keeps its green as
   the palette's Green foreground.

   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 var(--colorNeutralStroke2);
    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: var(--colorNeutralForeground1);
}

.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 brand fill, on-brand 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: var(--colorBrandBackground2);
}

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

.bep-module-item.selected[b-4f95fg7i74] {
    background: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand);
    font-weight: 600;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--colorBrandBackground) 30%, transparent);
}

.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 + Background2 section fill 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 var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground1);
}

.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 var(--colorNeutralStroke2);
}

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

.bep-card-header strong[b-4f95fg7i74] {
    color: var(--colorNeutralForeground1);
}

.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 Background1 row on the card's Background2, 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 var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
}

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

.bep-program-name[b-4f95fg7i74] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--colorPaletteGreenForeground2);
}


.bep-program-code[b-4f95fg7i74] {
    font-weight: 400;
    color: var(--colorNeutralForeground3);
    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: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.bep-detail-value[b-4f95fg7i74] {
    color: var(--colorNeutralForeground4);
}

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

.bep-empty-hint[b-4f95fg7i74] {
    text-align: center;
    padding: 1.5rem;
    color: var(--colorNeutralForeground4);
    font-size: 0.85rem;
}

/* ── 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 var(--colorNeutralStroke2);
        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;
}

/* Carries the underline and the bottom gap that used to be .section-title's own, so the
   rule still spans the full card once the title shares its row with a Düzenle button
   (#366). Mirrors .personnel-header above. */
.info-section-header[b-ocjidsd6cr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--colorBrandStroke1);
}

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

/* 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

    Text on those fills (#418): each fill takes its own text token, the pairs FluentBadge's
    filled recipes use. MEASURED on rc.5 by appending <fluent-badge appearance="filled"> and
    reading getComputedStyle, the same in light and dark: color="success" is
    GreenBackground3 with rgb(255, 255, 255); color="warning" is a yellow Background3 with
    rgb(36, 36, 36) = --colorNeutralForeground1Static. So brand and green take white
    (--colorNeutralForegroundOnBrand), and marigold takes --colorNeutralForeground1Static:
    the old #fff on #eaa300 was 2.2:1, #242424 on it is 7.2:1.
*/

.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(--colorBrandStroke1);
    outline-offset: 2px;
}

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

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

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

.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: var(--colorNeutralForegroundOnBrand);
    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 (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. That rule also flips
   `align-content` from the default `center` to `start`; put it back so the short
   cells stay centred against a two-line neighbour.
   rc.5 moved the tag from a `multiline-text` CLASS to a `multiline="true"` ATTRIBUTE
   (the shipped bundle's rule is now `.fluent-data-grid td[multiline="true"]`, and
   `multiline-text` no longer occurs in the package), so `td.multiline-text` matched
   nothing after the bump. Same specificity: (0,3,1) against the library's (0,2,1). */
.task-grid-wrap[b-qu6ooba11t]  td[multiline="true"] {
    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 ✓/✗/K answer colours carry meaning (doğru / yanlış / K), so they are palette
       and status tokens that keep that meaning in both themes (#418, docs/design.md).
       They replaced v4's literals #51cf66 / #ff6b6b / #fcc419 and the page's old
       [data-theme="dark"] overrides, which the tokens make redundant. Values below are
       light / dark, read from getComputedStyle on rc.5:
         ✓ doğru, saved dot   --colorPaletteLightGreenBorderActive  #13a10e / #5ec75a
         ✗ yanlış, error dot  --colorPaletteRedBorderActive         #d13438 / #e37d80
         K                    --colorPaletteMarigoldBorderActive    #eaa300 / #f2c661
       LightGreen, not Green, because it is the closest hue to v4's #51cf66.
       The glyph on the ✓ / ✗ fills is --colorNeutralForegroundInverted (#ffffff /
       #242424): these marks are dark in light and light in dark, exactly as the inverted
       surface is, so the glyph keeps its contrast in both. K keeps v4's near-black glyph
       on amber in both themes with --colorNeutralForeground1Static (#242424 / #242424).
       WCAG contrast of glyph on fill, from the values above: light ✓ 3.4:1, ✗ 4.9:1,
       K 7.2:1 (v4 had ✓ 2.0:1, ✗ 2.8:1); dark, read with getComputedStyle in headless
       Chromium, ✓ 7.2:1, ✗ 5.6:1, K 9.6:1.
*/

/* 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;
}

/* Set oluşturma v2-2 veri formu layout: the program name heads the card with the set's
   record date on the right, a label runs into its value, and two cells in one row are
   split by a rule, as on the printed form. */
.meta-cell + .meta-cell[b-6ztu9nvomp] {
    border-left: 1px solid var(--colorNeutralStroke2);
}

.meta-cell.meta-title[b-6ztu9nvomp] {
    font-weight: 600;
}

.meta-cell.meta-date[b-6ztu9nvomp] {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.meta-label[b-6ztu9nvomp] {
    font-weight: 600;
}

/* 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;
}

/* The previous finished session, above an empty grid (2026-10-17). */
.last-session[b-6ztu9nvomp] {
    padding: 6px 12px;
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-size: 12px;
    color: var(--colorNeutralForeground2);
}

.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: var(--colorNeutralForegroundInverted);
}

.click-legend .lg-ck.empty[b-6ztu9nvomp] {
    background: var(--colorNeutralBackground1);
}

.click-legend .lg-ck.v1[b-6ztu9nvomp] {
    background: var(--colorPaletteLightGreenBorderActive);
    border-color: var(--colorPaletteLightGreenBorderActive);
}

.click-legend .lg-ck.v0[b-6ztu9nvomp] {
    background: var(--colorPaletteRedBorderActive);
    border-color: var(--colorPaletteRedBorderActive);
}

/* 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: var(--colorNeutralForegroundInverted);
    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: var(--colorPaletteLightGreenBorderActive);
    border-color: var(--colorPaletteLightGreenBorderActive);
}

.cellbox.v-1 .ck[b-6ztu9nvomp]::after {
    content: "✓";
}

.cellbox.v-0 .ck[b-6ztu9nvomp] {
    background: var(--colorPaletteRedBorderActive);
    border-color: var(--colorPaletteRedBorderActive);
}

.cellbox.v-0 .ck[b-6ztu9nvomp]::after {
    content: "✗";
}

.cellbox.v-K .ck[b-6ztu9nvomp] {
    background: var(--colorPaletteMarigoldBorderActive);
    border-color: var(--colorPaletteMarigoldBorderActive);
    color: var(--colorNeutralForeground1Static);
}

.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);
}

/* Criterion not met (amber) / met (green): the same two hues as the K and ✓ marks, as a
   tinted surface with its saturated edge. */
.summary[b-6ztu9nvomp] {
    margin: 12px;
    padding: 10px 14px;
    background: var(--colorPaletteMarigoldBackground1);
    border: 1px solid var(--colorPaletteMarigoldBorder2);
    border-radius: 6px;
    font-size: 13px;
    color: var(--colorNeutralForeground1);
}

.summary.good[b-6ztu9nvomp] {
    background: var(--colorPaletteLightGreenBackground1);
    border-color: var(--colorPaletteLightGreenBorder2);
}

.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. Accepted / rejected are statuses, so they
   take the status tint recipe (Background1 + Foreground1): the same green / red
   families as the cell ✓/✗ marks, with text that meets contrast on its tint. */
.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: var(--colorPaletteMarigoldBackground1);
}

.gag-status.accepted[b-6ztu9nvomp] {
    color: var(--colorStatusSuccessForeground1);
    background: var(--colorStatusSuccessBackground1);
}

.gag-status.rejected[b-6ztu9nvomp] {
    color: var(--colorStatusDangerForeground1);
    background: var(--colorStatusDangerBackground1);
}

/* ── 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. The 1px halo is the card surface
   itself, so it separates the dot from the cell in both themes. */
.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 var(--colorNeutralBackground1);
}

.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: var(--colorPaletteLightGreenBorderActive);
}

.cell-indicator.s-error[b-6ztu9nvomp] {
    background: var(--colorPaletteRedBorderActive);
    /* 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; }
}

/* ── 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.

    #418: the `var(--error, #b00020)` fallbacks are gone (a literal fallback is a light
    colour in the dark theme), and the GAG chip is FluentBadge's filled-danger recipe,
    MEASURED on rc.5 by appending <fluent-badge appearance="filled" color="danger"> and
    reading getComputedStyle: background rgb(209, 52, 56) = --colorPaletteRedBackground3,
    text rgb(255, 255, 255), identical in light and dark. It used to be white on --error,
    which is #e37d80 in dark: 2.8:1.
*/

.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. This is the one kind of [data-theme="dark"] rule
   docs/design.md still allows (Rules, 4: swapping an image), so #418 keeps it. */
[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(--colorBrandStroke1);
}

.veri-formu-select:focus[b-73movpkz50] {
    outline: 2px solid var(--colorBrandStroke1);
    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);
}

/* Program name on the left, the "Süpervizör Onayı Bekleniyor" note on the right
   (set oluşturma v2-2). Wraps under the name on a narrow screen. */
.program-satir[b-73movpkz50] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
}

.onay-durumu[b-73movpkz50] {
    font-size: 13px;
    color: var(--colorStatusDangerForeground1);
}

.veri-formu-select:disabled[b-73movpkz50] {
    cursor: not-allowed;
    color: var(--colorNeutralForegroundDisabled);
    background-color: var(--colorNeutralBackgroundDisabled);
}

.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);
    margin: 0 0 6px;
}

.gag-chip[b-73movpkz50] {
    display: inline-block;
    background-color: var(--colorPaletteRedBackground3);
    color: var(--colorNeutralForegroundOnBrand);
    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 ────────────────────────────────────────────── */
/* Two actions since issue #387 (Veri Girişine Başla + Yazdır), so the bar needs
   a gap and has to wrap on a narrow viewport instead of squashing. */
.baslat-cubugu[b-73movpkz50] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* /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: var(--colorNeutralBackground3);
    z-index: 1;
}

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

/* Password strength indicator. The track is FluentProgressBar's (rc.5 lib.module.js:
   `background-color: var(--colorNeutralBackground6)`); each level's fill is a palette hue's solid
   mark (BorderActive), red through green, which stays saturated in both themes (#418). */
.password-strength[b-7s9wr27tyj] {
    margin-top: 4px;
}

.password-strength-bar[b-7s9wr27tyj] {
    height: 4px;
    background-color: var(--colorNeutralBackground6);
    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: var(--colorPaletteRedBorderActive);
}

.password-strength-2[b-7s9wr27tyj] {
    background-color: var(--colorPaletteDarkOrangeBorderActive);
}

.password-strength-3[b-7s9wr27tyj] {
    background-color: var(--colorPaletteMarigoldBorderActive);
}

.password-strength-4[b-7s9wr27tyj] {
    background-color: var(--colorPaletteLightGreenBorderActive);
}

.password-strength-5[b-7s9wr27tyj] {
    background-color: var(--colorPaletteGreenBorderActive);
}
/* /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 var(--colorNeutralShadowAmbient);
    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(--colorBrandForeground1);
    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] {
    /* The token FluentField's own required asterisk resolves to (measured on rc.5). */
    color: var(--colorPaletteRedForeground1);
}

.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);
    color: var(--colorNeutralForeground1);
    transition: border-color 0.15s;
}

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

/* The pale brand tint, not a 5% brand wash: on Koyu's near-black card a 5% wash is invisible. */
.user-card-selected[b-ixzkk4ia47] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorBrandBackground2);
}

.user-card-warning[b-ixzkk4ia47] {
    border-color: var(--colorStatusWarningBorderActive);
    opacity: 0.7;
}

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

.warning-text[b-ixzkk4ia47] {
    font-size: 0.8rem;
    color: var(--colorStatusWarningForeground1);
    font-weight: 500;
}

.selected-user-summary[b-ixzkk4ia47] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--colorBrandBackground2);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorBrandStroke1);
}

/* ============================================
   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;
}

/* (The `@media (prefers-color-scheme: dark)` shadow override is gone: --colorNeutralShadowAmbient
   is already deeper in Koyu, and the OS query was wrong whenever the user pinned a mode, #418.) */
/* /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.

   The role pills read `--role-ink`, not `--role-color` (#418): app.css's `.antik-role-color`
   derives it from the stored hex — the hex itself in Açık, lifted towards white in Koyu, where
   a dark stored hex such as #5c2d91 is unreadable. See docs/design.md § Rules 7.

   ⚠️ `--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.

     DELETED — `.user-grid` and `.user-grid .fluent-data-grid-row*` used to be kept here,
             dead, "flagged". #408 §4.6 removed them; see the note where they stood. */

/* View Toggle handled by inline styles in Razor file */

/* `.user-grid` / `.user-grid .fluent-data-grid-row` used to sit here and were DELETED in
   #408 §4.6 after being banner-marked "DEAD, KEPT" since diary 0030. They could never match:
   `user-grid` is passed as Class= to <CocukDataGrid>, so rc.4 renders
   `<table class="fluent-data-grid user-grid">` with NO b-xxxxxxxxxx scope attribute, while the
   scoped-CSS compiler emitted `.user-grid[b-4k5fbiccbd]` (re-confirmed in
   obj/Debug/net10.0/scopedcss/Components/Pages/WorkersPage.razor.rz.scp.css before deleting).
   The Class= is still on the grid in WorkersPage.razor — harmless, and the hook to aim at if
   the chrome is ever wanted.

   If you ever bring it back, three things stay true:
     - wrap the grid in a page-authored `<div class="user-grid">` and write the row rules as
       `.user-grid ::deep .fluent-data-grid-row`; a FluentStack Class= does not qualify;
     - DO NOT revive the 160px row height — CocukDataGrid sets RowSize = DataGridRowSize.Large
       (58px, written inline by rc.4) and the two would fight;
     - DO NOT revive a row `:hover` in any form. /okullar/calisanlar rows are not clickable
       (actions live in the İşlemler cell), and CocukDataGrid.SetParametersAsync now defaults
       ShowHover to `OnRowClick != null` precisely so nothing promises a click. */

/* 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: var(--colorNeutralForeground1);
    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-ink);
    line-height: 1.2;
    font-weight: 500;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--role-ink) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-ink) 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);
}

/* gh#343's "Kayıt Durumu" badge. Two deviations from the base .status-badge, both
   because this variant carries a SENTENCE, not a one-word label:
   - text-transform: none — the issue's wording is "KVKK metni onaylanmadı", and
     uppercasing a sentence both widens it (~10%, straight into the fixed 200px
     column) and reads as shouting. "AKTİF" is uppercase in the string itself.
   - white-space: nowrap — the column track is fixed, so a wrap would silently grow
     the row height rather than clipping visibly. */
.status-badge.registration-status[b-4k5fbiccbd] {
    text-transform: none;
    white-space: nowrap;
    letter-spacing: 0;
}

/* ============================================
   STATUS BADGES
   FluentBadge's Tint recipe (docs/design.md, "Recipes"): the status Background1 / Foreground1 /
   Border1 triple, which the theme sets as a pair, so one rule is right in Açık and Koyu (#418).
   The `[data-theme="dark"]` copies of both badges and of `.user-name` are gone with the hex.
   ============================================ */
.status-approved[b-4k5fbiccbd] {
    background: var(--colorStatusSuccessBackground1);
    color: var(--colorStatusSuccessForeground1);
    border-color: var(--colorStatusSuccessBorder1);
}

/* Warning, not a neutral grey: grey reads as "disabled" rather than "waiting", which is the
   opposite of gh#343's intent. The warm tint moved from yellow to the theme's warning orange;
   the text still clears WCAG AA on its tint in both themes. */
.status-pending[b-4k5fbiccbd] {
    background: var(--colorStatusWarningBackground1);
    color: var(--colorStatusWarningForeground1);
    border-color: var(--colorStatusWarningBorder1);
}

/* ============================================
   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, var(--colorNeutralBackground1) 0%, var(--colorNeutralBackground2) 100%);
    color: var(--colorNeutralForeground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px var(--colorNeutralShadowAmbientLighter);
    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 var(--colorNeutralStroke3);
}

.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: var(--colorNeutralForeground1);
}

/* 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-ink);
    font-weight: 600;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--role-ink) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-ink) 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: var(--colorNeutralForeground3);
}

.info-label[b-4k5fbiccbd] {
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.info-value[b-4k5fbiccbd] {
    color: var(--colorNeutralForeground2);
    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 var(--colorNeutralStroke3);
    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 var(--colorNeutralShadowAmbient);
}

.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/AppErrorBoundary.razor.rz.scp.css */
/*
    The contained-failure panel. It replaces whatever failed, in place, so it is sized like page
    content rather than like a toast.

    Colours come from FluentUI's CSS custom properties, which are plain variables on :root — reading
    them needs no component and no provider, which matters because this panel renders only when
    something in the tree has already failed. They carry no literal fallbacks (#418): the tokens are
    on :root for the whole life of the page once blazor.web.js has started, and a light-theme hex
    fallback would be the wrong colour in the dark theme. Before start, app.css's pre-JS floor
    supplies the background, text and stroke tokens used here.
*/
.app-error-boundary[b-dcv2iyvnfi] {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin: 24px auto;
    max-width: 640px;
    padding: 20px 24px;

    border: 1px solid var(--colorPaletteRedBorder2);
    border-radius: var(--borderRadiusLarge, 6px);
    background-color: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
}

.app-error-boundary__title[b-dcv2iyvnfi] {
    font-size: 1.05rem;
    font-weight: 600;
}

.app-error-boundary__text[b-dcv2iyvnfi] {
    margin: 0;
    color: var(--colorNeutralForeground2);
}

.app-error-boundary__actions[b-dcv2iyvnfi] {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 8px;
}

.app-error-boundary__button[b-dcv2iyvnfi] {
    padding: 6px 14px;

    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium, 4px);
    background-color: var(--colorNeutralBackground1);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.app-error-boundary__link[b-dcv2iyvnfi] {
    color: var(--colorBrandForegroundLink);
}
/* /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: var(--shadow4);
}

.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/DocumentLetterhead.razor.rz.scp.css */
.letterhead[b-859f77kraw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.letterhead-logo[b-859f77kraw] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
}

.letterhead-text[b-859f77kraw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.letterhead-name[b-859f77kraw] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.letterhead-line[b-859f77kraw] {
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3);
    overflow-wrap: anywhere;
}
/* /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 the empty row's cell (`tr[row-state="empty-content"] > td`
    since rc.5; `.empty-content-cell` on rc.4) = 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 the loading row's cell (`tr[row-state="loading-content"] > td`
    since rc.5; `.loading-content-cell` on rc.4) = 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;
}

.page-card-gate-actions[b-2f3jk3kt48] {
    display: flex;
    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(--colorBrandStroke1);
}

/* Nothing to click without the right to change the picture. */
.picture-container-readonly[b-y6fgc2e3kd] {
    cursor: default;
}

.picture-container-readonly:hover[b-y6fgc2e3kd] {
    border-color: var(--colorNeutralStroke1);
}

.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;
    /* A scrim over a photo: dark in both themes, which is what the overlay token is. */
    background: var(--colorBackgroundOverlay);
    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;
}
/* /Components/Shared/StudentReportFields.razor.rz.scp.css */
.report-fields[b-osk6wmrhh3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.report-group[b-osk6wmrhh3] {
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
}

.report-title[b-osk6wmrhh3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    margin-bottom: 0.25rem;
}

.report-inputs[b-osk6wmrhh3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
/* /Components/Shared/SurveyPdfButtons.razor.rz.scp.css */
.survey-pdf-buttons[b-vh4tkdh2yz] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}