/* =====================================================================
   COMPONENTS — built only from the variables in tokens.css.
   Do not put raw colors / sizes here; add a token instead.
   Every component is shown on the /styleguide page.
   ===================================================================== */

html { font-size: var(--font-size-root); }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--text); }
a { text-decoration: none; }
.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }
.text-muted { color: var(--muted) !important; }
.text-brand { color: var(--brand) !important; }
.fw-600 { font-weight: var(--fw-semibold); }
.small-caps { font-size: .78rem; letter-spacing: .02em; color: var(--muted); font-weight: var(--fw-semibold); }
.min-w-0 { min-width: 0; }
[x-cloak] { display: none !important; }

/* Width helpers for forms */
.w-form-sm { max-width: 480px; }
.w-form    { max-width: 760px; }
.w-form-lg { max-width: 980px; }
.scroll-y  { max-height: 480px; overflow-y: auto; }

/* ------------------------------------------------------------ buttons */
.btn { font-weight: var(--fw-semibold); border-radius: var(--radius-sm); padding: .5rem 1rem; }
.btn-sm { padding: .3rem .7rem; }
.btn-lg { padding: .75rem 1.4rem; }
.btn .bi { vertical-align: -.1em; }
.btn-primary {
    --bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand-100);
    --bs-btn-hover-bg: var(--brand-50); --bs-btn-hover-color: var(--brand); --bs-btn-hover-border-color: var(--brand-100);
    --bs-btn-active-bg: var(--brand-100); --bs-btn-active-color: var(--brand); --bs-btn-active-border-color: var(--brand-100);
}
.btn-light {
    --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--brand-50); --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-bg: var(--brand-100);
}
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; border: 0; }
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: #fff; }
.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; }

/* ------------------------------------------------------------ layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
    --bs-offcanvas-width: var(--sidebar-w);
    --bs-offcanvas-bg: var(--sidebar-bg);
    --bs-offcanvas-color: var(--sidebar-fg-active);
    width: var(--sidebar-w);
    /* Bootstrap's .offcanvas-lg forces a transparent background on desktop */
    background: var(--sidebar-bg) !important;
    color: var(--sidebar-fg-active);
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; height: 100%; }
.sidebar-brand {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-hover);
    color: var(--sidebar-fg-active);
}
.sidebar-brand:hover { color: var(--sidebar-fg-active); }
.sidebar-brand img { width: 44px; height: auto; }
.sidebar-brand .name { font-weight: var(--fw-bold); font-size: 1.05rem; line-height: 1.3; }
.sidebar-brand .sub { font-size: .72rem; opacity: .65; letter-spacing: .08em; direction: ltr; text-align: right; }
.sidebar-year { padding: 1rem 1.25rem 0; }
.sidebar-year .form-select { background-color: var(--sidebar-hover); color: var(--sidebar-fg-active); border-color: var(--sidebar-active); }
.sidebar-year .form-select option { color: var(--text); }

.nav-section { padding: 1rem .75rem 0; }
.nav-section-title { font-size: .72rem; font-weight: var(--fw-semibold); color: var(--sidebar-fg); opacity: .6; padding: 0 .75rem .4rem; }
.side-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-fg);
    font-weight: var(--fw-medium);
    transition: background .15s, color .15s;
}
.side-link .bi { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.side-link:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-active); }
.side-link.active { background: var(--sidebar-active); color: var(--sidebar-fg-active); font-weight: var(--fw-semibold); }
.side-link.active::before {
    content: ''; width: 3px; height: 1.2rem; background: var(--sidebar-fg-active); border-radius: 3px;
    margin-inline-start: -.75rem; margin-inline-end: calc(.75rem - 3px);
}
.side-link.disabled { opacity: .4; pointer-events: none; }
.side-link .soon { margin-inline-start: auto; font-size: .65rem; background: var(--sidebar-active); padding: .1rem .4rem; border-radius: 4px; }
.sidebar-footer { margin-top: auto; padding: 1rem 1.25rem; font-size: .75rem; color: var(--sidebar-fg); opacity: .6; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .75rem var(--content-pad);
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1020;
}
.topbar .page-title { font-size: 1.15rem; font-weight: var(--fw-bold); margin: 0; min-width: 0; transition: opacity .2s, transform .2s; }
/* The page's own <h1> is the title; the topbar repeats it only after it scrolls away */
.topbar.title-on-scroll:not(.show-title) .page-title { opacity: 0; transform: translateY(4px); pointer-events: none; }
.search-trigger {
    display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .75rem; min-width: 38px; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font-size: .87rem;
}
.search-trigger:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand); }
@media (min-width: 768px) { .search-trigger { min-width: 240px; justify-content: flex-start; } .search-trigger kbd { margin-inline-start: auto; } }
kbd { background: var(--surface); color: var(--muted-strong); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: .05rem .35rem; font-size: .72rem; font-family: inherit; }

/* Quick search palette */
.qs-dialog { max-width: 600px; margin-top: 8vh; }
.qs-input { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.qs-input > .bi { color: var(--muted); font-size: 1.1rem; }
.qs-input input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; background: transparent; color: var(--text); min-width: 0; }
.qs-input input::-webkit-search-cancel-button { display: none; }
.qs-group { padding: .35rem 0; }
.qs-group + .qs-group { border-top: 1px solid var(--border); }
.qs-label { font-size: .72rem; font-weight: var(--fw-bold); color: var(--muted); padding: .35rem 1rem; }
.qs-item { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; color: var(--text); }
.qs-item > .bi { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex-shrink: 0; }
.qs-item .t { font-weight: var(--fw-semibold); }
.qs-item .s { font-size: .8rem; color: var(--muted); }
.qs-item:hover, .qs-item.active { background: var(--brand-50); color: var(--text); }
.qs-item.active { box-shadow: inset -3px 0 0 var(--brand); }
.qs-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.qs-foot { gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted); }
.qs-foot kbd { margin-inline-end: .2rem; }
.min-w-0 { min-width: 0; }

/* Mobile bottom navigation */
.bottom-nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(11, 37, 96, .06);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    padding: .45rem .25rem .4rem; min-height: 58px; color: var(--muted); font-size: .7rem; font-weight: var(--fw-semibold);
}
.bottom-nav a > .bi { font-size: 1.25rem; line-height: 1; }
.bottom-nav a span { max-width: 100%; }
.bottom-nav a.active { color: var(--brand); }
.bottom-nav .fab {
    width: 44px; height: 44px; margin-top: -20px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--brand-contrast); font-size: 1.2rem; box-shadow: var(--shadow-lg); border: 3px solid var(--surface);
}
.bottom-nav a.primary { color: var(--brand); }
@media (max-width: 991.98px) {
    .content { padding-bottom: calc(var(--content-pad) + 70px); }
    /* Task pages (forms, Sunday sheet, grade sheet, cashier) keep their own sticky save bar instead */
    body:has(.form-actions, .save-bar) .bottom-nav { display: none !important; }
    body:has(.form-actions, .save-bar) .content { padding-bottom: var(--content-pad); }
}
@media print { .bottom-nav { display: none !important; } }

/* Sub-navigation (settings hub) */
.sub-nav { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav a {
    display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .9rem; white-space: nowrap;
    color: var(--muted); font-weight: var(--fw-semibold); font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sub-nav a:hover { color: var(--brand); }
.sub-nav a.active { color: var(--brand); border-bottom-color: var(--brand); }
.year-switch .form-select { font-weight: var(--fw-semibold); border-color: var(--brand-100); background-color: var(--brand-50); color: var(--brand); min-width: 150px; }
.user-chip { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); }
.user-chip:hover { background: var(--brand-50); }
.content { padding: var(--content-pad); flex: 1; }
@media (max-width: 575.98px) {
    :root { --content-pad: 1rem; }
}

/* ------------------------------------------------------------ cards */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.25rem;
    font-weight: var(--fw-bold);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}
.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-header .bi { color: var(--brand-500); }
.card-body { padding: 1.25rem; }
.card-form-section .card-header { background: var(--brand-50); color: var(--brand); }
.note-box { background: var(--brand-50); border-radius: var(--radius-sm); padding: .9rem 1rem; font-size: .9rem; }

.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.4rem; margin: 0; }
.page-head .lead-sub { color: var(--muted); font-size: .9rem; margin-top: .2rem; }

/* KPI tiles */
.kpi { display: flex; flex-direction: row; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; }
/* Equal-height cards only inside grid columns (100% height outside a column stretches to the page) */
.row > * > .kpi, .row > * > .class-card { height: 100%; }
.kpi-icon {
    width: 48px; height: 48px; border-radius: var(--radius);
    display: grid; place-items: center; font-size: 1.35rem;
    background: var(--brand-50); color: var(--brand); flex-shrink: 0;
}
.kpi-icon.sm { width: 40px; height: 40px; font-size: 1rem; }
.kpi-icon.success { background: var(--success-bg); color: var(--success); }
.kpi-icon.warning { background: var(--warning-bg); color: var(--warning); }
.kpi-icon.danger  { background: var(--danger-bg);  color: var(--danger); }
.kpi-icon.info    { background: var(--info-bg);    color: var(--info); }
.kpi-value { font-size: 1.65rem; font-weight: var(--fw-bold); line-height: 1.1; }
.kpi-value.sm { font-size: 1.3rem; }
.kpi-label { color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------------------ tables */
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; border-color: var(--border); }
.table thead th {
    background: var(--brand-50); color: var(--brand);
    font-size: .8rem; font-weight: var(--fw-bold); white-space: nowrap;
    border-bottom: 1px solid var(--brand-100);
    position: sticky; top: 0; z-index: 1;
}
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--brand-50); }
.table-row-link { cursor: pointer; }
.table-responsive { border-radius: 0 0 var(--radius) var(--radius); }
.col-num { width: 3rem; color: var(--muted); }
.col-min-sm { min-width: 120px; }
.col-min-md { min-width: 180px; }
.col-min-lg { min-width: 220px; }

/* ------------------------------------------------------------ badges */
.badge-soft {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .6rem; border-radius: var(--radius-pill);
    font-size: .76rem; font-weight: var(--fw-semibold); white-space: nowrap;
}
.badge-soft.success { background: var(--success-bg); color: var(--success); }
.badge-soft.warning { background: var(--warning-bg); color: var(--warning); }
.badge-soft.danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-soft.info    { background: var(--info-bg);    color: var(--info); }
.badge-soft.neutral { background: var(--surface-muted); color: var(--muted-strong); }
.badge-soft.on-dark { background: rgba(255,255,255,.15); color: #fff; }

/* Score pill (grades out of 10) */
.score { display: inline-block; min-width: 3.2rem; text-align: center; padding: .2rem .5rem; border-radius: var(--radius-sm); font-weight: var(--fw-bold); direction: ltr; }
.score.pass { background: var(--success-bg); color: var(--success); }
.score.support { background: var(--warning-bg); color: var(--warning); }
.score.fail { background: var(--danger-bg); color: var(--danger); }
.score.none { background: var(--surface-muted); color: var(--muted); font-weight: var(--fw-normal); }

/* ------------------------------------------------------------ avatars */
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-grid; place-items: center; flex-shrink: 0;
    font-weight: var(--fw-bold); font-size: .85rem;
    background: var(--boy-bg); color: var(--boy);
    object-fit: cover; overflow: hidden;
}
.avatar.f { background: var(--girl-bg); color: var(--girl); }
.avatar-xs { width: 30px; height: 30px; font-size: .75rem; }
.avatar-md { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.6rem; }
.avatar-lg { width: 120px; height: 160px; border-radius: var(--radius); font-size: 2rem; }
.person { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.person .name { font-weight: var(--fw-semibold); color: var(--text); }
.person .meta { font-size: .8rem; color: var(--muted); }

/* ------------------------------------------------------------ forms */
.form-label { font-weight: var(--fw-semibold); font-size: .87rem; margin-bottom: .35rem; }
.form-label .req { color: var(--danger); }
.form-control, .form-select {
    border-radius: var(--radius-sm); padding: .55rem .8rem;
    border-color: var(--border-strong); background-color: var(--surface);
}
.form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.form-text { color: var(--muted); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.check-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding-block: .55rem; padding-inline: 2.4rem .75rem; margin: 0; width: 100%; cursor: pointer; }
.check-card .form-check-input { margin-inline-start: -1.6rem; }
.check-card:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.form-actions {
    position: sticky; bottom: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
    padding: .9rem 0; margin-top: 1rem;
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
    border-top: 1px solid var(--border);
}

.segmented { display: inline-flex; background: var(--brand-50); border-radius: var(--radius-sm); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented input { display: none; }
.segmented label {
    padding: .4rem .9rem; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer;
    font-weight: var(--fw-semibold); font-size: .87rem; color: var(--muted);
}
.segmented input:checked + label { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

.photo-drop {
    width: 150px; aspect-ratio: 3/4; border: 2px dashed var(--border-strong); border-radius: var(--radius);
    display: grid; place-items: center; text-align: center; cursor: pointer; overflow: hidden;
    color: var(--muted); font-size: .85rem; background: var(--brand-50); position: relative;
}
.photo-drop img { width: 100%; height: 100%; object-fit: cover; }
.photo-drop:hover { border-color: var(--brand-500); }

/* Tom Select tuned to the form style */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; border: 0; background: none; }
.ts-control { border-radius: var(--radius-sm) !important; padding: .55rem .8rem !important; border-color: var(--border-strong) !important; }
.ts-dropdown { border-radius: var(--radius-sm); font-size: .95rem; }
.ts-dropdown .option .sub { font-size: .78rem; color: var(--muted); }

/* ------------------------------------------------------------ filters */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; min-width: 140px; }
.filter-bar .search { flex: 1; min-width: 200px; position: relative; }
.filter-bar .search .form-control { width: 100%; padding-inline-start: 2.2rem; }
.filter-bar .search .bi { position: absolute; inset-inline-start: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
@media (max-width: 575.98px) {
    .filter-bar .form-select { flex: 1 1 45%; min-width: 0; }
    .filter-bar .btn { flex: 1 1 auto; }
}
.preset-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.preset {
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: var(--radius-sm);
    border: 1px dashed var(--border-strong); color: var(--muted-strong); font-size: .83rem; font-weight: var(--fw-semibold); background: var(--surface);
}
.preset:hover { border-color: var(--brand-500); color: var(--brand); }
.preset.active { border-style: solid; border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.preset .count { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius-pill); padding: 0 .45rem; font-size: .75rem; }
.advanced-filters { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem; background: var(--brand-50); border-radius: var(--radius-sm); }
.active-filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .4rem .2rem .7rem; border-radius: var(--radius-pill); background: var(--brand); color: var(--brand-contrast); font-size: .8rem; font-weight: var(--fw-semibold); }
.filter-chip:hover { color: var(--brand-contrast); background: var(--brand-700); }
.chip-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip-tabs a {
    padding: .35rem .85rem; border-radius: var(--radius-pill); font-size: .85rem; font-weight: var(--fw-semibold);
    color: var(--muted); background: var(--surface); border: 1px solid var(--border);
}
.chip-tabs a.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.chip-tabs a { white-space: nowrap; }
@media (max-width: 767.98px) {
    /* One swipeable line instead of 2–3 wrapped rows */
    .chip-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex-basis: 100%;
        margin-inline: calc(-1 * var(--content-pad)); padding-inline: var(--content-pad); padding-bottom: 2px; }
    .chip-scroll::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------ profile */
.profile-hero {
    background: var(--hero-gradient);
    color: #fff; border-radius: var(--radius); padding: 1.5rem;
    display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.profile-hero::after {
    content: ''; position: absolute; inset-inline-end: -40px; bottom: -60px;
    width: 260px; height: 260px; opacity: .07; pointer-events: none;
    background: var(--watermark) no-repeat center / contain;
}
.profile-hero > * { position: relative; z-index: 1; }
.profile-hero h1 { color: #fff; font-size: 1.6rem; margin: 0; }
.profile-hero .meta { opacity: .8; }
.profile-hero .avatar { border: 3px solid rgba(255,255,255,.25); background: rgba(255,255,255,.15); color: #fff; }
.profile-hero .badge-soft { background: rgba(255,255,255,.15); color: #fff; }

.dl-grid { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .1rem 1rem; margin: 0; }
.dl-grid dt { color: var(--muted); font-weight: var(--fw-medium); font-size: .88rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.dl-grid dd { margin: 0; padding: .5rem 0; font-weight: var(--fw-semibold); border-bottom: 1px dashed var(--border); }
.dl-grid dt:last-of-type, .dl-grid dd:last-of-type { border-bottom: 0; }

.nav-tabs-clean { border-bottom: 1px solid var(--border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-clean .nav-link {
    border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: var(--fw-semibold);
    padding: .75rem 1rem; border-radius: 0; white-space: nowrap;
}
.nav-tabs-clean .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; }

/* ------------------------------------------------------------ empty / soon */
.empty, .coming-soon { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.coming-soon { padding: 2.5rem 1rem; }
.empty .bi, .coming-soon .bi { font-size: 2.4rem; color: var(--brand-100); display: block; margin-bottom: .6rem; }
.empty h3 { font-size: 1.05rem; color: var(--text); }

/* ------------------------------------------------------------ class cards */
.class-card { transition: transform .15s, box-shadow .15s; }
.class-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.class-card .level { font-size: .78rem; color: var(--muted); font-weight: var(--fw-semibold); }
.class-card .cname { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--brand); }
.progress-thin { height: 6px; border-radius: 6px; background: var(--brand-50); }
.progress-thin .progress-bar { background: var(--brand-500); border-radius: 6px; }
.progress-thin.success .progress-bar { background: var(--success); }

/* ------------------------------------------------------------ alerts */
.alert { border: 0; border-radius: var(--radius-sm); font-weight: var(--fw-medium); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger); }
.alert-warning { background: var(--warning-bg); color: var(--warning); }
.alert-info    { background: var(--info-bg);    color: var(--info); }

.credentials-card { border: 2px solid var(--success); background: var(--success-bg); }
.credentials-card code { font-size: 1.05rem; color: var(--text); background: var(--surface); padding: .2rem .5rem; border-radius: 6px; }

/* ======================================================================
   HOME (admin dashboard)
   ====================================================================== */
.home-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.home-head h1 { font-size: 1.6rem; margin: .15rem 0 0; }
.home-date { color: var(--muted); font-size: .88rem; font-weight: var(--fw-medium); }

.stat-tile { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .15rem; }
.stat-tile .top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stat-tile .label { color: var(--muted); font-size: .85rem; font-weight: var(--fw-semibold); }
.stat-tile .value { font-size: 2rem; font-weight: var(--fw-bold); line-height: 1.15; margin-top: .25rem; }
.stat-tile .sub { color: var(--muted); font-size: .8rem; }
@media (max-width: 575.98px) { .stat-tile .value { font-size: 1.6rem; } }

.attn-item { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; }

.day-list { display: flex; flex-direction: column; }
.day-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 118px 190px 16px; gap: 1rem; align-items: center;
    padding: .8rem 1.25rem; border-bottom: 1px solid var(--border); color: var(--text);
}
.day-row:hover { background: var(--brand-50); color: var(--text); }
.day-row:last-child { border-bottom: 0; }
@media (max-width: 767.98px) {
    .day-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .75rem; }
    .day-row .bar { grid-column: 1 / -1; }
    .day-row .go { display: none; }
}

/* ======================================================================
   PHASE 2 — Sunday sheet (attendance + follow-up) and grade sheet
   ====================================================================== */

/* Day picker strip */
.day-strip { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; }
.day-chip {
    flex-shrink: 0; text-align: center; min-width: 64px;
    padding: .45rem .6rem; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    font-size: .8rem; line-height: 1.25;
}
.day-chip .d { font-size: 1.05rem; font-weight: var(--fw-bold); display: block; }
.day-chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--border-strong); }
.day-chip.done .dot { background: var(--success); }
.day-chip.cancelled .dot, .day-chip.holiday .dot { background: var(--warning); }
.day-chip.holiday { opacity: .6; }
.day-chip.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.day-chip.active .dot { background: var(--brand-contrast); }

.legend { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--border-strong); margin-inline-start: .4rem; }
.legend-dot.done { background: var(--success); }
.legend-dot.warn { background: var(--warning); }

/* One student row in the Sunday sheet */
.att-row { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.att-row:last-child { border-bottom: 0; }
.att-row.is-absent { background: color-mix(in srgb, var(--absent-bg) 45%, transparent); }
.att-row.is-late   { background: color-mix(in srgb, var(--late-bg) 45%, transparent); }
.att-main { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.att-main .person { flex: 1 1 200px; }

/* Present / absent / late toggle */
.att-toggle { display: inline-flex; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); }
.att-toggle input { display: none; }
.att-toggle label { padding: .5rem .85rem; cursor: pointer; font-weight: var(--fw-semibold); font-size: .87rem; color: var(--muted); user-select: none; }
.att-toggle label + input + label { border-inline-start: 1px solid var(--border-strong); }
.att-toggle input.present:checked + label { background: var(--present); color: #fff; }
.att-toggle input.absent:checked + label  { background: var(--absent);  color: #fff; }
.att-toggle input.late:checked + label    { background: var(--late);    color: #fff; }
@media (max-width: 575.98px) {
    .att-toggle { width: 100%; }
    .att-toggle label { flex: 1; text-align: center; padding: .6rem .5rem; }
}

/* Follow-up chips (checkbox toggles) */
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none;
    padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .8rem; font-weight: var(--fw-semibold);
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.chip input:checked + span { border-color: currentColor; }
.chip.homework   input:checked + span { background: var(--warning-bg); color: var(--warning); }
.chip.disruption input:checked + span { background: var(--danger-bg);  color: var(--danger); }
.chip.positive   input:checked + span { background: var(--success-bg); color: var(--success); }
.chip.note       input:checked + span { background: var(--info-bg);    color: var(--info); }
.chip.justified  input:checked + span { background: var(--surface-muted); color: var(--muted-strong); }
.chip input:focus-visible + span { box-shadow: var(--focus-ring); }
.att-extra { margin-top: .6rem; display: grid; gap: .5rem; }

/* Sticky save bar with live counters */
.save-bar {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: .75rem 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    border-radius: 0 0 var(--radius) var(--radius);
}
.counter { display: inline-flex; align-items: center; gap: .35rem; font-weight: var(--fw-semibold); font-size: .87rem; }
.counter i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.counter.present i { background: var(--present); }
.counter.absent i  { background: var(--absent); }
.counter.late i    { background: var(--late); }

/* Grade sheet (inputs) */
.grade-input { direction: ltr; text-align: center; font-weight: var(--fw-bold); max-width: 96px; }

/* Timeline (student follow-up log) */
.log-item { display: flex; gap: .9rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); }
.log-item:last-child { border-bottom: 0; }
.log-date { min-width: 76px; text-align: center; font-weight: var(--fw-bold); color: var(--brand); font-size: .85rem; }
.log-date small { display: block; color: var(--muted); font-weight: var(--fw-normal); }

/* ======================================================================
   PHASE 4 — finance
   ====================================================================== */
.month-grid th, .month-grid td { padding: .55rem .4rem !important; }
.month-cell {
    width: 34px; height: 34px; border-radius: var(--radius-sm); border: 0;
    display: inline-grid; place-items: center; font-size: 1rem; padding: 0; cursor: default;
    background: var(--surface-muted); color: var(--muted);
}
.month-cell[data-bs-toggle] { cursor: pointer; }
.month-cell.sm { width: 20px; height: 20px; font-size: .7rem; vertical-align: middle; margin-inline-start: .6rem; }
.month-cell.paid     { background: var(--success); color: #fff; }
.month-cell.partial  { background: var(--info-bg); color: var(--info); }
.month-cell.pending  { background: var(--warning-bg); color: var(--warning); }
.month-cell.late     { background: var(--danger); color: #fff; }
.month-cell.upcoming { background: var(--surface-muted); color: var(--muted); }
.month-cell.waived   { background: var(--surface); color: var(--muted); border: 1px dashed var(--border-strong); }
.month-cell.none     { background: transparent; }
.month-menu { min-width: 220px; }

/* Payment form: selectable month rows */
.pay-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; }
.pay-item:has(input:checked) { background: var(--brand-50); }
.pay-item .amount { margin-inline-start: auto; font-weight: var(--fw-bold); }
.sticky-side { position: sticky; top: 80px; }
.pay-total { font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--brand); }

/* Cashier (تسجيل أداء) */
.step-label { display: flex; align-items: center; gap: .45rem; font-weight: var(--fw-bold); color: var(--brand); margin-bottom: .6rem; font-size: .92rem; }
.step-label .n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-contrast); display: grid; place-items: center; font-size: .75rem; }
.search-box { position: relative; }
.search-box .bi-search { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box .form-control { padding-inline-start: 2.4rem; padding-inline-end: 2.4rem; }
.search-box .clear { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); padding: .25rem .4rem; }
.search-box input::-webkit-search-cancel-button { display: none; }
.cashier-search { position: sticky; top: 80px; }
.student-list { max-height: calc(100vh - 290px); min-height: 200px; overflow-y: auto; border-top: 1px solid var(--border); transition: opacity .15s; }
.student-list.loading { opacity: .5; }
.student-item {
    display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem 1rem; border: 0; border-bottom: 1px solid var(--border);
    background: var(--surface); color: var(--text); text-align: start;
}
.student-item:hover { background: var(--brand-50); }
.student-item.active { background: var(--brand-50); box-shadow: inset -3px 0 0 var(--brand); }
.owe { flex-shrink: 0; text-align: center; font-weight: var(--fw-bold); font-size: .85rem; line-height: 1.15; min-width: 64px; }
.owe small { display: block; font-size: .68rem; font-weight: var(--fw-semibold); }
.owe.late { color: var(--danger); }
.owe.due { color: var(--warning); }
.owe.ok { color: var(--success); }
.child-block { padding: .9rem 1.25rem; border-top: 1px solid var(--border); }
.child-block.sibling { background: color-mix(in srgb, var(--surface-muted) 35%, var(--surface)); }
.child-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.month-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .5rem; }
.month-tile {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .7rem;
    border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); text-align: start;
    border-top: 3px solid var(--border-strong); transition: border-color .12s, background .12s, box-shadow .12s;
}
.month-tile .m { font-weight: var(--fw-bold); }
.month-tile .a { font-size: .85rem; color: var(--muted-strong); }
.month-tile .s { font-size: .7rem; font-weight: var(--fw-semibold); color: var(--muted); }
.month-tile.late { border-top-color: var(--danger); }
.month-tile.late .s { color: var(--danger); }
.month-tile.pending, .month-tile.partial { border-top-color: var(--warning); }
.month-tile.pending .s, .month-tile.partial .s { color: var(--warning); }
.month-tile .tick { position: absolute; top: .45rem; inset-inline-end: .5rem; color: var(--border-strong); font-size: 1rem; }
.month-tile:hover { border-color: var(--brand-500); }
.month-tile.on { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); }
.month-tile.on .tick { color: var(--brand); }
.pay-card .pay-total { font-size: 2.2rem; line-height: 1.1; }
.success-card { border: 2px solid var(--success); }
.success-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 2.4rem; background: var(--success-bg); color: var(--success); }
@media (max-width: 991.98px) {
    .cashier-search { position: static; }
    .student-list { max-height: none; }
}

/* Money progress per month */
.month-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .75rem; }
.month-bar .label { font-size: .78rem; font-weight: var(--fw-semibold); color: var(--muted); margin-bottom: .25rem; }
.month-bar .value { font-size: .75rem; color: var(--muted); margin-top: .25rem; direction: ltr; text-align: end; }
.month-bar.current .label { color: var(--brand); }

/* ======================================================================
   PHASE 5 — charts
   ====================================================================== */
.chart-box { position: relative; height: 260px; }
.chart-box.sm { height: 220px; }
.chart-table summary { cursor: pointer; color: var(--brand-500); font-size: .85rem; font-weight: var(--fw-semibold); }

/* ======================================================================
   PHASE 6 — ratings (public parent form + results)
   ====================================================================== */
.public-body { background: var(--bg); }
.public-hero { background: var(--hero-gradient); padding: 1.5rem 1rem 4.5rem; text-align: center; }
.public-hero img { width: 150px; max-width: 45%; }
.public-main { max-width: 640px; margin: -3.5rem auto 0; padding: 0 1rem 2rem; position: relative; }
.public-foot { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.5rem; }

.stars { display: inline-flex; flex-direction: row-reverse; gap: .2rem; }   /* DOM 5→1, fills from the right in RTL */
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { font-size: 1.75rem; line-height: 1; color: var(--border-strong); cursor: pointer; padding: .1rem; transition: color .1s, transform .1s; }
.stars input:checked ~ label { color: var(--accent); }
.stars:hover label { color: var(--border-strong); }
.stars label:hover, .stars label:hover ~ label { color: var(--accent); transform: scale(1.08); }
.stars input:focus-visible + label { outline: 2px solid var(--brand-500); border-radius: 4px; }
.criterion { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .8rem 0; border-bottom: 1px dashed var(--border); }
.criterion:last-of-type { border-bottom: 0; }
.criterion .word { font-size: .78rem; color: var(--muted); min-width: 4.5rem; text-align: center; }
.teacher-block + .teacher-block { margin-top: 1rem; }

.text-accent { color: var(--accent) !important; }
.intro-text { font-size: 1rem; line-height: 1.8; color: var(--text); white-space: normal; }
.anon-note { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--brand-50); color: var(--muted-strong); font-size: .85rem; }
.anon-note .bi { color: var(--brand); font-size: 1.1rem; }
.preview-banner {
    position: sticky; top: 0; z-index: 30; display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); border-radius: var(--radius-sm);
    padding: .6rem .9rem; margin-bottom: 1rem; font-size: .88rem;
}

/* Builder: steps, question list, suggestions */
.stepper { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; counter-reset: none; }
.stepper li { display: flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: var(--fw-semibold); color: var(--muted); }
.stepper li + li::before { content: ''; width: 28px; height: 2px; background: var(--border-strong); margin-inline-end: .1rem; }
.stepper .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-muted); font-size: .8rem; }
.stepper li.current { color: var(--brand); }
.stepper li.current .n { background: var(--brand); color: var(--brand-contrast); }
.stepper li.done .n { background: var(--success); color: #fff; }
.q-list { display: flex; flex-direction: column; }
.q-item { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.q-num { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-weight: var(--fw-bold); display: grid; place-items: center; flex-shrink: 0; margin-top: .35rem; }
.q-tools { display: flex; gap: .25rem; flex-shrink: 0; margin-top: .2rem; }
@media (max-width: 575.98px) { .q-item { flex-wrap: wrap; } .q-tools { width: 100%; justify-content: flex-end; } }
.suggest-chip {
    display: inline-flex; align-items: center; gap: .2rem; padding: .3rem .75rem; border-radius: var(--radius-pill);
    border: 1px dashed var(--brand-500); background: var(--surface); color: var(--brand); font-size: .82rem; font-weight: var(--fw-semibold);
}
.suggest-chip:hover { background: var(--brand-50); border-style: solid; }

.rating-bar { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.rating-bar .track { flex: 1; height: 8px; background: var(--brand-50); border-radius: 8px; overflow: hidden; }
.rating-bar .fill { height: 100%; background: var(--brand-500); border-radius: 8px; }
.rating-bar .val { width: 2.6rem; text-align: end; font-weight: var(--fw-bold); direction: ltr; }
.rating-bar .lbl { width: 12rem; color: var(--muted-strong); }
@media (max-width: 575.98px) { .rating-bar .lbl { width: 8rem; } }
.col-progress { width: 120px; }
.big-score { font-size: 2.6rem; font-weight: var(--fw-bold); line-height: 1; color: var(--brand); direction: ltr; }
.big-score small { font-size: 1rem; color: var(--muted); font-weight: var(--fw-medium); }
.quote { border-inline-start: 3px solid var(--brand-100); padding: .4rem .9rem; margin-bottom: .6rem; background: var(--surface); }

/* ======================================================================
   CALENDAR
   ====================================================================== */
.ev-lesson  { --ev: var(--ev-lesson); }
.ev-exam    { --ev: var(--ev-exam); }
.ev-trip    { --ev: var(--ev-trip); }
.ev-party   { --ev: var(--ev-party); }
.ev-meeting { --ev: var(--ev-meeting); }
.ev-other   { --ev: var(--ev-other); }

.ev-badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: var(--radius-pill);
    font-size: .78rem; font-weight: var(--fw-semibold); white-space: nowrap;
    background: color-mix(in srgb, var(--ev) 12%, var(--surface)); color: var(--text);
}
.ev-badge .bi { color: var(--ev); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head { padding: .6rem .5rem; text-align: center; font-size: .8rem; font-weight: var(--fw-bold); color: var(--muted); background: var(--brand-50); border-bottom: 1px solid var(--brand-100); }
.cal-head.sunday { color: var(--brand); }
.cal-cell { min-height: 118px; padding: .4rem; border-inline-start: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .25rem; }
.cal-cell:nth-child(7n + 8) { border-inline-start: 0; }
.cal-cell.out { background: var(--bg); }
.cal-cell.out .num { color: var(--border-strong); }
.cal-cell.school { background: color-mix(in srgb, var(--brand-50) 60%, var(--surface)); }
.cal-cell.today .num { background: var(--brand); color: var(--brand-contrast); }
.cal-day { display: flex; align-items: center; gap: .3rem; }
.cal-day .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-bold); font-size: .85rem; }
.cal-tag { font-size: .68rem; font-weight: var(--fw-bold); color: var(--brand); background: var(--brand-100); padding: .05rem .4rem; border-radius: var(--radius-pill); }
.cal-add { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity .15s; }
.cal-cell:hover .cal-add, .cal-add:focus-visible { opacity: 1; background: var(--brand-50); color: var(--brand); }
.cal-holiday { font-size: .72rem; color: var(--muted-strong); background: var(--surface-muted); border-radius: 6px; padding: .1rem .4rem; }
.cal-ev {
    display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .2rem .4rem; border-radius: 6px; font-size: .74rem; color: var(--text);
    background: color-mix(in srgb, var(--ev) 12%, var(--surface)); border-inline-start: 3px solid var(--ev);
}
.cal-ev:hover { color: var(--text); background: color-mix(in srgb, var(--ev) 20%, var(--surface)); }
.cal-ev .bi { color: var(--ev); flex-shrink: 0; }

.agenda-day { display: flex; gap: .9rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-date { width: 54px; flex-shrink: 0; text-align: center; font-size: .72rem; color: var(--muted); }
.agenda-date .d { display: block; font-size: 1.3rem; font-weight: var(--fw-bold); color: var(--text); line-height: 1.1; }
.agenda-day.today .agenda-date .d { color: var(--brand); }
.agenda-day .cal-ev { font-size: .85rem; padding: .35rem .5rem; }

.up-item { display: flex; gap: .75rem; align-items: center; padding: .7rem 1rem; }
.up-date {
    width: 46px; flex-shrink: 0; text-align: center; border-radius: var(--radius-sm); padding: .25rem 0; font-size: .68rem; color: var(--muted-strong);
    background: color-mix(in srgb, var(--ev) 12%, var(--surface)); border-top: 3px solid var(--ev);
}
.up-date .d { display: block; font-size: 1.1rem; font-weight: var(--fw-bold); color: var(--text); line-height: 1.1; }

.type-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.type-tile { margin: 0; cursor: pointer; }
.type-tile input { position: absolute; opacity: 0; pointer-events: none; }
.type-tile span {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .5rem; border-radius: var(--radius);
    border: 1.5px solid var(--border); background: var(--surface); font-weight: var(--fw-semibold); font-size: .88rem; text-align: center;
}
.type-tile .bi { font-size: 1.5rem; color: var(--ev); }
.type-tile:hover span { border-color: var(--ev); }
.type-tile input:checked + span { border-color: var(--ev); background: color-mix(in srgb, var(--ev) 10%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev) 18%, transparent); }
.type-tile input:focus-visible + span { box-shadow: var(--focus-ring); }

/* Calendar: regular class sessions */
.cal-cell.today .num { color: var(--brand-contrast) !important; }
.cal-day a.num:hover { background: var(--brand-50); }
.cal-cell.today a.num:hover { background: var(--brand-700); }
.cal-cell.holiday { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-muted) 6px, var(--surface-muted) 7px); }
.cal-school {
    display: flex; flex-direction: column; gap: .1rem; padding: .35rem .5rem; border-radius: 8px; font-size: .78rem; color: var(--text);
    background: color-mix(in srgb, var(--ev-lesson) 10%, var(--surface)); border-inline-start: 3px solid var(--ev-lesson);
}
.cal-school:hover { color: var(--text); background: color-mix(in srgb, var(--ev-lesson) 18%, var(--surface)); }
.cal-school .bi { color: var(--ev-lesson); }
.cal-school .small { color: var(--muted-strong); text-align: start; }
.cal-session {
    display: flex; align-items: center; gap: .35rem; min-width: 0; padding: .2rem .45rem; border-radius: 6px; font-size: .74rem; color: var(--text);
    background: color-mix(in srgb, var(--ev-lesson) 10%, var(--surface));
}
.cal-session:hover { color: var(--text); background: color-mix(in srgb, var(--ev-lesson) 18%, var(--surface)); }
.cal-session b { color: var(--ev-lesson); flex-shrink: 0; }
.view-switch .btn.active { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
/* Calendar header: ‹ title › */
.cal-top { flex-wrap: nowrap; }
.cal-top h1 { font-size: 1.35rem; }
.cal-title { min-width: 9rem; }
@media (max-width: 575.98px) {
    .cal-top { gap: .5rem; }
    .cal-top h1 { font-size: 1.15rem; }
    .cal-title { min-width: 0; }
    .cal-filters .view-switch { flex: 0 0 auto; }
    .cal-filters .view-switch .btn { flex: 0 0 auto; }
    .week-day-head { padding-inline: 1rem; }
    .week-day-head .day-badge { display: table; margin: .3rem 0 0; }
}

/* Week view: a timetable per day, sessions grouped by time slot */
.week-day { border-bottom: 1px solid var(--border); }
.week-day:last-child { border-bottom: 0; }
.week-day.quiet .week-day-head { opacity: .55; }
.week-day-head { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; background: var(--bg); }
.week-day-head .day-badge { margin-inline-start: .5rem; }
.week-day-head .d { font-size: 1.4rem; font-weight: var(--fw-bold); line-height: 1; width: 2.2rem; text-align: center; }
.week-day.today .week-day-head { background: var(--brand-50); }
.week-day.today .week-day-head .d { color: var(--brand); }
.slot-block { display: flex; gap: 1rem; padding: .8rem 1.25rem; border-top: 1px solid var(--border); align-items: flex-start; }
.slot-time { width: 58px; flex-shrink: 0; text-align: center; font-weight: var(--fw-bold); font-size: 1rem; color: var(--ev-lesson); line-height: 1.2; padding-top: .35rem; }
.slot-time small { display: block; font-weight: var(--fw-medium); font-size: .75rem; color: var(--muted); }
.class-tiles { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.class-tile {
    display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--text);
    border: 1px solid var(--border); border-inline-start: 3px solid var(--ev-lesson); background: var(--surface);
}
.class-tile:hover { color: var(--text); border-color: var(--ev-lesson); box-shadow: var(--shadow-sm); }
.tile-status { display: inline-flex; align-items: center; gap: .25rem; margin-top: .3rem; font-size: .72rem; font-weight: var(--fw-semibold); }
.class-tile.done .tile-status { color: var(--success); }
.class-tile.missing { border-inline-start-color: var(--warning); }
.class-tile.missing .tile-status { color: var(--warning); }
.class-tile.cancelled { border-inline-start-color: var(--border-strong); opacity: .75; }
.class-tile.cancelled .tile-status { color: var(--muted); }
.day-events { display: grid; gap: .4rem; padding: .7rem 1.25rem .9rem calc(58px + 2.25rem); border-top: 1px dashed var(--border); }
@media (max-width: 575.98px) {
    .slot-block { flex-direction: column; gap: .4rem; }
    .slot-time { width: auto; text-align: start; padding-top: 0; }
    .slot-time small { display: inline; margin-inline-start: .4rem; }
    .day-events { padding-inline-start: 1.25rem; }
    .class-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bell */
.bell { position: relative; }
.bell .dot-count {
    position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: .68rem; font-weight: var(--fw-bold); display: grid; place-items: center;
}
.notif-menu { width: 320px; max-width: calc(100vw - 2rem); padding: 0; }
.notif-menu .item { display: block; padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); white-space: normal; }
.notif-menu .item.unread { background: var(--brand-50); }
.notif-menu .item:hover { background: var(--brand-100); }

/* ------------------------------------------------------------ auth */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art {
    background: var(--hero-gradient);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem; text-align: center; position: relative; overflow: hidden;
}
.auth-art img { width: 240px; max-width: 70%; }
.auth-art h2 { color: #fff; font-size: 1.8rem; margin-top: 2rem; }
.auth-art p { opacity: .7; max-width: 340px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--surface); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card .form-control { padding: .7rem .9rem; }
@media (max-width: 767.98px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-art { padding: 2rem 1rem 1.5rem; }
    .auth-art img { width: 110px; }
    .auth-art h2 { font-size: 1.3rem; margin-top: 1rem; }
    .auth-art p { display: none; }
}

/* ------------------------------------------------------------ error page */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-page img { width: 90px; opacity: .25; }
.error-page .code { font-size: 3.5rem; font-weight: var(--fw-bold); color: var(--brand); }

/* ------------------------------------------------------------ styleguide */
.swatch { border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.swatch .chip-color { height: 64px; }
.swatch .meta { padding: .5rem .6rem; font-size: .75rem; }
.swatch code { font-size: .72rem; color: var(--muted); direction: ltr; display: block; }

/* ------------------------------------------------------------ misc */
.pagination { --bs-pagination-color: var(--brand); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); margin: 0; }
.dropdown-menu { border-color: var(--border); box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.modal-content { border: 0; border-radius: var(--radius); }
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }
.divider-label { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; font-weight: var(--fw-semibold); margin: 1rem 0; }
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

@media print {
    .sidebar, .topbar, .form-actions, .save-bar, .no-print { display: none !important; }
    .content { padding: 0; }
    body { background: #fff; }
}

/* Filter bar: secondary filters fold behind a "فلاتر" button on phones */
.filter-more { display: contents; }
@media (max-width: 767.98px) {
    .filter-more { display: none; }
    .filter-more.show { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
    .filter-bar .search { min-width: 0; }
}
.preset-row.chip-scroll .preset { white-space: nowrap; }
@media (max-width: 767.98px) { .card-body .chip-scroll { margin-inline: -1.25rem; padding-inline: 1.25rem; } }

/* Profile hero: actions + one-tap contact */
.hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hero-contact {
    flex-basis: 100%; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--brand-contrast) 15%, transparent);
}
.hero-contact > span { margin-inline-end: auto; opacity: .9; }
.btn-ghost-light {
    color: var(--brand-contrast); border: 1px solid color-mix(in srgb, var(--brand-contrast) 35%, transparent);
    background: color-mix(in srgb, var(--brand-contrast) 8%, transparent);
}
.btn-ghost-light:hover, .btn-ghost-light:focus-visible, .btn-ghost-light.show {
    color: var(--brand-contrast); background: color-mix(in srgb, var(--brand-contrast) 18%, transparent);
    border-color: color-mix(in srgb, var(--brand-contrast) 50%, transparent);
}
@media (max-width: 575.98px) {
    .profile-hero { padding: 1.1rem; gap: 1rem; }
    .profile-hero h1 { font-size: 1.3rem; }
    .hero-actions { flex-basis: 100%; }
    .hero-actions > .btn:first-child { flex: 1; }
    .hero-contact > span { flex-basis: 100%; }
}

/* Snapshot tiles (student profile) */
.snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.snap {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: start;
    padding: .85rem 1rem; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.snap:hover { border-color: var(--brand-100); box-shadow: var(--shadow); }
.snap .lbl { font-size: .8rem; color: var(--muted); font-weight: var(--fw-semibold); }
.snap .val { font-size: 1.35rem; font-weight: var(--fw-bold); line-height: 1.25; }
.snap .sub { font-size: .76rem; color: var(--muted); }
@media (max-width: 767.98px) { .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
.nav-tabs-clean { scroll-margin-top: 80px; }

.card-header-toggle { width: 100%; border: 0; text-align: start; font: inherit; color: inherit; display: flex; justify-content: space-between; align-items: center; }
@media (min-width: 992px) { .card-header-toggle { pointer-events: none; } }
.profile-hero > .flex-grow-1 { min-width: 0; flex: 1 1 220px; }
@media (max-width: 575.98px) {
    .profile-hero .avatar-lg { width: 64px; height: 80px; font-size: 1.4rem; align-self: flex-start; }
    .profile-hero > .flex-grow-1 { flex-basis: 180px; }
}
.nav-tabs-clean { scrollbar-width: none; }
.nav-tabs-clean::-webkit-scrollbar { display: none; }
@media (max-width: 575.98px) {
    .kpi { gap: .6rem; padding: .75rem .8rem; }
    .kpi-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: var(--radius-sm); }
    .kpi-value { font-size: 1.3rem; }
    .kpi-value.sm { font-size: 1.05rem; }
    .kpi-label { font-size: .75rem; line-height: 1.35; }
}
.class-card-foot { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--border); font-size: .8rem; font-weight: var(--fw-semibold); }
@media (max-width: 575.98px) { .profile-hero .avatar-xl { width: 56px; height: 56px; font-size: 1.2rem; align-self: flex-start; } }
@media (max-width: 767.98px) {
    /* KPI filter cards become one swipeable row on phones */
    .kpi-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .kpi-scroll::-webkit-scrollbar { display: none; }
    .kpi-scroll > * { flex: 0 0 64%; }
}
@media (max-width: 767.98px) {
    /* Month progress: one swipeable row instead of three stacked rows */
    .month-bars { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .month-bars::-webkit-scrollbar { display: none; }
}
.anchor-target { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* One-off session changes (cancelled / moved) */
.session-state { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1.1rem; border-radius: var(--radius); border: 1px solid; }
.session-state > .bi { font-size: 1.4rem; line-height: 1; }
.session-state.normal { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.session-state.moved { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); }
.session-state.cancelled { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.session-state .small { color: var(--text); opacity: .85; }
.type-tiles.choice-2 { grid-template-columns: 1fr 1fr; }
.type-tile.choice-move { --ev: var(--brand-500); }
.type-tile.choice-cancel { --ev: var(--danger); }
.class-tile.planned { border-inline-start-color: var(--danger); background: var(--surface-muted); }
.class-tile.planned .fw-600 { text-decoration: line-through; color: var(--muted-strong); }
.class-tile.planned .tile-status { color: var(--danger); }
.class-tile.moved { border-inline-start-style: dashed; }
.tile-status.tile-moved { color: var(--warning); display: flex; }
.cal-session.is-cancelled { text-decoration: line-through; opacity: .6; }
.cal-session.is-moved { outline: 1px dashed var(--warning); outline-offset: -1px; }
.cal-cancelled { color: var(--danger); font-weight: var(--fw-semibold); }
.session-item.is-cancelled .fw-600 { text-decoration: line-through; color: var(--muted-strong); }

/* Subjects (Settings › المواد) */
.subject-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; }
.subject-row.inactive { opacity: .6; }
.order-btns { display: flex; flex-direction: column; gap: 2px; }
.order-btns .btn { padding: 0 .4rem; line-height: 1.2; }
.it-name { direction: ltr; text-align: right; }

/* Grade sheet: one column per subject (desktop), one card per student (phones) */
.marks-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.marks-table th { background: var(--brand-50); color: var(--muted-strong); font-size: .78rem; font-weight: var(--fw-semibold);
    padding: .6rem .5rem; vertical-align: bottom; border-bottom: 1px solid var(--border); text-align: center; }
.marks-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; background: var(--surface); }
.marks-table .col-student { position: sticky; inset-inline-start: 0; z-index: 2; min-width: 190px; text-align: start; box-shadow: -1px 0 0 var(--border) inset; }
.marks-table th.col-student { z-index: 3; }
.marks-table .col-mark { min-width: 84px; text-align: center; }
.marks-table .sub-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; max-width: 110px; margin: 0 auto; }
.marks-table .grade-input { text-align: center; max-width: 80px; margin: 0 auto; padding-inline: .3rem; }
.marks-table .col-avg { text-align: center; min-width: 80px; }
.marks-table .col-eval { min-width: 190px; }
.marks-table tbody tr:hover td { background: var(--brand-50); }
@media (max-width: 767.98px) {
    .marks-wrap { overflow: visible; }
    .marks-table thead { display: none; }
    .marks-table, .marks-table tbody { display: block; }
    .marks-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
    .marks-table td { display: block; padding: 0; border: 0; background: none; min-width: 0 !important; }
    .marks-table tbody tr:hover td { background: none; }
    .marks-table .col-student { grid-column: 1 / -1; position: static; box-shadow: none; }
    .marks-table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--muted); margin-bottom: .2rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .marks-table .grade-input { max-width: none; }
    .marks-table .col-avg { text-align: start; }
    .marks-table .col-eval { grid-column: 1 / -1; }
}
.subject-results tfoot th { background: var(--brand-50); border-top: 2px solid var(--brand-100); }
/* Appreciation chips (ممتاز / جيد جداً / جيد / متوسط / يحتاج إلى مجهود) — always with the word, never color alone */
.appr { display: inline-block; padding: .15rem .6rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: var(--fw-semibold); }
.appr-excellent { background: var(--success-bg); color: var(--success); }
.appr-very_good { background: var(--info-bg); color: var(--info); }
.appr-good { background: var(--brand-50); color: var(--brand); }
.appr-fair { background: var(--warning-bg); color: var(--warning); }
.appr-weak { background: var(--danger-bg); color: var(--danger); }

/* ======================================================================
   School finances (المالية العامة, سجل، رواتب)
   Income = --success, expense = --danger — always with a sign (+ / −) and a label, never color alone.
   ====================================================================== */
.progress-thin.out .progress-bar { background: var(--danger); }
.legend-in::before, .legend-out::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: .35rem; vertical-align: -1px; }
.legend-in::before { background: var(--success); }
.legend-out::before { background: var(--danger); }

.cash-months td { vertical-align: middle; }
.cash-months tr.future td { opacity: .45; }
.cash-months tr.current td:first-child { color: var(--brand); }
.cash-months .bars { min-width: 220px; }
.cash-months .bar { display: flex; align-items: center; gap: .5rem; height: 16px; font-size: .75rem; color: var(--muted-strong); }
.cash-months .bar + .bar { margin-top: 3px; }
.cash-months .bar i { display: block; height: 8px; border-radius: 4px; min-width: 2px; flex-shrink: 0; max-width: 70%; }
.cash-months .bar.in i { background: var(--success); }
.cash-months .bar.out i { background: var(--danger); }

.cat-row { display: grid; gap: .3rem; }
.cat-row:hover { color: var(--brand); }

.entry-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem; }
.entry-row.cancelled { opacity: .55; }
.entry-row.cancelled .entry-amount { text-decoration: line-through; }
.entry-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; }
.entry-icon.out { background: var(--danger-bg); color: var(--danger); }
.entry-icon.in { background: var(--success-bg); color: var(--success); }
.entry-amount { font-weight: var(--fw-bold); white-space: nowrap; }
.entry-amount.out { color: var(--danger); }
.entry-amount.in { color: var(--success); }
.entry-hero { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.25rem; border-radius: var(--radius); }
.entry-hero.out { background: var(--danger-bg); color: var(--danger); }
.entry-hero.in { background: var(--success-bg); color: var(--success); }
.entry-hero.cancelled .val { text-decoration: line-through; }
.entry-hero .lbl { font-size: .85rem; font-weight: var(--fw-semibold); }
.entry-hero .val { font-size: 2rem; font-weight: var(--fw-bold); line-height: 1.1; }
.attachment-preview { display: block; padding: 1rem; text-align: center; background: var(--bg); }
.attachment-preview img { max-width: 100%; max-height: 420px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* Category picker (big tap targets) */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.cat-tile { margin: 0; cursor: pointer; }
.cat-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cat-tile span { display: flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: var(--fw-semibold); font-size: .9rem; }
.cat-tile span .bi { color: var(--brand-500); font-size: 1.1rem; }
.cat-tile:hover span { border-color: var(--brand-500); }
.cat-tile input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent); }
.cat-tile input:focus-visible + span { box-shadow: var(--focus-ring); }
@media (max-width: 575.98px) { .cat-tiles { grid-template-columns: 1fr 1fr; } }

/* Payroll */
.month-strip { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.month-strip::-webkit-scrollbar { display: none; }
.month-chip { flex: 0 0 auto; min-width: 74px; text-align: center; padding: .45rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); border-top: 3px solid var(--border-strong); }
.month-chip .m { display: block; font-weight: var(--fw-semibold); font-size: .85rem; }
.month-chip .s { display: block; font-size: .72rem; color: var(--muted); direction: ltr; }
.month-chip.done { border-top-color: var(--success); }
.month-chip.due { border-top-color: var(--warning); }
.month-chip.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.month-chip.active .s { color: var(--brand-contrast); opacity: .8; }
.payroll-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; flex-wrap: wrap; }
.payroll-row.highlight { background: var(--success-bg); }
.salary-cell { width: 170px; }
.pay-cell { display: flex; align-items: center; gap: .35rem; justify-content: flex-end; min-width: 220px; }
@media (max-width: 767.98px) {
    .salary-cell { width: auto; flex: 1 1 140px; }
    .pay-cell { min-width: 0; flex: 1 1 auto; }
}

/* Teacher form: salary per month */
.salary-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.salary-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.salary-month { display: grid; gap: .2rem; margin: 0; font-size: .85rem; font-weight: 600; }
@media (max-width: 575.98px) { .salary-modes { grid-template-columns: 1fr; } .salary-months { grid-template-columns: 1fr 1fr; } }
.salary-pick { background: var(--brand-50); border-radius: var(--radius-sm); padding: .75rem; margin: 0; }

/* ======================================================================
   TOUCH DEVICES & INSTALLED APP (PWA)
   ====================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
/* No double-tap-zoom delay on controls */
a, button, input, select, textarea, label, .btn, [role="button"] { touch-action: manipulation; }

@media (pointer: coarse) {
    /* iPhone zooms into any field under 16px — keep every field at 16px on touch screens */
    .form-control, .form-select, input, select, textarea, .ts-control, .ts-control input { font-size: 16px !important; }
    .form-control-sm, .form-select-sm { min-height: 38px; }

    /* Finger-sized targets (≥ 38–44px) */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 36px; padding-inline: .7rem; }
    .btn-icon { min-width: 42px; }
    .btn-sm.btn-icon { min-width: 36px; }
    .btn-link { min-height: 36px; display: inline-flex; align-items: center; }
    .chip-tabs a, .preset { min-height: 38px; display: inline-flex; align-items: center; }
    .sub-nav a { min-height: 44px; }
    .page-link { min-width: 42px; min-height: 42px; display: grid; place-items: center; }
    .form-check-input { width: 1.5em; height: 1.5em; margin-top: 0; }
    .form-check { min-height: 32px; display: flex; align-items: center; gap: .5rem; }
    .form-check .form-check-input { flex-shrink: 0; float: none; margin-inline-start: 0; }
    .check-card .form-check-input { margin-inline-start: -1.6rem; }
    .dropdown-item { padding-block: .65rem; }
    .order-btns .btn { min-height: 30px; padding: .1rem .55rem; }
    .list-group-item-action { min-height: 48px; }

    /* Things revealed on hover elsewhere are always visible on touch */
    .cal-add { opacity: 1; background: var(--brand-50); color: var(--brand); }

    /* Pressed feedback instead of hover */
    .btn:active, .list-group-item-action:active, .table-row-link:active td, .class-tile:active, .month-tile:active, .snap:active { filter: brightness(.95); }
}

/* Dialogs become bottom sheets on phones (thumb-reachable, native feel) */
@media (max-width: 575.98px) {
    .modal-dialog-centered { align-items: flex-end; min-height: 100%; margin: 0; }
    .modal-dialog-centered .modal-content { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 0; padding-bottom: env(safe-area-inset-bottom); max-height: 92dvh; }
    .modal-dialog-centered .modal-body { overflow-y: auto; }
    .modal.fade .modal-dialog-centered { transform: translateY(30px); }
    .modal.show .modal-dialog-centered { transform: none; }
}

/* Safe areas (notch, rounded corners, home bar) — used when installed or in landscape */
.topbar { padding-top: max(.75rem, env(safe-area-inset-top)); padding-inline: max(var(--content-pad), env(safe-area-inset-right)) max(var(--content-pad), env(safe-area-inset-left)); }
.content { padding-inline: max(var(--content-pad), env(safe-area-inset-right)) max(var(--content-pad), env(safe-area-inset-left)); }
.save-bar, .form-actions { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
.sidebar .offcanvas-body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav { padding-inline: env(safe-area-inset-right) env(safe-area-inset-left); }

/* Installed app (no browser bar): own back / reload buttons, no rubber-band bounce on the page */
.standalone-only { display: none !important; }
.is-standalone .standalone-only { display: inline-flex !important; }
.is-standalone body { overscroll-behavior-y: none; }

/* Connection lost banner + install banner */
.net-status { position: fixed; inset-inline: 0; top: 0; z-index: 2000; padding: calc(env(safe-area-inset-top) + .45rem) 1rem .45rem; text-align: center;
    background: var(--warning); color: #fff; font-size: .85rem; font-weight: var(--fw-semibold); transform: translateY(-110%); transition: transform .25s; }
.net-status.show { transform: none; }
.install-banner { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; margin-bottom: 1rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--brand-100); box-shadow: var(--shadow-sm); }
.install-banner[hidden] { display: none; }
.install-banner img { width: 40px; height: 40px; border-radius: 10px; }
.install-steps ol { padding-inline-start: 1.2rem; margin: 0; display: grid; gap: .35rem; }

/* Offline page */
.offline-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    padding: 2rem 1.25rem; text-align: center; background: var(--bg); }
.offline-logo { width: 110px; margin-bottom: 1rem; }
.offline-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; background: var(--warning-bg); color: var(--warning); }
.offline-page h1 { font-size: 1.4rem; margin: 0; }
.offline-page p { color: var(--muted); max-width: 420px; }
.net-status.shake { animation: net-shake .4s; }
@keyframes net-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .net-status.shake { animation: none; } }
@media (max-width: 767.98px) {
    .payroll-row .salary-cell { order: 3; flex: 1 1 auto; }
    .payroll-row .pay-cell { order: 4; }
    .payroll-row .pay-cell > .text-muted:only-child { display: none; }
}

/* "+ إضافة": quick actions (top-bar menu on desktop, bottom sheet on phones) */
.quick-menu { min-width: 270px; padding: .4rem; }
.quick-item { display: flex; align-items: center; gap: .7rem; border-radius: var(--radius-sm); padding: .55rem .7rem; }
.quick-item > .bi { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex-shrink: 0; }
.quick-item span { display: grid; line-height: 1.3; }
.quick-item small { color: var(--muted); font-size: .76rem; }
.quick-sheet { height: auto !important; max-height: 85dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.quick-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.quick-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .85rem .9rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); min-height: 92px; }
.quick-tile > .bi { font-size: 1.35rem; color: var(--brand); margin-bottom: .2rem; }
.quick-tile b { font-size: .95rem; }
.quick-tile small { color: var(--muted); font-size: .74rem; line-height: 1.3; }
.quick-tile.pay { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.quick-tile.pay > .bi, .quick-tile.pay small { color: var(--brand-contrast); }
.quick-tile.out > .bi { color: var(--danger); }
.quick-tile.in > .bi { color: var(--success); }
.quick-tile:active { filter: brightness(.95); }

/* ======================================================================
   DESIGN SYSTEM — "Indigo Insight" (design/DESIGN.md)
   Deep-indigo navigation · near-white canvas · one violet for action ·
   muted tones that colour-code numbers by meaning. Flat first: cards are
   separated by a 1px border, tiles by their tone, never by heavy shadows.
   Contrast: ink on everything, coloured text only as a tone's ink on its
   own tone, white only on indigo / violet / red (all measured ≥ 4.5:1).
   Everything below reads tokens: re-branding still only touches tokens.css + theme.php.
   ====================================================================== */

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -.02em; }
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
@media (max-width: 575.98px) { .page-head h1 { font-size: 1.5rem; } }
.page-head .lead-sub { color: var(--muted); }
.it-name, .text-it { color: var(--muted); }
.kpi-value, .stat-tile .value, .table td { font-variant-numeric: tabular-nums; }

/* ---- Sidebar: deep indigo, raised item for the current page ------------- */
.side-link { border-radius: var(--radius-btn); margin-inline: .75rem; min-height: 44px; }
.side-link:hover { background: var(--sidebar-hover); color: #fff; }
.side-link.active { background: var(--sidebar-active); color: #fff; font-weight: var(--fw-semibold); }
.side-link.active::before { display: none; }
.side-link.active .bi { color: #fff; }
.sidebar-brand { border-bottom-color: rgba(255, 255, 255, .08); }
.side-group, .side-section { color: color-mix(in srgb, var(--sidebar-fg) 70%, transparent); }

/* ---- Top bar: white strip, hairline under it ---------------------------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.search-trigger { height: 44px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-btn); }
.search-trigger:hover { background: var(--surface); border-color: var(--action); color: var(--text); }
.user-chip { background: var(--surface); border-radius: var(--radius-btn); }
.year-switch .form-select { border-radius: var(--radius-btn); background-color: var(--brand-50); border-color: var(--brand-50); color: var(--brand-500); }

/* ---- Buttons: 44px, radius 12. Violet = the one key action, indigo = dark power
        buttons, white + border = secondary, tinted rose = destructive ------------ */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
       border-radius: var(--radius-btn); font-weight: var(--fw-semibold); padding-inline: 1.1rem;
       transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out; }
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 34px; padding-inline: .75rem; border-radius: var(--radius-sm); }
.btn-lg { min-height: 50px; padding-inline: 1.5rem; }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-primary { box-shadow: none; }
.btn-light {
    --bs-btn-bg: var(--surface); --bs-btn-color: var(--text); --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-muted); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text);
    --bs-btn-active-bg: var(--brand-100); --bs-btn-active-border-color: var(--border-strong);
}
.btn-action, .quick-add-btn {
    --bs-btn-color: var(--action-contrast); --bs-btn-bg: var(--action); --bs-btn-border-color: var(--action);
    --bs-btn-hover-color: var(--action-contrast); --bs-btn-hover-bg: var(--action-hover); --bs-btn-hover-border-color: var(--action-hover);
    --bs-btn-active-bg: var(--action-hover); --bs-btn-active-border-color: var(--action-hover); --bs-btn-active-color: var(--action-contrast);
    --bs-btn-focus-shadow-rgb: 91, 76, 240;
    box-shadow: var(--shadow-primary);
}
.btn-danger {
    --bs-btn-color: var(--tone-pink-ink); --bs-btn-bg: var(--tone-pink); --bs-btn-border-color: var(--tone-pink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--danger);
}
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn.disabled { opacity: .45; box-shadow: none; }

/* ---- Inputs: 44px, radius 8, violet focus, rose error ------------------- */
.form-control, .form-select { min-height: 44px; border-color: var(--border-strong); border-radius: var(--radius-sm); }
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus { border-color: var(--action); box-shadow: var(--focus-ring); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-label { font-weight: var(--fw-semibold); color: var(--text); font-size: .87rem; }
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }
.form-check-input:focus { border-color: var(--action); box-shadow: var(--focus-ring); }

/* ---- Cards: white, 1px border, radius 16, barely-there shadow ------------ */
.card { border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.card-header { border-bottom-color: var(--border); font-weight: var(--fw-semibold); font-size: 1.05rem; padding-block: 1rem; }
.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
a.card:hover, .class-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: none; }
.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-btn); padding: .35rem; }
.dropdown-item { border-radius: var(--radius-sm); }
.dropdown-item:active { background: var(--brand-50); color: var(--text); }
.modal-content { border: 0; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.modal-backdrop.show, .offcanvas-backdrop.show { opacity: 1; background: rgba(30, 27, 75, .35); backdrop-filter: blur(4px); }
.offcanvas-bottom { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 0; }
.offcanvas-bottom .offcanvas-header::before { content: ''; position: absolute; top: 8px; inset-inline: 0; margin-inline: auto; width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); }
.offcanvas-bottom .offcanvas-header { position: relative; padding-top: 1.4rem; }

/* ---- Tables: muted header band, 1px separators, no verticals ------------- */
.table thead th { background: var(--surface-muted); color: var(--muted-strong); border-bottom: 0 !important; font-size: .78rem; font-weight: var(--fw-semibold); }
.table > :not(caption) > * > * { border-bottom-color: var(--border); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: color-mix(in srgb, var(--brand-50) 60%, transparent); }

/* ---- Badges: tone pill (status pills keep their tone bg) ----------------- */
.badge-soft { border: 0; padding: .22rem .6rem; font-weight: var(--fw-semibold); }
.badge-soft.neutral { background: var(--surface-muted); color: var(--muted-strong); }

/* ---- Underline tabs (views of the same data) ---------------------------- */
.sub-nav { border-bottom: 1px solid var(--border); gap: 1.25rem; }
.sub-nav a { padding: .7rem .1rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-nav a:hover { color: var(--text); }
.sub-nav a.active { color: var(--text); border-bottom-color: var(--action); }

/* ---- Segmented control (status / time filters) --------------------------- */
.chip-tabs { background: var(--surface-muted); padding: 4px; border-radius: var(--radius-btn); display: inline-flex; flex-wrap: nowrap; gap: 2px;
              max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chip-tabs::-webkit-scrollbar { display: none; }
.chip-tabs a { border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--muted-strong); font-weight: var(--fw-semibold); }
.chip-tabs a:hover { color: var(--text); background: transparent; }
.chip-tabs a.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(30, 27, 75, .12); }
.nav-pills .nav-link { border-radius: var(--radius-sm); color: var(--muted-strong); font-weight: var(--fw-semibold); }
.nav-pills .nav-link.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(30, 27, 75, .12); }

/* ---- KPI tiles: tone = meaning ------------------------------------------
   A tile takes its tone from its icon's status class (no markup change):
   none → indigo · success → mint · info → sky · warning → peach · danger → rose.
   No border, no shadow — the tone is the separation. Icon in a white rounded square. */
.stat-tile, .card.kpi { --t-bg: var(--tone-violet); --t-ink: var(--tone-violet-ink);
    background: var(--t-bg); border: 0; box-shadow: none; border-radius: var(--radius); }
.stat-tile:has(.kpi-icon.success), .card.kpi:has(.kpi-icon.success) { --t-bg: var(--tone-mint);   --t-ink: var(--tone-mint-ink); }
.stat-tile:has(.kpi-icon.info),    .card.kpi:has(.kpi-icon.info)    { --t-bg: var(--tone-cyan);   --t-ink: var(--tone-cyan-ink); }
.stat-tile:has(.kpi-icon.warning), .card.kpi:has(.kpi-icon.warning) { --t-bg: var(--tone-yellow); --t-ink: var(--tone-yellow-ink); }
.stat-tile:has(.kpi-icon.danger),  .card.kpi:has(.kpi-icon.danger)  { --t-bg: var(--tone-pink);   --t-ink: var(--tone-pink-ink); }
.stat-tile .kpi-icon.kpi-icon, .card.kpi .kpi-icon.kpi-icon { background: #fff; color: var(--t-ink); border-radius: var(--radius-btn); }  /* doubled class beats .kpi-icon.success below */
.stat-tile .label, .stat-tile .sub, .card.kpi .kpi-label { color: var(--tone-muted-text); }
.stat-tile { padding: 1.25rem; }
.stat-tile .value { font-weight: 600; letter-spacing: -.02em; font-size: 1.875rem; }
@media (max-width: 575.98px) { .stat-tile { padding: 1rem; } .stat-tile .value { font-size: 1.4rem; } }
a.stat-tile:hover { box-shadow: var(--shadow); }

/* Icon chips elsewhere: rounded square in the tone */
.kpi-icon { border-radius: var(--radius-btn); background: var(--tone-violet); color: var(--tone-violet-ink); }
.kpi-icon.success { background: var(--tone-mint);   color: var(--tone-mint-ink); }
.kpi-icon.warning { background: var(--tone-yellow); color: var(--tone-yellow-ink); }
.kpi-icon.danger  { background: var(--tone-pink);   color: var(--tone-pink-ink); }
.kpi-icon.info    { background: var(--tone-cyan);   color: var(--tone-cyan-ink); }
.kpi-value { font-weight: 600; letter-spacing: -.02em; }
.qs-item > .bi { border-radius: var(--radius-sm); background: var(--brand-50); color: var(--brand-500); }

/* ---- Quick add: tone tiles (tone set in partials/quick_add.php) ----------- */
.quick-tile { border: 0; border-radius: var(--radius); background: var(--surface-muted); color: var(--text); min-height: 108px; }
.quick-tile > .bi { width: 40px; height: 40px; border-radius: var(--radius-btn); display: grid; place-items: center; background: #fff; font-size: 1.15rem; }
.quick-tile small { color: var(--tone-muted-text); }
.quick-tile.violet { background: var(--tone-violet); } .quick-tile.violet > .bi { color: var(--tone-violet-ink); }
.quick-tile.pink   { background: var(--tone-pink); }   .quick-tile.pink > .bi   { color: var(--tone-pink-ink); }
.quick-tile.mint   { background: var(--tone-mint); }   .quick-tile.mint > .bi   { color: var(--tone-mint-ink); }
.quick-tile.yellow { background: var(--tone-yellow); } .quick-tile.yellow > .bi { color: var(--tone-yellow-ink); }
.quick-tile.cyan   { background: var(--tone-cyan); }   .quick-tile.cyan > .bi   { color: var(--tone-cyan-ink); }
.quick-item > .bi { color: var(--action); }

/* ---- Phones: white bottom bar, violet indicator, violet "+" in the middle ---- */
@media (max-width: 991.98px) {
    .bottom-nav { background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(30, 27, 75, .06); }
    .bottom-nav a { position: relative; min-height: 64px; color: var(--muted); font-size: .7rem; }
    .bottom-nav a > .bi { font-size: 1.35rem; }
    .bottom-nav a.active { color: var(--action); }
    .bottom-nav a.active::before { content: ''; position: absolute; top: 0; width: 32px; height: 4px; border-radius: 0 0 4px 4px; background: var(--action); }
    .bottom-nav .fab { width: 52px; height: 52px; margin-top: -22px; border: 4px solid var(--surface); background: var(--action); color: #fff;
                       box-shadow: var(--shadow-primary); font-size: 1.3rem; }
    .bottom-nav a.primary { color: var(--action); }
}

@media (prefers-reduced-motion: reduce) { .btn, .btn:active { transition: none; transform: none; } }

/* Red on a tone: plain --danger is only 3.96:1 on rose, so tiles use the rose ink (≥ 5.1:1 on every tone) */
.stat-tile .text-danger, .card.kpi .text-danger { color: var(--tone-pink-ink) !important; }
/* Readex Pro is a dense face: lighter weights keep long Arabic lists calm */
.side-link { font-weight: var(--fw-normal); }
.side-link.active { font-weight: var(--fw-medium); }
.card-header, .stat-tile .label, .form-label { font-weight: var(--fw-medium); }
@media (max-width: 575.98px) { :is(.page-head, .home-head) .btn { padding-inline: .75rem; } :is(.page-head, .home-head) .d-flex { gap: .4rem !important; } }

/* ---- Illustrated portraits (helpers.php → portrait()) ------------------------
   Boy on indigo, girl on rose, teacher (hijab) on mint — same meaning tones as the tiles. */
.portrait { padding: 0; background: none; }
.portrait svg { width: 100%; height: 100%; display: block; }
.portrait .pt-bg { fill: var(--pt-bg); }
.portrait .pt-cloth { fill: var(--pt-cloth); }
.portrait .pt-skin { fill: var(--pt-skin); }
.portrait .pt-skin-d { fill: var(--pt-skin-d); }
.portrait .pt-hair { fill: var(--pt-hair); }
.portrait .pt-accent { fill: var(--accent); }
.portrait .pt-scarf { fill: var(--pt-scarf); }
.portrait .pt-scarf-d { fill: rgba(0, 0, 0, .14); }
.portrait.v0 { --pt-skin: var(--pt-skin-1); --pt-skin-d: var(--pt-skin-1-d); --pt-hair: var(--pt-hair-1); }
.portrait.v1 { --pt-skin: var(--pt-skin-2); --pt-skin-d: var(--pt-skin-2-d); --pt-hair: var(--pt-hair-2); }
.portrait.v2 { --pt-skin: var(--pt-skin-3); --pt-skin-d: var(--pt-skin-3-d); --pt-hair: var(--pt-hair-3); }
.portrait.boy     { --pt-bg: var(--tone-violet); --pt-cloth: var(--tone-violet-ink); }
.portrait.girl    { --pt-bg: var(--tone-pink);   --pt-cloth: var(--tone-pink-ink); }
.portrait.teacher { --pt-bg: var(--tone-mint);   --pt-cloth: var(--sidebar-bg); --pt-scarf: var(--tone-mint-ink); }
.portrait.teacher.v1 { --pt-scarf: var(--tone-violet-ink); }
.portrait.teacher.v2 { --pt-scarf: var(--tone-yellow-ink); }
.avatar-slot { display: contents; }

/* ---- Sidebar: collapsible groups ------------------------------------------- */
.nav-toggle {
    display: flex; align-items: center; width: 100%; gap: .5rem; border: 0; background: none;
    font: inherit; font-size: .72rem; font-weight: var(--fw-semibold); color: var(--sidebar-fg);
    padding: .45rem .75rem; margin-inline: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: start;
}
.nav-toggle:hover { color: #fff; background: var(--sidebar-hover); }
.nav-toggle:focus-visible { outline: 2px solid var(--sidebar-fg); outline-offset: 1px; }
.nav-toggle .chev { margin-inline-start: auto; transition: transform .2s; font-size: .8rem; }
.nav-toggle .hint { font-size: .66rem; font-weight: var(--fw-semibold); background: rgba(255, 255, 255, .1); border-radius: var(--radius-pill); padding: 0 .45rem; line-height: 1.5; }
.nav-section.collapsed .nav-toggle .chev { transform: rotate(-90deg); }
.nav-section.collapsed .side-link { display: none; }
.nav-section:not(.collapsed) .nav-toggle .hint { display: none; }
.nav-section.collapsed:has(.side-link.active) .nav-toggle { color: #fff; }

/* ---- Desktop: fold the whole menu into an icon rail -------------------------- */
.rail-toggle { margin: auto .75rem .75rem; border: 0; background: none; font: inherit; width: calc(100% - 1.5rem); }
.rail-toggle .bi { transition: transform .2s; }
@media (min-width: 992px) {
    html.nav-rail { --sidebar-w: 76px; }
    html.nav-rail .sidebar .sidebar-brand { justify-content: center; padding-inline: .5rem; }
    html.nav-rail .sidebar .sidebar-brand > div,
    html.nav-rail .sidebar .nav-toggle,
    html.nav-rail .sidebar .nav-section-title,
    html.nav-rail .sidebar .sidebar-footer { display: none; }
    html.nav-rail .sidebar .nav-section { padding: .5rem .5rem 0; }
    html.nav-rail .sidebar .nav-section + .nav-section { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: .5rem; }
    html.nav-rail .sidebar .nav-section.collapsed .side-link { display: flex; }
    html.nav-rail .sidebar .side-link { font-size: 0; justify-content: center; margin-inline: 0; padding-inline: 0; gap: 0; }
    html.nav-rail .sidebar .side-link .bi { font-size: 1.2rem; width: auto; }
    html.nav-rail .rail-toggle { margin-inline: .5rem; width: calc(100% - 1rem); }
    html.nav-rail .rail-toggle .bi { transform: scaleX(-1); }
}

/* ---- Phones: status filter = full-width segmented control, presets scroll inside the card */
@media (max-width: 575.98px) {
    .card-body .chip-tabs.chip-scroll {
        display: flex; width: 100%; margin-inline: 0; padding: 4px; overflow-x: auto;
    }
    .card-body .chip-tabs.chip-scroll a { flex: 1 1 auto; }   /* segments sized to their words */
    .chip-tabs a { white-space: nowrap; text-align: center; line-height: 1.25; font-size: .8rem;
                   padding: .45rem .4rem; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .card-body .preset-row.chip-scroll { margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; }
    .preset { min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }
    .filter-bar { flex-wrap: nowrap; }
    .filter-bar .search { flex: 1 1 auto; }
    .filter-bar > .btn { flex: 0 0 auto; }
    .filter-bar .filter-more.show { flex-wrap: wrap; }
    .filter-bar:has(.filter-more.show) { flex-wrap: wrap; }
}
@media (max-width: 359.98px) { .chip-tabs a { font-size: .74rem; padding-inline: .3rem; } }