/* Shared components. Page stylesheets lay out; they do not restyle these. */

/* Title on the left, the page's actions on the right */
/* The page title in a tinted band across the page, its actions on the right */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: 0 calc(-1 * var(--page-gutter)) var(--space-lg);
    padding: var(--space-lg) var(--page-gutter);
    background: var(--header-band);
    border-bottom: 1px solid var(--header-band-border);
}

/* A page's search and filters in a row (put .card card-compact on it for the white card) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.filter-bar .field {
    margin-bottom: 0;
}

.page-title {
    font-size: var(--text-xl);
    font-weight: 600;
}

.section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin: var(--space-xl) 0 var(--space-sm);
}

/* A section title with the section's own action at the right */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin: var(--space-xl) 0 var(--space-sm);
}

.section-header .section-title {
    margin: 0;
}

.card > .section-title:first-child {
    margin-top: 0;
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
    /* A table wider than the card scrolls inside it rather than spilling out */
    overflow-x: auto;
}

/* A card's title, above a rule, e.g. a report's */
.card-title {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--border-light);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* A card with less padding, e.g. around a row of filters */
.card-compact {
    padding: var(--space-md) var(--space-lg);
}

.muted {
    color: var(--text-muted);
}

/* Text kept on one line, such as a date and time */
.nowrap {
    white-space: nowrap;
}

/* A small label in capitals above a value: tiles, the daily log */
.caps-label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--label-spacing);
    color: var(--text-muted);
}

/* A panel that opens over the page: the user menu, a drop-down's list */
.popup {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-dialog);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    /* Its own size and case, so a button in a heading row is not styled as the heading */
    font-size: var(--text-md);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    background: var(--blue);
    color: var(--text-on-dark);
}

.btn:hover {
    background: var(--blue-dark);
}

.btn:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

/* An icon with no text: square, and named by aria-label and title */
.btn-icon {
    justify-content: center;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    padding: 0;
}

.icon {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
}

.message {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.message-info {
    background: var(--blue-tint);
    border: 1px solid var(--blue-border);
    color: var(--blue-dark);
}

.message-error {
    background: var(--error-tint);
    border: 1px solid var(--error-border);
    color: var(--error);
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table th,
.table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.table th {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-weight: 600;
}

/* Column headings in small capitals */
.table thead th {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--label-spacing-wide);
}

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

/* A heading row starting a group of rows, e.g. one jurisdiction's locations.
   Groups share one table, so their columns line up. */
.table .group-row th {
    background: var(--bg-hover);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--label-spacing-wide);
}

.group-row-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

/* The buttons at the end of a row */
.table .row-actions {
    text-align: right;
    white-space: nowrap;
}

.row-actions .btn + .btn {
    margin-left: var(--space-sm);
}

/* Forms */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.field > label,
.field > legend {
    font-weight: 500;
    color: var(--text-secondary);
}

/* .input is for an input outside a .field, such as the check form's dates */
.field input[type="text"],
.field select,
.input {
    height: var(--control-height);
    font: inherit;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text);
}

.field input:focus,
.field select:focus,
.input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}

.field input:disabled {
    background: var(--bg-subtle);
    color: var(--text-muted);
}

/* A short note under a field, in lighter text */
.field-hint {
    margin-top: calc(-1 * var(--space-xs));
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* A From / To pair of dates: two equal columns across the space */
.date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-lg);
}

.date-range .input {
    width: 100%;
}

/* Safari pads the inside of a date or time box on top of ours; drop its padding
   so the text starts where any other box's does. */
.input::-webkit-datetime-edit,
.input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

fieldset.field {
    border: none;
}

/* A row of tick boxes with their labels */
.check-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* One option per line, e.g. a choice between two kinds of download */
.check-group-stacked {
    flex-direction: column;
    gap: var(--space-xs);
}

.check-group label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Dialogs: a <dialog> holding a <form> with a header, a body that scrolls,
   and a footer of buttons. */
.dialog {
    width: var(--dialog-width);
    max-width: calc(100vw - 2 * var(--space-lg));
    max-height: var(--dialog-max-height);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dialog);
    color: var(--text);
}

.dialog-large {
    width: var(--dialog-large-width);
}

/* ::backdrop does not inherit custom properties in Safari or older Chrome, so
   var(--…) would come out empty here; the one raw colour in this file. */
.dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.dialog > form {
    display: flex;
    flex-direction: column;
    max-height: var(--dialog-max-height);
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}

/* A line above a dialog's title saying what it belongs to, e.g. the jurisdiction */
.dialog-context {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.dialog-title {
    font-size: var(--text-lg);
    font-weight: 600;
}

.dialog-close {
    display: grid;
    place-items: center;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
}

.dialog-close:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

/* Fields sit closer together in a dialog than on a page */
.dialog-body .field {
    margin-bottom: var(--space-md);
}

.dialog-body > :last-child {
    margin-bottom: 0;
}

/* A body whose content runs to the dialog's edges */
.dialog-body-flush {
    padding: 0;
}

/* Used with .actions, which lays out the buttons */
.dialog-footer {
    padding: var(--space-md) var(--space-xl);
    border-top: 1px solid var(--border-light);
}

/* A row of buttons, right-aligned: under a form or a card, or in a dialog's footer */
.actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* The frame around a signature, shown or being drawn */
.signature-image,
.signature-pad {
    display: block;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-bottom: var(--space-md);
}

.signature-image {
    max-width: 100%;
    max-height: var(--signature-image-height);
    padding: var(--space-sm);
}

/* A list of term / value pairs, such as a check as recorded */
.summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-xl);
    margin-bottom: var(--space-lg);
}

.summary dt {
    color: var(--text-muted);
}

/* Summary tiles: one strip of equal cells, a count per status. A tile can be
   a button that filters what is below it; the active one is highlighted. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-width), 1fr));
    margin-bottom: var(--space-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.tile {
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-right: 1px solid var(--border-light);
    background: none;
    font: inherit;
    color: var(--text);
    text-align: left;
}

.tile:last-child {
    border-right: none;
}

button.tile {
    cursor: pointer;
}

button.tile:hover {
    background: var(--bg-hover);
}

.tile.active {
    background: var(--blue-tint);
    box-shadow: inset 0 calc(-1 * var(--tile-active-rule)) 0 var(--blue);
}

/* Used with .caps-label */
.tile-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.tile-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
}

/* A state shown as a coloured dot and a word, with optional detail below.
   A tone class sets --tone; a toned tile's label carries the same dot. */
.status-success, .tile-success { --tone: var(--success); }
.status-warning, .tile-warning { --tone: var(--warning); }
.status-muted, .tile-muted { --tone: var(--text-muted); }

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 500;
    white-space: nowrap;
    color: var(--tone);
}

.status::before,
.tile-success .tile-label::before,
.tile-warning .tile-label::before,
.tile-muted .tile-label::before {
    content: "";
    flex: none;
    width: var(--status-dot-size);
    height: var(--status-dot-size);
    border-radius: 50%;
    background: var(--tone);
}

.status-detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* A row for something switched off */
.table tr.row-muted td {
    color: var(--text-muted);
}

/* A search box above a list */
.search {
    width: var(--search-width);
    max-width: 100%;
}

/* A drop-down drawn by the page (select.js): a trigger that looks like a text
   box, and a list that opens under it. */
.select-trigger {
    height: var(--control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.select-trigger:focus,
.select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}

.select-trigger .icon {
    flex: none;
    color: var(--text-muted);
}

.select-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Used with .popup */
.select-popup {
    position: fixed;
    z-index: var(--z-popup);
    margin-top: var(--space-xs);
    padding: var(--space-xs);
}

.select-search {
    width: 100%;
    margin-bottom: var(--space-xs);
}

.select-list {
    list-style: none;
    max-height: var(--select-list-height);
    overflow-y: auto;
}

.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.select-option.active {
    background: var(--blue-tint);
}

.select-option[aria-selected="true"] {
    font-weight: 600;
    color: var(--blue-dark);
}

/* A list of sections down the left of a page, in groups: each group a white
   panel with a dark title band, the current section highlighted. */
.sub-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sub-nav-group {
    padding: var(--space-xs);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.sub-nav-group-title {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--slate);
    color: var(--slate-text);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--label-spacing-wide);
}

.sub-nav ul {
    list-style: none;
}

.sub-nav a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
}

.sub-nav a:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.sub-nav a[aria-current="page"] {
    background: var(--blue-tint);
    color: var(--blue-dark);
}

/* A control on the navy band: the user menu, the daily log's close button.
   button.on-dark outranks a control's own class (.dialog-close) wherever it sits. */
button.on-dark {
    color: var(--text-on-dark);
}

button.on-dark:hover {
    background: var(--on-dark-hover);
    color: var(--text-on-dark);
}