/* ==========================================================================================================
   sis-forms.css -- opt-in SIS kit skins for MudBlazor form inputs and data tables. Linked in App.razor right
   after sis-global.css. Everything here is scoped to an opt-in class, so pages that don't use them are untouched.

   1. .sis-form   put it on any container (a <div>, or MudForm/MudGrid Class="sis-form"). Inside it, MudTextField
                  (single line + Lines), MudSelect, MudAutocomplete, MudDatePicker and MudNumericField render in the
                  kit's field box (same look as SisSearchField / SisSelectField: 1px --sis-border-field, radius
                  --sis-radius-md, 48px desktop / 44px under 960px, 15px / 16px text, hover + focus ring).
                  Use Variant="Variant.Outlined" (the box). Variant.Text gets a light underline version.
   2. .sis-form-popover   pass PopoverClass="sis-form-popover" on MudSelect and MudAutocomplete: their list renders
                  in the popover provider OUTSIDE .sis-form, so it needs its own class. MudDatePicker has no
                  PopoverClass in MudBlazor 7.15, but it splats unknown attributes onto its popover paper, so pass
                  data-sis-form-popover="" on the MudDatePicker instead (skins that picker's calendar only).
   3. .sis-table  <table class="sis-table"> or MudSimpleTable / MudTable Class="sis-table". Numeric cells:
                  class="sis-num" or the data-numeric attribute (right aligned, tabular-nums).

   LABELS. MudBlazor's floating label sits on the border and overlaps the placeholder until focus. Inside
   .sis-form the label is always drawn ABOVE the box (13px, 600, --sis-text-label), never floats and never
   overlaps. It is still the real <label for=...> Mud renders from Label="...", so screen readers keep the name.
   Always give a field a Label (or an aria-label on a label-less one).
   Don't use Margin.Dense/Normal to change size; the skin fixes the heights.
   ========================================================================================================== */

/* ---------- 1. .sis-form : field box ---------- */

.sis-form {
    --sis-form-height: 48px;
    --sis-form-font: 15px;
    --sis-form-danger-ring: 0 0 0 3px color-mix(in srgb, var(--sis-danger) 16%, transparent);
}

@media (max-width: 959.98px) {
    .sis-form {
        --sis-form-height: 44px;
        --sis-form-font: 16px; /* 16px: iOS Safari never zooms on focus */
    }
}

/* The label goes above the box; the control keeps room for it only when it has one. */
.sis-form .mud-input-control,
.sis-form .mud-input-control.mud-input-control-margin-dense,
.sis-form .mud-input-control.mud-input-control-margin-normal,
.sis-form .mud-input-control.mud-input-outlined-with-label {
    margin: 0;
    min-width: 0;
}

.sis-form .mud-input-control > .mud-input-control-input-container {
    position: relative;
    min-width: 0;
}

.sis-form .mud-input-control > .mud-input-control-input-container:has(> .mud-input-label) {
    padding-top: 24px;
}

.sis-form .mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-label-inputcontrol {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    transform: none;
    transition: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: normal;
    color: var(--sis-text-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
}

.sis-form .mud-input-control > .mud-input-control-input-container > label.mud-input-label.mud-input-error {
    color: var(--sis-danger-fg) !important;
}

/* Outlined box. Mud draws the border on .mud-input-outlined-border (absolute, pointer-events none). */
.sis-form .mud-input.mud-input-outlined {
    box-sizing: border-box;
    min-height: var(--sis-form-height);
    border-radius: var(--sis-radius-md);
    background: var(--sis-surface);
    color: var(--sis-text);
    font-family: inherit;
    font-size: var(--sis-form-font);
    line-height: 1.5;
    letter-spacing: normal;
    transition: box-shadow var(--sis-duration) var(--sis-ease), background-color var(--sis-duration) var(--sis-ease);
}

.sis-form .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--sis-border-field);
    border-radius: var(--sis-radius-md);
    transition: border-color var(--sis-duration) var(--sis-ease);
}

/* The kit draws the label above the box, but Mud still cuts a label-sized notch in the outlined fieldset border for its
   floating label; over a tinted (disabled) box it shows as a white box at the top left. Drop the legend. */
.sis-form .mud-input.mud-input-outlined .mud-input-outlined-border legend {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .sis-form .mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within):hover .mud-input-outlined-border {
        border-color: var(--sis-focus-color);
    }
}

/* Focus: the kit's teal border + soft ring, no 2px primary border (which also shifts the box by a pixel). */
.sis-form .mud-input.mud-input-outlined:focus-within {
    box-shadow: var(--sis-focus-ring-field);
}

.sis-form .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--sis-focus-color);
}

/* The inner element: <input>, <textarea>, or the <div> a MudSelect uses to show its text. */
.sis-form .mud-input.mud-input-outlined .mud-input-slot {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    font: inherit;
    color: var(--sis-text);
    touch-action: manipulation;
}

.sis-form .mud-input.mud-input-outlined input.mud-input-slot:not([type="hidden"]),
.sis-form .mud-input.mud-input-outlined div.mud-input-slot:not([style*="display:none"]):not([style*="display: none"]) {
    height: calc(var(--sis-form-height) - 2px);
    line-height: calc(var(--sis-form-height) - 2px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sis-form .mud-input.mud-input-outlined.mud-input-adorned-start {
    padding-inline-start: 12px;
}

.sis-form .mud-input.mud-input-outlined.mud-input-adorned-start .mud-input-slot {
    padding-inline-start: 0;
}

.sis-form .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-inline-end: 8px;
}

.sis-form .mud-input.mud-input-outlined.mud-input-adorned-end .mud-input-slot {
    padding-inline-end: 6px;
}

/* Multiline: grows with its rows, padding instead of a fixed height. */
.sis-form .mud-input.mud-input-outlined textarea.mud-input-slot {
    height: auto;
    min-height: calc(var(--sis-form-height) - 2px);
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.sis-form .mud-input.mud-input-outlined:has(> textarea) {
    align-items: flex-start;
}

.sis-form .mud-input-slot::placeholder {
    color: var(--sis-placeholder);
    opacity: 1;
}

/* Adornment icons (start/end icons, select chevron, date picker button, numeric spin). */
.sis-form .mud-input-adornment,
.sis-form .mud-input-adornment .mud-icon-root,
.sis-form .mud-input-adornment .mud-icon-button,
.sis-form .mud-input-numeric-spin .mud-icon-root,
.sis-form .mud-input-numeric-spin .mud-button-root {
    color: var(--sis-icon-muted);
}

.sis-form .mud-input-adornment .mud-icon-button,
.sis-form .mud-input-numeric-spin .mud-button-root {
    touch-action: manipulation;
}

.sis-form .mud-input-adornment .mud-icon-button:focus-visible,
.sis-form .mud-input-numeric-spin .mud-button-root:focus-visible {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 1px;
}

/* Helper / error text under the box. */
.sis-form .mud-input-helper-text {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--sis-text-secondary);
}

.sis-form .mud-input-control-helper-container {
    margin-top: 0;
}

.sis-form .mud-input-helper-text.mud-input-helper-text-contained {
    margin-inline: 0;
}

.sis-form .mud-input-helper-text.mud-input-error {
    color: var(--sis-danger-fg) !important;
}

/* Error: danger border (Mud forces its own colour with !important, so this needs it too). */
.sis-form .mud-input-error .mud-input-outlined-border {
    border-color: var(--sis-danger) !important;
}

.sis-form .mud-input.mud-input-outlined.mud-input-error:focus-within {
    box-shadow: var(--sis-form-danger-ring);
}

/* Disabled matches SisSelectField:disabled; a read-only plain text box gets the same subtle background. */
.sis-form .mud-input.mud-input-outlined.mud-disabled {
    background: var(--sis-surface-subtle);
    color: var(--sis-text-disabled);
}

.sis-form .mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--sis-border);
}

.sis-form .mud-input.mud-input-outlined.mud-disabled .mud-input-slot,
.sis-form .mud-input.mud-input-outlined.mud-disabled .mud-input-adornment,
.sis-form .mud-input.mud-input-outlined.mud-disabled .mud-icon-root {
    color: var(--sis-text-disabled);
    cursor: not-allowed;
    -webkit-text-fill-color: currentColor;
}

.sis-form .mud-input-control:has(> .mud-input-control-input-container > .mud-input.mud-disabled) .mud-input-label {
    color: var(--sis-text-secondary);
}

.sis-form .mud-input.mud-input-outlined:has(> input.mud-input-slot[readonly]:not([type="hidden"])):not(:where(.mud-picker, .mud-select) .mud-input) {
    background: var(--sis-surface-subtle);
}

/* MudSelect / MudAutocomplete: the whole box opens the list. */
.sis-form .mud-select .mud-input.mud-input-outlined,
.sis-form .mud-select .mud-input-slot {
    cursor: pointer;
}

/* ---------- Variant.Text (underline), the cheap fallback ---------- */

.sis-form .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0;
}

.sis-form .mud-input.mud-input-underline {
    min-height: var(--sis-form-height);
    font-family: inherit;
    font-size: var(--sis-form-font);
    color: var(--sis-text);
    letter-spacing: normal;
}

.sis-form .mud-input.mud-input-underline:before {
    border-bottom-color: var(--sis-border-field);
}

.sis-form .mud-input.mud-input-underline:hover:not(.mud-disabled):before {
    border-bottom-color: var(--sis-focus-color);
}

.sis-form .mud-input.mud-input-underline:after {
    border-bottom-color: var(--sis-focus-color);
}

.sis-form .mud-input.mud-input-underline.mud-input-error:after {
    border-bottom-color: var(--sis-danger);
}

.sis-form .mud-input.mud-input-underline .mud-input-slot {
    font: inherit;
    color: var(--sis-text);
    height: calc(var(--sis-form-height) - 2px);
    padding: 0;
}

/* ---------- 2. Popovers (select / autocomplete list, date picker) ---------- */

.sis-form-popover.mud-popover,
.mud-picker-popover-paper[data-sis-form-popover] {
    --mud-palette-primary: var(--sis-primary);
    --mud-palette-primary-text: var(--sis-text-on-dark);
    --mud-palette-primary-darken: var(--sis-primary-hover);
    --mud-palette-primary-hover: var(--sis-surface-hover);
    font-family: inherit;
    letter-spacing: normal;
    background: var(--sis-surface);
    color: var(--sis-text);
    border: 1px solid var(--sis-border);
    border-radius: var(--sis-radius-md);
    box-shadow: var(--sis-shadow-popover);
}

.sis-form-popover.mud-popover {
    box-sizing: border-box;
    padding: 6px;
    overscroll-behavior: contain;
}

.sis-form-popover .mud-list {
    padding: 0;
}

/* One scroller: MudBlazor caps both the popover and its list at MaxHeight, and the popover's padding makes the list
   overflow it, so both scrolled. The popover clips; the list fills what is left and scrolls on its own. */
.sis-form-popover.mud-popover.mud-popover-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sis-form-popover.mud-popover > .mud-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sis-form-popover .mud-list-item {
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--sis-radius-sm);
    color: var(--sis-text);
    touch-action: manipulation;
}

.sis-form-popover .mud-list-item .mud-typography {
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sis-form-popover .mud-list-item.mud-list-item-clickable:hover,
.sis-form-popover .mud-list-item.mud-list-item-clickable:focus-visible,
.sis-form-popover .mud-list-item.mud-list-item-clickable:active {
    background-color: var(--sis-surface-hover) !important;
}

.sis-form-popover .mud-list-item.mud-list-item-clickable:focus-visible {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: -2px;
}

.sis-form-popover .mud-list-item.mud-selected-item {
    color: var(--sis-primary);
}

.sis-form-popover .mud-list-item.mud-selected-item .mud-typography {
    color: var(--sis-primary);
    font-weight: 600;
}

@media (max-width: 959.98px) {
    .sis-form-popover .mud-list-item {
        min-height: 44px;
    }
}

/* Date picker: header, today, selected day and controls use the kit primary instead of Mud blue. */
.mud-picker-popover-paper[data-sis-form-popover] {
    overflow: hidden;
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-toolbar.mud-theme-primary {
    background-color: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-toolbar .mud-button-root {
    color: var(--sis-text-on-dark);
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar-header-switch .mud-typography,
.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day {
    font-family: inherit;
    letter-spacing: normal;
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day.mud-current:not(.mud-selected) {
    color: var(--sis-primary);
    border: 1px solid var(--sis-primary);
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day.mud-selected,
.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day.mud-selected:hover {
    background-color: var(--sis-primary);
    color: var(--sis-text-on-dark);
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day:hover:not(.mud-selected) {
    background-color: var(--sis-surface-hover);
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-calendar .mud-day:focus-visible,
.mud-picker-popover-paper[data-sis-form-popover] .mud-button-root:focus-visible,
.mud-picker-popover-paper[data-sis-form-popover] .mud-icon-button:focus-visible {
    outline: 2px solid var(--sis-focus-color);
    outline-offset: 2px;
}

.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-year.mud-picker-year-selected,
.mud-picker-popover-paper[data-sis-form-popover] .mud-picker-month.mud-picker-month-selected {
    color: var(--sis-primary);
    font-weight: 600;
}

/* ---------- 3. .sis-table ----------
   Plain <table class="sis-table"> or MudSimpleTable / MudTable Class="sis-table". Put it inside a SisCard
   (ClipContent) or give the wrapper overflow-x: auto; the table itself has no border or shadow so it never
   fights the card around it.
   Numeric cells (th and td): class="sis-num" or the data-numeric attribute -> right aligned, tabular-nums.
   Header row: use <thead> and <th scope="col">. Long Thai names wrap (overflow-wrap: anywhere).
   MOBILE: nothing here restacks rows. Each page decides: keep the table in a horizontal scroller
   (overflow-x: auto on the wrapper, min-width on the table) or, under 959.98px, hide the table and render
   stacked row cards like RegistrationResult (page-scoped CSS + display: none on the table).           */

table.sis-table,
.sis-table table,
.mud-table.sis-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    color: var(--sis-text);
    font-family: inherit;
    letter-spacing: normal;
}

.mud-simple-table.sis-table,
.mud-table.sis-table {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: var(--sis-text);
}

.mud-table.sis-table .mud-table-container {
    overflow-x: auto;
}

.sis-table thead th,
.mud-simple-table.sis-table table * tr > th,
.sis-table .mud-table-head .mud-table-cell {
    padding: 12px 16px;
    background: var(--sis-surface-subtle);
    border-bottom: 1px solid var(--sis-divider-strong);
    border-right: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: start;
    color: var(--sis-text-secondary);
    white-space: nowrap;
}

.sis-table tbody td,
.sis-table tbody th,
.mud-simple-table.sis-table table * tr > td,
.sis-table .mud-table-body .mud-table-cell {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sis-divider);
    border-right: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: start;
    color: var(--sis-text);
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.mud-simple-table.sis-table table tbody tr:last-child td,
.sis-table tbody tr:last-child td,
.sis-table tbody tr:last-child th,
.sis-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

@media (hover: hover) {
    .sis-table tbody tr:hover td,
    .sis-table tbody tr:hover th,
    .sis-table .mud-table-body .mud-table-row:hover .mud-table-cell {
        background: var(--sis-surface-hover);
    }
}

.sis-table th.sis-num,
.sis-table td.sis-num,
.sis-table th[data-numeric],
.sis-table td[data-numeric],
.mud-simple-table.sis-table table * tr > th.sis-num,
.mud-simple-table.sis-table table * tr > td.sis-num,
.mud-simple-table.sis-table table * tr > th[data-numeric],
.mud-simple-table.sis-table table * tr > td[data-numeric] {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sis-table caption {
    text-align: start;
}

@media (max-width: 959.98px) {
    .sis-table thead th,
    .mud-simple-table.sis-table table * tr > th,
    .sis-table .mud-table-head .mud-table-cell {
        padding: 10px 12px;
    }

    .sis-table tbody td,
    .sis-table tbody th,
    .mud-simple-table.sis-table table * tr > td,
    .sis-table .mud-table-body .mud-table-cell {
        padding: 12px;
    }
}

/* ---------- 4. TermYearSelector SisField="true" ----------
   The term picker's SisSelectField root. A page's flex row (d-flex justify-end, MudStack Row) would otherwise size
   it to its content, which changes with the chosen term. Pass Class="..." for anything else (it is added after this). */
.sis-term-year-field,
.sis-select-field.sis-term-year-field[data-slot="root"] {
    min-width: min(220px, 100%);
}