/*
 * Massar — shared Filament theme of /admin, /teacher and /platform: the soft scheme of the tablet app
 * (docs/TABLET-APP.md §5.7), so both panels look like the same product.
 *
 * Plain CSS, no build step: loaded after Filament's styles by resources/views/filament/head.blade.php
 * (render hook HEAD_END). Filament's CSS lives in cascade layers, so these unlayered rules win over it
 * without !important (only against inline styles Filament writes, with a comment).
 *
 * Order: tokens first — the colour palettes are Filament's own (App\Support\Brand::COLORS, registered
 * by the panels, so every fi- part already uses them); this file maps the rest of the scheme (page,
 * text, radius) onto Filament's variables, then styles Filament's parts (classes fi-…). The teacher
 * pages' own classes (m-…) are in teacher.css, loaded after this file on /teacher. Light only.
 */

/* ---------- Tokens ---------- */

:root {
    /* The scheme by name, for rules here and in teacher.css (same values as Brand::COLORS). */
    --m-primary: #1f7a56;
    --m-primary-hover: #19654a;
    --m-primary-soft: #f1faf5;
    --m-primary-tint: #e7f3ee;
    --m-primary-line: #cfe8da;
    --m-primary-strong: #9fd6bb;
    --m-info: #2563c9;
    --m-info-soft: #f3f8ff;
    --m-info-tint: #e8f1fe;
    --m-info-line: #d9e7fb;
    --m-danger: #c0392b;
    --m-danger-soft: #fff5f4;
    --m-danger-tint: #fdecea;
    --m-danger-line: #f3cfcb;
    --m-purple: #6d4bc3;
    --m-purple-soft: #f7f4fe;
    --m-purple-tint: #ece5fd;
    --m-purple-line: #e6defa;
    --m-warn: #b26b00;
    --m-warn-soft: #fffbf2;
    --m-warn-tint: #fff4e0;
    --m-warn-line: #f5e1b8;
    --m-ink: #1e2a33;
    --m-muted: #64748b;
    --m-faint: #94a3b8;
    --m-line: #e6eaf0;
    --m-line-soft: #f0f3f7;
    --m-subtle: #f8fafc;
    --m-subtle-2: #f1f5f9;
    --m-page: #f4f6f9;
    --m-star: #f6b93b;
    --m-star-stroke: #d69e2e;
    --m-star-empty: #ffffff;
    --m-star-empty-stroke: #cbd5e1;
    --m-radius: 16px;
    --m-content: 64rem;

    /*
     * Filament's corner radii (Tailwind theme variables): inputs and buttons use --radius-lg, sections,
     * cards and modals --radius-xl. Scheme: inputs and buttons 10–14 px, cards 16–18 px.
     */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

/* ---------- Page and text ---------- */

body.fi-body {
    background: var(--m-page);
    color: var(--m-ink);
}

/* Inputs at 16px at least, or phones zoom in when they get focus. */
.fi-body input,
.fi-body select,
.fi-body textarea {
    font-size: 16px;
}

.fi-body ::selection {
    background: var(--m-primary-line);
    color: var(--m-ink);
}

/* ---------- Shell: side menu, top bar, page header (both panels) ---------- */

/*
 * White top bar and side menu with thin borders; the breadcrumb at the start of the top bar and the
 * user's name and role beside the account menu (resources/views/filament/topbar-breadcrumbs.blade.php,
 * user-name.blade.php); a light band under the top bar for the page header — Filament's own header
 * (.fi-header) on /admin, the teacher pages' header view (.m-page-header) on /teacher.
 */

.fi-topbar {
    background: #fff;
    border-bottom: 1px solid var(--m-line);
    box-shadow: none;
}

.fi-sidebar {
    background: #fff;
    border-inline-end: 1px solid var(--m-line);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--m-primary);
}

.fi-sidebar-group-label {
    color: var(--m-faint);
}

/* Buttons that fold / open the side menu: framed, so they are easy to find */
.fi-topbar-collapse-sidebar-btn-ctn {
    width: auto;
    margin-inline-end: 12px;
}

.fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn,
.fi-topbar-open-sidebar-btn,
.fi-topbar-close-sidebar-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: #fff;
    color: var(--m-ink);
}

.fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn:hover,
.fi-topbar-open-sidebar-btn:hover {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

.m-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: 16px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--m-line);
    font-size: 13px;
    color: var(--m-muted);
}

.m-crumbs a {
    color: var(--m-muted);
    text-decoration: none;
    border-radius: 4px;
}

.m-crumbs a:hover {
    color: var(--m-primary);
}

.m-crumbs span {
    color: var(--m-ink);
    font-weight: 600;
}

.m-crumbs svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-user {
    display: flex;
    flex-direction: column;
    margin-inline-end: 10px;
    line-height: 1.35;
}

.m-user-name {
    font-size: 14px;
    font-weight: 600;
}

.m-user-role {
    font-size: 12px;
    color: var(--m-muted);
}

.fi-main {
    padding: 0;
}

.fi-page-header-main-ctn {
    padding: 0;
    row-gap: 0;
}

.fi-page-main {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--m-content);
    margin-inline: auto;
    padding: 20px 24px 32px;
}

.fi-page-content {
    row-gap: 0;
}

.m-page-header {
    background: var(--m-subtle);
    border-bottom: 1px solid var(--m-line);
    padding: 18px 24px;
}

.m-page-header-inner {
    box-sizing: border-box;
    max-width: var(--m-content);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

.m-page-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.m-page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-page-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--m-primary-tint);
    color: var(--m-primary);
}

.m-page-icon svg {
    width: 22px;
    height: 22px;
}

.m-page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.m-page-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--m-muted);
}

.m-page-meta li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-page-icon svg,
.m-page-meta svg,
.m-with-icon svg,
.m-search svg {
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-page-meta svg {
    width: 16px;
    height: 16px;
}

.m-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.m-page-actions .fi-btn {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.m-page-actions .fi-btn.fi-color-primary:not(.fi-outlined) {
    box-shadow: 0 6px 16px rgb(31 122 86 / 0.25);
}

.m-crumbs a:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Side menu items: 44 px, grey icon, 14 px label; the open page bold on the soft green (above). */
.fi-sidebar-item-btn {
    min-height: 44px;
    column-gap: 12px;
    border-radius: 10px;
}

.fi-sidebar-item-label {
    font-size: 14px;
    font-weight: 500;
    color: #334155;
}

.fi-sidebar-item-icon {
    color: var(--m-faint);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 700;
}

.fi-sidebar-group-label {
    font-size: 12px;
    font-weight: 600;
}

/* /admin and /platform use the whole width (wide tables); the teacher pages keep --m-content (64 rem). */
.fi-panel-admin,
.fi-panel-platform {
    --m-content: 100%;
}

/* /admin: Filament's page header becomes the light band, with the page's icon in a tinted tile. */
.fi-page-header-main-ctn > .fi-header {
    box-sizing: border-box;
    margin: 0;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    background: var(--m-subtle);
    border-bottom: 1px solid var(--m-line);
}

.fi-header > div:not(.fi-header-actions-ctn) {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

.fi-header > div:not(.fi-header-actions-ctn) > :not(.m-page-icon, .fi-header-heading),
.fi-header > div:not(.fi-header-actions-ctn) > .fi-header-heading:first-child {
    grid-column: 1 / -1;
}

.fi-header-heading {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--m-ink);
    overflow-wrap: anywhere;
}

.fi-header-subheading {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--m-muted);
}

.fi-header .m-page-meta {
    margin-top: 6px;
}

.fi-header-actions-ctn .fi-btn {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
}

.fi-header-actions-ctn .fi-btn.fi-color-primary:not(.fi-outlined) {
    box-shadow: 0 6px 16px rgb(31 122 86 / 0.25);
}

/* Phone: the user's name and the breadcrumb hidden from the top bar, less padding */
@media (max-width: 47.99rem) {
    .m-user,
    .m-crumbs {
        display: none;
    }

    .m-page-header,
    .fi-page-header-main-ctn > .fi-header,
    .fi-page-main {
        padding-inline: 16px;
    }

    .m-page-title,
    .fi-header-heading {
        font-size: 22px;
    }
}

/* Brand: the Massar mark with «مسار» in green (teacher: header and login; admin: with the organization's name) */
.m-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    color: var(--m-primary);
}

.m-brand img {
    height: 36px;
    width: auto;
}

.m-brand-admin {
    gap: 8px;
    font-size: 18px;
    white-space: nowrap;
}

.m-brand-admin img {
    height: 30px;
}

.m-brand-org {
    font-size: 15px;
    font-weight: 600;
    color: var(--m-ink);
}

/* ---------- Cards and sections ---------- */

/*
 * Sections (forms, widgets, the account card): white cards with a 1 px border and 16 px corners, no
 * shadow; header 16 × 20 px with the section's icon in a 36 px tinted tile, title 18 px bold,
 * description 13 px grey; content 20 px.
 */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn {
    border-radius: var(--m-radius);
    box-shadow: 0 0 0 1px var(--m-line);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 16px 20px;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-color: var(--m-line-soft);
}

.fi-section:not(.fi-section-not-contained):not(.fi-compact) > .fi-section-content-ctn > .fi-section-content {
    padding: 20px;
}

.fi-section > .fi-section-header {
    align-items: center;
}

.fi-section .fi-section-header-heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--m-ink);
}

.fi-section .fi-section-header-description {
    font-size: 13px;
    line-height: 1.5;
    color: var(--m-muted);
}

.fi-section > .fi-section-header > .fi-section-collapse-btn {
    color: var(--m-faint);
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-secondary {
    background: var(--m-subtle);
}

/*
 * The section's icon in a tinted tile. On a form the tiles cycle through the families by position —
 * green, blue, purple, amber, neutral — counting only the sections shown with an icon (a hidden
 * section keeps an empty wrapper, so it is not counted). Red is never used: it means an error.
 */
.fi-section {
    --m-tone: var(--m-primary);
    --m-tone-tint: var(--m-primary-tint);
}

.fi-sc > :nth-child(5n + 2 of :has(> .fi-sc-component > .fi-section > .fi-section-header > .fi-icon)) > .fi-sc-component > .fi-section {
    --m-tone: var(--m-info);
    --m-tone-tint: var(--m-info-tint);
}

.fi-sc > :nth-child(5n + 3 of :has(> .fi-sc-component > .fi-section > .fi-section-header > .fi-icon)) > .fi-sc-component > .fi-section {
    --m-tone: var(--m-purple);
    --m-tone-tint: var(--m-purple-tint);
}

.fi-sc > :nth-child(5n + 4 of :has(> .fi-sc-component > .fi-section > .fi-section-header > .fi-icon)) > .fi-sc-component > .fi-section {
    --m-tone: var(--m-warn);
    --m-tone-tint: var(--m-warn-tint);
}

.fi-sc > :nth-child(5n of :has(> .fi-sc-component > .fi-section > .fi-section-header > .fi-icon)) > .fi-sc-component > .fi-section {
    --m-tone: #475569;
    --m-tone-tint: var(--m-subtle-2);
}

.fi-section > .fi-section-header > .fi-icon {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 8px;
    border-radius: 10px;
    background: var(--m-tone-tint);
    color: var(--m-tone);
}

/* Fieldsets: a thin frame, 12 px corners, the legend 14 px semi-bold. */
.fi-fieldset:not(.fi-fieldset-not-contained) {
    border-color: var(--m-line);
    border-radius: var(--radius-lg);
}

.fi-fieldset > legend {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* ---------- Tables ---------- */

/*
 * As the teacher's session table on a wide screen: a white card with a thin border; a toolbar with the
 * 44 px search and framed 40 px buttons (filters, columns); a light grey header row, 13 px semi-bold;
 * rows 14 px with a very light line between them; descriptions 12 px; selected rows soft green;
 * separate rounded page buttons, the current one green.
 */
.fi-ta-ctn {
    border-radius: var(--m-radius);
    box-shadow: 0 0 0 1px var(--m-line);
}

.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-ta-filter-indicators,
.fi-ta-ctn .fi-ta-selection-indicator {
    border-color: var(--m-line-soft);
}

.fi-ta-ctn .fi-ta-header {
    padding: 16px 20px;
}

.fi-ta-ctn .fi-ta-header .fi-ta-header-heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--m-ink);
}

.fi-ta-ctn .fi-ta-header .fi-ta-header-description {
    font-size: 13px;
    color: var(--m-muted);
}

.fi-ta-ctn .fi-ta-header-toolbar {
    padding: 12px 16px;
}

.fi-ta-ctn .fi-ta-header-toolbar .fi-ta-search-field {
    min-width: min(100%, 18rem);
}

.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn {
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: #fff;
    color: #334155;
}

.fi-ta-ctn .fi-ta-header-toolbar .fi-icon-btn:hover {
    background: var(--m-primary-soft);
    color: var(--m-primary);
}

/* Active filters and selected records: a light band under the toolbar. */
.fi-ta-ctn .fi-ta-filter-indicators {
    padding-block: 10px;
    background: var(--m-subtle);
}

.fi-ta-ctn .fi-ta-filter-indicators .fi-ta-filter-indicators-label {
    font-size: 13px;
    color: var(--m-muted);
}

.fi-ta-ctn .fi-ta-selection-indicator {
    background: var(--m-primary-soft);
    color: var(--m-primary);
    font-weight: 600;
}

.fi-ta-table > thead > tr,
.fi-ta-content-ctn .fi-ta-content-header {
    background: var(--m-subtle);
}

.fi-ta-header-cell {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

:where(.fi-ta-table > thead > :not(:last-child)),
.fi-ta-table > thead {
    border-color: var(--m-line);
}

:where(.fi-ta-table > tbody > :not(:last-child)) {
    border-color: var(--m-line-soft);
}

.fi-ta-text:not(.fi-inline) {
    padding-block: 12px;
}

.fi-ta-text-item {
    font-size: 14px;
    color: var(--m-ink);
}

.fi-ta-text > .fi-ta-text-description {
    font-size: 12px;
    color: var(--m-faint);
}

.fi-ta-row.fi-clickable:hover {
    background: var(--m-subtle);
}

.fi-ta-row.fi-selected:not(.fi-striped) {
    background: var(--m-primary-soft);
}

/* Row actions: icon + label, 13 px semi-bold. */
.fi-ta-actions .fi-link {
    font-size: 13px;
    font-weight: 600;
}

/* Empty state: the icon in a soft green circle, a 16 px title, a grey line. */
.fi-ta-empty-state .fi-ta-empty-state-icon-bg {
    background: var(--m-primary-tint);
}

.fi-ta-empty-state .fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--m-primary);
}

.fi-ta-empty-state .fi-ta-empty-state-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--m-ink);
}

.fi-ta-empty-state .fi-ta-empty-state-description {
    font-size: 14px;
    color: var(--m-muted);
}

/* Pagination: separate 36 px buttons with 10 px corners, the current page filled green. */
.fi-pagination .fi-pagination-overview {
    font-size: 13px;
    font-weight: 500;
    color: var(--m-muted);
}

.fi-pagination .fi-pagination-items {
    gap: 6px;
    background: none;
    box-shadow: none;
}

.fi-pagination .fi-pagination-item {
    border-inline-width: 0;
}

.fi-pagination .fi-pagination-item .fi-pagination-item-btn,
.fi-pagination .fi-pagination-item:first-of-type .fi-pagination-item-btn,
.fi-pagination .fi-pagination-item:last-of-type .fi-pagination-item-btn {
    min-width: 36px;
    height: 36px;
    justify-content: center;
    border: 1px solid var(--m-line);
    border-radius: 10px;
    background: #fff;
}

.fi-pagination .fi-pagination-item .fi-pagination-item-label {
    font-weight: 600;
    color: #334155;
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-btn {
    border-color: var(--m-primary);
    background: var(--m-primary);
}

.fi-pagination .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff;
}

/* ---------- Form fields ---------- */

/*
 * The text field fills its whole frame (44 px at least, the touch target): Filament's input is
 * shorter than the frame, so a browser's autofill colour stopped short of the bottom edge.
 */
.fi-input-wrp {
    min-height: 44px;
}

.fi-input-wrp-content-ctn {
    display: flex;
    align-self: stretch;
}

.fi-input-wrp input.fi-input {
    align-self: stretch;
}

/* Browser autofill (saved phone and password): keep the white field and the ink text, not Chrome's blue. */
.fi-input-wrp input.fi-input:-webkit-autofill,
.fi-input-wrp input.fi-input:-webkit-autofill:hover,
.fi-input-wrp input.fi-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: var(--m-ink);
    caret-color: var(--m-ink);
}

/*
 * Fields as in the teacher's forms and the mockup: label 14 px semi-bold; a white 44 px frame with a
 * thin border and 12 px corners; focus = green border with a soft green halo; invalid = red border
 * (red halo when focused) and a 13 px red message; disabled = light grey with grey text; help 13 px grey.
 */
.fi-fo-field .fi-fo-field-label-content {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.fi-fo-field .fi-fo-field-label-content .fi-fo-field-label-required-mark {
    color: var(--m-danger);
}

.fi-input-wrp {
    box-shadow: 0 0 0 1px var(--m-line);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow: 0 0 0 1px var(--m-primary), 0 0 0 4px var(--m-primary-tint);
}

.fi-input-wrp.fi-invalid {
    box-shadow: 0 0 0 1px var(--m-danger);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within {
    box-shadow: 0 0 0 1px var(--m-danger), 0 0 0 4px var(--m-danger-tint);
}

.fi-input-wrp.fi-disabled {
    background: var(--m-subtle-2);
}

.fi-input-wrp.fi-disabled .fi-input,
.fi-input-wrp.fi-disabled .fi-select-input-btn {
    color: var(--m-faint);
    -webkit-text-fill-color: var(--m-faint);
}

.fi-input {
    color: var(--m-ink);
}

.fi-input::placeholder {
    color: var(--m-faint);
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    color: var(--m-faint);
}

.fi-select-input .fi-select-input-btn {
    min-height: 42px;
    font-size: 16px;
}

/*
 * A select's list of options: Filament sets its width inline to the button's measured width, which can
 * come out far too narrow (search box and options cut to a word per line); never narrower than 18 rem
 * (min-width wins over that width without !important), options at 14 px.
 */
.fi-select-input .fi-dropdown-panel {
    min-width: min(18rem, calc(100vw - 32px));
}

.fi-select-input .fi-select-input-option {
    font-size: 14px;
}

.fi-fo-field .fi-fo-field-wrp-error-message {
    font-size: 13px;
    font-weight: 500;
    color: var(--m-danger);
}

.fi-fo-field .fi-sc-text:not(.fi-badge) {
    font-size: 13px;
    color: var(--m-muted);
}

/* Checkboxes and radios: 18 px, slate border, green when checked. */
input[type='checkbox'].fi-checkbox-input,
input[type='radio'].fi-radio-input {
    width: 18px;
    height: 18px;
    --tw-ring-color: #cbd5e1;
}

input[type='checkbox'].fi-checkbox-input {
    border-radius: 5px;
}

/* Toggle: a clearer track when off. */
.fi-toggle.fi-toggle-off {
    background-color: #cbd5e1;
}

/*
 * Toggle buttons (جهة الاتصال, الحالة الصحية, الصفة…) as a segmented control, like حفظ / مراجعة:
 * a light grey track, the chosen option white with green text.
 */
.fi-fo-toggle-buttons.fi-inline:not(.fi-btn-group),
.fi-fo-toggle-buttons.fi-btn-group {
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--m-subtle-2);
    box-shadow: none;
}

.fi-fo-toggle-buttons.fi-inline .fi-btn,
.fi-fo-toggle-buttons.fi-btn-group > .fi-btn {
    min-height: 40px;
    padding-inline: 16px;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--m-muted);
    font-size: 15px;
    font-weight: 700;
}

.fi-fo-toggle-buttons.fi-inline .fi-btn .fi-icon,
.fi-fo-toggle-buttons.fi-btn-group .fi-btn .fi-icon {
    color: currentColor;
}

.fi-fo-toggle-buttons.fi-inline .fi-fo-toggle-buttons-input:checked + .fi-btn,
.fi-fo-toggle-buttons.fi-btn-group .fi-fo-toggle-buttons-input:checked + .fi-btn {
    background: #fff;
    color: var(--m-primary);
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.1);
}

.fi-fo-toggle-buttons .fi-fo-toggle-buttons-input:focus-visible + .fi-btn {
    outline: 2px solid var(--m-primary);
    outline-offset: 2px;
}

/* Repeater items (schedule lines) and the photo drop area. */
.fi-fo-repeater-item {
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px var(--m-line);
}

.fi-fo-file-upload .filepond--root .filepond--panel-root {
    background: var(--m-primary-soft);
    border: 1.5px dashed var(--m-primary-strong);
}

/* ---------- Buttons, badges, tabs ---------- */

/* Buttons: 12 px corners, semi-bold; form and dialog actions 44 px, the primary one with its soft shadow. */
.fi-btn {
    border-radius: 12px;
    font-weight: 600;
}

.fi-sc-actions .fi-btn,
.fi-modal-footer-actions .fi-btn {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 15px;
    font-weight: 700;
}

.fi-sc-actions .fi-btn.fi-color-primary:not(.fi-outlined),
.fi-modal-footer-actions .fi-btn.fi-color-primary:not(.fi-outlined) {
    box-shadow: 0 6px 16px rgb(31 122 86 / 0.25);
}

.fi-btn:not(.fi-color),
label.fi-btn {
    --tw-ring-color: var(--m-line);
}

/*
 * Badges as the teacher's status pills: fully rounded, 12 px bold, the family's tint with its colour,
 * no ring (حاضر, مواظب, نشط, لم يتزامن اليوم…); grey badges slate on light grey.
 */
.fi-badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.fi-badge:not(.fi-color) {
    background: var(--m-subtle-2);
    color: #475569;
}

.fi-badge.fi-color {
    background-color: var(--color-100);
    color: var(--color-600);
}

.fi-badge.fi-color .fi-icon {
    color: currentColor;
}

/* Tabs (التسجيلات السنوية, a relation manager): 40 px items, the open one bold on the soft green. */
.fi-tabs.fi-contained {
    border-color: var(--m-line-soft);
}

.fi-tabs-item {
    min-height: 40px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--m-muted);
}

.fi-tabs-item:hover,
.fi-tabs-item:focus-visible {
    background: var(--m-subtle);
}

.fi-tabs-item.fi-active {
    background: var(--m-primary-soft);
    color: var(--m-primary);
    font-weight: 700;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--m-primary);
}

/* ---------- Overlays: dropdowns, modals, notifications, tooltips ---------- */

/* Dropdowns (account menu, filters, bulk actions, select options): 12 px corners, thin border, soft shadow. */
.fi-dropdown-panel {
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--m-line), 0 12px 32px rgb(15 23 42 / 0.08);
}

.fi-dropdown-list-item {
    min-height: 40px;
    border-radius: 8px;
    font-size: 14px;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background: var(--m-subtle);
}

.fi-dropdown-header {
    font-size: 14px;
    font-weight: 600;
}

/* Modals and slide-overs: 18 px corners like the teacher's panel, 18 px titles, the icon in the family's tint. */
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    box-shadow: 0 0 0 1px var(--m-line), 0 20px 48px rgb(15 23 42 / 0.12);
}

.fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
    border-radius: 18px;
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--m-ink);
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-description {
    font-size: 14px;
    color: var(--m-muted);
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-icon-bg {
    background: var(--m-subtle-2);
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-icon-bg.fi-color {
    background: var(--color-100);
}

.fi-modal > .fi-modal-window-ctn > .fi-modal-window .fi-modal-icon-bg.fi-color .fi-icon {
    color: var(--color-600);
}

/* Notifications: a white card with a thin border and a soft shadow; title 15 px bold, text 14 px grey. */
.fi-no-notification {
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--m-line), 0 12px 32px rgb(15 23 42 / 0.1);
}

.fi-no-notification .fi-no-notification-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--m-ink);
}

.fi-no-notification .fi-no-notification-body {
    font-size: 14px;
    color: var(--m-muted);
}

/* Tooltips (Filament's light theme): white with ink text, a thin border and a soft shadow, 8 px corners, 13 px. */
.tippy-box[data-theme~='light'] {
    border-radius: 8px;
    color: var(--m-ink);
    font-size: 13px;
    font-weight: 500;
    --tippy-box-shadow: 0 0 0 1px var(--m-line), 0 8px 24px rgb(15 23 42 / 0.1);
}

/* Read-only entries inside forms (رقم الطالب, إخوته المسجلون): the field label style. */
.fi-in-entry .fi-in-entry-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

/* ---------- Login page (proposal «A», all themed panels) ---------- */

/*
 * A white page, no card: a 400 px column high on the page with the mark and «مسار», the heading 26 px
 * bold and one grey line, aligned to the start; fields 48 px with their icons; a 48 px green button.
 */
.fi-simple-layout {
    background: #fff;
}

.fi-simple-main-ctn {
    align-items: flex-start;
    padding-top: clamp(40px, 14vh, 140px);
}

.fi-simple-main {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 400px;
    margin-block: 0 40px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.fi-simple-header {
    align-items: flex-start;
}

.fi-simple-header .fi-logo {
    margin-bottom: 22px;
}

.fi-simple-header .m-brand {
    font-size: 28px;
}

.fi-simple-header .m-brand img {
    height: 44px;
}

.fi-simple-header-heading {
    text-align: start;
    font-size: 26px;
    font-weight: 700;
    color: var(--m-ink);
}

.fi-simple-header-subheading {
    margin-top: 4px;
    text-align: start;
    font-size: 14px;
    color: var(--m-muted);
}

.fi-simple-main .fi-input-wrp {
    min-height: 48px;
}

.fi-simple-main .fi-sc-actions .fi-btn {
    min-height: 48px;
    font-size: 16px;
}

/* Links inside tables and read-only entries (a guardian's children…): green, underlined on hover. */
.m-link {
    color: var(--m-primary);
    font-weight: 600;
    text-decoration: none;
}

.m-link:hover,
.m-link:focus-visible {
    text-decoration: underline;
}

.m-link-note {
    color: var(--m-muted);
    font-size: 13px;
}

/* ---------- Figure tiles (stats widgets) ---------- */

/*
 * A figure in one of the scheme's families, as the teacher's session tiles: tinted background and
 * border, label 13 px, figure 24 px bold, the icon in a coloured circle at the end of the first line.
 * The family is set per figure (classes m-tone m-tone-…, ReportStats::tone()).
 */
.m-tone {
    --m-tone: var(--m-primary);
    --m-tone-soft: var(--m-primary-soft);
    --m-tone-tint: var(--m-primary-tint);
    --m-tone-line: var(--m-primary-line);
    --m-tone-value: var(--m-primary);
}

.m-tone-blue { --m-tone: var(--m-info); --m-tone-soft: var(--m-info-soft); --m-tone-tint: var(--m-info-tint); --m-tone-line: var(--m-info-line); --m-tone-value: var(--m-ink); }
.m-tone-red { --m-tone: var(--m-danger); --m-tone-soft: var(--m-danger-soft); --m-tone-tint: var(--m-danger-tint); --m-tone-line: var(--m-danger-line); --m-tone-value: var(--m-danger); }
.m-tone-purple { --m-tone: var(--m-purple); --m-tone-soft: var(--m-purple-soft); --m-tone-tint: var(--m-purple-tint); --m-tone-line: var(--m-purple-line); --m-tone-value: var(--m-purple); }
.m-tone-amber { --m-tone: var(--m-warn); --m-tone-soft: var(--m-warn-soft); --m-tone-tint: var(--m-warn-tint); --m-tone-line: var(--m-warn-line); --m-tone-value: var(--m-warn); }
.m-tone-neutral { --m-tone: #475569; --m-tone-soft: var(--m-subtle); --m-tone-tint: var(--m-subtle-2); --m-tone-line: var(--m-line); --m-tone-value: var(--m-ink); }

.fi-wi-stats-overview-stat.m-tone {
    position: relative;
    padding: 14px 16px;
    border: 1px solid var(--m-tone-line);
    border-radius: var(--m-radius);
    background: var(--m-tone-soft);
    box-shadow: none;
    text-decoration: none;
}

a.fi-wi-stats-overview-stat.m-tone:hover {
    border-color: var(--m-tone);
}

.m-tone .fi-wi-stats-overview-stat-content {
    row-gap: 4px;
}

.m-tone .fi-wi-stats-overview-stat-label-ctn,
.m-tone .fi-wi-stats-overview-stat-value,
.m-tone .fi-wi-stats-overview-stat-placeholder {
    padding-inline-end: 48px;
}

.m-tone .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    position: absolute;
    top: 14px;
    inset-inline-end: 16px;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 9px;
    border-radius: 50%;
    background: var(--m-tone-tint);
    color: var(--m-tone);
}

.m-tone .fi-wi-stats-overview-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.m-tone .fi-wi-stats-overview-stat-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--m-tone-value);
}

.m-tone .fi-wi-stats-overview-stat-description {
    font-size: 12px;
    color: #475569;
}

.m-tone .fi-wi-stats-overview-stat-description.fi-color {
    font-weight: 600;
}

/* Account card of the home page: a large avatar, «مرحبًا» small and grey, the name 17 px. */
.fi-account-widget .fi-avatar {
    width: 48px;
    height: 48px;
}

.fi-account-widget .fi-account-widget-heading {
    font-size: 13px;
    font-weight: 500;
    color: var(--m-muted);
}

.fi-account-widget .fi-account-widget-user-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--m-ink);
}

.fi-account-widget .fi-account-widget-logout-form .fi-btn {
    min-height: 44px;
    padding-inline: 16px;
}

/* ---------- «دليل الاستعمال» (docs/DOCUMENTATION.md §5.4), /admin and /teacher ---------- */

.m-guides + .m-guides {
    margin-top: 28px;
}

.m-guides-heading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--m-ink);
}

.m-guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 16px;
    align-items: start;
}

.m-guide-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.m-guide-version {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--m-muted);
}