/*
    ═══════════════════════════════════════════════════════════════════════════
    What the MudBlazor theme cannot say.
    ═══════════════════════════════════════════════════════════════════════════

    Colours, type and radii live in Components/Theme/HawzaTheme.cs and reach the
    page as MudBlazor's --mud-* custom properties. This file is only for what a
    theme has no slot for: the two faces, figures inside Arabic sentences, and
    the chrome's one decorative flourish. Everything here reads the theme's
    variables, so both schemes follow without a second copy.
*/

/* ── THE READING FACE ───────────────────────────────────────────────────────
   IBM Plex Sans Arabic, for everything that is not a title: a sans drawn for
   screens, compact enough for the dense tables, whose own Latin sets a code or
   a date inside an Arabic line without a change of voice. IBM's complete files,
   unmodified — the licence reserves the name «Plex», so a subset made here
   could not be served under it. Four weights, because MudBlazor draws 500
   where the theme draws 400, 600 and 700. OFL — see
   fonts/IBMPlexSansArabic-OFL.txt. */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

/* ── THE TITLE FACE ─────────────────────────────────────────────────────────
   Amiri Bold, split the way the font's own distribution splits it so a page
   of Arabic titles fetches the Arabic file and nothing else. `swap`: a title
   drawn first in the system face and then in Amiri is better than a title not
   drawn at all on a slow link. OFL — see fonts/Amiri-OFL.txt. */
@font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/amiri-700-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
        U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "Amiri";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/amiri-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── BOXES ──────────────────────────────────────────────────────────────────
   ONE HEIGHT FOR EVERY SINGLE-LINE BOX: 48px. MudBlazor sizes an outlined box
   by its margin — 55px normal, 39px dense — so a filter bar's select stood a
   third shorter than the form's text box beside it, and nothing in the product
   chose either on purpose. One padding for both margins ends that.

   AND ROOM UNDER THE LABEL. Once a label moves onto the border it ends 7.8px
   into the box; in a dense box the text began at 10.5px, and Arabic letters
   rise above their line, so the two touched. At 15px of padding, with the
   label lifted to sit on the border line itself, the value has air above it.
   The resting label is centred in the new height, and set in the medium
   weight: a bold placeholder shouted louder than the value typed after it.

   No page sets a box's Margin any more, so every box is
   MudBlazor's default and only these selectors reach it; the «dense» ones stay
   for MudBlazor's own boxes — the table pager's page-size select is one — so
   even they stand at the same height. */
.mud-input > input.mud-input-root-outlined,
.mud-input > div.mud-input-slot.mud-input-root-outlined,
.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input > div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 15px;
    padding-bottom: 15px;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-weight: 500;
}

.mud-application-layout-rtl .mud-input-label-outlined,
.mud-application-layout-rtl .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(-14px, 15px) scale(1);
}

.mud-application-layout-rtl .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(-14px, -8px) scale(0.75);
}

/* A LEFT-TO-RIGHT BOX IN A RIGHT-TO-LEFT FORM — a username, a password.
   MudBlazor clears the icon's side of the box with LOGICAL padding, and a
   logical side resolves against the input's own direction: in a `dir="ltr"`
   input «start» is the left, so the clearance landed on the wrong side and the
   typed text ran into the left border. Stated physically instead: the icon is
   on the right of a right-to-left form whatever the input's direction. */
.mud-application-layout-rtl .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-start[dir="ltr"] {
    padding-left: 14px;
    padding-right: 0;
}

.mud-application-layout-rtl .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end[dir="ltr"] {
    padding-left: 0;
    padding-right: 14px;
}

/* ── FIGURES ────────────────────────────────────────────────────────────────
   A date, a code or a quantity inside an Arabic sentence. The paragraph's own
   direction would reorder «2026-09-21» into «21-09-2026» and move a minus sign
   to the wrong end, so the run is isolated and laid out left to right whatever
   surrounds it. Tabular, so a column of them lines up. */
.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate-override;
}

/* ── THE HEADING FocusOnNavigate LANDS ON ─────────────────────────────────
   Routes.razor focuses each page's <h1> so a screen reader announces where the
   reader arrived. It is not a control, and a focus ring round the title of
   every screen marks something to operate that is not there. */
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ── THE BAR ────────────────────────────────────────────────────────────────
   The one place the interface decorates. The seminary's green, deepening
   toward the reading edge, over a faint lattice of eight-pointed stars — the
   khatam of the tilework in any madrasa courtyard — and a gold hairline taken
   from the full lockup. Everything below it stays plain. */
.hawza-appbar.mud-appbar {
    background-color: #012921;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h8M48 28h8M28 0v8M28 48v8'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(to left, #024e41 0%, #013a30 45%, #012921 100%);
    box-shadow: inset 0 -2px 0 var(--mud-palette-secondary);
}

.hawza-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.hawza-lockup img {
    height: 2.25rem;
    width: auto;
    flex-shrink: 0;
}

.hawza-lockup-name {
    display: block;
    font-family: var(--mud-typography-h1-family);
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.hawza-lockup-sub {
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #a4d3c6;
}

/* ── THE DRAWER ─────────────────────────────────────────────────────────────
   MudBlazor draws the page being read in the primary colour, which on the
   drawer's own green is green on green. Here it is white on a lifted band,
   marked on the reading edge by the same gold as the bar's hairline. */
.hawza-drawer .mud-nav-link {
    border-radius: 8px;
    margin-inline: 0.5rem;
    width: auto;
    padding-block: 0.5rem;
    color: var(--mud-palette-drawer-text);
}

.hawza-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgb(255 255 255 / 0.08);
    color: #ffffff;
}

.hawza-drawer .mud-nav-link {
    position: relative;
}

.hawza-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
.hawza-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    background-color: rgb(255 255 255 / 0.13);
    color: #ffffff;
    font-weight: 600;
}

.hawza-drawer .mud-nav-link.active .mud-nav-link-text {
    background: none;
}

/* The marker on the reading edge: a straight bar of its own, so the band's
   rounded corners never bend it into a bracket. */
.hawza-drawer .mud-nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--mud-palette-secondary);
}

.hawza-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-secondary-lighten);
}

.hawza-drawer .mud-navmenu {
    padding-block: 0.75rem 1.5rem;
}

.hawza-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 600;
}

/* The entry's label is the row the count sits in: a flex row, so the count goes to the far end of it and
   keeps a gap of its own from a long label (an inline badge never took its auto margin, and touched the text). */
.hawza-drawer .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* What is waiting behind an entry, at the far end of its row: the gold of the bar's hairline on the
   drawer's green, dark ink on it. */
.hawza-nav-count {
    flex: none;
    margin-inline-start: auto;
    min-width: 22px;
    padding-inline: 6px;
    border-radius: 11px;
    background: var(--mud-palette-secondary);
    color: #1c1a10;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

/* ── THE USER, AT THE END OF THE BAR ─────────────────────────────────────── */
.hawza-user.mud-button-root {
    padding-inline: 0.5rem;
    text-align: start;
}

.hawza-user .mud-button-label {
    gap: 0.625rem;
}

.hawza-user-avatar {
    font-weight: 700;
}

.hawza-user-text {
    display: none;
    line-height: 1.25;
}

.hawza-user-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
}

.hawza-user-role {
    display: block;
    font-size: 0.6875rem;
    color: #a4d3c6;
}

@media (min-width: 600px) {
    .hawza-user-text {
        display: block;
    }
}

.hawza-user-card {
    padding: 0.75rem 1rem 0.5rem;
    min-width: 13rem;
}

/* Sign-out is a command posted from inside a menu: it lines up with the menu's
   items rather than sitting in it as a button. */
.hawza-signout.mud-button-root {
    justify-content: flex-start;
    padding-inline: 1rem;
    border-radius: 0;
}

/* ── THE ACTION BAR ──────────────────────────────────────────────────────────
   The buttons of a long form, kept in reach: they stay at the bottom edge of the
   window while the form runs past it, so saving never means scrolling to the end
   and back. On a form that fits the window it is simply the row they were in. */
.hawza-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-block: 12px;
    background: var(--mud-palette-background);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── THE PERIOD, IN THE BAR ─────────────────────────────────────────────────
   The year and term every screen reads (WorkingContext). A quiet pill beside the
   seminary's name; gold while the period is not today's, so a director cannot
   read last year's numbers as this year's without the bar saying so. On a phone
   the pill is its icon: there is no room in the bar for a year's name, and the
   banner under it speaks whenever the period is not the current one. */
.hawza-context.mud-button-root {
    min-height: 44px;
    padding-inline: 0.75rem;
    border-radius: 999px;
    background-color: rgb(255 255 255 / 0.08);
    font-size: 0.8125rem;
}

.hawza-context.mud-button-root:hover {
    background-color: rgb(255 255 255 / 0.14);
}

.hawza-context .mud-button-label {
    gap: 0.5rem;
}

.hawza-context-year {
    font-weight: 600;
}

.hawza-context-term {
    color: #cfe6df;
}

.hawza-context--away.mud-button-root {
    background-color: rgb(212 165 90 / 0.28);
    box-shadow: inset 0 0 0 1px rgb(212 165 90 / 0.7);
}

.hawza-context--away .hawza-context-term {
    color: #ffe9bf;
}

@media (max-width: 599.98px) {
    .hawza-context-year,
    .hawza-context-term {
        display: none;
    }

    .hawza-context.mud-button-root {
        min-width: 44px;
        padding-inline: 0.5rem;
    }

    /* Just the calendar: the chevron would make a round button a pill again. */
    .hawza-context .mud-button-icon-end {
        display: none;
    }
}

.hawza-context-heading {
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hawza-context-chosen {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Under the bar while the screens read a period that is not today's. */
.hawza-context-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1.5rem;
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.16);
    border-bottom: 1px solid rgba(var(--mud-palette-secondary-rgb), 0.5);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

.hawza-context-banner .mud-button-root {
    margin-inline-start: auto;
}

/* ── THE PAGE ───────────────────────────────────────────────────────────── */
.hawza-main {
    min-height: 100dvh;
}

.hawza-page {
    padding-block: 1.75rem 3rem;
}

.hawza-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.hawza-page-head-text {
    min-width: 0;
    max-width: 48rem;
}

.hawza-page-title {
    color: var(--mud-palette-text-primary);
}

.hawza-page-note {
    margin-top: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.hawza-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.hawza-trail a {
    color: var(--mud-palette-primary);
}

.hawza-trail a:hover {
    text-decoration: underline;
}

.hawza-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ── SECTIONS ───────────────────────────────────────────────────────────────
   A register's page rather than a floating card: a hairline edge and no
   shadow, so a screen of several reads as one document in parts. */
.hawza-panel {
    overflow: hidden;
}

.hawza-panel + .hawza-panel {
    margin-top: 1.25rem;
}

.hawza-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.hawza-panel-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

/* Wide enough to take the row on a phone, so the actions wrap under the
   title instead of squeezing a long note into a column beside them. */
.hawza-panel-titles {
    min-width: 0;
    flex: 1 1 16rem;
}

.hawza-panel-note {
    display: block;
    color: var(--mud-palette-text-secondary);
}

.hawza-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hawza-panel-body {
    padding: 1.25rem;
}

.hawza-notice {
    margin-bottom: 1rem;
}

/* The line a page shows for the instant before it knows who is reading. */
.hawza-checking {
    color: var(--mud-palette-text-secondary);
}

/* ── TABLES ─────────────────────────────────────────────────────────────────
   Inside a flush panel the table meets the panel's edges; its header row sits
   on the sunken paper so the columns read as a register's ruled head — whether
   the table is MudTable's (a DataList, cells) or MudSimpleTable's (plain th). */
.hawza-table .mud-table-head .mud-table-cell,
.hawza-table.mud-simple-table thead th {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.hawza-table .mud-table-cell {
    vertical-align: top;
}

/* BELOW A DESK, A TABLE KEEPS ITS COLUMNS AND SCROLLS. Squeezed to a phone's
   width every cell wrapped to a sliver and a row grew a screen tall; at its own
   width — each cell capped, so a long name still wraps — it reads as a table
   and slides sideways inside its panel. */
@media (max-width: 959.98px) {
    .hawza-table.mud-simple-table table {
        width: max-content;
        min-width: 100%;
    }

    .hawza-table.mud-simple-table th,
    .hawza-table.mud-simple-table td {
        max-width: 16rem;
    }
}

/* DataList — the bar above a register: search, the page's own filters, what is ticked. */
.hawza-datalist {
    min-width: 0;
}

.hawza-datalist-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 16px;
}

.hawza-datalist-search {
    flex: 1 1 16rem;
    max-width: 24rem;
}

.hawza-datalist-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* A card on a phone holds a Latin name or an email whole: it breaks rather than push the page sideways (A2). */
.hawza-datalist .mud-table-cell {
    overflow-wrap: anywhere;
}

/* A chip lays its content out as flex items, which drops the space between a
   word and the figure after it — «بانتظار القرار:0». The gap puts it back. */
.mud-chip .mud-chip-content {
    gap: 0.25em;
}

/* ── BUTTONS ────────────────────────────────────────────────────────────────
   The quiet outlined button borders in the paper's own line colour, not in
   ink: a row of them is a row of options, and six near-black frames read as
   six alarms. It takes the seminary's green only when pointed at. */
.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

.mud-button-outlined.mud-button-outlined-default:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* ── TOUCH ──────────────────────────────────────────────────────────────────
   A finger is bigger than a pointer. MudBlazor's buttons are 36-37px tall, its
   clear-a-box icon 26px and a small link chip 24px — fine under a mouse, and a
   coin toss on a phone held in one hand between two lessons. On a phone every
   control that is pressed is 44px by 44px or more (the audit's A6); the account
   button, which is the one control on every screen, is 44px everywhere. Rows in
   a table scroll sideways inside their own box and keep the compact size until
   the list becomes cards. */
.hawza-user.mud-button-root {
    min-height: 44px;
}

@media (max-width: 599.98px) {
    .mud-button-root.mud-button {
        min-height: 44px;
    }

    .mud-button-root.mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .mud-chip[href] {
        min-height: 44px;
    }
}

/* The cell that names the row. */
.hawza-lead {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* A second line under the lead, dimmer. */
.hawza-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Boxes inside a table cell: sized to the column, not to the form. A figure
   is typed left to right, as it is read. */
.hawza-cell-select { min-width: 9rem; }
.hawza-cell-mark { min-width: 6rem; max-width: 8rem; }
.hawza-cell-time { min-width: 8rem; max-width: 9.5rem; }
.hawza-cell-code { max-width: 5rem; }

.hawza-num-input input {
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* ── ROW ACTIONS ────────────────────────────────────────────────────────────
   One affordance per act, compact and aligned. TWO SHAPES, because the class
   is worn by two kinds of element: on a bar it is a flex row; on a TABLE CELL
   it must stay a cell — a row that wraps cells into one anonymous cell stacks
   three action columns under two headers — so its buttons flow inline to the
   cell's end edge, on one line: a row with more acts than fit keeps the rest
   in a menu (⋮) rather than wrapping them into a column of buttons. */
.hawza-row-actions:not(td) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

td.hawza-row-actions {
    text-align: end;
    white-space: nowrap;
}

td.hawza-row-actions > * {
    margin-block: 0.125rem;
    white-space: nowrap;
    vertical-align: middle;
}

td.hawza-row-actions > * + * {
    margin-inline-start: 0.375rem;
}

/* ── A SECTION'S OWN HEAD ───────────────────────────────────────────────────
   Title over its notes, on a hairline that divides it from the body. */
.hawza-card-head {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.hawza-card-head .hawza-panel-note {
    margin-top: 0.125rem;
}

.hawza-panel-title {
    color: var(--mud-palette-text-primary);
}

.hawza-empty-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.hawza-back {
    margin-bottom: 0.75rem;
}

.hawza-basis-full {
    flex-basis: 100%;
}

.hawza-basis-22 {
    flex-basis: 22rem;
}

.hawza-min-w-48 {
    min-width: 12rem;
}

.hawza-clip {
    overflow: hidden;
}

/* ── WHY A STUDENT MAY NOT CONTINUE ─────────────────────────────────────────
   spec:643 «تعرض كل سبب منفصلاً وحالته وموعده … معالجة سبب لا تغلق الأسباب
   الأخرى»: one row per condition, each with its own state and its own remedy
   beside it, and never one collapsed sentence. */
.reasons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reasons > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
}

.reasons > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.reason-what {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.reason-note {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── THE DECISION BAR ───────────────────────────────────────────────────────
   The acts on the whole sheet, in a row under the list they act on. In the flow
   and never pinned to the window: pinned, it floated over whichever rows lay
   beneath it and read as two buttons in the middle of the table. */
.decision-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.hawza-refused {
    margin-bottom: 1rem;
}

/* A dashed box: a place that exists and holds nothing yet. */
.hawza-empty {
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.hawza-empty-icon {
    color: var(--mud-palette-text-disabled);
    margin-bottom: 0.5rem;
}

.hawza-empty-title {
    color: var(--mud-palette-text-primary);
}

.hawza-empty-note {
    max-width: 32rem;
    margin: 0.25rem auto 0;
    color: var(--mud-palette-text-secondary);
}

.hawza-empty-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* ── THE BOARD ──────────────────────────────────────────────────────────────
   The greeting, over the seal in watermark, is the board's one flourish;
   everything under it is a count that leads to its own rows. */
.hawza-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.75rem;
    padding: 1.75rem 1.75rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background:
        linear-gradient(to left, rgba(var(--mud-palette-primary-rgb), 0.07), transparent 60%),
        var(--mud-palette-surface);
}

.hawza-hero-text {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.hawza-hero-note {
    margin-top: 0.375rem;
    color: var(--mud-palette-text-secondary);
}

.hawza-hero-time {
    position: relative;
    z-index: 1;
}

.hawza-hero-seal {
    position: absolute;
    inset-inline-end: 1.5rem;
    top: 50%;
    width: 9.5rem;
    height: auto;
    transform: translateY(-50%);
    opacity: 0.07;
    pointer-events: none;
}

.hawza-section-title {
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.hawza-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin-bottom: 2rem;
}

.hawza-tile {
    --rail: var(--mud-palette-lines-inputs);
    --rail-rgb: var(--mud-palette-primary-rgb);
    --rail-ink: var(--mud-palette-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

.hawza-tile::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--rail);
}

.hawza-tile:hover {
    border-color: transparent;
    box-shadow: var(--mud-elevation-4);
}

.hawza-tile:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.hawza-tile--blocking {
    --rail: var(--mud-palette-error);
    --rail-rgb: var(--mud-palette-error-rgb);
    --rail-ink: var(--mud-palette-error);
}

.hawza-tile--attention {
    --rail: var(--mud-palette-warning);
    --rail-rgb: var(--mud-palette-warning-rgb);
    --rail-ink: var(--mud-palette-warning);
}

.hawza-tile-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.hawza-tile-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    color: var(--rail-ink);
    background: rgba(var(--rail-rgb), 0.12);
}

.hawza-tile-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hawza-tile-figure,
.hawza-tile-blank {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.hawza-tile-figure {
    color: var(--mud-palette-text-primary);
}

.hawza-tile-blank {
    color: var(--mud-palette-text-disabled);
}

.hawza-tile-note {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.hawza-today {
    margin-bottom: 1.5rem;
}

.hawza-capabilities-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── THE SMALL VOCABULARY ───────────────────────────────────────────────────
   Layout and text helpers the screens compose with, beside MudBlazor's own
   spacing and flex utilities (mt-4, gap-2, d-flex, align-center…), which
   share their 4px scale. */
.hawza-grid {
    display: grid;
}

.hawza-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hawza-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 600px) {
    .hawza-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hawza-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hawza-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hawza-span-sm-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 960px) {
    .hawza-cols-md-2, .hawza-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hawza-cols-md-3, .hawza-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hawza-cols-md-4, .hawza-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hawza-span-md-2, .hawza-span-lg-2 { grid-column: span 2 / span 2; }
}

.hawza-span-2 { grid-column: span 2 / span 2; }
.hawza-span-full, .hawza-span-sm-full, .hawza-span-md-full, .hawza-span-lg-full { grid-column: 1 / -1; }

.hawza-stack-1, .hawza-stack-2, .hawza-stack-3, .hawza-stack-4,
.hawza-stack-5, .hawza-stack-6, .hawza-stack-8 {
    display: flex;
    flex-direction: column;
}

.hawza-stack-1 { gap: 0.25rem; }
.hawza-stack-2 { gap: 0.5rem; }
.hawza-stack-3 { gap: 0.75rem; }
.hawza-stack-4 { gap: 1rem; }
.hawza-stack-5 { gap: 1.25rem; }
.hawza-stack-6 { gap: 1.5rem; }
.hawza-stack-8 { gap: 2rem; }

.hawza-nowrap { white-space: nowrap; }
.hawza-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hawza-min-w-0 { min-width: 0; }
.hawza-break { overflow-wrap: anywhere; }
.hawza-scroll-x { overflow-x: auto; }
.hawza-text-center { text-align: center; }
.hawza-text-start { text-align: start; }
.hawza-text-end, .hawza-n { text-align: end; }
.hawza-strong { font-weight: 600; }
.hawza-normal { font-weight: 400; }
.hawza-italic { font-style: italic; }
.hawza-underline { text-decoration: underline; }
.hawza-dim { color: var(--mud-palette-text-secondary); }
.hawza-small { font-size: 0.8125rem; }
.hawza-list { list-style: disc; padding-inline-start: 1.25rem; }
.hawza-list-numbered { list-style: decimal; padding-inline-start: 1.25rem; }

.hawza-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A sentence that explains the screen or a section, dimmer than its text. */
.hawza-note,
.hawza-page-note,
.hawza-panel-note {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

.hawza-note p + p,
.hawza-page-note p + p,
.hawza-panel-note p + p {
    margin-top: 0.375rem;
}

/* A hint under a field, when it carries more than one plain sentence. */
.hawza-help {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* The strip of choices above a list: which year, which day, which words. */
.hawza-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

/* The boxes share the strip and keep a width a choice can be read in; buttons
   and ticks keep their own size. */
.hawza-toolbar > .mud-input-control,
.hawza-toolbar > .mud-select,
.hawza-toolbar > .mud-picker {
    flex: 1 1 12rem;
    min-width: 12rem;
    max-width: 22rem;
}

.hawza-toolbar-count {
    margin-inline-start: auto;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.hawza-picker {
    max-width: 22rem;
}

/* A group of ticks or radios under one legend. */
.hawza-choices {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 0.5rem 1rem 0.875rem;
}

.hawza-choices > legend {
    padding-inline: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hawza-choice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
}

/* A progress bar a page draws itself. */
.hawza-meter {
    height: 0.375rem;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.hawza-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: currentColor;
}

.hawza-skeleton,
.hawza-skeleton-line {
    border-radius: 6px;
    background: var(--mud-palette-skeleton);
}

.hawza-skeleton-line {
    height: 0.75rem;
}

/* ── NATIVE CONTROLS ────────────────────────────────────────────────────────
   Boxes that still post over plain HTTP to a controller — a row's hidden
   revision beside its button, a file to upload — drawn to sit beside
   MudBlazor's outlined fields without looking foreign. */
.hawza-native {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.hawza-native:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
    border-color: transparent;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--mud-palette-primary);
    width: 1rem;
    height: 1rem;
}

/* ── A FILE TO UPLOAD ───────────────────────────────────────────────────────
   The native input stays — it is what the form posts — but out of sight and
   still in the tab order; its focus is shown on the button drawn for it. */
.hawza-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.hawza-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.hawza-file-button {
    gap: 0.375rem;
    padding: 0.375rem 1rem;
    pointer-events: none;
}

.hawza-file-input:focus-visible + .hawza-file-button {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.hawza-file-name {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* ── FIELDS DRAWN NATIVELY ──────────────────────────────────────────────────
   The few boxes that post by name to a controller, labelled by Field. */
.hawza-field {
    display: grid;
    gap: 0.375rem;
}

.hawza-field > label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hawza-required {
    color: var(--mud-palette-error);
    font-weight: 400;
}

.hawza-field-error {
    display: block;
}

/* ── SIGNING IN ─────────────────────────────────────────────────────────────
   The seminary's green fills the screen behind the card, with the bar's star
   lattice larger over it: the first thing anybody meets is the seminary. */
.hawza-signin {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 1.25rem;
    background-color: #012921;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='0.8'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h8M48 28h8M28 0v8M28 48v8'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(ellipse at 50% 35%, #055d4e 0%, #024e41 40%, #012921 100%);
}

.hawza-signin-card.mud-paper {
    width: 100%;
    max-width: 25rem;
    padding: 2rem 1.75rem 1.75rem;
    border-top: 3px solid var(--mud-palette-secondary);
}

.hawza-signin-logo {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
    margin: 0 auto 1.25rem;
}

.hawza-signin-title {
    text-align: center;
}

.hawza-signin-note {
    text-align: center;
    margin: 0.25rem 0 1.5rem;
    color: var(--mud-palette-text-secondary);
}

/* A definition list of facts about one record, label over value. */
.hawza-facts {
    display: grid;
    gap: 0.75rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.hawza-facts dt {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.hawza-facts dd {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

/* ── THE FRAMEWORK'S OWN STRIPS ─────────────────────────────────────────────
   blazor.web.js finds #blazor-error-ui by its id and shows it by setting
   display, so the box keeps a rule keyed on that id. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    box-shadow: 0 -1px 6px rgb(0 0 0 / 0.2);
}

#blazor-error-ui a {
    color: inherit;
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-inline-start: 0.75rem;
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.blazor-error-boundary::after {
    content: "حدث خطأ في هذا الجزء من الصفحة.";
}

/* ── THE PREFECT'S DAY ───────────────────────────────────────────────────────
   A lesson as a card and the whole card a link to its form: thumb-sized, one per lesson, the hour at the
   start edge and the state where the eye lands after the name. */
.hawza-session-cards {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.hawza-session-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.hawza-session-card:hover,
.hawza-session-card:focus-visible {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.hawza-session-card--off {
    opacity: 0.7;
}

/* The lesson he is in now: first in the list, and marked on the edge the eye reads from. */
.hawza-session-card--now {
    border-inline-start: 4px solid var(--mud-palette-primary);
}

.hawza-session-time {
    min-width: 3.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.hawza-session-body {
    display: grid;
    flex: 1;
    gap: 2px;
}

.hawza-session-state {
    margin-top: 4px;
}

.hawza-session-go {
    color: var(--mud-palette-text-secondary);
}

/* ── THE STEPS OF A TASK ────────────────────────────────────────────────────
   The session form is done in order — start, roll call, write-up, send — and a
   row of steps under the bar says where the person is in it. It stays under the
   bar while the roster scrolls. On a phone each step is a mark over a word and
   shares the row; on a desk the mark sits beside the word. A step is a place and
   never a gate, so all of them are pressable and none is drawn disabled. */
.hawza-steps {
    position: sticky;
    top: var(--mud-appbar-height, 56px);
    z-index: 2;
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding-block: 8px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hawza-step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    padding: 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.hawza-step:hover,
.hawza-step:focus-visible {
    color: var(--mud-palette-text-primary);
}

.hawza-step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-weight: 600;
}

.hawza-step-current {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.hawza-step-done .hawza-step-mark {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.hawza-step-page[hidden] {
    display: none;
}

/* Where a step change lands: just under the row of steps, not behind it. */
.hawza-step-anchor {
    scroll-margin-top: calc(var(--mud-appbar-height, 56px) + 72px);
    outline: none;
}

.hawza-step-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 24px;
}

@media (min-width: 600px) {
    .hawza-step {
        flex: 0 1 11rem;
        flex-direction: row;
        gap: 8px;
        min-height: 48px;
        font-size: 0.875rem;
    }
}

/* ── ONE ANSWER OUT OF A FEW ────────────────────────────────────────────────
   Buttons in a row, 44px tall, sharing the width. The chosen one is tinted in
   the colour of what it means AND ticked, and the tint is only a tint — the
   words stay in the ordinary text colour, which is what keeps them readable in
   both schemes. */
.hawza-choice {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
}

.hawza-choice-item {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.hawza-choice-item + .hawza-choice-item {
    border-inline-start: 1px solid var(--mud-palette-lines-inputs);
}

.hawza-choice-item:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
}

.hawza-choice-item:disabled {
    cursor: default;
}

.hawza-choice-chosen {
    font-weight: 600;
}

.hawza-choice-chosen.hawza-choice-good {
    background: rgba(var(--mud-palette-success-rgb), 0.22);
    box-shadow: inset 0 -3px 0 var(--mud-palette-success);
}

.hawza-choice-chosen.hawza-choice-warn {
    background: rgba(var(--mud-palette-warning-rgb), 0.22);
    box-shadow: inset 0 -3px 0 var(--mud-palette-warning);
}

.hawza-choice-chosen.hawza-choice-crit {
    background: rgba(var(--mud-palette-error-rgb), 0.22);
    box-shadow: inset 0 -3px 0 var(--mud-palette-error);
}

.hawza-choice-chosen.hawza-choice-plain {
    background: rgba(var(--mud-palette-primary-rgb), 0.16);
    box-shadow: inset 0 -3px 0 var(--mud-palette-primary);
}

/* ── THE ROLL ───────────────────────────────────────────────────────────────
   One row a student. On a phone it is a card: the name over the answer, the
   arrival time under it only when the answer is «late», and the events link at
   the foot, each as wide as the screen. From tablet up it is a table's row
   again — name, answer, time, events — without being a table, so nothing about
   it scrolls sideways. */
.hawza-roster {
    display: flex;
    flex-direction: column;
}

.hawza-roster-head {
    display: none;
}

.hawza-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding-block: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.hawza-roster-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hawza-roster-arrival:empty {
    display: none;
}

@media (min-width: 720px) {
    .hawza-roster-head,
    .hawza-roster-row {
        grid-template-columns: minmax(10rem, 1.3fr) minmax(15rem, 18rem) 9rem minmax(8rem, auto);
        gap: 16px;
    }

    .hawza-roster-head {
        display: grid;
        padding-block: 8px;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }
}

.hawza-roster-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hawza-roster-events {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.hawza-step-title {
    min-width: 0;
    line-height: 1.2;
    text-align: center;
}

/* ── THE PREFECT'S BAR ──────────────────────────────────────────────────────
   Home, his sessions, his account, at the foot of a phone. Nowhere else: on a
   desk the prefect has the drawer, and a bar that is drawn but never seen would
   still be counted by the audit. The page gets room under it, and the sticky
   bar of a long form sits above it instead of behind it. */
.hawza-phonebar {
    display: none;
}

@media (max-width: 599.98px) {
    .hawza-phonebar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .hawza-phonebar-item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        text-decoration: none;
    }

    .hawza-phonebar-active {
        color: var(--mud-palette-primary);
        font-weight: 600;
    }

    /* What is waiting behind an item, on the corner of its icon and not at the far end of a row. */
    .hawza-phonebar-item {
        position: relative;
    }

    .hawza-phonebar-item .hawza-nav-count {
        position: absolute;
        top: 6px;
        inset-inline-start: calc(50% + 6px);
        margin-inline-start: 0;
    }

    .hawza-has-phonebar {
        padding-bottom: 64px;
    }

    .hawza-has-phonebar .hawza-actionbar {
        bottom: 56px;
    }
}

/* Where a refusal lands when it is brought into view: under the bar, and with no ring, since the
   notice is not a control. */
.hawza-notice-frame {
    scroll-margin-top: calc(var(--mud-appbar-height, 56px) + 16px);
    outline: none;
}

/* ── THE SNACKBAR ───────────────────────────────────────────────────────────
   «Done», bottom centre. On a phone it rides above what sits at the foot — the
   sticky bar of a long form and the prefect's bar — instead of covering them for
   the five seconds it stays. */
@media (max-width: 599.98px) {
    .mud-snackbar-location-bottom-center {
        bottom: 72px;
    }
}

/* A refusal brought into view lands under the bar, with no ring: it is not a control. */
.hawza-field-error {
    scroll-margin-top: calc(var(--mud-appbar-height, 56px) + 16px);
    outline: none;
}

/* ── THE FILE OF A PERSON, A CLASS, A COURSE ────────────────────────────────
   The identity block above every tab and the row of tabs under it. The block is
   the page's header with a line of its own — the code and the states — and,
   under it, the few facts a reader wants before opening anything. The tabs are
   links; on a phone the row scrolls inside its own strip and never the page,
   and every tab is 44px tall. */
.hawza-entity-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hawza-entity-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 8px 0 0;
}

.hawza-entity-facts > div {
    display: flex;
    gap: 6px;
}

.hawza-entity-facts dt {
    color: var(--mud-palette-text-secondary);
}

.hawza-entity-facts dt::after {
    content: ":";
}

.hawza-entity-facts dd {
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.hawza-filetabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hawza-filetab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 16px;
    border-bottom: 3px solid transparent;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.hawza-filetab:hover,
.hawza-filetab:focus-visible {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.hawza-filetab-current {
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.hawza-filetab-count {
    min-width: 1.5rem;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    text-align: center;
}

/* ── THE QUICK SEARCH ───────────────────────────────────────────────────────
   One box over the page, and a list of what it found under it, grouped by
   kind. The marked result is the one Enter goes to; the hover and the mark are
   the same tint, because a pointer and the arrow keys are one way of choosing. */
.hawza-palette-list {
    display: flex;
    flex-direction: column;
    max-height: min(60vh, 28rem);
    margin-top: 8px;
    overflow-y: auto;
}

.hawza-palette-group {
    padding: 12px 12px 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.hawza-palette-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.hawza-palette-hit:hover,
.hawza-palette-active {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.hawza-palette-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.hawza-palette-sub {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.hawza-palette-none {
    padding: 24px 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

/* ── THE SIDE SHEET ─────────────────────────────────────────────────────────
   A record beside its list. 560px on a desk, the whole screen on a phone. The
   head keeps the title and the way out where the thumb finds them while the
   body scrolls. */
:root {
    --hawza-sheet-width: min(560px, 100vw);
}

.hawza-sheet {
    z-index: 1300;
}

.hawza-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hawza-sheet-body {
    padding: 16px;
}

/* ── THE YEAR'S SETUP ───────────────────────────────────────────────────────
   The office's order as a list: a mark, what it is, how much is there, and the
   way to it. A step with something in it wears a tick, never a colour alone. */
.hawza-setup {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hawza-setup-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.hawza-setup-step:first-child {
    border-top: 0;
}

.hawza-setup-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--mud-palette-text-secondary);
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.hawza-setup-done {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

.hawza-setup-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hawza-setup-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 6rem;
}

@media (max-width: 599.98px) {
    .hawza-setup-step {
        grid-template-columns: 32px minmax(0, 1fr);
        row-gap: 8px;
    }

    .hawza-setup-count,
    .hawza-setup-step > .mud-button-root {
        grid-column: 2;
    }
}

.hawza-sheet-title {
    margin: 0;
}

/* The sheet is a paper over the page, not a second navigation drawer: it wears the surface and the ordinary ink
   and not the drawer's green. */
.mud-drawer.hawza-sheet {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}