/*
 * Everything Bootstrap does not already do. Deliberately short: a house style
 * that fights the framework is a house style nobody can maintain.
 */

/* The device and group tables are read across, so the row under the cursor is
   worth marking more strongly than Bootstrap's default hover. */
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--bs-secondary-bg);
}

/* Monospace for the things that are identifiers rather than words: addresses,
   ports, RouterOS versions, flash paths, backup passwords. They are compared by
   eye, column against column. */
.identifier {
    font-family: var(--bs-font-monospace);
    font-size: 0.9em;
}

/* A destructive action inside a table cell should not look like a button the
   eye lands on first. */
.btn-link-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-padding-x: 0.25rem;
    --bs-btn-padding-y: 0;
}

/* The layout is full width because the tables are: a device list is a dozen
   columns read across, and every pixel of window is one it can use. A form is
   the opposite - an input two thousand pixels wide is harder to fill in, not
   easier - so the column a form sits in stops growing where reading stops
   getting better. Below that width the grid still decides, unchanged. */
.form-column {
    max-width: 45rem;
}

/* Login is two fields and a button, and this keeps it the size it was before
   the layout went full width. */
.form-column-narrow {
    max-width: 28rem;
}

/* A table column that holds one checkbox and nothing else.

   1% rather than a pixel width: a table lays itself out by content, and a
   percentage this small means "give this column the least you can" - the box
   plus the cell padding - and hand the rest to the columns that carry text. */
.column-checkbox {
    width: 1%;
}

/* The label column of a properties table.

   A third, so the values start at the same place regardless of how long the
   longest label happens to be. The markup asked for this with a w-33 that
   Bootstrap does not ship and this file did not define, so it styled nothing
   until now. */
.column-label {
    width: 33%;
}

/* Flash messages, floating over the top of the page.
 *
 * Fixed rather than in the flow: the message answers something the reader just
 * did, and inserting it into the page would push everything they were looking
 * at down by its height - twice, when it disappears again three seconds later.
 *
 * As wide as its text and no wider, because most of these are a sentence; the
 * cap keeps the occasional long one from becoming a banner. Above the navbar's
 * 1030 so it is never half-hidden behind it, and below Bootstrap's modal
 * backdrop so a dialog still covers everything.
 */
.flash-stack {
    position: fixed;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    width: max-content;
    max-width: 80%;
}

.flash-stack .alert {
    margin-bottom: 0.5rem;
}

/* The inventory keeps its geometry when the filter narrows it.
 *
 * A table lays itself out by its content, so every filter that changes which
 * rows are on screen also changes where the columns are: the name column
 * narrows because the longest name went away, the date column widens, and the
 * reader's eye loses the place it was holding. The widths are therefore
 * declared here once and add up to a hundred.
 *
 * The cost of a fixed layout is that an unusually long value wraps instead of
 * pushing its column wider, and that is the trade being made: a wrapped cell is
 * one row being awkward, a re-laid-out table is every row moving.
 *
 * The minimum width is what keeps eight columns readable. Below it the table
 * stops shrinking and .table-responsive scrolls instead, which is the whole
 * reason that wrapper is there.
 */
.table-inventory {
    table-layout: fixed;
    min-width: 74rem;
}

/* The state column carries two badges - reachable, backed up - and is the
   widest of the short ones because of it. The two date columns are sized for
   the longest thing they can hold, "2026-09-21 08:40 UTC". */
.column-device-name { width: 15%; }
.column-host { width: 10%; }
.column-version { width: 13%; }
.column-group { width: 11%; }
.column-uptime { width: 7%; }
.column-polled { width: 13%; }
.column-state { width: 18%; }
.column-backup { width: 13%; }