/*
 * Kreş360 web panel 2.0: shared tokens, the app shell and the dark theme.
 * Colors follow the mobile 2.0 kit (night #241D63, primary #5B4BDB,
 * coral #FF7A59, sun #FFC24B, Plus Jakarta Sans).
 *
 * The dark theme is opt-in: shell.js adds `dark` to <html> when the user
 * picks it. Existing pages are still written with Tailwind's neutral
 * utilities (bg-white, text-gray-900 ...), so the dark block below remaps
 * those utilities until every page moves to the shared components.
 */

@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-ext-800-normal.woff2') format('woff2'); font-weight: 800 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/static/vendor/plus-jakarta-sans/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); font-weight: 800 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --k-night: #241D63;
    --k-primary: #5B4BDB;
    --k-primary-soft: #EEECFD;
    --k-primary-ink: #4A3BC0;
    --k-coral: #FF7A59;
    --k-coral-soft: #FFEDE7;
    --k-sun: #FFC24B;
    --k-sun-soft: #FFF4DA;
    --k-ok: #159A63;
    --k-ok-soft: #E3F5EC;
    --k-wait: #B7791F;
    --k-wait-soft: #FFF4DA;
    --k-urgent: #E5484D;
    --k-urgent-soft: #FDE8E8;
    --k-leave: #5E6A85;
    --k-leave-soft: #ECEEF3;
    --k-bg: #F5F4FB;
    --k-surface: #FFFFFF;
    --k-surface-2: #F7F6FC;
    --k-surface-3: #EFEDF7;
    --k-line: #E6E4F0;
    --k-line-strong: #CFCCE0;
    --k-ink: #17142E;
    --k-ink-2: #474466;
    --k-muted: #6B6888;
    --k-faint: #A3A0BD;
    --k-shadow: 0 1px 2px rgba(36, 29, 99, 0.04), 0 8px 24px rgba(36, 29, 99, 0.05);
    --k-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    color-scheme: light;
}

html.dark {
    --k-night: #2E2878;
    --k-primary: #8B7FF0;
    --k-primary-soft: rgba(139, 127, 240, 0.16);
    --k-primary-ink: #C9C2FA;
    --k-coral-soft: rgba(255, 122, 89, 0.16);
    --k-sun-soft: rgba(255, 194, 75, 0.16);
    --k-ok: #3CC48A;
    --k-ok-soft: rgba(60, 196, 138, 0.16);
    --k-wait: #E8B04A;
    --k-wait-soft: rgba(232, 176, 74, 0.16);
    --k-urgent: #F2777A;
    --k-urgent-soft: rgba(242, 119, 122, 0.16);
    --k-leave: #9AA3BC;
    --k-leave-soft: rgba(154, 163, 188, 0.16);
    --k-bg: #15132B;
    --k-surface: #1F1C3A;
    --k-surface-2: #252244;
    --k-surface-3: #2E2A52;
    --k-line: #33305A;
    --k-line-strong: #46426F;
    --k-ink: #F3F1FF;
    --k-ink-2: #DCD9F2;
    --k-muted: #A9A5CA;
    --k-faint: #7E7AA3;
    --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

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

/* ---------- App shell ---------- */

.k-shell { background: var(--k-bg); color: var(--k-ink-2); }
.k-main { background: var(--k-bg); }

.k-sidebar { background: var(--k-surface); border-color: var(--k-line); }
.k-brand { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 1.25rem 0.75rem; }
.k-brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; background: var(--k-surface-3); overflow: hidden; flex: none; }
.k-brand-mark img { width: 1.75rem; height: auto; }
.k-brand-name { font-weight: 800; font-size: 1.05rem; color: var(--k-ink); letter-spacing: -0.01em; line-height: 1.2; }
.k-brand-sub { font-size: 0.75rem; color: var(--k-muted); line-height: 1.3; }

.k-search { position: relative; }
.k-search input {
    width: 100%; border-radius: 0.875rem; border: 1px solid transparent; background: var(--k-surface-3);
    padding: 0.625rem 3.5rem 0.625rem 2.25rem; font-size: 0.875rem; color: var(--k-ink);
}
.k-search input::placeholder { color: var(--k-muted); }
.k-search input:focus { outline: none; border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); background: var(--k-surface); }
.k-search .k-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--k-muted); }
.k-search kbd {
    position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); font: 600 0.6875rem var(--k-font);
    color: var(--k-muted); border: 1px solid var(--k-line-strong); border-radius: 0.375rem; padding: 0 0.375rem; pointer-events: none;
}
.k-search-results { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.k-search-result { display: flex; justify-content: space-between; gap: 0.5rem; border-radius: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--k-ink); }
.k-search-result small { color: var(--k-muted); font-weight: 500; }
.k-search-result:hover, .k-search-result:focus-visible, .k-search-result[aria-selected="true"] { background: var(--k-primary-soft); color: var(--k-primary-ink); outline: none; }

.k-nav { display: grid; gap: 0.125rem; }
.k-nav-link {
    display: flex; align-items: center; gap: 0.75rem; border-radius: 0.875rem; padding: 0.625rem 0.875rem;
    font-size: 0.9375rem; font-weight: 600; color: var(--k-muted); transition: background-color 150ms ease, color 150ms ease;
}
.k-nav-link i { font-size: 1.25rem; }
.k-nav-link:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-nav-link:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
.k-nav-link.is-active { background: var(--k-primary-soft); color: var(--k-primary-ink); }
.k-nav-link.is-active i { color: var(--k-primary); }

.k-sidebar-foot { border-top: 1px solid var(--k-line); padding: 0.75rem; display: grid; gap: 0.5rem; }
.k-user { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.5rem; }
.k-avatar {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex: none; overflow: hidden;
    background: var(--k-sun-soft); color: var(--k-wait); font-weight: 800;
}
.k-user-name { font-size: 0.875rem; font-weight: 700; color: var(--k-ink); }
.k-user-meta { font-size: 0.75rem; color: var(--k-muted); }
.k-icon-btn {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; color: var(--k-muted);
    transition: background-color 150ms ease, color 150ms ease;
}
.k-icon-btn:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-icon-btn:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
.k-icon-btn i { font-size: 1.25rem; }

.k-theme-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.875rem; background: var(--k-surface-3); }
.k-theme-toggle button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 0.625rem;
    padding: 0.375rem 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--k-muted);
}
.k-theme-toggle button[aria-pressed="true"] { background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow); }
.k-theme-toggle button:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 1px; }

.k-topbar { background: var(--k-surface); border-color: var(--k-line); }

.k-subnav { display: flex; gap: 0.375rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1.5rem; scrollbar-width: none; }
.k-subnav::-webkit-scrollbar { display: none; }
.k-subnav a {
    flex: none; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding: 0.5rem 1rem;
    border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-muted); font-size: 0.875rem; font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.k-subnav a:hover { color: var(--k-ink); border-color: var(--k-line-strong); }
.k-subnav a.is-active { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-surface); }
.k-subnav a:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }

/* ---------- Page building blocks (2.0 screens) ---------- */

.k-page { display: grid; gap: 1.25rem; max-width: 80rem; margin-inline: auto; color: var(--k-ink-2); }
.k-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.k-eyebrow { font-size: 0.875rem; color: var(--k-muted); }
.k-title { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--k-ink); text-wrap: balance; }
.k-subtitle { font-size: 0.9375rem; color: var(--k-muted); margin-top: 0.25rem; }
.k-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.k-card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.25rem; padding: 1.25rem; min-width: 0; }
.k-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; }
.k-card-title { font-size: 1rem; font-weight: 700; color: var(--k-ink); }
.k-link { font-size: 0.8125rem; font-weight: 700; color: var(--k-primary); }
.k-link:hover { text-decoration: underline; }

.k-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.5rem;
    border-radius: 0.875rem; border: 1px solid var(--k-line-strong); background: var(--k-surface); color: var(--k-ink);
    padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 700; transition: background-color 150ms ease, border-color 150ms ease;
}
.k-btn:hover { background: var(--k-surface-3); }
.k-btn:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }
.k-btn-primary { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.k-btn-primary:hover { background: var(--k-primary-ink); border-color: var(--k-primary-ink); }
html.dark .k-btn-primary:hover { background: #7466e8; }
.k-btn-sm { min-height: 2.125rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; border-radius: 0.75rem; }

.k-chips { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.k-chips::-webkit-scrollbar { display: none; }
.k-chip {
    flex: none; display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; border: 1px solid var(--k-line);
    background: var(--k-surface); padding: 0.4375rem 0.875rem; font-size: 0.875rem; font-weight: 600; color: var(--k-muted);
}
.k-chip:hover { color: var(--k-ink); border-color: var(--k-line-strong); }
.k-chip.is-active { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-surface); }
.k-chip b { font-variant-numeric: tabular-nums; }

.k-big { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.k-big small { font-size: 1.25rem; font-weight: 700; color: var(--k-muted); letter-spacing: 0; }
.k-bar { display: flex; gap: 2px; height: 0.625rem; border-radius: 9999px; overflow: hidden; background: var(--k-surface-3); }
.k-bar > span { display: block; height: 100%; }
.k-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--k-muted); }
.k-legend b { color: var(--k-ink); font-variant-numeric: tabular-nums; }
.k-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: currentColor; margin-right: 0.25rem; vertical-align: middle; }
.k-track { height: 0.4375rem; border-radius: 9999px; background: var(--k-surface-3); overflow: hidden; }
.k-track > span { display: block; height: 100%; border-radius: 9999px; background: var(--k-ok); }
.k-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--k-muted); }

.k-tile { display: grid; gap: 0.375rem; align-content: start; transition: border-color 150ms ease, transform 150ms ease; }
a.k-tile:hover { border-color: var(--k-line-strong); transform: translateY(-1px); }
.k-tile-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; font-size: 1.25rem; }
.k-tile-value { font-size: 1.75rem; font-weight: 800; color: var(--k-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.k-tile-label { font-size: 0.875rem; color: var(--k-muted); }
.k-tone-ok { background: var(--k-ok-soft); color: var(--k-ok); }
.k-tone-wait { background: var(--k-wait-soft); color: var(--k-wait); }
.k-tone-urgent { background: var(--k-urgent-soft); color: var(--k-urgent); }
.k-tone-coral { background: var(--k-coral-soft); color: var(--k-coral); }
.k-tone-primary { background: var(--k-primary-soft); color: var(--k-primary); }
.k-tone-leave { background: var(--k-leave-soft); color: var(--k-leave); }

.k-list { display: grid; }
.k-list-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--k-line); font-size: 0.875rem; min-width: 0; }
.k-list-row:last-child { border-bottom: 0; }
.k-list-row .k-meta { margin-left: auto; font-size: 0.8125rem; color: var(--k-muted); white-space: nowrap; }
.k-list-main { min-width: 0; flex: 1 1 auto; }
.k-list-main p { color: var(--k-ink); font-weight: 600; }
.k-list-main small { display: block; color: var(--k-muted); font-size: 0.8125rem; }

.k-request { display: grid; gap: 0.875rem; align-content: start; }
.k-request-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; color: var(--k-muted); }
.k-request-title { font-size: 1rem; font-weight: 700; color: var(--k-ink); }
.k-request-sub { font-size: 0.875rem; color: var(--k-muted); }
.k-request-note { font-size: 0.875rem; color: var(--k-ink-2); background: var(--k-surface-2); border-radius: 0.875rem; padding: 0.625rem 0.875rem; }
.k-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; }
.k-request-actions form { display: contents; }

.k-empty { display: grid; justify-items: center; gap: 0.5rem; text-align: center; padding: 2.5rem 1.25rem; color: var(--k-muted); }
.k-empty i { font-size: 2.25rem; color: var(--k-ok); }
.k-empty strong { color: var(--k-ink); font-size: 1.0625rem; }

.k-alert { border-radius: 1rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600; }
.k-alert-ok { background: var(--k-ok-soft); color: var(--k-ok); }
.k-alert-error { background: var(--k-urgent-soft); color: var(--k-urgent); }

/* ---------- Status pills (fixed meaning across the product) ---------- */

.k-pill { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.1875rem 0.625rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.k-pill-ok { background: var(--k-ok-soft); color: var(--k-ok); }
.k-pill-wait { background: var(--k-wait-soft); color: var(--k-wait); }
.k-pill-urgent { background: var(--k-urgent-soft); color: var(--k-urgent); }
.k-pill-leave { background: var(--k-leave-soft); color: var(--k-leave); }
.k-pill-info { background: var(--k-primary-soft); color: var(--k-primary-ink); }

@media (prefers-reduced-motion: reduce) {
    .k-nav-link, .k-subnav a, .k-icon-btn, .k-btn, .k-tile { transition: none; }
    a.k-tile:hover { transform: none; }
}

/* ---------- Dark theme bridge for Tailwind neutral utilities ---------- */

html.dark body,
html.dark [class~="bg-cream-50"],
html.dark [class~="bg-gray-50/50"],
html.dark [class~="bg-gray-50/30"] { background-color: var(--k-bg); }

html.dark [class~="bg-white"],
html.dark [class~="bg-white/80"],
html.dark [class~="bg-white/90"],
html.dark [class~="bg-white/95"],
html.dark [class~="focus:bg-white"]:focus,
html.dark .glass,
html.dark .ui-card,
html.dark .ui-page-header { background-color: var(--k-surface); }

html.dark [class~="bg-gray-50"],
html.dark [class~="bg-gray-50/60"],
html.dark [class~="bg-gray-50/70"],
html.dark [class~="bg-gray-50/80"],
html.dark [class~="bg-slate-50"],
html.dark [class~="bg-slate-50/50"],
html.dark .ui-empty-state { background-color: var(--k-surface-2); }

html.dark [class~="bg-gray-100"],
html.dark [class~="bg-slate-100"],
html.dark [class~="bg-gray-200"] { background-color: var(--k-surface-3); }

html.dark [class~="hover:bg-gray-50"]:hover,
html.dark [class~="hover:bg-gray-50/50"]:hover,
html.dark [class~="hover:bg-gray-50/70"]:hover,
html.dark [class~="hover:bg-gray-50/80"]:hover,
html.dark [class~="hover:bg-slate-50"]:hover,
html.dark [class~="hover:bg-white"]:hover,
html.dark [class~="hover:bg-gray-100"]:hover,
html.dark [class~="hover:bg-gray-200"]:hover { background-color: var(--k-surface-3); }

html.dark [class~="text-gray-950"],
html.dark [class~="text-gray-900"],
html.dark [class~="text-gray-800"],
html.dark [class~="text-slate-950"],
html.dark [class~="text-slate-900"],
html.dark [class~="text-slate-800"],
html.dark [class~="hover:text-gray-900"]:hover,
html.dark .ui-page-title { color: var(--k-ink); }

html.dark [class~="text-gray-700"],
html.dark [class~="text-slate-700"],
html.dark [class~="hover:text-gray-700"]:hover { color: var(--k-ink-2); }

html.dark [class~="text-gray-600"],
html.dark [class~="text-gray-500"],
html.dark [class~="text-slate-600"],
html.dark [class~="text-slate-500"],
html.dark [class~="hover:text-gray-600"]:hover,
html.dark .ui-page-description { color: var(--k-muted); }

html.dark [class~="text-gray-400"],
html.dark [class~="text-gray-300"],
html.dark [class~="text-slate-400"],
html.dark [class~="text-slate-300"] { color: var(--k-faint); }

html.dark [class~="border-gray-50"],
html.dark [class~="border-gray-100"],
html.dark [class~="border-gray-200"],
html.dark [class~="border-slate-100"],
html.dark [class~="border-slate-200"],
html.dark [class~="border-white"],
html.dark [class~="divide-gray-50"] > * + *,
html.dark [class~="divide-gray-100"] > * + *,
html.dark [class~="divide-gray-200"] > * + *,
html.dark [class~="divide-slate-100"] > * + *,
html.dark .ui-card,
html.dark .ui-page-header { border-color: var(--k-line); }

html.dark [class~="border-gray-300"],
html.dark [class~="hover:border-gray-300"]:hover,
html.dark .ui-empty-state { border-color: var(--k-line-strong); }

html.dark [class~="bg-gray-900"],
html.dark [class~="bg-slate-900"] { background-color: var(--k-night); }
html.dark [class~="hover:bg-gray-800"]:hover,
html.dark [class~="hover:bg-slate-800"]:hover,
html.dark [class~="hover:bg-black"]:hover { background-color: #3A3391; }

html.dark [class*="shadow"] { --tw-shadow-color: rgba(0, 0, 0, 0.35); }

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: var(--k-surface-2);
    border-color: var(--k-line-strong);
    color: var(--k-ink);
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--k-faint); }
html.dark dialog { background-color: var(--k-surface); color: var(--k-ink-2); }
html.dark ::-webkit-scrollbar-thumb { background: var(--k-line-strong); }

/* Tinted backgrounds and text (generated from Tailwind's palette). */
html.dark [class~="bg-red-50"],
html.dark [class~="bg-red-50/50"],
html.dark [class~="bg-red-50/80"],
html.dark [class~="bg-red-100"],
html.dark [class~="bg-red-100/50"] { background-color: rgb(239 68 68 / 0.14); }
html.dark [class~="bg-red-200"] { background-color: rgb(239 68 68 / 0.26); }
html.dark [class~="text-red-600"],
html.dark [class~="text-red-700"],
html.dark [class~="text-red-800"],
html.dark [class~="text-red-900"] { color: #fca5a5; }
html.dark [class~="border-red-100"],
html.dark [class~="border-red-200"],
html.dark [class~="border-red-300"] { border-color: rgb(239 68 68 / 0.32); }
html.dark [class~="hover:bg-red-50"]:hover,
html.dark [class~="hover:bg-red-100"]:hover { background-color: rgb(239 68 68 / 0.2); }
html.dark [class~="bg-rose-50"],
html.dark [class~="bg-rose-50/50"],
html.dark [class~="bg-rose-50/80"],
html.dark [class~="bg-rose-100"],
html.dark [class~="bg-rose-100/50"] { background-color: rgb(244 63 94 / 0.14); }
html.dark [class~="bg-rose-200"] { background-color: rgb(244 63 94 / 0.26); }
html.dark [class~="text-rose-600"],
html.dark [class~="text-rose-700"],
html.dark [class~="text-rose-800"],
html.dark [class~="text-rose-900"] { color: #fda4af; }
html.dark [class~="border-rose-100"],
html.dark [class~="border-rose-200"],
html.dark [class~="border-rose-300"] { border-color: rgb(244 63 94 / 0.32); }
html.dark [class~="hover:bg-rose-50"]:hover,
html.dark [class~="hover:bg-rose-100"]:hover { background-color: rgb(244 63 94 / 0.2); }
html.dark [class~="bg-pink-50"],
html.dark [class~="bg-pink-50/50"],
html.dark [class~="bg-pink-50/80"],
html.dark [class~="bg-pink-100"],
html.dark [class~="bg-pink-100/50"] { background-color: rgb(236 72 153 / 0.14); }
html.dark [class~="bg-pink-200"] { background-color: rgb(236 72 153 / 0.26); }
html.dark [class~="text-pink-600"],
html.dark [class~="text-pink-700"],
html.dark [class~="text-pink-800"],
html.dark [class~="text-pink-900"] { color: #f9a8d4; }
html.dark [class~="border-pink-100"],
html.dark [class~="border-pink-200"],
html.dark [class~="border-pink-300"] { border-color: rgb(236 72 153 / 0.32); }
html.dark [class~="hover:bg-pink-50"]:hover,
html.dark [class~="hover:bg-pink-100"]:hover { background-color: rgb(236 72 153 / 0.2); }
html.dark [class~="bg-orange-50"],
html.dark [class~="bg-orange-50/50"],
html.dark [class~="bg-orange-50/80"],
html.dark [class~="bg-orange-100"],
html.dark [class~="bg-orange-100/50"] { background-color: rgb(249 115 22 / 0.14); }
html.dark [class~="bg-orange-200"] { background-color: rgb(249 115 22 / 0.26); }
html.dark [class~="text-orange-600"],
html.dark [class~="text-orange-700"],
html.dark [class~="text-orange-800"],
html.dark [class~="text-orange-900"] { color: #fdba74; }
html.dark [class~="border-orange-100"],
html.dark [class~="border-orange-200"],
html.dark [class~="border-orange-300"] { border-color: rgb(249 115 22 / 0.32); }
html.dark [class~="hover:bg-orange-50"]:hover,
html.dark [class~="hover:bg-orange-100"]:hover { background-color: rgb(249 115 22 / 0.2); }
html.dark [class~="bg-amber-50"],
html.dark [class~="bg-amber-50/50"],
html.dark [class~="bg-amber-50/80"],
html.dark [class~="bg-amber-100"],
html.dark [class~="bg-amber-100/50"] { background-color: rgb(245 158 11 / 0.14); }
html.dark [class~="bg-amber-200"] { background-color: rgb(245 158 11 / 0.26); }
html.dark [class~="text-amber-600"],
html.dark [class~="text-amber-700"],
html.dark [class~="text-amber-800"],
html.dark [class~="text-amber-900"] { color: #fcd34d; }
html.dark [class~="border-amber-100"],
html.dark [class~="border-amber-200"],
html.dark [class~="border-amber-300"] { border-color: rgb(245 158 11 / 0.32); }
html.dark [class~="hover:bg-amber-50"]:hover,
html.dark [class~="hover:bg-amber-100"]:hover { background-color: rgb(245 158 11 / 0.2); }
html.dark [class~="bg-yellow-50"],
html.dark [class~="bg-yellow-50/50"],
html.dark [class~="bg-yellow-50/80"],
html.dark [class~="bg-yellow-100"],
html.dark [class~="bg-yellow-100/50"] { background-color: rgb(234 179 8 / 0.14); }
html.dark [class~="bg-yellow-200"] { background-color: rgb(234 179 8 / 0.26); }
html.dark [class~="text-yellow-600"],
html.dark [class~="text-yellow-700"],
html.dark [class~="text-yellow-800"],
html.dark [class~="text-yellow-900"] { color: #fde047; }
html.dark [class~="border-yellow-100"],
html.dark [class~="border-yellow-200"],
html.dark [class~="border-yellow-300"] { border-color: rgb(234 179 8 / 0.32); }
html.dark [class~="hover:bg-yellow-50"]:hover,
html.dark [class~="hover:bg-yellow-100"]:hover { background-color: rgb(234 179 8 / 0.2); }
html.dark [class~="bg-lime-50"],
html.dark [class~="bg-lime-50/50"],
html.dark [class~="bg-lime-50/80"],
html.dark [class~="bg-lime-100"],
html.dark [class~="bg-lime-100/50"] { background-color: rgb(132 204 22 / 0.14); }
html.dark [class~="bg-lime-200"] { background-color: rgb(132 204 22 / 0.26); }
html.dark [class~="text-lime-600"],
html.dark [class~="text-lime-700"],
html.dark [class~="text-lime-800"],
html.dark [class~="text-lime-900"] { color: #bef264; }
html.dark [class~="border-lime-100"],
html.dark [class~="border-lime-200"],
html.dark [class~="border-lime-300"] { border-color: rgb(132 204 22 / 0.32); }
html.dark [class~="hover:bg-lime-50"]:hover,
html.dark [class~="hover:bg-lime-100"]:hover { background-color: rgb(132 204 22 / 0.2); }
html.dark [class~="bg-green-50"],
html.dark [class~="bg-green-50/50"],
html.dark [class~="bg-green-50/80"],
html.dark [class~="bg-green-100"],
html.dark [class~="bg-green-100/50"] { background-color: rgb(34 197 94 / 0.14); }
html.dark [class~="bg-green-200"] { background-color: rgb(34 197 94 / 0.26); }
html.dark [class~="text-green-600"],
html.dark [class~="text-green-700"],
html.dark [class~="text-green-800"],
html.dark [class~="text-green-900"] { color: #86efac; }
html.dark [class~="border-green-100"],
html.dark [class~="border-green-200"],
html.dark [class~="border-green-300"] { border-color: rgb(34 197 94 / 0.32); }
html.dark [class~="hover:bg-green-50"]:hover,
html.dark [class~="hover:bg-green-100"]:hover { background-color: rgb(34 197 94 / 0.2); }
html.dark [class~="bg-emerald-50"],
html.dark [class~="bg-emerald-50/50"],
html.dark [class~="bg-emerald-50/80"],
html.dark [class~="bg-emerald-100"],
html.dark [class~="bg-emerald-100/50"] { background-color: rgb(16 185 129 / 0.14); }
html.dark [class~="bg-emerald-200"] { background-color: rgb(16 185 129 / 0.26); }
html.dark [class~="text-emerald-600"],
html.dark [class~="text-emerald-700"],
html.dark [class~="text-emerald-800"],
html.dark [class~="text-emerald-900"] { color: #6ee7b7; }
html.dark [class~="border-emerald-100"],
html.dark [class~="border-emerald-200"],
html.dark [class~="border-emerald-300"] { border-color: rgb(16 185 129 / 0.32); }
html.dark [class~="hover:bg-emerald-50"]:hover,
html.dark [class~="hover:bg-emerald-100"]:hover { background-color: rgb(16 185 129 / 0.2); }
html.dark [class~="bg-teal-50"],
html.dark [class~="bg-teal-50/50"],
html.dark [class~="bg-teal-50/80"],
html.dark [class~="bg-teal-100"],
html.dark [class~="bg-teal-100/50"] { background-color: rgb(20 184 166 / 0.14); }
html.dark [class~="bg-teal-200"] { background-color: rgb(20 184 166 / 0.26); }
html.dark [class~="text-teal-600"],
html.dark [class~="text-teal-700"],
html.dark [class~="text-teal-800"],
html.dark [class~="text-teal-900"] { color: #5eead4; }
html.dark [class~="border-teal-100"],
html.dark [class~="border-teal-200"],
html.dark [class~="border-teal-300"] { border-color: rgb(20 184 166 / 0.32); }
html.dark [class~="hover:bg-teal-50"]:hover,
html.dark [class~="hover:bg-teal-100"]:hover { background-color: rgb(20 184 166 / 0.2); }
html.dark [class~="bg-cyan-50"],
html.dark [class~="bg-cyan-50/50"],
html.dark [class~="bg-cyan-50/80"],
html.dark [class~="bg-cyan-100"],
html.dark [class~="bg-cyan-100/50"] { background-color: rgb(6 182 212 / 0.14); }
html.dark [class~="bg-cyan-200"] { background-color: rgb(6 182 212 / 0.26); }
html.dark [class~="text-cyan-600"],
html.dark [class~="text-cyan-700"],
html.dark [class~="text-cyan-800"],
html.dark [class~="text-cyan-900"] { color: #67e8f9; }
html.dark [class~="border-cyan-100"],
html.dark [class~="border-cyan-200"],
html.dark [class~="border-cyan-300"] { border-color: rgb(6 182 212 / 0.32); }
html.dark [class~="hover:bg-cyan-50"]:hover,
html.dark [class~="hover:bg-cyan-100"]:hover { background-color: rgb(6 182 212 / 0.2); }
html.dark [class~="bg-sky-50"],
html.dark [class~="bg-sky-50/50"],
html.dark [class~="bg-sky-50/80"],
html.dark [class~="bg-sky-100"],
html.dark [class~="bg-sky-100/50"] { background-color: rgb(14 165 233 / 0.14); }
html.dark [class~="bg-sky-200"] { background-color: rgb(14 165 233 / 0.26); }
html.dark [class~="text-sky-600"],
html.dark [class~="text-sky-700"],
html.dark [class~="text-sky-800"],
html.dark [class~="text-sky-900"] { color: #7dd3fc; }
html.dark [class~="border-sky-100"],
html.dark [class~="border-sky-200"],
html.dark [class~="border-sky-300"] { border-color: rgb(14 165 233 / 0.32); }
html.dark [class~="hover:bg-sky-50"]:hover,
html.dark [class~="hover:bg-sky-100"]:hover { background-color: rgb(14 165 233 / 0.2); }
html.dark [class~="bg-blue-50"],
html.dark [class~="bg-blue-50/50"],
html.dark [class~="bg-blue-50/80"],
html.dark [class~="bg-blue-100"],
html.dark [class~="bg-blue-100/50"] { background-color: rgb(59 130 246 / 0.14); }
html.dark [class~="bg-blue-200"] { background-color: rgb(59 130 246 / 0.26); }
html.dark [class~="text-blue-600"],
html.dark [class~="text-blue-700"],
html.dark [class~="text-blue-800"],
html.dark [class~="text-blue-900"] { color: #93c5fd; }
html.dark [class~="border-blue-100"],
html.dark [class~="border-blue-200"],
html.dark [class~="border-blue-300"] { border-color: rgb(59 130 246 / 0.32); }
html.dark [class~="hover:bg-blue-50"]:hover,
html.dark [class~="hover:bg-blue-100"]:hover { background-color: rgb(59 130 246 / 0.2); }
html.dark [class~="bg-indigo-50"],
html.dark [class~="bg-indigo-50/50"],
html.dark [class~="bg-indigo-50/80"],
html.dark [class~="bg-indigo-100"],
html.dark [class~="bg-indigo-100/50"] { background-color: rgb(99 102 241 / 0.14); }
html.dark [class~="bg-indigo-200"] { background-color: rgb(99 102 241 / 0.26); }
html.dark [class~="text-indigo-600"],
html.dark [class~="text-indigo-700"],
html.dark [class~="text-indigo-800"],
html.dark [class~="text-indigo-900"] { color: #a5b4fc; }
html.dark [class~="border-indigo-100"],
html.dark [class~="border-indigo-200"],
html.dark [class~="border-indigo-300"] { border-color: rgb(99 102 241 / 0.32); }
html.dark [class~="hover:bg-indigo-50"]:hover,
html.dark [class~="hover:bg-indigo-100"]:hover { background-color: rgb(99 102 241 / 0.2); }
html.dark [class~="bg-violet-50"],
html.dark [class~="bg-violet-50/50"],
html.dark [class~="bg-violet-50/80"],
html.dark [class~="bg-violet-100"],
html.dark [class~="bg-violet-100/50"] { background-color: rgb(139 92 246 / 0.14); }
html.dark [class~="bg-violet-200"] { background-color: rgb(139 92 246 / 0.26); }
html.dark [class~="text-violet-600"],
html.dark [class~="text-violet-700"],
html.dark [class~="text-violet-800"],
html.dark [class~="text-violet-900"] { color: #c4b5fd; }
html.dark [class~="border-violet-100"],
html.dark [class~="border-violet-200"],
html.dark [class~="border-violet-300"] { border-color: rgb(139 92 246 / 0.32); }
html.dark [class~="hover:bg-violet-50"]:hover,
html.dark [class~="hover:bg-violet-100"]:hover { background-color: rgb(139 92 246 / 0.2); }
html.dark [class~="bg-purple-50"],
html.dark [class~="bg-purple-50/50"],
html.dark [class~="bg-purple-50/80"],
html.dark [class~="bg-purple-100"],
html.dark [class~="bg-purple-100/50"] { background-color: rgb(168 85 247 / 0.14); }
html.dark [class~="bg-purple-200"] { background-color: rgb(168 85 247 / 0.26); }
html.dark [class~="text-purple-600"],
html.dark [class~="text-purple-700"],
html.dark [class~="text-purple-800"],
html.dark [class~="text-purple-900"] { color: #d8b4fe; }
html.dark [class~="border-purple-100"],
html.dark [class~="border-purple-200"],
html.dark [class~="border-purple-300"] { border-color: rgb(168 85 247 / 0.32); }
html.dark [class~="hover:bg-purple-50"]:hover,
html.dark [class~="hover:bg-purple-100"]:hover { background-color: rgb(168 85 247 / 0.2); }
html.dark [class~="bg-brand-50"],
html.dark [class~="bg-brand-50/50"],
html.dark [class~="bg-brand-50/80"],
html.dark [class~="bg-brand-100"],
html.dark [class~="bg-brand-100/50"] { background-color: rgb(111 95 228 / 0.14); }
html.dark [class~="bg-brand-200"] { background-color: rgb(111 95 228 / 0.26); }
html.dark [class~="text-brand-600"],
html.dark [class~="text-brand-700"],
html.dark [class~="text-brand-800"],
html.dark [class~="text-brand-900"] { color: #ADA2F6; }
html.dark [class~="border-brand-100"],
html.dark [class~="border-brand-200"],
html.dark [class~="border-brand-300"] { border-color: rgb(111 95 228 / 0.32); }
html.dark [class~="hover:bg-brand-50"]:hover,
html.dark [class~="hover:bg-brand-100"]:hover { background-color: rgb(111 95 228 / 0.2); }
html.dark [class~="bg-secondary-50"],
html.dark [class~="bg-secondary-50/50"],
html.dark [class~="bg-secondary-50/80"],
html.dark [class~="bg-secondary-100"],
html.dark [class~="bg-secondary-100/50"] { background-color: rgb(52 211 153 / 0.14); }
html.dark [class~="bg-secondary-200"] { background-color: rgb(52 211 153 / 0.26); }
html.dark [class~="text-secondary-600"],
html.dark [class~="text-secondary-700"],
html.dark [class~="text-secondary-800"],
html.dark [class~="text-secondary-900"] { color: #6ee7b7; }
html.dark [class~="border-secondary-100"],
html.dark [class~="border-secondary-200"],
html.dark [class~="border-secondary-300"] { border-color: rgb(52 211 153 / 0.32); }
html.dark [class~="hover:bg-secondary-50"]:hover,
html.dark [class~="hover:bg-secondary-100"]:hover { background-color: rgb(52 211 153 / 0.2); }
html.dark [class~="bg-coral-50"],
html.dark [class~="bg-coral-50/50"],
html.dark [class~="bg-coral-50/80"],
html.dark [class~="bg-coral-100"],
html.dark [class~="bg-coral-100/50"] { background-color: rgb(255 122 89 / 0.14); }
html.dark [class~="bg-coral-200"] { background-color: rgb(255 122 89 / 0.26); }
html.dark [class~="text-coral-600"],
html.dark [class~="text-coral-700"],
html.dark [class~="text-coral-800"],
html.dark [class~="text-coral-900"] { color: #FFB29E; }
html.dark [class~="border-coral-100"],
html.dark [class~="border-coral-200"],
html.dark [class~="border-coral-300"] { border-color: rgb(255 122 89 / 0.32); }
html.dark [class~="hover:bg-coral-50"]:hover,
html.dark [class~="hover:bg-coral-100"]:hover { background-color: rgb(255 122 89 / 0.2); }
html.dark [class~="bg-sun-50"],
html.dark [class~="bg-sun-50/50"],
html.dark [class~="bg-sun-50/80"],
html.dark [class~="bg-sun-100"],
html.dark [class~="bg-sun-100/50"] { background-color: rgb(255 194 75 / 0.14); }
html.dark [class~="bg-sun-200"] { background-color: rgb(255 194 75 / 0.26); }
html.dark [class~="text-sun-600"],
html.dark [class~="text-sun-700"],
html.dark [class~="text-sun-800"],
html.dark [class~="text-sun-900"] { color: #FFD98A; }
html.dark [class~="border-sun-100"],
html.dark [class~="border-sun-200"],
html.dark [class~="border-sun-300"] { border-color: rgb(255 194 75 / 0.32); }
html.dark [class~="hover:bg-sun-50"]:hover,
html.dark [class~="hover:bg-sun-100"]:hover { background-color: rgb(255 194 75 / 0.2); }

/* Hero cards: the night-blue (teacher) and warm (parent, login) headers from the mobile 2.0 kit. */
.k-hero {
    position: relative; overflow: hidden; border-radius: 1.75rem; padding: 1.75rem; color: #fff;
    background: var(--k-night); isolation: isolate;
}
.k-hero::before, .k-hero::after { content: ""; position: absolute; border-radius: 9999px; z-index: -1; pointer-events: none; }
.k-hero::before { width: 22rem; height: 22rem; right: -6rem; top: -9rem; background: rgba(255, 255, 255, 0.07); }
.k-hero::after { width: 12rem; height: 12rem; right: 9rem; top: 2rem; background: rgba(255, 122, 89, 0.18); }
.k-hero .k-eyebrow { color: rgba(255, 255, 255, 0.72); }
.k-hero .k-title { color: #fff; }
.k-hero .k-subtitle { color: rgba(255, 255, 255, 0.72); }
.k-hero-warm { background: linear-gradient(160deg, var(--k-coral-soft), var(--k-sun-soft)); color: var(--k-ink); }
.k-hero-warm::before { background: rgba(255, 194, 75, 0.35); }
.k-hero-warm::after { display: none; }
.k-hero-warm .k-eyebrow, .k-hero-warm .k-subtitle { color: var(--k-muted); }
.k-hero-warm .k-title { color: var(--k-ink); }
.k-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.k-hero-stat { display: flex; align-items: center; gap: 0.875rem; border-radius: 1.25rem; background: rgba(255, 255, 255, 0.1); padding: 0.875rem 1rem; }
.k-hero-stat b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.k-hero-stat span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); }
.k-ring {
    --k-ring-value: 0; --k-ring-color: var(--k-ok);
    flex: none; width: 3.25rem; height: 3.25rem; border-radius: 9999px;
    background: conic-gradient(var(--k-ring-color) calc(var(--k-ring-value) * 1%), rgba(255, 255, 255, 0.16) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.4375rem), #000 calc(100% - 0.375rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.4375rem), #000 calc(100% - 0.375rem));
}
.k-hero-btn { background: #fff; border-color: #fff; color: var(--k-night); }
.k-hero-btn:hover { background: rgba(255, 255, 255, 0.88); }

/* "Şimdi" rows: one job per row, with its action on the right. */
.k-now { display: flex; align-items: center; gap: 0.875rem; border: 1px solid var(--k-line); border-radius: 1.125rem; padding: 0.875rem 1rem; background: var(--k-surface); }
.k-now + .k-now { margin-top: 0.625rem; }
.k-now-urgent { border-color: var(--k-coral); background: var(--k-coral-soft); }
.k-now .k-list-main p { font-size: 0.9375rem; }
.k-now form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.k-btn-coral { background: var(--k-coral); border-color: var(--k-coral); color: #fff; }
.k-btn-coral:hover { background: #f0603d; border-color: #f0603d; }
.k-btn-soft { background: var(--k-primary-soft, var(--k-surface-3)); border-color: transparent; color: var(--k-primary); }
.k-input {
    width: 100%; min-height: 2.75rem; border-radius: 0.875rem; border: 1px solid var(--k-line-strong); background: var(--k-surface);
    color: var(--k-ink); padding: 0.5rem 0.875rem; font-size: 0.9375rem;
}
.k-input:focus { outline: 2px solid var(--k-primary); outline-offset: 1px; border-color: var(--k-primary); }

/* Login: warm brand panel on the left (top on phones), the form on the right. */
.k-login-hero { border-radius: 0; padding: 2rem 1.5rem; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .k-login-hero { padding: 3.5rem; justify-content: center; } }
.k-login-face {
    display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 9999px; font-size: 1.5rem;
    box-shadow: 0 0 0 3px var(--k-surface);
}
.k-login-field {
    display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; border-radius: 1.25rem; border: 1px solid var(--k-line-strong);
    background: var(--k-surface); padding: 0.5rem 0.625rem 0.5rem 1rem; cursor: text; transition: border-color .15s, box-shadow .15s;
}
.k-login-field > i { font-size: 1.25rem; color: var(--k-faint); flex: none; }
.k-login-field:focus-within { border-color: var(--k-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-primary) 14%, transparent); }
.k-login-field:focus-within > i { color: var(--k-primary); }
.k-login-field-body { display: grid; flex: 1 1 auto; min-width: 0; }
.k-login-field-body > span { font-size: 0.75rem; font-weight: 600; color: var(--k-muted); }
.k-login-field-body input, .k-login-field-body input:focus { box-shadow: none !important; outline: none !important; border: 0 !important; background: transparent !important; }
.k-login-field-body input { width: 100%; color: var(--k-ink); padding: 0.125rem 0; font-size: 1rem; font-weight: 600; outline: none; }
.k-login-field-body input::placeholder { color: var(--k-faint); font-weight: 500; }
.k-login-points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.k-login-points li { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background: var(--k-surface); padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 700; color: var(--k-ink); }
html.dark .k-hero-warm::before { background: rgba(255, 194, 75, 0.14); }
.k-hero::after { width: 9rem; height: 9rem; right: 12rem; top: -4rem; }

/* Public pages (trial signup, school application, pre-registration) share the login look. */
.k-public { background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font); }
@media (min-width: 1024px) { .k-public-hero { justify-content: flex-start; } .k-public-hero-inner { position: sticky; top: 3.5rem; } }
.k-public-steps { display: grid; gap: 0.625rem; margin-top: 1.5rem; max-width: 28rem; }
.k-public-steps li { display: flex; align-items: center; gap: 0.75rem; border-radius: 1rem; background: var(--k-surface); padding: 0.75rem 1rem; font-size: 0.9375rem; font-weight: 600; }
.k-public-steps li span { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--k-primary-soft, var(--k-surface-3)); color: var(--k-primary); font-weight: 800; font-size: 0.8125rem; }
.k-public-card { display: grid; gap: 1rem; border: 1px solid var(--k-line); border-radius: 1.5rem; background: var(--k-surface); padding: 1.25rem; }
@media (min-width: 640px) { .k-public-card { padding: 1.5rem; } }
.k-public-card > legend { float: left; width: 100%; margin-bottom: 0.25rem; }
.k-public-box { border: 1px solid var(--k-line); border-radius: 1.25rem; background: var(--k-surface-2); padding: 1rem 1.125rem; }
.k-public-field { display: grid; gap: 0.375rem; }
.k-public-field > span { font-size: 0.875rem; font-weight: 700; }
.k-public-field > span b { color: var(--k-coral); font-weight: 800; }
.k-public-field > small { font-size: 0.75rem; color: var(--k-muted); }
.k-public .k-input { min-height: 3.125rem; border-radius: 1rem; font-size: 1rem; }
.k-public .k-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-primary) 14%, transparent); }
.k-public-submit { width: 100%; min-height: 3.25rem; font-size: 1rem; border-radius: 1.125rem; }

/* ---------- Legacy page bridge ----------
 * Older pages are built from raw Tailwind utilities. Inside the content area these rules move their
 * shared pieces (labels, cards, tables, fields, modals) onto the 2.0 tokens without touching markup.
 */
.k-content { color: var(--k-ink-2); }
/* Small caps labels read as shouting; 2.0 uses calm sentence-case labels. */
.k-content [class~="uppercase"] { text-transform: none; letter-spacing: 0; }
.k-content [class~="text-[9px]"],
.k-content [class~="text-[10px]"],
.k-content [class~="text-[11px]"] { font-size: 0.75rem; line-height: 1rem; }
.k-content [class~="font-black"] { font-weight: 800; }

/* Page titles */
.k-content h1:not([class^="k-"]):not([class*=" k-"]) { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--k-ink); }
.k-content h1:not([class^="k-"]):not([class*=" k-"]) + p { color: var(--k-muted); }

/* Cards and panels */
.k-content [class~="rounded-3xl"],
.k-content [class~="rounded-[2rem]"],
.k-content [class~="rounded-[2.5rem]"],
.k-content [class~="rounded-[1.75rem]"],
.k-content [class~="rounded-[1.5rem]"] { border-radius: 1.5rem; }
.k-content [class~="rounded-2xl"] { border-radius: 1.25rem; }
.k-content [class~="bg-white"][class~="shadow-sm"],
.k-content [class~="bg-white"][class~="shadow"],
.k-content [class~="bg-white"][class~="shadow-md"],
.k-content [class~="bg-white"][class~="shadow-lg"],
.k-content [class~="bg-white"][class~="shadow-xl"] { box-shadow: none; border: 1px solid var(--k-line); }
.k-content [class~="bg-white"][class~="border"],
.k-content [class~="border-gray-50"],
.k-content [class~="border-gray-100"],
.k-content [class~="border-slate-100"] { border-color: var(--k-line); }
.k-content [class~="border-gray-200"],
.k-content [class~="border-slate-200"],
.k-content [class~="border-gray-300"] { border-color: var(--k-line-strong); }
.k-content [class~="divide-gray-50"] > * + *,
.k-content [class~="divide-gray-100"] > * + *,
.k-content [class~="divide-gray-200"] > * + * { border-color: var(--k-line); }

/* Tables */
.k-content table { font-variant-numeric: tabular-nums; }
.k-content thead th { font-size: 0.75rem; font-weight: 700; color: var(--k-muted); text-transform: none; letter-spacing: 0; background: var(--k-surface-2); }
.k-content tbody tr { transition: background-color 120ms ease; }
.k-content tbody tr:hover { background: var(--k-surface-2); }
.k-content td { color: var(--k-ink-2); }

/* Form fields */
.k-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.k-input),
.k-content select:not(.k-input),
.k-content textarea:not(.k-input) {
    border-radius: 0.875rem; border-color: var(--k-line-strong); background-color: var(--k-surface); color: var(--k-ink); font-size: 0.9375rem;
}
.k-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not(.k-input),
.k-content select:not(.k-input) { min-height: 2.75rem; }
.k-content input:focus, .k-content select:focus, .k-content textarea:focus {
    outline: none; border-color: var(--k-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-primary) 18%, transparent);
}
.k-content input::placeholder, .k-content textarea::placeholder { color: var(--k-faint); }
.k-content label { color: var(--k-ink-2); }
.k-content input[type="checkbox"], .k-content input[type="radio"] { accent-color: var(--k-primary); }

/* Buttons built from utilities: same height and radius as .k-btn */
.k-content button[class~="bg-brand-600"],
.k-content a[class~="bg-brand-600"],
.k-content button[class~="bg-brand-500"],
.k-content a[class~="bg-brand-500"],
.k-content button[class~="bg-gray-900"],
.k-content a[class~="bg-gray-900"] { border-radius: 0.875rem; box-shadow: none; }
.k-content button[class~="bg-brand-600"],
.k-content a[class~="bg-brand-600"],
.k-content button[class~="bg-brand-500"],
.k-content a[class~="bg-brand-500"] { background-color: var(--k-primary); }
.k-content button[class~="bg-brand-600"]:hover,
.k-content a[class~="bg-brand-600"]:hover { background-color: var(--k-primary-ink); }
html.dark .k-content button[class~="bg-brand-600"]:hover, html.dark .k-content a[class~="bg-brand-600"]:hover { background-color: #7466e8; }

/* Modals: soft night backdrop, one rounded sheet */
.k-content [class~="fixed"][class~="inset-0"][class~="bg-black/50"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-gray-900/50"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-gray-900/60"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-black/40"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-black/60"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-gray-500/75"],
.k-content [class~="fixed"][class~="inset-0"][class~="bg-gray-500"] { background-color: rgba(23, 20, 46, 0.55); }
.k-content [class~="fixed"] [class~="bg-white"][class~="shadow-xl"],
.k-content [class~="fixed"] [class~="bg-white"][class~="shadow-2xl"] { box-shadow: 0 24px 64px rgba(23, 20, 46, 0.28); border-radius: 1.5rem; }

/* Status colours: keep their meaning, use the 2.0 tones */
.k-content [class~="bg-green-50"], .k-content [class~="bg-emerald-50"] { background-color: var(--k-ok-soft); }
.k-content [class~="text-green-600"], .k-content [class~="text-green-700"], .k-content [class~="text-emerald-600"], .k-content [class~="text-emerald-700"] { color: var(--k-ok); }
.k-content [class~="bg-red-50"], .k-content [class~="bg-rose-50"] { background-color: var(--k-urgent-soft); }
.k-content [class~="text-red-600"], .k-content [class~="text-red-700"], .k-content [class~="text-red-800"], .k-content [class~="text-rose-600"], .k-content [class~="text-rose-700"] { color: var(--k-urgent); }
.k-content [class~="bg-amber-50"], .k-content [class~="bg-yellow-50"], .k-content [class~="bg-orange-50"] { background-color: var(--k-wait-soft); }
.k-content [class~="text-amber-600"], .k-content [class~="text-amber-700"], .k-content [class~="text-yellow-700"], .k-content [class~="text-orange-600"], .k-content [class~="text-orange-700"] { color: var(--k-wait); }
.k-content [class~="border-green-200"], .k-content [class~="border-emerald-200"], .k-content [class~="border-green-100"] { border-color: color-mix(in srgb, var(--k-ok) 30%, transparent); }
.k-content [class~="border-red-200"], .k-content [class~="border-red-100"], .k-content [class~="border-rose-200"] { border-color: color-mix(in srgb, var(--k-urgent) 30%, transparent); }
.k-content [class~="border-amber-200"], .k-content [class~="border-yellow-200"], .k-content [class~="border-amber-100"] { border-color: color-mix(in srgb, var(--k-wait) 30%, transparent); }

/* Dark: translucent tint utilities (bg-*-50/NN) follow the same tokens as their solid versions. */
html.dark [class^="bg-gray-50/"],
html.dark [class*=" bg-gray-50/"],
html.dark [class^="bg-slate-50/"],
html.dark [class*=" bg-slate-50/"] { background-color: var(--k-surface-2); }
html.dark [class^="bg-brand-50/"],
html.dark [class*=" bg-brand-50/"],
html.dark [class^="bg-brand-100/"],
html.dark [class*=" bg-brand-100/"],
html.dark [class^="bg-indigo-50/"],
html.dark [class*=" bg-indigo-50/"],
html.dark [class^="bg-indigo-100/"],
html.dark [class*=" bg-indigo-100/"],
html.dark [class^="bg-blue-50/"],
html.dark [class*=" bg-blue-50/"],
html.dark [class^="bg-purple-50/"],
html.dark [class*=" bg-purple-50/"],
html.dark [class^="bg-violet-50/"],
html.dark [class*=" bg-violet-50/"],
html.dark [class^="bg-sky-50/"],
html.dark [class*=" bg-sky-50/"] { background-color: var(--k-primary-soft); }
html.dark [class^="bg-red-50/"],
html.dark [class*=" bg-red-50/"],
html.dark [class^="bg-red-100/"],
html.dark [class*=" bg-red-100/"],
html.dark [class^="bg-rose-50/"],
html.dark [class*=" bg-rose-50/"] { background-color: var(--k-urgent-soft); }
html.dark [class^="bg-amber-50/"],
html.dark [class*=" bg-amber-50/"],
html.dark [class^="bg-orange-50/"],
html.dark [class*=" bg-orange-50/"],
html.dark [class^="bg-yellow-50/"],
html.dark [class*=" bg-yellow-50/"] { background-color: var(--k-wait-soft); }
html.dark [class^="bg-green-50/"],
html.dark [class*=" bg-green-50/"],
html.dark [class^="bg-green-100/"],
html.dark [class*=" bg-green-100/"],
html.dark [class^="bg-emerald-50/"],
html.dark [class*=" bg-emerald-50/"] { background-color: var(--k-ok-soft); }

/* Student cards: soft band + initial instead of empty photo boxes */
.k-student-photo{background:linear-gradient(135deg,var(--k-primary-soft),var(--k-surface-2))}
.k-student-initial{display:inline-flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:1.25rem;background:var(--k-primary);color:#fff;font-weight:800;font-size:1.5rem}

/* ---------- 2.0 page kit (shared by every panel page) ----------
 * Page anatomy: .k-page > .k-page-head (eyebrow, .k-title, .k-subtitle, .k-actions) then content.
 * Narrow reading pages (feed, chat, forms) add .k-page-narrow.
 */
.k-page-narrow { max-width: 52rem; }
.k-page-wide { max-width: 96rem; }
.k-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--k-muted); margin-bottom: 0.25rem; }
.k-back:hover { color: var(--k-ink); }
.k-section-title { font-size: 1.0625rem; font-weight: 800; color: var(--k-ink); letter-spacing: -0.01em; }
.k-section-sub { font-size: 0.875rem; color: var(--k-muted); }
.k-muted { color: var(--k-muted); }
.k-faint { color: var(--k-faint); }
.k-ink { color: var(--k-ink); }
.k-card-flush { padding: 0; overflow: hidden; }
.k-card-flush > .k-card-head { padding: 1.125rem 1.25rem 0; }
.k-card-foot { border-top: 1px solid var(--k-line); padding: 0.875rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.k-divider { height: 1px; background: var(--k-line); border: 0; margin: 0; }

/* Stat tiles in a responsive row */
.k-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.k-stat { display: flex; align-items: center; gap: 0.875rem; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.25rem; padding: 1rem 1.125rem; min-width: 0; }
a.k-stat:hover { border-color: var(--k-line-strong); }
.k-stat .k-tile-icon { flex: none; }
.k-stat-value { display: block; font-size: 1.5rem; font-weight: 800; color: var(--k-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.k-stat-label { display: block; font-size: 0.8125rem; color: var(--k-muted); }

/* Toolbar: search, filters and actions above a list */
.k-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.k-toolbar > .k-grow { flex: 1 1 14rem; min-width: 0; }
.k-toolbar .k-input { min-height: 2.5rem; }
.k-search-field { position: relative; }
.k-search-field > i { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--k-faint); pointer-events: none; }
.k-search-field > .k-input { padding-left: 2.5rem; }

/* Tabs: segmented control for switching views inside a page */
.k-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 1rem; background: var(--k-surface-3); max-width: 100%; }
.k-tab { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.75rem; padding: 0.4375rem 0.875rem; font-size: 0.875rem; font-weight: 700; color: var(--k-muted); white-space: nowrap; }
.k-tab:hover { color: var(--k-ink); }
.k-tab.is-active, .k-tab[aria-selected="true"] { background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow); }
.k-tab b { font-variant-numeric: tabular-nums; color: var(--k-faint); font-weight: 700; }

/* Tables */
.k-table-wrap { overflow-x: auto; }
.k-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.k-table th { text-align: left; font-size: 0.75rem; font-weight: 700; color: var(--k-muted); padding: 0.75rem 1.25rem; background: var(--k-surface-2); white-space: nowrap; border-bottom: 1px solid var(--k-line); }
.k-table td { padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--k-line); color: var(--k-ink-2); vertical-align: middle; }
.k-table tbody tr:last-child td { border-bottom: 0; }
.k-table tbody tr:hover { background: var(--k-surface-2); }
.k-table .k-num-cell, .k-table th.k-num-cell { text-align: right; }
.k-table .k-strong { color: var(--k-ink); font-weight: 700; }
.k-table td.k-empty-cell { text-align: center; color: var(--k-muted); padding: 2.5rem 1.25rem; }
.k-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.25rem; }

/* Person cell: avatar + name + meta */
.k-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.k-person-name { font-weight: 700; color: var(--k-ink); line-height: 1.25; }
.k-person-meta { font-size: 0.8125rem; color: var(--k-muted); }
.k-avatar-sm { width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
.k-avatar-lg { width: 4rem; height: 4rem; font-size: 1.5rem; border-radius: 1.25rem; }
.k-avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-avatar-primary { background: var(--k-primary-soft); color: var(--k-primary); }
.k-avatar-coral { background: var(--k-coral-soft); color: var(--k-coral); }
.k-avatar-ok { background: var(--k-ok-soft); color: var(--k-ok); }

/* Forms */
.k-form { display: grid; gap: 1rem; }
.k-form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .k-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-form-grid > .k-span-2 { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .k-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.k-field { display: grid; gap: 0.375rem; min-width: 0; }
.k-label { font-size: 0.875rem; font-weight: 700; color: var(--k-ink); }
.k-label b { color: var(--k-coral); }
.k-help { font-size: 0.8125rem; color: var(--k-muted); }
textarea.k-input { min-height: 6rem; padding-top: 0.625rem; line-height: 1.5; resize: vertical; }
select.k-input { padding-right: 2.25rem; }
.k-input:disabled, .k-input[readonly] { background: var(--k-surface-2); color: var(--k-muted); }
.k-check { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; color: var(--k-ink-2); cursor: pointer; }
.k-check input { margin-top: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 0.375rem; accent-color: var(--k-primary); flex: none; }
.k-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--k-line); }
.k-switch-row:last-child { border-bottom: 0; }
.k-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
.k-dropzone { display: grid; place-items: center; gap: 0.375rem; text-align: center; border: 1.5px dashed var(--k-line-strong); border-radius: 1.25rem; background: var(--k-surface-2); padding: 1.5rem; color: var(--k-muted); font-size: 0.875rem; cursor: pointer; }
.k-dropzone:hover { border-color: var(--k-primary); color: var(--k-primary); }
.k-dropzone i { font-size: 1.75rem; color: var(--k-primary); }

/* Buttons: extra tones */
.k-btn-danger { background: var(--k-urgent); border-color: var(--k-urgent); color: #fff; }
.k-btn-danger:hover { background: #cf3a3f; border-color: #cf3a3f; }
.k-btn-danger-soft { background: var(--k-urgent-soft); border-color: transparent; color: var(--k-urgent); }
.k-btn-danger-soft:hover { background: color-mix(in srgb, var(--k-urgent) 20%, transparent); }
.k-btn-ok { background: var(--k-ok); border-color: var(--k-ok); color: #fff; }
.k-btn-ok:hover { filter: brightness(0.95); }
.k-btn-ghost { background: transparent; border-color: transparent; color: var(--k-muted); }
.k-btn-ghost:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-btn-soft:hover { background: color-mix(in srgb, var(--k-primary) 20%, transparent); }
.k-btn-block { width: 100%; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.k-btn-icon { width: 2.5rem; padding: 0; }
.k-btn-sm.k-btn-icon { width: 2.125rem; }

/* Pills: neutral and coral */
.k-pill-neutral { background: var(--k-surface-3); color: var(--k-muted); }
.k-pill-coral { background: var(--k-coral-soft); color: var(--k-coral); }
.k-count { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.375rem; border-radius: 9999px; background: var(--k-coral); color: #fff; font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Alerts: warning and info tones */
.k-alert-wait { background: var(--k-wait-soft); color: var(--k-wait); }
.k-alert-info { background: var(--k-primary-soft); color: var(--k-primary-ink); }
.k-alert { display: flex; align-items: flex-start; gap: 0.5rem; }
.k-alert > i { font-size: 1.125rem; flex: none; margin-top: 0.0625rem; }

/* Empty state inside a card or table */
.k-empty-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--k-primary-soft); }
.k-empty .k-empty-icon i { font-size: 1.75rem; color: var(--k-primary); }
.k-empty p { max-width: 28rem; font-size: 0.9375rem; }

/* Key-value list for detail pages */
.k-kv { display: grid; gap: 0; }
.k-kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--k-line); font-size: 0.875rem; }
.k-kv > div:last-child { border-bottom: 0; }
.k-kv dt { color: var(--k-muted); }
.k-kv dd { color: var(--k-ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Modal: night backdrop, one rounded sheet. Use with Alpine x-show on .k-modal. */
.k-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(23, 20, 46, 0.55); overflow-y: auto; }
@media (min-width: 640px) { .k-modal { align-items: center; padding: 1.5rem; } }
.k-modal-sheet { position: relative; width: 100%; max-width: 32rem; max-height: 100%; overflow-y: auto; background: var(--k-surface); color: var(--k-ink-2); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 24px 64px rgba(23, 20, 46, 0.28); }
@media (min-width: 640px) { .k-modal-sheet { border-radius: 1.5rem; max-height: calc(100vh - 3rem); } }
.k-modal-lg { max-width: 48rem; }
.k-modal-xl { max-width: 64rem; }
.k-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 0; }
.k-modal-title { font-size: 1.125rem; font-weight: 800; color: var(--k-ink); }
.k-modal-sub { font-size: 0.875rem; color: var(--k-muted); margin-top: 0.125rem; }
.k-modal-body { padding: 1.25rem 1.5rem; display: grid; gap: 1rem; }
.k-modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--k-line); }

/* Pagination */
.k-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--k-line); }
.k-pager-info { font-size: 0.8125rem; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.k-pager-pages { display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; max-width: 100%; }
.k-pager-pages a, .k-pager-pages span { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.625rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.k-pager-pages a:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-pager-pages a[aria-current="page"] { background: var(--k-primary-soft); color: var(--k-primary-ink); }
.k-pager-pages span { color: var(--k-faint); }

/* ---------- Feed (Okul akışı / Anılar) ---------- */
.k-feed { display: grid; gap: 1rem; }
.k-post { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.5rem; overflow: hidden; }
.k-post.is-pinned { border-color: color-mix(in srgb, var(--k-sun) 70%, transparent); }
.k-post-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; }
.k-post-title { font-size: 0.9375rem; font-weight: 800; color: var(--k-ink); line-height: 1.25; }
.k-post-meta { font-size: 0.8125rem; color: var(--k-muted); }
.k-post-text { padding: 0 1.25rem 1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--k-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.k-post-media { display: grid; gap: 3px; background: var(--k-surface-3); }
.k-post-media img { width: 100%; max-height: 36rem; object-fit: cover; display: block; }
.k-post-media video { width: 100%; max-height: 36rem; background: #000; display: block; }
.k-post-bar { display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--k-line); }
.k-post-action { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--k-muted); }
.k-post-action:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-post-action i { font-size: 1.25rem; }
.k-post-action.is-on { color: var(--k-coral); }
.k-comments { display: grid; gap: 0.625rem; padding: 0.25rem 1.25rem 1rem; }
.k-comment { display: flex; gap: 0.625rem; }
.k-comment-body { flex: 1; min-width: 0; background: var(--k-surface-2); border-radius: 1rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; color: var(--k-ink-2); }
.k-comment-body b { color: var(--k-ink); font-weight: 700; margin-right: 0.375rem; }
.k-comment-body time { float: right; font-size: 0.75rem; color: var(--k-faint); margin-left: 0.5rem; }
.k-composer-row { display: flex; align-items: center; gap: 0.5rem; }
.k-composer-row .k-input { border-radius: 9999px; min-height: 2.5rem; }

/* ---------- Messages (list + chat) ---------- */
.k-chat-layout { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .k-chat-layout { grid-template-columns: 22rem minmax(0, 1fr); align-items: start; } }
.k-chat-list { display: grid; }
.k-chat-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--k-line); min-width: 0; }
.k-chat-row:last-child { border-bottom: 0; }
.k-chat-row:hover { background: var(--k-surface-2); }
.k-chat-row.is-active { background: var(--k-primary-soft); }
.k-chat-row-main { flex: 1; min-width: 0; }
.k-chat-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.k-chat-row-name { font-size: 0.9375rem; font-weight: 700; color: var(--k-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-chat-row-time { font-size: 0.75rem; color: var(--k-faint); flex: none; font-variant-numeric: tabular-nums; }
.k-chat-row-preview { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--k-muted); }
.k-chat-row-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-chat-row.is-unread .k-chat-row-preview span { color: var(--k-ink); font-weight: 600; }
.k-chat { display: flex; flex-direction: column; height: calc(100vh - 11rem); min-height: 28rem; padding: 0; overflow: hidden; }
.k-chat-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--k-line); background: var(--k-surface); }
.k-chat-title { font-size: 1rem; font-weight: 800; color: var(--k-ink); line-height: 1.25; }
.k-chat-sub { font-size: 0.8125rem; color: var(--k-ok); font-weight: 600; }
.k-chat-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; background: var(--k-bg); }
.k-day-chip { align-self: center; border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-muted); border-radius: 9999px; padding: 0.25rem 0.875rem; font-size: 0.75rem; font-weight: 700; margin: 0.375rem 0; }
.k-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: min(36rem, 80%); }
.k-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.k-msg-sender { font-size: 0.75rem; font-weight: 700; color: var(--k-muted); margin: 0 0.5rem 0.125rem; }
.k-bubble { display: grid; gap: 0.5rem; border-radius: 1.25rem; border-top-left-radius: 0.375rem; padding: 0.625rem 0.875rem; background: var(--k-surface); border: 1px solid var(--k-line); color: var(--k-ink); font-size: 0.9375rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.k-msg.is-mine .k-bubble { background: var(--k-primary); border-color: var(--k-primary); color: #fff; border-top-left-radius: 1.25rem; border-top-right-radius: 0.375rem; }
.k-bubble img { max-height: 18rem; border-radius: 0.875rem; }
.k-bubble audio { max-width: 100%; }
.k-bubble-file { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.5rem 0.75rem; background: var(--k-surface-2); color: var(--k-ink); font-size: 0.875rem; font-weight: 600; white-space: normal; }
.k-msg.is-mine .k-bubble-file { background: rgba(255, 255, 255, 0.16); color: #fff; }
.k-msg-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.1875rem 0.5rem 0; font-size: 0.75rem; color: var(--k-faint); font-variant-numeric: tabular-nums; }
.k-msg-meta button { color: var(--k-faint); font-weight: 600; opacity: 0; transition: opacity 120ms ease; }
.k-msg:hover .k-msg-meta button, .k-msg-meta button:focus-visible { opacity: 1; }
.k-msg-meta button:hover { color: var(--k-urgent); }
.k-chat-foot { border-top: 1px solid var(--k-line); padding: 0.75rem 1rem; background: var(--k-surface); display: grid; gap: 0.5rem; }
.k-chat-input { display: flex; align-items: flex-end; gap: 0.5rem; }
.k-chat-input textarea { flex: 1; min-height: 2.75rem; max-height: 10rem; resize: none; border-radius: 1.375rem; background: var(--k-surface-2); border: 1px solid var(--k-line); padding: 0.625rem 1rem; font-size: 0.9375rem; color: var(--k-ink); line-height: 1.5; }
.k-chat-input textarea:focus { outline: none; border-color: var(--k-primary); background: var(--k-surface); }
.k-chat-send { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: var(--k-primary); color: #fff; flex: none; font-size: 1.25rem; }
.k-chat-send:hover { background: var(--k-primary-ink); }
.k-chat-tool { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; color: var(--k-muted); flex: none; font-size: 1.25rem; }
.k-chat-tool:hover { background: var(--k-surface-3); color: var(--k-ink); }
.k-chat-tool.is-recording { background: var(--k-urgent-soft); color: var(--k-urgent); }
.k-chat-attachment { display: flex; align-items: center; gap: 0.5rem; border-radius: 0.875rem; background: var(--k-primary-soft); color: var(--k-primary-ink); padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600; }
.k-quick { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.k-quick::-webkit-scrollbar { display: none; }
.k-quick button { flex: none; border-radius: 9999px; background: var(--k-primary-soft); color: var(--k-primary-ink); padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 700; }
.k-quick button:hover { background: color-mix(in srgb, var(--k-primary) 22%, transparent); }
@media (max-width: 1023px) { .k-chat-layout > .k-chat-aside.is-secondary { display: none; } }

/* Drawer-style details (e.g. group settings) */
.k-details { border: 1px solid var(--k-line); border-radius: 1.25rem; background: var(--k-surface); }
.k-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; font-weight: 700; color: var(--k-ink); }
.k-details > summary::-webkit-details-marker { display: none; }
.k-details > summary::after { content: "\203A"; font-size: 1.25rem; color: var(--k-faint); transition: transform 150ms ease; }
.k-details[open] > summary::after { transform: rotate(90deg); }
.k-details > .k-details-body { padding: 0 1.25rem 1.25rem; display: grid; gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
    .k-msg-meta button, .k-details > summary::after { transition: none; }
}

/* Responsive helpers that win over component display values */
@media (min-width: 1024px) { .k-mobile-only { display: none !important; } }
@media (max-width: 1023px) { .k-desktop-only { display: none !important; } }
@media (min-width: 640px) { .k-phone-only { display: none !important; } }
@media (max-width: 639px) { .k-tablet-up { display: none !important; } }
.k-sidebar-foot > * { min-width: 0; }
.k-user > .flex-1 { min-width: 0; }

/* Ghost (impersonation) bar: always visible on top of the shell */
.k-ghost-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 1rem; background: var(--k-coral); color: #fff; font-size: 0.875rem; }
.k-ghost-bar .k-btn { background: #fff; border-color: #fff; color: var(--k-ink); }
html.dark .k-ghost-bar .k-btn { color: #17142E; }
/* Grid children may not grow wider than the page (wide tables scroll inside their card). */
.k-page > * { min-width: 0; }
/* Sticky action columns get a soft edge so scrolled cells read as passing underneath. */
.k-table .sticky.right-0 { box-shadow: -10px 0 12px -12px rgba(15, 23, 42, 0.35); }