:root {
    color-scheme: dark;
    --bg: #0e0e11;
    --surface: #16161a;
    --surface-2: #1d1d22;
    --hover: #1f1f25;
    --border: #2a2a31;
    --text: #ececef;
    --muted: #93939e;
    --accent: #f87171;
    --accent-soft: rgba(248, 113, 113, .14);
    --heat: 239, 68, 68;
    --radius: 10px;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page {
    padding: 20px 24px 32px;
}
/* Header with the view switch: header.css styles it; here only the space under it */
header {
    margin-bottom: 16px;
}

/* Filters */
#queryForm {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.field label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
input, select, button {
    font: inherit;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    height: 36px;
}
input:focus, select:focus, button:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
#interval {
    width: 80px;
}
button[type="submit"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #1f0707;
    font-weight: 600;
    padding: 0 18px;
    cursor: pointer;
}
button[type="submit"]:hover {
    filter: brightness(1.08);
}
/* A submit button that isn't the main action of its form */
button[type="submit"].secondary {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
    font-weight: 500;
}
.presets {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    height: 36px;
}
.time-span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;  /* between an icon and the text */
    padding: 0 12px;
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.time-span:hover {
    color: var(--text);
}
.time-span.active {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Filter chips */
#buttonContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
#buttonContainer:empty {
    display: none;
}
.button {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.button:hover {
    color: var(--text);
    border-color: #3a3a44;
}
.button.selected {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Detection table: scrolls inside its card, header row and device column stay put */
#detectionTableContainer {
    overflow: auto;
    max-height: calc(100vh - 200px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
th, td {
    border-bottom: 1px solid var(--border);
    text-align: center;
    padding: 6px 8px;
    white-space: nowrap;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}
th .th-date {
    display: block;
    font-weight: 400;
    opacity: .7;
}
th .th-time {
    display: block;
    color: var(--text);
}
tbody tr:last-child td {
    border-bottom: none;
}
tbody tr:hover td {
    background-color: var(--hover);
}
td.heat {
    min-width: 38px;
}
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    text-align: left;
    white-space: normal;
    min-width: 280px;
    max-width: 380px;
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .6);
}
th.sticky-col {
    z-index: 3;
    background: var(--surface-2);
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: bottom;
}
.device-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.device-label {
    font-weight: 600;
}
/* Inline label editor (replaces the label while editing) */
.label-input {
    height: 26px;
    width: 100%;
    max-width: 220px;
    padding: 2px 8px;
    font-weight: 600;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.label-input.saving {
    opacity: .6;
}
.label-input.invalid {
    border-color: #d03b3b;
    box-shadow: 0 0 0 3px rgba(208, 59, 59, .25);
}
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 20;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid #0ca30c;
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    transition: opacity .2s, transform .2s;
}
.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.toast.toast-error {
    border-left-color: #d03b3b;
}
@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: none;
    }
}
.device-name {
    color: var(--muted);
}
.device-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.mono {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11.5px;
}
.badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
}
.badge-router {
    border-color: rgba(248, 113, 113, .45);
    color: var(--accent);
    background: var(--accent-soft);
}
.red-1, tbody tr:hover td.red-1 {
    background-color: rgba(var(--heat), .2);
}
.red-2, tbody tr:hover td.red-2 {
    background-color: rgba(var(--heat), .4);
}
.red-3, tbody tr:hover td.red-3 {
    background-color: rgba(var(--heat), .62);
}
.red-4, tbody tr:hover td.red-4 {
    background-color: rgba(var(--heat), .88);
    color: #1f0707;
    font-weight: 600;
}
.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: rgba(248, 113, 113, .6);
    text-underline-offset: 3px;
}
.clickable:hover {
    color: var(--accent);
    text-decoration-style: solid;
}
.empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
}

/* Database view */
.db {
    display: flex;
    flex-direction: column;
    gap: 14px;
    --good: #0ca30c;
    --warning: #fab219;
    --critical: #d03b3b;
}
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}
.tile, .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.tile-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tile-value {
    font-size: 24px;
    font-weight: 600;
    margin: 2px 0;
}
.tile-unit, .tile-note, .card-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}
.card h2 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
}
.card h2 .icon, .busy-head h2 .icon {
    margin-right: 4px;
    color: var(--muted);
}
/* Buttons and links with an icon before their text */
button .icon, .link-button .icon {
    margin-right: 2px;
}
.card-note {
    margin: 0 0 10px;
}
.hints {
    border-color: rgba(250, 178, 25, .45);
}
.hints ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.hints li + li {
    margin-top: 4px;
}
.db-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
}
.scroll {
    overflow-x: auto;
}
.stats-table th {
    position: static;
    background: none;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.stats-table td {
    text-align: right;
}
.stats-table th:first-child, .stats-table th.left, .stats-table td.name {
    text-align: left;
}
.stats-table th:last-child, .stats-table td:last-child {
    text-align: left;
}
.stats-table tr.index td {
    color: var(--muted);
}
.stats-table td.plan {
    text-align: left;
    white-space: normal;
    color: var(--muted);
    min-width: 260px;
}
.num-bar {
    position: relative;
}
.day-bar {
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    background: var(--accent-soft);
    border-radius: 4px 0 0 4px;
    z-index: -1;
}
.num-bar {
    z-index: 0;
}
.spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    vertical-align: middle;
}
.spark span {
    width: 5px;
    background: var(--muted);
    opacity: .55;
    border-radius: 2px 2px 0 0;
}
.spark span.today {
    background: var(--accent);
    opacity: 1;
}
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.status-icon {
    font-size: 14px;
}
.status-ok .status-icon {
    color: var(--good);
}
.status-slower .status-icon, .status-scan .status-icon {
    color: var(--warning);
}
.status-slow .status-icon, .status-failed .status-icon {
    color: var(--critical);
}
.stats-table td.wrap {
    white-space: normal;
    min-width: 220px;
}
.status-idle {
    color: var(--muted);
}

/* Devices view */
.devices-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 6px;
}
.devices-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#deviceSearch {
    width: 240px;
}
.devices-tools .time-span {
    gap: 5px;
}
.devices-table td {
    vertical-align: middle;
}
.devices-table td.name {
    white-space: normal;
}
.devices-table tr[hidden] {
    display: none;
}
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 2px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--muted);
}
.switch:disabled {
    opacity: .5;
    cursor: wait;
}
.switch-track {
    position: relative;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: var(--border);
    transition: background .15s;
}
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s, background .15s;
}
.switch[aria-checked="true"] {
    color: var(--text);
}
.switch[aria-checked="true"] .switch-track {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.switch[aria-checked="true"] .switch-thumb {
    transform: translateX(12px);
    background: var(--accent);
}
.locked {
    color: var(--muted);
    font-size: 12px;
}
@media (max-width: 720px) {
    #deviceSearch {
        width: 100%;
    }
    .devices-tools, .devices-tools .presets {
        width: 100%;
    }
}

body[data-view="chart"] .table-only,
body[data-view="admin"] .chart-only {
    display: none;
}

/* Pie chart of users (chart view). Slots are the validated dark categorical palette. */
.chart-card {
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-other: #4a4a54;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}
/* Chart view: phones, then the other devices */
.chart-section + .chart-section {
    margin-top: 22px;
}
.chart-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}
.chart-section h2 .icon {
    color: var(--muted);
}
.chart-section > .card-note {
    margin: 0 0 10px;
}
.donut {
    position: relative;
    flex: 0 0 auto;
    width: 260px;
    height: 260px;
}
.donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.donut circle {
    fill: none;
    stroke-width: 34;
    cursor: default;
    transition: opacity .15s;
}
.donut.hovering circle:not(.hover) {
    opacity: .35;
}
.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.donut-total {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}
.donut-caption {
    color: var(--muted);
    font-size: 12px;
}
.legend {
    flex: 1 1 280px;
    min-width: 0;
    max-height: 420px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}
.legend li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
}
.legend li:hover, .legend li.hover {
    background: var(--hover);
}
.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.legend-time {
    color: var(--muted);
    font-size: 12px;
}
.legend-share {
    min-width: 44px;
    text-align: right;
    font-weight: 600;
}
.chart-tooltip {
    position: fixed;
    z-index: 10;
    pointer-events: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    font-variant-numeric: tabular-nums;
}
.chart-tooltip .tip-detail {
    color: var(--muted);
    font-size: 12px;
}

/* Phones */
@media (max-width: 720px) {
    .page {
        padding: 12px 12px 24px;
    }
    #queryForm {
        gap: 10px;
        padding: 12px;
    }
    .field {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    .field-wide {
        flex-basis: 100%;
    }
    .field input, .field select {
        width: 100%;
    }
    button[type="submit"] {
        flex: 1 1 100%;
    }
    .presets {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
    }
    .time-span {
        flex: 1 0 auto;
        padding: 0 8px;
    }
    #buttonContainer {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    #detectionTableContainer {
        max-height: 75vh;
    }
    th, td {
        padding: 5px 6px;
    }
    td.heat {
        min-width: 32px;
    }
    .sticky-col {
        min-width: 150px;
        max-width: 170px;
    }
    .device-meta {
        font-size: 11px;
    }
    .chart-card {
        justify-content: center;
        padding: 16px;
    }
    .donut {
        width: 220px;
        height: 220px;
    }
    .legend {
        flex-basis: 100%;
        max-height: none;
    }
}

/* Login page */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.login {
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.login img {
    width: 40px;
    height: 40px;
}
.login h1 {
    margin: 10px 0 20px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: left;
}
.login-form input {
    width: 100%;
}
.login-form button[type="submit"] {
    margin-top: 4px;
}
.login-error {
    display: flex;
    align-items: center;
    gap: 6px;
}
.login-error .status-icon {
    font-size: 15px;
    color: #d03b3b;
}

/* Setup page (install.php): the login card, wider and in sections */
.login.install {
    max-width: 460px;
}
.install h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
}
.install p {
    margin: 0;
    line-height: 1.5;
}
.install-help {
    font-size: 13px;
    color: var(--muted);
}
.install details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.install summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
}
.install details[open] summary {
    margin-bottom: 12px;
}
.install details .field + .field {
    margin-top: 12px;
}
.install-notice {
    display: flex;
    align-items: center;
    gap: 6px;
}
.install-notice .status-icon, .install .status-icon {
    font-size: 15px;
    color: #0ca30c;
}
.install .login-error .status-icon {
    color: #d03b3b;
}
.install a {
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

/* Commits view */
.commits-table .when {
    white-space: nowrap;
}
/* The commits a pull brought in, opened from its count */
.update-commits summary {
    cursor: pointer;
    white-space: nowrap;
}
.update-commits ul {
    margin: 6px 0 2px;
    padding-left: 16px;
    white-space: normal;
    min-width: 280px;
}
.update-commits li + li {
    margin-top: 3px;
}
.commits-table a {
    color: var(--text);
    text-decoration: underline dotted;
    text-decoration-color: var(--muted);
    text-underline-offset: 3px;
}
.commits-table a:hover {
    color: var(--accent);
}
.commits-table details {
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
}
.commits-table summary {
    cursor: pointer;
}
.commit-body {
    margin-top: 4px;
    white-space: normal;
}
.commits-table .added {
    color: #0ca30c;
}
.commits-table .removed {
    color: var(--accent);
}

/* Users view */
.user-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 6px 0 16px;
}
.users-table td {
    vertical-align: middle;
}
.viewer-settings {
    margin-top: 14px;
}
.viewer-setting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}
.viewer-setting .switch-label {
    min-width: 48px;
    text-align: left;
}
/* Users view: user types, one column each with a tick per thing it sees */
.user-types {
    margin-top: 14px;
}
.types-table th.type-col, .types-table td.type-col {
    min-width: 96px;
    text-align: center;
    vertical-align: middle;
}
.types-table th.type-col {
    vertical-align: top;
    white-space: nowrap;
}
.types-table .rename-type, .types-table .type-admin {
    display: block;
    margin: 0 auto;
    color: var(--text);
    font-weight: 600;
}
.types-table .type-users {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}
.types-table .remove-type {
    margin-top: 2px;
    font-size: 12px;
    text-decoration: none;
}
.types-table .label-input {
    width: 110px;
}
.types-table .perm-label {
    min-width: 220px;
    white-space: normal;
}
.types-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.types-table input[type="checkbox"]:disabled {
    cursor: default;
    opacity: .5;
}
.users-table select, .devices-table .type-select {
    height: 28px;
    padding: 2px 8px;
}
.users-table .label-input {
    max-width: 200px;
}
.link-button {
    height: auto;
    padding: 2px 0;
    background: none;
    border: 0;
    color: var(--muted);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}
.link-button:hover {
    color: var(--text);
}
.link-button.danger {
    color: #d03b3b;
    text-decoration-style: solid;
}
/* Users view: invitations */
.invites {
    margin-top: 14px;
}
.user-add .field-grow {
    flex: 1 1 220px;
}
.field label .optional {
    text-transform: none;
    letter-spacing: 0;
    opacity: .8;
}
.invite-result {
    margin: -4px 0 16px;
    padding: 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.invite-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.invite-link-row input {
    flex: 1 1 260px;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}
.invite-result .card-note {
    margin: 8px 0 0;
}
.invite-result .card-note.wrong {
    color: #f87171;
}
.invites-title {
    margin: 4px 0 8px;
    font-size: 13px;
    font-weight: 600;
}
.invites:has(#invitesEmpty:not([hidden])) .scroll {
    display: none;
}
.join-intro {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}
.review-photo {
    max-width: 420px;
}
.login .review-image {  /* (.login img is the logo's size) */
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface-2);
}
.review-buttons {
    display: flex;
    gap: 10px;
}
.review-buttons button[type="submit"] {
    flex: 1;
    height: 44px;
    margin: 0;
}
/* Approving is green here; the one the email's button asked for is the filled one */
.review-buttons button[value="approve"].primary {
    background: #2f9e6b;
    border-color: #2f9e6b;
    color: #04140c;
}
.review-buttons button.primary.danger {
    background: #d03b3b;
    border-color: #d03b3b;
    color: #fff;
}
.review-done {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.review-done.approve .icon {
    color: #2f9e6b;
    font-size: 18px;
}
.review-done.decline .icon {
    color: #d03b3b;
    font-size: 18px;
}
.join-login {
    color: var(--muted);
    text-align: center;
}
@media (max-width: 720px) {
    .invite-link-row button {
        flex: 1 1 0;
    }
    .user-add .field {
        flex: 1 1 100%;
    }
    .user-add button[type="submit"] {
        flex: 1 1 100%;
    }
}

/* Devices view: a router name several devices use (labels don't carry over between its addresses) */
.shared-name {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* Settings view */
.settings-form .user-add {
    margin-bottom: 10px;
}
.settings-form .field input {
    min-width: 190px;
}
.settings-form .field input[size] {
    min-width: 0;
}
.settings-form #public_url {
    width: min(420px, 100%);
}
.settings-form .field:has(#public_url) {
    flex: 1 1 320px;
}
.settings-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.settings-check input {
    height: auto;
}
.settings-save {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.settings-save a {
    color: inherit;
}

/* Database view: Backups card */
.backups-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}
.backups-head h2 {
    margin: 0;
}
.backups-table tr.deleted td {
    color: var(--muted);
}
.backup-link + .backup-link {
    margin-top: 6px;
}
.backup-link .download-ok {
    color: #0ca30c;
}
.backup-link .download-stopped {
    color: #d03b3b;
}
.backup-send {
    display: flex;
    gap: 6px;
}
.backup-send input {
    width: 190px;
    height: 30px;
}
.backup-send button {
    height: 30px;
    white-space: nowrap;
}

/* Email view */
.type-choices {
    border: 0;
    margin: 0;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    min-height: 36px;
}
.type-choices legend {
    float: left;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.type-choices label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}
/* width: auto beats the phone rule that stretches every form input to full width */
.type-choices input {
    width: auto;
    height: auto;
    accent-color: var(--accent);
}
@media (max-width: 720px) {
    .type-choices legend {
        float: none;
        width: 100%;
        margin-bottom: 2px;
    }
    /* Subscriptions table fits a phone: headers wrap, long addresses break, switches without "On / Off" */
    .email-table th {
        white-space: normal;
        vertical-align: bottom;
    }
    .email-table td:first-child {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 110px;
    }
    .email-table .switch-label {
        display: none;
    }
    .stats-table td.wrap {
        min-width: 150px;
    }
}
.hints-inline {
    margin: 0 0 10px;
}

/* Device card (Database view) */
.device-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.device-tiles {
    margin-top: 6px;
}
.device-tiles .tile {
    background: var(--surface-2);
}
.restart-button {
    padding: 0 14px;
    cursor: pointer;
}
.restart-button:hover:not(:disabled) {
    border-color: #d03b3b;
    color: #d03b3b;
}
.restart-button.danger {
    background: #d03b3b;
    border-color: #d03b3b;
    color: #fff;
}
.restart-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.restart-help {
    margin: 12px 0 0;
}
.restart-help code {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 11.5px;
    overflow-wrap: anywhere;
    user-select: all;
}

/* Calendar view: a month or a year of days, shaded by how many phones came (or how long one phone
   stayed), full width with the summary and phone list beside it on a wide screen */
.calendar .devices-head > div {
    flex: 1 1 320px;
}
#calendarPhone {
    width: 260px;
    max-width: 100%;
}
/* Phone search suggestions, under the box */
.cal-search {
    position: relative;
    max-width: 100%;
}
.cal-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    width: max(100%, 300px);
    max-width: calc(100vw - 24px);
    max-height: 320px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.cal-suggestions li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}
.cal-suggestions li:hover, .cal-suggestions li[aria-selected="true"] {
    background: var(--hover);
}
.cal-suggestions li[aria-selected="true"] {
    color: var(--accent);
}
.cal-suggestions .option-meta {
    flex: none;
    color: var(--muted);
    font-size: 12px;
}
.cal-suggestions .empty-option {
    color: var(--muted);
    cursor: default;
}
/* Back to everyone, beside the search */
.calendar .devices-tools .time-span {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}
.cal-nav {
    display: flex;
    flex-wrap: wrap;  /* on a phone the Month / Year switch takes a row of its own */
    align-items: center;
    gap: 8px 6px;
    margin: 10px 0 12px;
}
.cal-nav h3 {
    min-width: 140px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.day-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}
a.day-arrow:hover {
    background: var(--surface-2);
    color: var(--text);
}
.day-arrow.disabled {
    opacity: .35;
}
.cal-today {
    margin-left: 6px;
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
}
.cal-today:hover {
    color: var(--text);
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.cal-weekday {
    padding-bottom: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
}
.cal-day {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Taller on a wide screen, so the month keeps its shape at full width */
    min-height: clamp(64px, 6.5vw, 110px);
    padding: 6px 7px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}
a.cal-day:hover {
    outline: 1px solid var(--muted);
}
.cal-day.today {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-day.future {
    background: none;
    border: 1px dashed var(--border);
    color: var(--muted);
    opacity: .6;
}
.cal-num {
    font-size: 12px;
    color: inherit;
    opacity: .75;
}
.cal-value {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Hour strip along the bottom of a day (month view): 24 segments, 00 to 24, brighter the more phones
   were there that hour (or the more of it one phone was). White on the day's red, so it reads on any shade */
.cal-strip {
    display: flex;
    gap: 1px;
    height: clamp(7px, .7vw, 11px);
    margin-top: 5px;
    padding: 1px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .35);
}
.cal-strip i {
    flex: 1;
    border-radius: 1px;
    background: rgba(255, 255, 255, .06);
}
/* A tick at 06, 12 and 18 */
.cal-strip i:nth-child(6n + 1):not(:first-child) {
    margin-left: 1px;
}
.cal-strip i.h1 { background: rgba(255, 255, 255, .3); }
.cal-strip i.h2 { background: rgba(255, 255, 255, .5); }
.cal-strip i.h3 { background: rgba(255, 255, 255, .72); }
.cal-strip i.h4 { background: rgba(255, 255, 255, .95); }
.cal-strip i:hover {
    outline: 1px solid #fff;
}
/* The key in the side panel: a sample strip with the hours under it */
.cal-strip-key {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 240px;
}
.cal-strip.sample {
    height: 9px;
    margin-top: 0;
    background: var(--surface-2);
}
.cal-strip-hours {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 10px;
}
.cal-strip.sample i.h2 { background: rgba(255, 255, 255, .4); }
.cal-strip.sample i.h4 { background: rgba(255, 255, 255, .85); }
/* Group bookings on a day (Groups & bookings view), in the month view: lines in the group's color */
.cal-bookings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 10.5px;
    line-height: 1.25;
}
.cal-bookings li {
    overflow: hidden;
    padding: 1px 4px;
    border-left: 3px solid var(--band);
    border-radius: 3px;
    background: rgba(0, 0, 0, .35);
    color: var(--text);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cal-bookings li.more {
    border-left-color: transparent;
    background: none;
    color: inherit;
    opacity: .8;
}
.cal-booking-time {
    opacity: .75;
    font-variant-numeric: tabular-nums;
}
.cal-day.future .cal-bookings li {
    background: var(--surface-2);
}
@media (max-width: 520px) {
    .cal-bookings {
        font-size: 9px;
    }
    .cal-booking-time {
        display: none;
    }
}
/* Not worked out yet (calendar-fill.php fills them overnight) */
.cal-day.pending {
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px);
    color: var(--muted);
}
.cal-pending {
    margin-top: 4px;
}
.cal-nav .presets {
    margin-right: 10px;
}
.cal-nav a.time-span {
    text-decoration: none;
}
/* Calendar beside the summary and phone list on a wide screen; the list goes under it on a narrow one */
.cal-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}
@media (min-width: 1100px) {
    .cal-body {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}
.cal-help summary {
    cursor: pointer;
}
.cal-help[open] summary {
    margin-bottom: 4px;
    color: var(--text);
}
/* Year view: twelve small months, shades only (details on hover); six across on a big screen */
.cal-year {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 22px;
}
@media (min-width: 1500px) {
    .cal-year {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}
.cal-month h4 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
}
.cal-month h4 a {
    color: var(--text);
    text-decoration: none;
}
.cal-month h4 a:hover {
    color: var(--accent);
}
.cal-grid.compact {
    gap: 3px;
}
.cal-grid.compact .cal-weekday {
    font-size: 10px;
    letter-spacing: 0;
}
.cal-grid.compact .cal-day {
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 3px;
}
/* Phones (everyone) or hours (one phone) in each small square */
.cal-grid.compact .cal-day {
    align-items: center;
    justify-content: center;
}
.cal-grid.compact .cal-value {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    overflow: visible;
}
.cal-grid.compact .cal-day.today {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}
@media (max-width: 900px) {
    .cal-year {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .cal-year {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}
.cal-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    color: var(--muted);
}
.cal-summary {
    color: var(--text);
    font-size: 13px;
}
.cal-legend {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cal-side h4 {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.cal-side-note {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}
/* Phones in the shown period, most days first, each with a bar: click one to see its days */
.cal-phones {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cal-phones a {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px;
    overflow: hidden;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
}
.cal-phones a:hover {
    background: var(--hover);
}
.cal-phones .selected a {
    background: var(--accent-soft);
    color: var(--accent);
}
.cal-phone-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-phone-days {
    flex: none;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.cal-phone-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: rgba(var(--heat), .6);
}
.cal-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--surface-2);
}
@media (max-width: 520px) {
    .cal-grid:not(.compact) .cal-day {
        min-height: 48px;
        padding: 4px 5px;
    }
    .cal-value {
        font-size: 12px;
    }
    .cal-min {
        display: none;
    }
    /* Narrow days: the strip without gaps */
    .cal-strip {
        gap: 0;
        height: 5px;
        margin-top: 3px;
    }
    .cal-strip i:nth-child(6n + 1):not(:first-child) {
        margin-left: 0;
    }
}
/* The shared heat steps (.red-1 ... .red-4, as in the table), over the empty-day background above */
.cal-day.red-1, .cal-swatch.red-1 {
    background-color: rgba(var(--heat), .2);
}
.cal-day.red-2, .cal-swatch.red-2 {
    background-color: rgba(var(--heat), .4);
}
.cal-day.red-3, .cal-swatch.red-3 {
    background-color: rgba(var(--heat), .62);
}
.cal-day.red-4, .cal-swatch.red-4 {
    background-color: rgba(var(--heat), .88);
}

/* Bands view: rooms and adding a group side by side, then the bands in columns: one card per band, its
   color as a stripe down the left, its bookings as chips, the booking form only while adding or changing */
.bands-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    align-items: start;
}
.band-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 10px;
    align-items: start;
}
@media (max-width: 480px) {
    .bands-top, .band-grid {
        grid-template-columns: 1fr;
    }
}
.band {
    border-left: 4px solid var(--band);
    padding: 10px 12px;
    min-width: 0;
}
.band-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.band-color, #newBandColor {
    flex: none;
    width: 36px;
    padding: 3px;
    cursor: pointer;
}
.band-name {
    flex: 0 1 320px;
    min-width: 0;
    background: none;
    border-color: transparent;
    font-size: 15px;
    font-weight: 600;
}
.band-name:hover {
    border-color: var(--border);
}
.band-head .remove-band {
    margin-left: auto;
}
.rehearsals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* The last chip: opens the booking form */
.rehearsals li.booking-open-item {
    padding: 0;
    border: 0;
    background: none;
}
.booking-open {
    height: 28px;
    padding: 0 10px;
    border: 1px dashed color-mix(in srgb, var(--band) 55%, transparent);
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
}
.booking-open:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--band) 12%, transparent);
}
.booking-open[hidden] {
    display: none;
}
.rehearsals li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border: 1px solid color-mix(in srgb, var(--band) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--band) 16%, transparent);
}
.remove-rehearsal, .chip-button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.remove-rehearsal:hover, .chip-button:hover {
    background: var(--hover);
    color: var(--text);
}
.rehearsals li.past {
    opacity: .5;
}
/* The booking being changed in the form below */
.rehearsals li.editing {
    outline: 2px solid var(--band);
    outline-offset: 1px;
}
/* Booking form: every week or once, then rows reading "From [day] [time] to [day] [time] in [room]" */
.rehearsal-add {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.rehearsal-add[hidden] {
    display: none;
}
.rehearsal-add [hidden] {
    display: none !important;
}
.rehearsal-add .presets label {
    cursor: pointer;
}
.booking-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.booking-word {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}
.booking-hint {
    margin: 0;
}
.rehearsal-add input[type="time"] {
    width: 110px;
}
/* Every how many weeks or months, and the day of the month */
.rehearsal-add .booking-every {
    width: 70px;
}
.rehearsal-add .monthly-only {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.booking-length {
    color: var(--muted);
}
.booking-length.wrong {
    color: #d03b3b;
}
/* A room per row: icon, name, description, remove */
.rooms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.rooms li {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px 0 2px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}
.rooms li .remove-room {
    margin-left: auto;
}
/* Descriptions: quiet until hovered or typed in */
.room-description, .band-description {
    min-width: 0;
    background: none;
    border-color: transparent;
    color: var(--muted);
    font-size: 13px;
}
.room-description {
    flex: 1 1 auto;
    height: 30px;
    border-radius: 999px;
}
.band-description {
    width: 100%;
    margin: -4px 0 8px;
}
.room-description:hover, .band-description:hover {
    border-color: var(--border);
}
.room-description:focus, .band-description:focus {
    color: var(--text);
}
.room-name {
    width: 14ch;
    height: 30px;
    background: none;
    border-color: transparent;
    border-radius: 999px;
}
.room-name:hover {
    border-color: var(--border);
}

/* Search box with a magnifier inside (Devices, Calendar) */
.search-box {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.search-box > .icon {
    position: absolute;
    left: 10px;
    color: var(--muted);
    pointer-events: none;
}
.search-box input {
    padding-left: 32px;
}
/* Phone / computer / other before a device's name (Devices view) */
.device-type {
    margin-right: 2px;
    color: var(--muted);
}
/* Bands view: the band search, under the add form */
.band-search {
    width: 320px;
    max-width: 100%;
    margin-top: 4px;
}
.band-search input {
    width: 100%;
}
.card.band[hidden] {
    display: none;
}
/* Booking form: the days of the week, as chips to tick one or more */
.day-choices {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.day-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.day-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.day-choice:hover {
    color: var(--text);
}
.day-choice.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.day-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Booking form: the room to book, as chips with each room's icon */
.room-choices {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.room-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
}
.room-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.room-choice:hover {
    color: var(--text);
}
.room-choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.room-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Email a booking as a calendar invitation (Bands view): the box under its calendar button */
.google-send {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 16px));
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.google-send[hidden] {
    display: none;
}
.google-send-title {
    font-weight: 600;
}
.google-send label {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.google-send textarea {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    resize: vertical;
}
.google-send textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.google-send-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.google-send .card-note {
    margin: 0;
}
.google-send .invite-zone-missing {
    color: var(--warning, #fab219);
}

/* Icon button for a room or a band (Bands view), and the picker it opens */
.icon-pick {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}
.band .icon-pick {
    color: var(--band);
}
.rooms .icon-pick {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 15px;
}
.icon-pick.none {
    color: var(--muted);
    opacity: .6;
}
.icon-pick:hover {
    background: var(--hover);
    opacity: 1;
}
.icon-picker {
    position: absolute;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(10, 34px);
    gap: 4px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.icon-picker[hidden] {
    display: none;
}
.icon-picker button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
}
.icon-picker button:hover {
    background: var(--hover);
}
/* Money (Groups page): the month's totals in the summary line, opened for its times and categories */
.money-card summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    cursor: pointer;
    list-style: none;
}
.money-card summary::-webkit-details-marker {
    display: none;
}
.money-card summary h2 {
    margin: 0;
}
.money-totals {
    color: var(--muted);
    font-size: 13px;
}
.money-in {
    color: #3fb27f;
}
.money-out {
    color: #e5533d;
}
.money-overdue {
    color: #e5533d;
    font-weight: 600;
}
.money-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 4px;
}
.money-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.money-button:hover {
    border-color: var(--accent);
}
.money-heading {
    margin: 14px 0 4px;
    font-size: 13px;
    color: var(--muted);
}
.money-table-wrap {
    overflow-x: auto;
}
.money-table td {
    white-space: nowrap;
}
.money-table .money-every {
    color: var(--muted);
}
.money-table tr.overdue .money-paid-toggle {
    border-color: #e5533d;
    color: #e5533d;
}
.money-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.money-remove.danger {
    background: #d03b3b;
    color: #fff;
}
.money-table tr.ended td:not(:last-child) {
    color: var(--muted);
}
.money-form {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.money-form .money-amount-field {
    width: 90px;
}
.money-form .money-note-field {
    flex: 1 1 200px;
}
.money-form input[readonly] {
    opacity: .6;
}
/* A group's money that repeats (rent), under its bookings */
.band-money {
    margin-top: 6px;
}
.money-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.money-chip:hover {
    text-decoration: underline;
}
.money-table tr.skipped td:not(:last-child) {
    color: var(--muted);
    text-decoration: line-through;
}
.money-table tr.paid .money-paid-toggle {
    color: #3fb27f;
}
/* Headings between the kinds of icons, across the whole row */
.icon-picker-group {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}
.icon-picker button.current {
    background: var(--accent-soft);
    color: var(--accent);
}
@media (max-width: 420px) {
    .icon-picker {
        grid-template-columns: repeat(7, 34px);
    }
}

/* Photos view: a card per bucket with its newest photo and Add a photo; admins also get the photos
   waiting for approval, earlier photos and the buckets */
.photo-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.photo-bucket h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.photo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}
/* Admins: the bucket's photos and what its folder takes on disk */
.photo-size {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}
.photo-latest {
    margin: 8px 0;
}
.photo-latest img, .photo-review img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 8px;
    background: var(--surface-2);
}
.photo-latest figcaption, .photo-review figcaption {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}
/* No photo yet: a big + where it will be, tap to add one */
.photo-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 4 / 3;
    margin: 8px 0;
    border: 2px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.photo-none-plus {
    font-size: 96px;
    font-weight: 200;
    line-height: 1;
}
.photo-none:hover, .photo-none:focus-within {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.photo-none.busy {
    opacity: .6;
    pointer-events: none;
}
.photo-mine {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-size: 12px;
    color: var(--muted);
}
.photo-mine img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}
.photo-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #1f0707;
    font-weight: 600;
    cursor: pointer;
}
.photo-add:hover {
    filter: brightness(1.08);
}
.photo-add.busy {
    opacity: .6;
    pointer-events: none;
}
.photo-status {
    margin-top: 8px;
    font-size: 13px;
    color: var(--muted);
}
.photo-status.wrong {
    color: #d03b3b;
}
.photo-earlier {
    margin-top: 10px;
    font-size: 13px;
}
.photo-earlier summary {
    cursor: pointer;
    color: var(--muted);
}
.photo-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.photo-thumbs figure {
    margin: 0;
}
.photo-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
}
.photo-thumbs figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 14px;
}
.photo-review {
    margin: 0;
}
.photo-review-buttons {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.photo-bucket-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.photo-bucket-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.bucket-name {
    width: 16ch;
}
.bucket-description {
    flex: 1 1 220px;
    min-width: 0;
}
.bucket-front {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}
.remove-rehearsal.danger {
    background: #d03b3b;
    color: #fff;
}

/* History (Groups page): every change, newest first */
.history-card summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    cursor: pointer;
    list-style: none;
}
.history-card summary::-webkit-details-marker {
    display: none;
}
.history-card summary h2 {
    margin: 0;
}
.history-search {
    margin: 12px 0 8px;
}
.history-list {
    max-height: 60vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 13px;
}
.history-list li {
    padding: 5px 0;
    border-top: 1px solid var(--border);
}
.history-at {
    display: inline-block;
    min-width: 9.5em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.history-list .change-money .icon {
    color: #3fb27f;
}

/* When a photo was taken, over its corner: "Today 14:05 · 12 min ago" (photos.js keeps it current) */
.photo-latest a, .photo-review a, .photo-thumbs a {
    position: relative;
    display: block;
}
.photo-taken {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .66);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}
.photo-thumbs .photo-taken {
    left: 4px;
    bottom: 4px;
    max-width: calc(100% - 8px);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.35;
    white-space: pre-line;  /* when, then how long ago, under it */
}
/* Every photo of one bucket (Photos page, ?bucket=N), by month */
.photo-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    text-decoration: none;
}
.photo-back:hover {
    color: var(--text);
}
.photo-gallery h2 .card-note {
    margin-left: 6px;
    font-weight: 400;
}
.photo-month {
    margin: 16px 0 6px;
    font-size: 13px;
    color: var(--muted);
}
.photo-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
}
/* A camera before the time when it's when the photo was taken (from the photo itself) */
.photo-taken .icon {
    font-size: .95em;
    vertical-align: -.12em;
}

/* On a phone or tablet: how to add a photo, Take a photo or Choose from the gallery (photos.js) */
.photo-choice {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
.photo-choice button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}
.photo-choice button:hover, .photo-choice button:focus-visible {
    background: var(--accent-soft);
    color: var(--accent);
    outline: none;
}
.photo-choice .icon {
    font-size: 18px;
}

/* Visitors view: what users open, and the admins' visits folded away */
.page-bars {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.page-bar {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr auto;
    align-items: center;
    gap: 10px;
}
.page-bar-track {
    height: 10px;
    border-radius: 5px;
    background: var(--surface-2);
    overflow: hidden;
}
.page-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--accent);
}
.page-bar-count {
    min-width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.admin-visits summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.admin-visits summary .card-note {
    margin: 0;
    font-weight: 400;
}
.admin-visits[open] summary {
    margin-bottom: 10px;
    color: var(--text);
}
.admin-visits-title {
    margin: 14px 0 6px;
    font-size: 13px;
    font-weight: 600;
}