/*
 * The room editing screen - a list and a form.
 *
 * Its own stylesheet rather than more of app.css, for the reason _head.php
 * gives: app.css is downloaded by every student looking at a timetable, and it
 * should not grow to style a form that a handful of people per school ever
 * open. Everything here is layout for those two views; nothing here restyles a
 * control that exists elsewhere.
 */

.editwrap
{
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 16px 40px;
}

/* ------------------------------------------------------------------ */
/* The list                                                            */
/* ------------------------------------------------------------------ */

.editbar
{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.editcount
{
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.edittable
{
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.edittable th,
.edittable td
{
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.edittable th
{
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.edittable tr:last-child td
{
    border-bottom: none;
}

.edittable td.num,
.edittable th.num
{
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A hidden room is a decision, not missing data - so the word is drawn
 * quieter rather than replaced by a blank. */
.hiddenmark
{
    color: var(--ink-soft);
}

.chip-waiting
{
    margin-left: 8px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    font-size: .72rem;
}

/* The lecturer list carries several chips per row - waiting, unavailable,
 * restricted to some rooms, LDAP - so the plain one needs the same spacing
 * the waiting one already had, and they have to wrap rather than push the
 * name column wide. */
.edittable .chip
{
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .72rem;
    white-space: nowrap;
}

/* A whitelist can run to a hundred rooms. Left as a scrolling column rather
 * than a grid: the names are long and of very different lengths, and a grid
 * of them reads as a wall. */
.roomlist
{
    max-height: 260px;
    overflow-y: auto;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

/* Something worth saying that is NOT a refusal - a duplicate name, an
 * LDAP-mirrored record. Same shape as the refusal box so it is recognised,
 * deliberately quieter so it is not mistaken for one. */
.refusal-soft
{
    border-left-color: var(--line-strong);
}

.refusal-soft .refusal-what
{
    color: var(--ink);
    font-weight: 600;
}

/* Read-only facts about a record - the password and the language, which the
 * publish owns and this screen only reports. */
.formbox-quiet
{
    border-style: dashed;
}

.waiting-note
{
    margin: 0 0 14px;
    padding: 9px 12px;
    border-left: 3px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .88rem;
}

.waiting-note strong
{
    color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* The two refusals that are not about the form                        */
/* ------------------------------------------------------------------ */

.blocked
{
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
}

.blocked h1
{
    font-size: 1.2rem;
    margin: 0 0 10px;
}

.blocked p
{
    margin: 0 0 8px;
    color: var(--ink-soft);
}

/* The API's own English sentence, kept but subordinate: it names the cause
 * exactly, and it is not what the reader should see first. */
.blocked-raw
{
    font-size: .82rem;
    opacity: .75;
}

/* ------------------------------------------------------------------ */
/* The refusal that IS about the form                                  */
/* ------------------------------------------------------------------ */

.refusal
{
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-s);

    /* A tint of the danger colour rather than the colour: the box has to be
     * readable in both themes, and a solid red panel with body text on it is
     * readable in neither. */
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.refusal-what
{
    margin: 0;
    font-weight: 600;
}

.refusal-hint
{
    margin: 6px 0 0;
    color: var(--ink-soft);
}

.usedby
{
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--ink-soft);
}

.usedby strong
{
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* The form                                                            */
/* ------------------------------------------------------------------ */

.formgrid
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 18px;
}

.formgrid .wide
{
    grid-column: 1 / -1;
}

.formgrid label
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formgrid label > span
{
    font-size: .82rem;
    color: var(--ink-soft);
}

/*
 * FIRST LETTER UP.
 *
 * Most labels here have their own string and are written capitalised, but a
 * few reuse a word the rest of the site already owns - "seats" is drawn
 * mid-sentence elsewhere ("220 seats"), so it arrives lowercase and sat in a
 * column next to "Code" and "Floor area" looking like a typo.
 *
 * Lifting the first letter in CSS rather than adding a thirteen-language
 * duplicate of a word we already translate: the rule is about how a label is
 * SET, not about what it says, and it holds for any borrowed word that lands
 * here later.
 */
.formgrid label > span::first-letter
{
    text-transform: uppercase;
}

.formgrid input
{
    height: var(--control-h);
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    min-width: 0;
}

.formbox
{
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
}

.formbox legend
{
    padding: 0 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.checkline
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}

.checkline input
{
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

/*  The desktop's own letter, beside the word it means. Quiet, monospaced and
    in a plate, so it reads as a code rather than as part of the name - and so
    somebody told "tick P" over the telephone can still find the row. */
.rolekey
{
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--surface-2);
    color: var(--ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.fieldhint
{
    margin: 0 0 8px;
    font-size: .82rem;
    color: var(--ink-soft);
}

/*  THE ACTION ROW STOPS CROWDING WHAT IS ABOVE IT - 14 Sep 2026, and Mišo had
    to say it THREE TIMES before it was fixed in the right place. Worth
    recording why, because the mistake is repeatable.

    THERE ARE TWO CLASSES, ONE LETTER APART:

        .form-actions   admin.css  - generate, login, landing, school, settings
        .formactions    this file  - branch, course, coursepart, group,
                                     lecturer, room ... the entity forms

    The same complaint was fixed on 13 Sep with `margin-top: 26px` on
    `.form-actions`, and the note there even quotes him - "previše se drži
    donje linije - save i cancel" - about a Save/Cancel pair under a scrolling
    list of BRANCHES. branchform.php uses `.formactions`. So the fix was
    written for this screen and landed on a class this screen does not have,
    twice, while the row it was meant for had no vertical margin AT ALL and
    sat wherever the element above left it. Under a bordered list that is flush
    against it.

    THE NUMBERS MATCH admin.css:9450 ON PURPOSE. Two classes that do the same
    job must not drift apart again; if one of them changes, change both, and
    better still merge them one day. */
.formactions
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    margin-bottom: 18px;
}

/*  SAVE AND CANCEL ARE NOT A PAIR - 13 Sep 2026. Mišo, on the course form:
    "na courses se ovi drže preblizu".

    10px is the gap for buttons that belong together. These two do the
    OPPOSITE things - one keeps what was typed, the other throws it away -
    and a mis-hit costs the whole form. It is the same argument
    `.approvebar-gap` already makes between Select all and the two deciding
    buttons, measured in a smaller space.

    ON THE ONE AFTER THE PRIMARY rather than on the row's gap, so a row where
    two buttons DO belong together keeps them together and only the one that
    discards steps back. */
.formactions > .btn-primary + .btn
{
    margin-inline-start: 1.1rem;
}

/*
 * DELETE SITS APART, below the save actions and behind a rule.
 *
 * It is its own form (see roomform.php) so a stray Enter cannot reach it, and
 * it is placed where nothing else is, so the mouse does not arrive there on
 * the way to Save.
 */
.deleteform
{
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.btn-danger
{
    border-color: var(--danger);
    color: var(--danger);
    background: transparent;
}

.btn-danger:hover
{
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

@media (max-width: 560px)
{
    .formgrid
    {
        grid-template-columns: minmax(0, 1fr);
    }
}


/*  THE BUTTON THAT ADDS A ROW, UNDER THE TABLE IT ADDS TO - 13 Sep 2026.

    Mišo, on "New execution type" under the execution-types table: "ovu donju
    malo priblizi vertikalno gore".

    It was a bare <p>, which brings the paragraph's own top margin and stacks
    it under the table's bottom one - so the control that belongs to the list
    sat a clear gap away from it and read as the next thing on the page rather
    than as part of the one above.

    One class rather than a rule on `.listtable + p`, because the table is not
    always the previous element: an empty list draws a sentence instead, and
    the button has to sit the same distance under either. */
.listadd
{
    margin-block: .45rem 0;
}


/*  A FORM INSIDE A TABLE CELL - 13 Sep 2026, with the room-properties tab.

    Each row of that table is its own form: one word, its Save, and its Remove.
    A single form around the whole table would post every name on screen at
    every save, so a rename on row four would carry row nine's box with it, and
    each row's revision would have nowhere to travel.

    A <form> is a block, so without this the button drops under the box and a
    list of eight words becomes sixteen rows tall. */
.rowform
{
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rowform .input
{
    min-width: 0;
}

/*  AND THE SAME ROW WITH FIVE FIELDS ON IT - 13 Sep 2026, with the
    execution-types tab.

    A room property is one word; an execution type is a name, a code, a
    second-language name, a colour and a place in the order.

    A GRID, NOT A WRAPPING FLEX ROW - corrected 13 Sep 2026. Mišo: "tu samo
    malo poravnave".

    It was flex with `flex: 1 1 9rem` on the two text boxes, so each row shared
    out whatever space its own contents left - and the rows do not have the
    same contents: one type has a long translation, the next has none. The
    colour, the order and Save therefore landed at a different x on every line,
    which is the same fault the booking-types table had an hour earlier and for
    the same reason.

    ONE TRACK PER CONTROL, declared once, so every row agrees:

        name          grows
        code          6rem
        translation   grows, half the weight of the name
        colour        3rem
        order         4.5rem
        save          auto

    It still collapses to fewer columns on a narrow window - the two growing
    tracks have a minmax floor and the row wraps below it rather than pushing
    the table sideways. */
.rowform-wide
{
    display: grid;
    grid-template-columns:
        minmax(8rem, 1.4fr)
        minmax(4rem, 6rem)
        minmax(6rem, 1fr)
        3rem
        4.5rem
        auto;
    align-items: center;
    gap: .5rem;
}

.rowform-wide .input
{
    min-width: 0;
}

/*  <input type="color"> IS A SWATCH, NOT A TEXT BOX. Browsers give it the
    width of a text input and then draw a small rectangle inside acres of
    chrome; sized down it is what it looks like - a colour you click. The
    height matches the inputs beside it so the row still has one baseline. */
.rowform-wide .input-colour,
.restypeform .input-colour,
.setform .input-colour
{
    flex: 0 0 3rem;
    width: 3rem;
    min-width: 3rem;
    padding: 2px;
    cursor: pointer;
}


/*  WHICH KINDS OF EXECUTION A COURSE HAS - 13 Sep 2026.

    Mišo: "umjesto broja bi ja tu dao kružiće jedan pored drugog, svaki obojen
    u svoj type color - ako nema boje onda das toupper pocetno slovo".

    A row of dots rather than a count. They WRAP, because a course with eight
    executions exists and would otherwise push the turns and lessons columns
    off the right edge of a laptop. */
.ctdots
{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

/*  11px - SMALLER THAN IT WAS. Mišo, on 16: "sad su ko lopte". He is right:
    a swatch you point at once is 22px, a mark you read twenty-five times down
    a page is smaller than the text beside it, or it becomes the loudest thing
    in a table of names. A hairline inside, so a pale colour is still a disc
    and not a hole - the same trick .themepick-dot uses. */
.ctdot
{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 11px;
    height: 11px;
    border-radius: 50%;

    background: var(--swatch, var(--line-strong));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18);
}

/*  A TYPE WITH NO COLOUR IS A LETTER, NOT AN EMPTY CIRCLE. An outline among
    filled discs reads as something missing; an L among them reads as a kind.
    The surface behind it rather than the swatch, because the letter has to be
    legible and the ring is what says it belongs to the same row. */
.ctdot-letter
{
    /*  A LETTER NEEDS ROOM THE DOT DOES NOT. At 11px a capital is unreadable,
        so this one keeps 14 and the row still lines up because .ctdots centres
        its items - the two sizes read as "a colour" and "a kind without one",
        which is what they are. */
    width: 14px;
    height: 14px;

    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);

    color: var(--ink-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/*  A header that must not break in two. "EXECUTION TYPES" wrapped, and a
    two-line header row makes every list on the screen start lower. */
.listtable th.nowrap
{
    white-space: nowrap;
}

/*  THE BOOKING-TYPE ROW IS A GRID, NOT A FLEX ROW - 13 Sep 2026.

    Mišo: "samo malo fali poravnanje".

    It was `.rowform-wide`, which is flex with `flex: 1 1 9rem` on the name
    box - so the name grew into whatever space the rest of the row left, and
    the rest of the row is not the same on every line: two of the six carry a
    word beside the tick ("not available", "would like to teach here") and four
    do not. The name box was therefore a different width on every row and the
    colour, the tick and Save each landed at a different x.

    Flex cannot fix that: it aligns items within a line, and these are six
    separate lines. A GRID WITH NAMED TRACKS can, because every row declares
    the same tracks whether or not it has something to put in one.

        name          the only one that grows
        colour        3rem, the swatch
        public        auto, the tick and its words
        means         a fixed column, empty on four rows
        save          auto

    The hidden inputs take no track: input[type=hidden] is display:none in
    every UA stylesheet, so it creates no grid item. */
.restypeform
{
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 3rem auto 11rem auto;
    align-items: center;
    gap: .5rem;
}

.restypeform .input
{
    min-width: 0;
}

/*  It is a column that exists to be empty half the time, so it must not also
    be a column that wraps: "would like to teach here" on two lines would make
    those two rows taller than the other four, which is the same complaint one
    step down. */
.restype-means
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*  AND THE TWO CELLS BESIDE IT LINE UP WITH THE ROW, not with its top. The
    name cell is a grid of controls about 34px tall; a radio and a number
    default to the top of their cells and would sit a few pixels above the
    middle of everything they belong to. */
.termtable td
{
    vertical-align: middle;
}

/*  A LABEL FOR THE SCREEN READER AND NOBODY ELSE - 13 Sep 2026, with the
    booking-types radio. The column header says what the radio is, so repeating
    it beside every one would be six copies of one word down the page; a radio
    with no label at all is a control a screen reader announces as nothing.

    The standard clip, not display:none - a hidden element is not announced
    either, which would defeat the point. */
.sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/*  THE PROPERTIES COLUMN ON THE ROOM LIST - 13 Sep 2026.

    Mišo: "u ovoj tabeli nek budu i properties". A room can carry several, and
    one school carries fifty-eight of them in its vocabulary - so the cell has
    to wrap rather than push the seats column off the right edge.

    The chips are the list's existing ones, one size down: they are being read
    in a row of twenty, not looked at one at a time. */
.roomprops
{
    display: flex;
    flex-wrap: wrap;
    gap: 3px 5px;
    align-items: center;
}

.roomprops .chip
{
    font-size: 11.5px;
    padding: 1px 7px;
}



/*  THE SAME DOT, BESIDE AN EXECUTION TYPE'S NAME - 13 Sep 2026.

    Mišo: "ovdje bi lijevo od imena execution type-a dao onaj naš kružić sa
    njegovom bojom". The mark is .ctdot's, unchanged; this only places it.

    `.planpart-head` is a heading, not a table cell, so the dot needs two
    things a row does not give it: a little air before the name, and a baseline
    it can sit on. `translateY` rather than `vertical-align`, because the
    heading is a flex line - vertical-align does nothing to a flex item - and
    the optical centre of a disc beside 1rem text is a pixel below the
    geometric one.

    NOT `flex: none` GUESSWORK: .ctdot is already a fixed 11px box with no
    flex-basis, and a flex item with a fixed width and no shrink instruction
    can still be squeezed by a long type name. Saying it here costs one line
    and removes the one way this can go wrong on a narrow screen. */
.planpart-dot
{
    flex: none;
    margin-right: 2px;
    transform: translateY(0.5px);
}