/*
 * The admin panel is Filament's to style. This sheet holds the few places
 * where the panel's own layout puts something where it cannot be read, and
 * nothing else - a second stylesheet over a design system is how one ends up
 * being fought rather than used.
 *
 * Served like the calendar's two: straight out of `resources/css` by
 * `StylesheetController`, with the file's own time in the URL.
 */

/*
 * Every screen as wide as the calendar, so a step from one to the next moves
 * nothing but what is on it.
 *
 * The panel gives every page the whole window (AdminPanelProvider), and the
 * page stops where the calendar stops: `--calendar-max-width` in calendar.css.
 * The two are one measurement, and they change together.
 */
.fi-main > .fi-page {
    max-width: 100rem;
    margin-inline: auto;
}

/*
 * Room for the window's scrollbar on every screen, whether it scrolls or not.
 * The calendar never scrolls the window and a long list does, so without this
 * a long list was 15px narrower than the calendar.
 */
html {
    scrollbar-gutter: stable;
}

/*
 * The information mark, against the field's name.
 *
 * `afterLabel` renders an inline schema, and Filament gives an inline schema
 * `flex-grow: 1` and `text-align: end`. Inside the label row that threw the
 * mark to the far right of the field - across the width of the form from the
 * words it explains, which is the one place a reader of "Laika solis" does
 * not look. The row's own 12px column gap is what separates them now.
 */
.fi-fo-field-label-ctn > .fi-sc.fi-inline {
    flex-grow: 0;
    padding-inline: 0;
    text-align: start;
}

/*
 * The same mark against a section's heading. `afterHeader` is where Filament
 * puts a section's header buttons, and it gives the heading the rest of the
 * row so the buttons land at the far right - which took the mark there too.
 * Its share starts from nothing, so without the heading's own width as the
 * start "Aicinājums atgriezties" broke at every space.
 */
.fi-section-header-text-ctn:has(+ .fi-section-header-after-ctn .fi-sc-icon) {
    flex: 0 1 auto;
}

/*
 * A help text that holds a list. Tailwind strips the bullets and the spacing
 * from every list and paragraph, and Filament's tooltip puts none back.
 */
.tippy-content p + p,
.tippy-content p + ul {
    margin-block-start: 0.5em;
}

.tippy-content ul {
    list-style: disc;
    padding-inline-start: 1.25em;
}

/*
 * Working hours: the week as the calendar draws it.
 *
 * Seven weekday columns only fit once the boxes are gone. Filament's Repeater
 * wraps every item in a card - a ring, a shadow and 16px of padding - and with
 * a Section around the week that was three borders deep by the time a reader
 * reached "09:00", in a column too narrow to show it. A weekday is a rule and
 * what sits under it, the same as `.calendar-week__day`, and the values below
 * are that sheet's: a 3px column edge over the divider grey.
 */
/*
 * How many weekdays sit abreast, written into the track count Filament's own
 * Grid reads. `Grid::make([...])` can only name the window's breakpoints, and
 * the window is the wrong thing to ask: this panel folds its sidebar, and 288px
 * of it is a whole weekday column. Asking the week's own width instead means
 * seven days appear the moment they fit, folded sidebar or not.
 *
 * 140px a column: what the controls in it are wide. Below that the week gives
 * up a column rather than clip one.
 */
.working-week > .fi-grid {
    /* Important because Filament writes the track count as an inline style,
       and an inline declaration outranks this file without it. */
    --cols-default: repeat(auto-fit, minmax(140px, 1fr)) !important;
    --cols-lg: repeat(auto-fit, minmax(140px, 1fr)) !important;
    /* 16px, not more: at 1440px the seventh weekday is paid for out of this. */
    gap: 16px;
}

/*
 * The three controls a period is made of - two time fields and the button that
 * removes it - are one stack and are measured as one. Left to fill the track a
 * time field read as a box for a sentence; left to fit its own label a button
 * agreed with nothing above it. The column keeps whatever is left over as air
 * between the days.
 */
.working-week .fi-input-wrp,
.working-week .fi-btn {
    /* A length, not a percentage: both sit in wrappers that shrink to their
       own contents, so a percentage resolves to the width the control already
       had and changes nothing. 140px is the track floor below, which is what
       keeps the control inside its column at every width, and it is what
       "Pievienot periodu" needs to stay on one line. */
    width: 140px;
    max-width: 100%;
}

/* A grid item will not go below its content's own width without this, and a
   time input asks for more than 135px. Without it the week loses a day. */
.working-week > .fi-grid > .fi-grid-col {
    min-width: 0;
}

.working-week__day {
    border-block-start: 3px solid #d9d9d9;
    padding-block-start: 8px;
}

/* The weekday's name, read off `.calendar-week__heading`. */
.working-week__heading {
    font-size: 12px;
    letter-spacing: normal;
    text-transform: uppercase;
}

.working-week .fi-fo-repeater-item {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/*
 * The item's header holds nothing but its delete button, and a control that
 * removes one period belongs after that period, not above it. Ordering is what
 * moves it: Filament writes the header first in the markup, and it has to stay
 * there for the screen reader that follows the heading.
 */
.working-week .fi-fo-repeater-item {
    display: flex;
    flex-direction: column;
    /* Without this the button's top edge lands on the field's bottom edge. */
    gap: 12px;
}

/*
 * A period is closed by a rule, and the next one starts under it.
 *
 * Stacked bare, two periods were six fields, two bins and a plus running down
 * one column with nothing to say where the first ended - and the bin and the
 * plus, arriving one under the other at the foot of it, read as a pair of
 * icons belonging to nothing. The rule is the weekday's own at a hairline, so
 * the day is still the heavier line of the two.
 *
 * On the items, not between them: the last period is closed as well, which is
 * what puts the rule between that period's bin and the plus below it.
 *
 * Paler than the weekday's 3px, and not only thinner. At the same grey the two
 * rules read as the same rule drawn twice, and a day stopped looking like the
 * thing the periods are inside.
 */
.working-week .fi-fo-repeater-items > .fi-fo-repeater-item {
    padding-block-end: 12px;
    border-block-end: 1px solid #e5e7eb;
}

.working-week .fi-fo-repeater-item-header {
    order: 2;
    padding: 0;
    /* Filament clips this header, and with the padding gone the header box is
       exactly the button box. A Filament button draws its border as a ring -
       a box-shadow outside that box - so "Nonemt periodu" came out flat while
       "Pievienot periodu", which sits in an unclipped wrapper, kept its edge. */
    overflow: visible;
}

/* Filament holds a header's end actions to the far right, which in a column
   this narrow pushed the 140px button out over the next weekday. At the start
   it sits under the time fields it removes, the same width as they are. */
.working-week .fi-fo-repeater-item-header-end-actions {
    margin-inline-start: 0;
}

.working-week .fi-fo-repeater-item-content {
    padding: 0;
}

/*
 * The clock, as `App\Filament\Forms\ClockTime` draws it: two boxes and a colon
 * inside one of Filament's input wrappers, so the ring and the focus highlight
 * are the field's and not each box's.
 */
.clock-time {
    align-items: center;
}

/* Filament gives every direct child of an input wrapper an equal share of it,
   which would hand a third of the field to the colon. */
.clock-time__separator {
    flex: none;
    color: #6b7280;
    font-size: 14px;
    line-height: 1;
}

/* Centred and without the wrapper's own side padding: two digits in the middle
   of half a field read as an hour, and against its left edge read as a stray. */
.clock-time__part {
    padding-inline: 4px;
    text-align: center;
}

/*
 * The table footer: how many rows a page holds, at the end of the row.
 *
 * Filament lays this footer as three columns - "Radu 1 lidz 2 no 2" at the
 * start, the row count in the middle, the page numbers at the end. On the
 * lists here that middle column is nearly always the only thing in the row:
 * eight of the nine screens hold fewer rows than a page, so there are no page
 * numbers to balance it and the count floats alone in the white, pinned to
 * nothing. It reads as something left behind rather than a control.
 *
 * The two swap columns. The count goes to the end, where a control that
 * belongs to the table as a whole is looked for, and the page numbers take the
 * middle - still between the two, on the lists long enough to have any.
 *
 * From 48rem, and not below it, because that is where Filament swaps the
 * footer's contents: under it the page numbers are gone and a "Nakamais"
 * button stands at the end instead, which is what would share the column.
 */
@media (min-width: 48rem) {
    .fi-pagination .fi-pagination-records-per-page-select-ctn {
        grid-column-start: 3;
        justify-self: flex-end;
    }

    .fi-pagination .fi-pagination-items {
        grid-column-start: 2;
        justify-self: center;
    }
}

/*
 * Exception days: the bin and the Add button on the heading's line.
 *
 * The bin in the page header presses the table's own bulk delete, which sits
 * on the table's bar - see ManageExceptionDays. That bar is never shown, and
 * nor is the "Izvelets 1 ieraksts" line: Filament opens both the moment a row
 * is ticked, and together they pushed the rows down, out from under the
 * pointer that had just ticked one. The ticks already say what is selected.
 */
.fi-resource-exception-days .fi-ta-header-ctn,
.fi-resource-exception-days .fi-ta-selection-indicator {
    display: none !important;
}

/* On a telephone Filament puts page actions under the heading. Here they share
   its line whenever both fit, and take a line of their own, at the right, only
   when they do not. */
.fi-resource-exception-days .fi-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.fi-resource-exception-days .fi-header-actions-ctn {
    margin-inline-start: auto;
}

/* Switched off, the bin is grey rather than a paler red. At Filament's 70% a
   red bin still read as a button waiting to be pressed. */
.fi-resource-exception-days .fi-header-actions-ctn .fi-icon-btn[disabled] {
    --text: var(--gray-400);
}

/*
 * The date range picker - App\Filament\Forms\DateRangePicker.
 *
 * The field, the panel and the days are Filament's date picker, class for
 * class. Its own are the arrows either side of the month, where Filament has a
 * month list and a year box; the first and the last day, filled, so a run reads
 * from its two ends; the days between them; and the row holding "OK".
 *
 * `--primary-*` and `--gray-*` are the colours Filament writes into the page.
 */
.date-range-picker__month {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.date-range-picker__step {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9999px;
    color: var(--gray-500);
}

.date-range-picker__step:hover {
    background: var(--gray-100);
}

.date-range-picker__chevron {
    width: 20px;
    height: 20px;
}

.date-range-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.fi-selected {
    background: var(--primary-500);
    color: var(--gray-950);
}

.date-range-picker .fi-fo-date-time-picker-calendar .fi-fo-date-time-picker-calendar-day.date-range-picker__between {
    background: var(--primary-100);
}

/* Filament shares a date field's width out evenly between its parts, which put
   the calendar icon in the middle of the field rather than at its end. */
.date-range-picker__icon {
    flex: none;
    cursor: pointer;
}

.date-range-picker__footer {
    display: flex;
    justify-content: flex-end;
}