* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Vaihtomatto brand: navy badge + aqua wave from the logo */
    --brand-navy: #24398c;
    --brand-navy-dark: #18276a;
    --brand-aqua: #4fc3dc;
    --brand-aqua-soft: #e3f6fa;

    --primary-color: #1c2b5e;
    --secondary-color: #2f55d4;
    --secondary-hover: #2443b0;
    --success-color: #1f9d55;
    --warning-color: #e8900c;
    --danger-color: #d64545;
    --light-bg: #f0f4f9;
    --dark-bg: #24398c;
    --text-primary: #1c2440;
    --text-secondary: #5f6b85;
    --border-color: #d9e1ec;
    --bg-color: #fff;
    --success-bg: #d5f5e3;
    /* Cards, panels and modals; surface-alt for the slightly grey rows on them */
    --surface: #fff;
    --surface-alt: #fafbfc;
    /* Pale info-box tints (set inline by the app too) */
    --tint-amber: #fff3cd;
    --tint-red: #fdecea;
    --tint-green: #e8f5e9;
    --tint-blue: #e3f2fd;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(20, 35, 90, 0.06);
    --shadow-md: 0 4px 14px rgba(20, 35, 90, 0.10);
    --focus-ring: 0 0 0 3px rgba(79, 195, 220, 0.45);
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    letter-spacing: -0.01em;
}

.container {
    min-height: 100vh;
}

header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: linear-gradient(120deg, var(--brand-navy-dark) 0%, var(--brand-navy) 70%);
    color: white;
    /* full-width bar, content lined up with the 1400px main column */
    padding: 0.75rem max(2rem, calc((100% - 1400px) / 2 + 2rem)) 0;
    box-shadow: 0 2px 12px rgba(20, 35, 90, 0.25);
    border-bottom: 4px solid var(--brand-aqua);
}

.header-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 2px 8px rgba(0,0,0,0.25);
    background: var(--surface);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

header h1 {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.45rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.brand-sub {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--brand-aqua);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.nav-btn {
    background: transparent;
    color: rgba(255,255,255,0.78);
    border: none;
    padding: 0.55rem 0.95rem 0.65rem;
    cursor: pointer;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.nav-btn:hover {
    color: white;
    background: rgba(255,255,255,0.10);
}

.nav-btn.active {
    color: var(--brand-navy);
    background: var(--brand-aqua);
    font-weight: 600;
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.view {
    display: none;
}

.view.active {
    display: block;
    animation: fadeIn 0.25s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-header h2 {
    color: var(--primary-color);
    font-size: 1.6rem;
    font-weight: 700;
}

.btn-primary, .btn-secondary, .btn-danger {
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-primary {
    background: var(--secondary-color);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: var(--secondary-hover);
    box-shadow: 0 3px 10px rgba(47, 85, 212, 0.3);
}

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

/* Mat, Clothes, and Wipes Entry Styles */
.mat-entry {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.clothes-entry {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.wipes-entry {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.mat-entry select,
.mat-entry input,
.clothes-entry select,
.clothes-entry input,
.wipes-entry select,
.wipes-entry input {
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
}

.mat-entry input[type="number"],
.clothes-entry input[type="number"],
.wipes-entry input[type="number"] {
    width: 60px;
}

.mat-entry .remove-mat-btn,
.clothes-entry .remove-clothes-btn,
.wipes-entry .remove-wipes-btn {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.mat-entry .remove-mat-btn:hover,
.clothes-entry .remove-clothes-btn:hover,
.wipes-entry .remove-wipes-btn:hover {
    background: #b83737;
}

.btn-secondary:hover {
    background: var(--light-bg);
    border-color: #c3cede;
}

.btn-danger {
    background: var(--surface);
    color: var(--danger-color);
    border-color: #efb4b4;
}

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

/* Filters */
.filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filters input,
.filters select {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
    flex: 1;
    min-width: 200px;
}

/* Shared form controls */
input, select, textarea {
    font: inherit;
    color: var(--text-primary);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-aqua) !important;
    box-shadow: var(--focus-ring);
}

/* Targets List */
.targets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 1rem;
}

.target-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
}

.target-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.target-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.target-card .address {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.target-card .details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.target-card .details span {
    background: var(--light-bg);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.target-card .delivery-days {
    display: flex;
    gap: 0.3rem;
    margin: 0.5rem 0;
}

.day-badge {
    background: var(--secondary-color);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
}

.priority-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.priority-normal {
    background: #95a5a6;
    color: white;
}

.priority-high {
    background: var(--warning-color);
    color: white;
}

.priority-urgent {
    background: var(--danger-color);
    color: white;
}

.target-card .actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.target-card .actions button {
    flex: 1;
    padding: 0.45rem;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

.edit-btn {
    background: var(--secondary-color);
    color: white;
}

.delete-btn {
    background: var(--danger-color);
    color: white;
}

/* Drivers List */
.drivers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
}

/* Työntekijät: one row per person - name, email and start, roles, buttons */
.staff-list {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.staff-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--light-bg);
}

.staff-row:first-child {
    border-top: none;
}

.staff-who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.staff-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Roles and buttons in columns, so they line up from row to row */
.staff-row .role-chips {
    flex: none;
    width: 17rem;
}

.staff-actions {
    width: 19rem;
    justify-content: flex-end;
    display: flex;
    gap: 0.4rem;
    flex: none;
}

.staff-actions button {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .staff-row {
        flex-wrap: wrap;
    }

    .staff-who {
        flex-basis: 100%;
    }

    .staff-row .role-chips,
    .staff-actions {
        width: auto;
    }
}

/* A worker's roles, toggled on and off: Kuljettaja / Pesula */
.role-chips {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.role-chip {
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Each role its own colour: Toimisto navy, Kuljettaja green, Pesula blue */
.role-chip.role-admin { --role-color: var(--brand-navy); }
.role-chip.role-driver { --role-color: #1e8449; }
.role-chip.role-laundry { --role-color: #2c6fbb; }

.role-chip.on {
    background: var(--role-color, var(--brand-navy));
    border-color: var(--role-color, var(--brand-navy));
    color: white;
}

.role-chip.add {
    border-style: dashed;
    border-color: var(--role-color, var(--brand-navy));
    color: var(--role-color, var(--brand-navy));
}

.role-chip.add:hover {
    background: var(--light-bg);
}

.role-chip-x {
    border: none;
    background: none;
    color: inherit;
    margin-left: 0.3rem;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}

.staff-email {
    color: var(--text-secondary);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.driver-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.driver-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.driver-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
}

.driver-card .regions {
    margin: 0.5rem 0;
}

.region-tag {
    display: inline-block;
    background: var(--light-bg);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin: 0.2rem;
    font-size: 0.85rem;
}

/* Schedule Container */
.schedule-container {
    overflow-x: auto;
}

.schedule-grid {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
    min-width: 800px;
}

.schedule-header,
.schedule-cell {
    background: var(--surface);
    padding: 1rem;
}

.schedule-header {
    background: var(--brand-navy);
    color: white;
    font-weight: bold;
    text-align: center;
}

.schedule-cell {
    min-height: 150px;
}

.schedule-driver {
    background: var(--light-bg);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivery-item {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--secondary-color);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.delivery-item[draggable="true"] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.delivery-item[draggable="true"]:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: var(--surface-alt);
}

.delivery-item[draggable="true"]:active {
    cursor: grabbing;
}

/* The stop being moved stays in place, faded and outlined */
.delivery-item.dragging {
    opacity: 0.35;
    outline: 2px dashed #1e88e5;
    outline-offset: -2px;
}

/* The copy that follows the pointer: solid and sharp */
.delivery-item.drag-ghost {
    position: absolute;
    top: -1000px;
    left: -1000px;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    opacity: 1;
}

/* The gap the stop will land in: a thick line above or below the row */
.delivery-item.drop-before {
    box-shadow: 0 -3px 0 0 #1e88e5, inset 0 3px 0 0 #1e88e5;
}

.delivery-item.drop-after {
    box-shadow: 0 3px 0 0 #1e88e5, inset 0 -3px 0 0 #1e88e5;
}

.schedule-cell.drag-over-cell,
.delivery-items-container.drag-over-cell {
    background: #e3f2fd;
}

.delivery-item .time {
    font-weight: bold;
    color: var(--secondary-color);
}

.delivery-item .location {
    color: var(--text-primary);
}

.delivery-item .duration {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.schedule-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.schedule-view-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.schedule-tab-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
    bottom: -2px;
}

.schedule-tab-btn:hover {
    color: var(--primary-color);
    background: var(--light-bg);
}

.schedule-tab-btn.active {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-aqua);
    font-weight: 600;
}

/* Map */
.map-container {
    height: 500px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.map-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.map-controls select {
    flex: 1 1 12rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.route-details {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1rem;
}

.route-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-item {
    background: var(--brand-aqua-soft);
    padding: 1rem;
    border-radius: var(--radius-sm);
    text-align: center;
}

.summary-item .label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.summary-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-navy);
}

/* Settings */
.settings-container {
    max-width: 600px;
}

.setting-group {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.setting-group h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.setting-group label {
    display: block;
    margin-bottom: 1rem;
}

.setting-group input,
.setting-group select {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-top: 0.3rem;
    width: 100%;
    max-width: 300px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 26, 64, 0.55);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--surface);
    padding: 2rem;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 26, 64, 0.35);
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

/* × stays in the window's top right corner while its content scrolls (sticky inside the
   scrolling .modal-content), so a long customer form closes without scrolling back up */
.close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 5;
    width: 2.4rem;
    height: 2.4rem;
    margin: -1rem -1rem 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(16, 26, 64, 0.18);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary);
}

.close:hover {
    color: var(--danger-color);
}

.modal-content h2 {
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

.modal-content form label {
    display: block;
    margin-bottom: 1rem;
}

.modal-content form input,
.modal-content form select,
.modal-content form textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-top: 0.3rem;
}

/* ...but a checkbox stays a box next to its text (at 100% it fell onto a line of its own, e.g. the
   visit days Maanantai ... Perjantai) */
.modal-content form input[type="checkbox"],
.modal-content form input[type="radio"] {
    width: auto;
    flex: none;
    padding: 0;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

.modal-content form .checkbox-group label {
    margin: 0;
}

/* Lisätoimitus types: ticks side by side, as many as needed */
.modal-content form .manual-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0 0 1rem;
    padding: 0.5rem 0.7rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.modal-content form .manual-types legend {
    padding: 0 0.3rem;
    font-size: 0.9rem;
}

.modal-content form .manual-types label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

/* A supply row: the product's name takes the room, Määrä / Tarkistus and the count only what they need
   (with every select at 100% the name was squeezed out of sight) */
.modal-content form .hygiene-item {
    flex-wrap: wrap;
}

.modal-content form .hygiene-item .hygiene-product {
    flex: 1 1 14rem;
    min-width: 10rem;
    width: auto;
}

.modal-content form .hygiene-item .hygiene-mode {
    flex: 0 0 auto;
    width: auto;
}

/* Pyyherullat: Toimitus / Tarkistus, sacks, interval on one row; the last date; the instructions */
.towel-entry {
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.towel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.modal-content form .towel-row select {
    flex: 1 1 8rem;
    width: auto;
}

.modal-content form .towel-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    white-space: nowrap;
}

.modal-content form .towel-quantity {
    width: 4.5rem;
    text-align: center;
}

.modal-content form .towel-last-changed {
    width: auto;
}

.towel-remove {
    flex: 0 0 auto;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 4px;
    background: #e74c3c;
    color: white;
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.checkbox-group input {
    width: auto;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.modal-actions button {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    header {
        padding: 1rem;
    }

    main {
        padding: 1rem;
    }

    .targets-list,
    .drivers-list {
        grid-template-columns: 1fr;
    }

    .schedule-grid {
        font-size: 0.85rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 100px;
    height: 100px;
    margin-bottom: 1rem;
}

/* Info Box */
.info-box {
    background: var(--brand-aqua-soft);
    border-left: 4px solid var(--brand-aqua);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
}

/* Ohje (help) */
.ohje {
    max-width: 860px;
    line-height: 1.6;
}

.ohje p + p {
    margin-top: 0.75rem;
}

.delivery-items-container.empty-van {
    min-height: 4rem;
    padding: 0.75rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.van-remove {
    margin-top: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

.ohje-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--border-color);
}

.ohje-tab {
    padding: 0.55rem 1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.ohje-tab.active {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-navy);
}

.ohje-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.ohje-toc a {
    padding: 0.35rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
}

.ohje-toc a:hover {
    border-color: var(--secondary-color);
}

.ohje .setting-group {
    scroll-margin-top: 1rem;
}

.ohje-steps {
    padding-left: 1.4rem;
}

.ohje-steps > li + li {
    margin-top: 0.6rem;
}

.ohje-list {
    padding-left: 1.4rem;
    margin-top: 0.4rem;
}

.ohje-list li + li {
    margin-top: 0.3rem;
}

.ohje-steps ul {
    margin-top: 0.3rem;
    padding-left: 1.2rem;
}

.ui-label {
    display: inline-block;
    padding: 0 0.4rem;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.ohje-note {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
}

.ohje-warn {
    background: #fdecea;
    border-left: 4px solid var(--danger-color);
}

.ohje-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.ohje-table th,
.ohje-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.ohje-table th {
    width: 30%;
    color: var(--primary-color);
}

.ohje-faq dt {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.ohje-faq dt:first-child {
    margin-top: 0;
}

.ohje-faq dd {
    margin-left: 0;
}

@media (max-width: 600px) {
    .ohje-table th,
    .ohje-table td {
        display: block;
        width: auto;
        border-bottom: none;
        padding: 0.25rem 0;
    }

    .ohje-table tr {
        display: block;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-color);
    }
}

/* Manual Additions List */
/* The cards themselves are .target-card; these only mark the status */
.manual-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 1rem;
}

.manual-card.completed {
    opacity: 0.7;
    border-left: 4px solid var(--success-color);
}

.manual-card.pending {
    border-left: 4px solid var(--warning-color);
}

.manual-card .actions .btn-secondary {
    background: var(--success-color);
    color: white;
}

/* Lisätoimitus form: the mats / products and their amounts, under the type */
.manual-items {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    margin-bottom: 1rem;
}

.manual-items[hidden] {
    display: none;
}

.manual-items-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.manual-item-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 0.3rem;
}

/* The modal's inputs are full width; on a row they share it */
.modal-content form .manual-item-row select,
.modal-content form .manual-item-row input {
    margin-top: 0;
    width: auto;
}

.modal-content form .manual-item-row select {
    flex: 1 1 10rem;
    min-width: 0;
}

.modal-content form .manual-item-row .mat-design-name {
    flex: 1 1 6rem;
    min-width: 0;
}

.modal-content form .manual-item-row .manual-item-qty {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    min-width: 0;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    text-align: center;
}

.manual-item-row .manual-item-remove {
    background: #e74c3c;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

.manual-add-item {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}

/* Driver Availability Grid */
.availability-grid {
    display: grid;
    grid-template-columns: 200px repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.availability-header {
    background: var(--brand-navy);
    color: white;
    padding: 1rem;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.availability-driver-name {
    background: var(--light-bg);
    padding: 1rem;
    font-weight: bold;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.availability-cell {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--surface);
}

.availability-cell:hover {
    background: var(--light-bg);
}

.availability-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

/* Schedule stops open the target's card on click */
.delivery-item[data-target-id] {
    cursor: pointer;
}

/* Oma reitti (driver phone view) */
.driver-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.driver-toolbar select {
    flex: 1 1 12rem;
    font-size: 1rem;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.driver-toolbar #driver-nav-app {
    flex: 0 1 11rem;
}

.driver-day-nav {
    display: flex;
    gap: 0.4rem;
}

.driver-day-nav button {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.driver-date-navs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* The middle button is wide enough for "Tämä viikko" / "Ma 23.11." so the arrows stay put */
.driver-date-navs .driver-day-nav button:nth-child(2) {
    min-width: 7.5rem;
}

.driver-date-navs .driver-day-nav button.is-now {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: white;
}

.driver-view-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.driver-route-summary {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.driver-stop {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.6rem;
    overflow: hidden;
    max-width: 640px;
}

.driver-stop.missed {
    border-color: var(--danger-color);
    background: #fdecea;
}

.driver-stop .driver-stop-main {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    border: none;
    margin: 0;
    padding: 0.75rem;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
}

.driver-stop-number {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.driver-stop-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* The time and tags on the left, the rullakko plate in the top right corner next to Navigoi */
.driver-stop-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.3rem 0.5rem;
}

/* On a phone a long plate ("Matot R12 · Pyykit R37 & R38") goes under the time and wraps
   instead of running over the card's edge */
.driver-stop-top .cart-badge {
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0;
}

.driver-stop-time {
    font-weight: bold;
    color: var(--secondary-color);
}

.driver-stop-name {
    font-weight: bold;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.driver-stop-address,
.driver-stop-items {
    font-size: 0.9rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.driver-tag {
    display: inline-block;
    color: white;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.driver-stop-nav {
    flex: 0 0 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--brand-aqua);
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    header {
        padding: 0.5rem 1rem 0;
    }

    header h1 {
        font-size: 1.1rem;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .brand-sub {
        font-size: 0.7rem;
    }

    nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    nav::-webkit-scrollbar {
        display: none;
    }

    .nav-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .user-email {
        display: none;
    }

    .modal-content {
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        padding: 1rem;
    }

    .close {
        width: 2.8rem;
        height: 2.8rem;
        margin: -0.25rem -0.25rem 0 0.5rem;
        font-size: 2.2rem;
    }
}

/* Workers (driver and / or laundry accounts) see only their own tabs - Oma reitti, Pesula - and
   Ohje; a driver sees only their own route, and the map is Google Maps / Apple Kartat */
body.limited .nav-btn:not([data-view="ohje"]):not(.nav-allowed),
body.role-driver #driver-view-driver,
body.role-driver #target-info-content .edit-btn,
body.role-driver #target-info-content .return-trip-toggle {
    display: none;
}

body.role-driver .user-info {
    margin-left: 0;
}

body.limited .view:not(#ohje-view):not(.view-allowed) {
    display: none !important;
}

/* Pesula (the laundry's phone): day buttons, then the chosen day's blocks of tickable rows */
.pesula-week-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.pesula-day-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pesula-day-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.6rem 0.3rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}

.pesula-day-chip .chip-day {
    font-weight: 700;
}

.pesula-day-chip .chip-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.pesula-day-chip.today {
    border-color: var(--brand-navy);
}

.pesula-day-chip.active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: white;
}

.pesula-day-chip.active .chip-count {
    color: rgba(255, 255, 255, 0.85);
}

.pesula-day-chip.all-done:not(.active) {
    border-color: #27ae60;
    background: #eafaf1;
}

.pesula-day-chip.all-done .chip-count {
    color: #1e8449;
    font-weight: 700;
}

.pesula-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.pesula-day-head h3 {
    margin: 0;
    font-size: 1.5rem;
}

.pesula-day-mats {
    font-weight: 600;
    font-size: 1.05rem;
}

.pesula-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.6rem 0 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.pesula-progress-bar {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: #dfe4ec;
    overflow: hidden;
}

.pesula-progress-bar span {
    display: block;
    height: 100%;
    background: #27ae60;
    transition: width 0.2s;
}

.pesula-progress-count {
    font-weight: normal;
    font-size: 0.85rem;
}

.pesula-progress.all-done {
    color: #1e8449;
}

.pesula-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.pesula-block {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: 5px solid var(--block-color, var(--brand-navy));
    border-radius: 10px;
    padding: 0.5rem 0.9rem 0.6rem;
}

.pesula-block.tab-eco { --block-color: #111; }
.pesula-block.tab-stanu { --block-color: #9aa0a6; }
.pesula-block.tab-teak { --block-color: #f08a24; }
.pesula-block.tab-logo { --block-color: #8e44ad; }
.pesula-block.tab-laundry { --block-color: #2c6fbb; }

.pesula-block h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.4rem;
    font-size: 1.15rem;
}

.pesula-block h4 .pesula-block-sum {
    margin-left: auto;
    font-size: 1.15rem;
}

.pesula-block.all-done h4 .pesula-block-sum::after {
    content: ' ✓';
    color: #27ae60;
}

/* A tickable row: mat size or laundry customer; ticked = done, greyed and struck through */
.pesula-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.3rem;
    border-top: 1px solid var(--light-bg);
    cursor: pointer;
    font-size: 1.1rem;
}

.pesula-item input {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    accent-color: #27ae60;
    cursor: pointer;
}

.pesula-item .pesula-item-name {
    flex: 1;
}

.pesula-item-count {
    font-size: 1.25rem;
    min-width: 2ch;
    text-align: right;
}

.pesula-item.done {
    background: #eafaf1;
}

/* Ticked, but the count has changed since: to be done again */
.pesula-item.changed {
    background: #fef5e7;
}

.pesula-changed {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b9770e;
}

.pesula-item.done .pesula-item-name,
.pesula-item.done .pesula-item-count {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.pesula-city {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pesula-empty,
.pesula-empty-day {
    color: var(--text-secondary);
}

.pesula-empty-day {
    padding: 2rem;
    text-align: center;
    background: var(--surface);
    border-radius: 10px;
}

@media (max-width: 600px) {
    .pesula-day-chips {
        gap: 0.3rem;
    }

    .pesula-day-chip .chip-count {
        font-size: 0.7rem;
    }
}


/* Login: driver / office choice */
.register-roles {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Kuljettajat: registrations to approve */
.account-requests {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    background: var(--surface-alt);
}

.account-requests h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.account-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid #e3edf7;
    font-size: 0.9rem;
}

.account-request .ar-who {
    flex: 1;
    min-width: 14rem;
    overflow-wrap: anywhere;
}

.account-request .ar-role {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    background: #e3f2fd;
    font-size: 0.8rem;
}

.account-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.account-office {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.account-office summary {
    cursor: pointer;
    color: var(--secondary-color);
}

/* Compact schedule: one line per stop */
.day-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 0.75rem;
    align-items: start;
}

.day-route {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--secondary-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.6rem 0.75rem;
}

.day-route h3 {
    margin: 0 0 0.3rem 0;
    font-size: 1.05rem;
}

.day-route-count {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--text-secondary);
}

.delivery-item.stop-row {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr) auto 1.1rem 1.1rem;
    grid-template-areas: "time name drive move remove" "time city drive move remove";
    column-gap: 0.4rem;
    align-items: baseline;
    padding: 0.15rem 0.4rem;
    margin-bottom: 2px;
    font-size: 0.8rem;
    line-height: 1.3;
    border-width: 0 0 0 3px;
    border-radius: 2px;
    background: var(--surface-alt);
}

.delivery-item.stop-row:hover {
    background: var(--brand-aqua-soft);
}

/* A van in the day view: one tight line per stop - time, the full name (wraps when long), the town
   after it (shortened if the line runs out), drive time, buttons */
.day-route .delivery-item.stop-row {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.22rem 0.45rem;
    margin-bottom: 2px;
    line-height: 1.35;
}

.day-route .stop-row .sr-time {
    flex: none;
    width: 2.5rem;
}

.day-route .stop-row .sr-name {
    flex: 0 1 auto;
    min-width: 0;
}

.day-route .stop-row .sr-city {
    flex: 1 1 0;
    min-width: 1.5rem;
    font-size: 0.72rem;
}

.day-route .stop-row .sr-drive,
.day-route .stop-row .sr-move,
.day-route .stop-row .sr-remove {
    flex: none;
}

.stop-row .sr-time {
    grid-area: time;
    font-weight: 600;
    color: var(--secondary-color);
}

/* The whole name always shows: it wraps onto a second line rather than being cut off */
.stop-row .sr-name {
    grid-area: name;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.stop-row .sr-city {
    grid-area: city;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stop-row .sr-drive {
    grid-area: drive;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.sr-badge {
    display: inline-block;
    color: white;
    padding: 0 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.route-line {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.1rem 0.2rem;
}

.route-total {
    margin-top: 0.2rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--light-bg);
    color: var(--text-primary);
}

/* Mats of the whole day: top right of the day's header in the week grid, above the vans in a day */
.schedule-header.day-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
}

.day-totals {
    font-weight: 600;
    font-size: 0.8rem;
}

.day-totals summary {
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.day-totals summary::-webkit-details-marker {
    display: none;
}

.day-head .day-totals-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 600px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.day-head.opens-left .day-totals-list {
    left: auto;
    right: 0;
}

.day-totals-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.day-totals-tab {
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--light-bg);
    color: var(--text-secondary);
    padding: 0.3rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: -2px;
}

.day-totals-tab.active {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--tab-color, var(--brand-navy));
    border-top-width: 3px;
    border-bottom: 2px solid white;
}

.day-totals-tab.tab-eco { --tab-color: #111; }
.day-totals-tab.tab-stanu { --tab-color: #9aa0a6; }
.day-totals-tab.tab-teak { --tab-color: #f08a24; }
.day-totals-tab.tab-logo { --tab-color: #8e44ad; }

.day-totals-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mat-line-icon {
    flex: none;
    border-radius: 3px;
}

/* Logomatot: a rainbow top edge instead of one colour */
.day-totals-tab.tab-logo.active {
    border-top-color: transparent;
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #e74c3c, #f1c40f, #2ecc71, #3498db, #8e44ad) border-box;
}

.day-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid var(--light-bg);
    font-size: 0.95rem;
}

.day-totals-who {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.day-totals-row strong {
    font-size: 1.05rem;
}

.day-totals-list {
    margin-top: 0.3rem;
    padding: 0.6rem;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: normal;
    text-align: left;
}

.day-totals-title {
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.day-totals-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.day-totals-bar .day-totals summary {
    background: var(--brand-navy);
    color: white;
}

/* Mats per driver per day */
.mat-count {
    font-size: 0.85rem;
    margin: 0.1rem 0 0.2rem;
}

.mat-count summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.1rem 0.2rem;
}

.mat-count-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.75rem;
    padding: 0.3rem 0.4rem;
    margin-top: 0.2rem;
    background: var(--light-bg);
    border-radius: 4px;
    font-size: 0.78rem;
}

.mat-count.over summary {
    color: white;
    background: var(--danger-color);
    border-radius: 3px;
}

/* Signed-in user, right side of the header */
.app-hidden {
    display: none !important;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.user-email {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}

.logout-btn {
    padding: 0.4rem 0.85rem;
    background: rgba(255,255,255,0.12);
    color: white;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.22);
}

/* Login screen */
.login-modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(79,195,220,0.55) 0%, rgba(79,195,220,0) 55%),
        linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 10000;
}

.login-container {
    background: var(--surface);
    padding: 2.25rem 2rem 1.75rem;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(8, 14, 40, 0.4);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-loading {
    display: none;
}

/* Before Firebase knows whether someone is signed in: just the logo on the brand background */
.login-modal.auth-checking .login-container {
    background: transparent;
    box-shadow: none;
}

.login-modal.auth-checking .login-container > :not(.login-logo):not(.login-loading) {
    display: none !important;
}

.login-modal.auth-checking .login-loading {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Loading screen (#splash in index.html, so it paints and moves before the scripts have
   loaded): the logo floats and a mat rolls out under it, the roll running ahead and getting
   thinner, over and over */
#splash {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(79,195,220,0.55) 0%, rgba(79,195,220,0) 55%),
        linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
}

.splash-logo {
    position: relative;
    width: 96px;
    height: 96px;
    animation: splash-logo-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both,
        splash-logo-float 2.6s ease-in-out 0.6s infinite;
}

/* A logo with its water moving: img/logo.png and the SVG water over it (splash and login) */
.water-logo {
    position: relative;
}

.water-logo > img,
.water-logo > .splash-water {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The logo's water rolls: the wave runs to the left (one wavelength, 270 in the logo's units, so
   it loops seamlessly) and bobs; a lighter wave behind runs slower */
.splash-wave-front {
    animation: splash-wave-run 3.2s linear infinite;
}

.splash-wave-bob {
    animation: splash-wave-bob 2.2s ease-in-out infinite;
}

.splash-wave-back {
    animation: splash-wave-run-back 5s linear infinite;
}

.splash-drops circle {
    opacity: 0;
}

/* When the app opens the water splashes up and drops fly off it, then the logo zooms away */
#splash.leaving .splash-wave-surge {
    animation: splash-surge 0.5s cubic-bezier(0.3, 0, 0.3, 1) both;
}

#splash.leaving .splash-drops circle {
    animation: splash-drop 0.55s cubic-bezier(0.2, 0.6, 0.4, 1) both;
}

#splash.leaving .splash-drops circle:nth-child(1) { --dx: -38px; --dy: -95px; animation-delay: 0.08s; }
#splash.leaving .splash-drops circle:nth-child(2) { --dx: -12px; --dy: -130px; animation-delay: 0.04s; }
#splash.leaving .splash-drops circle:nth-child(3) { --dx: 16px; --dy: -115px; animation-delay: 0.1s; }
#splash.leaving .splash-drops circle:nth-child(4) { --dx: 42px; --dy: -85px; animation-delay: 0.06s; }

/* A doormat lying on the floor, seen from the front at an angle */
.splash-mat {
    width: 240px;
    height: 150px;
    margin: 0.5rem 0 0.25rem;
    perspective: 520px;
}

.splash-mat-floor {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(52deg);
    /* The roll's end stands up out of the floor, facing the viewer */
    transform-style: preserve-3d;
}

.splash-mat-cloth {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    /* Dark rubber edge, ribbed pile in the middle */
    border: 11px solid #173a4c;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 3px, rgba(0, 0, 0, 0.08) 3px 7px),
        linear-gradient(180deg, #3497b4 0%, #23738d 100%);
    box-shadow: 0 18px 22px rgba(0, 0, 0, 0.35);
    animation: splash-unroll 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.splash-mat-logo {
    width: 74px;
    height: 74px;
    opacity: 0.95;
}

/* The rest of the mat still rolled up, rolling to the right and getting thinner: a cylinder
   lying across the mat (its outside is the rubber backing) and, at the front edge, its end
   facing the viewer, the layers of backing and pile in a spiral that turns as it rolls */
.splash-mat-roll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -17px;
    width: 34px;
    transform-style: preserve-3d;
    animation: splash-roll 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.splash-mat-roll-body {
    position: absolute;
    inset: -4px 0 0;
    border-radius: 17px 17px 0 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
        linear-gradient(90deg, #0a1f2b 0%, #1b4558 28%, #4f8ea3 50%, #1b4558 72%, #0a1f2b 100%);
    box-shadow: 8px 0 12px rgba(0, 0, 0, 0.35);
    animation: splash-roll-thin 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.splash-mat-roll-end {
    position: absolute;
    left: 0;
    bottom: -17px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0a1f2b 0 13%, transparent 14%),
        conic-gradient(from 0deg, transparent 0 300deg, rgba(0, 0, 0, 0.4) 300deg 360deg),
        repeating-radial-gradient(circle, #173a4c 0 1.5px, #3aa0bd 1.5px 4px);
    box-shadow: inset 0 0 0 2px #0f2d3c, 0 6px 10px rgba(0, 0, 0, 0.35);
    animation: splash-roll-end 2.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.splash-text {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Done: the logo zooms out of the way and the screen fades onto the app */
.login-modal.leaving {
    animation: splash-out 0.6s ease-in 0.12s both;
    pointer-events: none;
}

/* After the logo's splash (above): the logo zooms away and the screen fades */
#splash.leaving {
    animation: splash-out 0.55s ease-in 0.45s both;
    pointer-events: none;
}

#splash.leaving .splash-logo {
    animation: splash-logo-out 0.5s cubic-bezier(0.6, 0, 0.4, 1) 0.32s both;
}

#splash.leaving .splash-mat,
#splash.leaving .splash-text {
    animation: splash-out 0.25s ease-in both;
}

/* ...and the app slides in: the header from above, then the open tab and its first cards */
body.app-entering .container > header {
    animation: app-enter-down 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}

body.app-entering .view.active {
    animation: app-enter-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

body.app-entering .view.active .target-card:nth-child(-n+9) {
    animation: app-enter-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.app-entering .view.active .target-card:nth-child(1) { animation-delay: 0.38s; }
body.app-entering .view.active .target-card:nth-child(2) { animation-delay: 0.43s; }
body.app-entering .view.active .target-card:nth-child(3) { animation-delay: 0.48s; }
body.app-entering .view.active .target-card:nth-child(4) { animation-delay: 0.53s; }
body.app-entering .view.active .target-card:nth-child(5) { animation-delay: 0.58s; }
body.app-entering .view.active .target-card:nth-child(6) { animation-delay: 0.63s; }
body.app-entering .view.active .target-card:nth-child(7) { animation-delay: 0.68s; }
body.app-entering .view.active .target-card:nth-child(8) { animation-delay: 0.73s; }
body.app-entering .view.active .target-card:nth-child(9) { animation-delay: 0.78s; }

@keyframes splash-logo-in {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes splash-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes splash-unroll {
    0% { clip-path: inset(0 100% 0 0); opacity: 1; }
    50% { clip-path: inset(0 0 0 0); opacity: 1; }
    85% { clip-path: inset(0 0 0 0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* No opacity on the roll itself: it would flatten its 3D end into the floor; its parts fade */
@keyframes splash-roll {
    0% { transform: translateX(0); }
    50%, 100% { transform: translateX(240px); }
}

@keyframes splash-roll-thin {
    0% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(0.4); opacity: 1; }
    58%, 100% { transform: scaleX(0.4); opacity: 0; }
}

/* Turned up to face the viewer (against the floor's 52deg), spinning as it rolls right */
@keyframes splash-roll-end {
    0% { transform: rotateX(-52deg) rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotateX(-52deg) rotate(540deg) scale(0.4); opacity: 1; }
    58%, 100% { transform: rotateX(-52deg) rotate(540deg) scale(0.4); opacity: 0; }
}

@keyframes splash-logo-out {
    to { opacity: 0; transform: scale(1.7); filter: blur(2px); }
}

@keyframes splash-wave-run {
    from { transform: translateX(0); }
    to { transform: translateX(-270px); }
}

@keyframes splash-wave-run-back {
    from { transform: translate(-135px, -7px); }
    to { transform: translate(-405px, -7px); }
}

@keyframes splash-wave-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes splash-surge {
    0% { transform: translateY(0); }
    40% { transform: translateY(-34px); }
    100% { transform: translateY(-10px); }
}

@keyframes splash-drop {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    15% { opacity: 1; }
    60% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * 0.6)) scale(0.7); }
}

@keyframes splash-out {
    to { opacity: 0; }
}

@keyframes app-enter-down {
    from { opacity: 0; transform: translateY(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-enter-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .splash-logo,
    .splash-mat-cloth,
    .splash-mat-roll,
    .splash-mat-roll-body,
    .splash-mat-roll-end,
    .splash-wave-front,
    .splash-wave-bob,
    .splash-wave-back,
    #splash.leaving .splash-wave-surge,
    #splash.leaving .splash-drops circle,
    #splash.leaving .splash-logo,
    body.app-entering .container > header,
    body.app-entering .view.active,
    body.app-entering .view.active .target-card {
        animation: none;
    }

    #splash.leaving,
    .login-modal.leaving {
        animation-duration: 0.2s;
        animation-delay: 0s;
    }
}

.login-logo {
    width: 112px;
    height: 112px;
    display: block;
    margin: 0 auto 0.5rem;
}

.login-tagline {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.login-container h2 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.login-container form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.login-container input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
}

.login-container .btn-primary {
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.login-container .error-message {
    color: var(--danger-color);
    font-size: 0.875rem;
    min-height: 1.25rem;
    margin-top: 0.5rem;
}

.login-container .login-switch {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Two-step sign-in (office accounts): the set-up panel can be taller than a phone screen */
.login-modal {
    overflow-y: auto;
}

.login-modal .login-container {
    margin: auto;
}

.login-container .mfa-text {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: left;
}

.login-container .mfa-small {
    font-size: 0.82rem;
}

.mfa-qr {
    display: flex;
    justify-content: center;
    margin: 0 auto 0.85rem;
    padding: 10px;
    width: max-content;
    background: #fff;
    border-radius: 8px;
}

.mfa-secret {
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
    user-select: all;
}

#mfa-code, #mfa-enroll-code {
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 0.3em;
}

input[type="week"] {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* Oma reitti: Reitti / Pakkausnäkymä switch */
.driver-mode-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 0.75rem;
    max-width: 640px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.driver-mode-btn {
    flex: 1;
    min-height: 2.6rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.driver-mode-btn.active {
    background: var(--brand-navy);
    color: white;
}

/* Pakkausnäkymä */
.pack-totals {
    max-width: 640px;
    background: var(--brand-aqua-soft);
    border: 1px solid #bfe7f0;
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.6rem;
}

.pack-totals summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-navy);
}

.pack-total-group {
    margin-top: 0.5rem;
}

.pack-total-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.pack-total-items,
.pack-stop-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.pack-chip {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.9rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pack-chip strong {
    color: var(--brand-navy);
}

.pack-chip.backlog {
    background: #fff3cd;
    border-color: #f3c76b;
}

/* Toimittamatta (missed deliveries) and "Ei toimitettu" photos */
.missed-list {
    display: grid;
    gap: 0.75rem;
    max-width: 860px;
}

.missed-entry {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--success-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 1rem;
}

.missed-entry.open {
    border-left-color: var(--danger-color);
}

.missed-entry > * + * {
    margin-top: 0.35rem;
}

.me-head {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.me-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success-color);
}

.missed-entry.open .me-status {
    color: var(--danger-color);
}

.missed-entry.skipped {
    border-left-color: var(--text-secondary);
}

.missed-entry.skipped .me-status {
    color: var(--text-secondary);
}

.me-redeliver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.me-redeliver-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
}

.me-redeliver .me-choice {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

.me-redeliver .me-choice.active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: white;
}

.me-day {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
}

.me-day[hidden] {
    display: none;
}

.missed-items {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
}

.mi-title {
    font-weight: 600;
}

.mi-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.missed-items .mi-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.2rem 0;
    font-weight: 400;
}

.missed-items .mi-row input {
    margin: 0;
}

.mi-row .mi-qty {
    width: 4.2rem;
    padding: 0.3rem;
}

.mi-row .mi-check {
    width: 1.2rem;
    height: 1.2rem;
}

.me-customer span[onclick] {
    font-weight: 600;
    color: var(--secondary-color);
    text-decoration: underline;
    cursor: pointer;
}

.me-address,
.me-meta {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.me-address {
    margin-left: 0.4rem;
}

.me-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.missed-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.missed-photos:empty {
    display: none;
}

img.missed-photo {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--light-bg);
    cursor: zoom-in;
}

.missed-photo-gone {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.missed-photo-pick {
    display: inline-block;
    cursor: pointer;
}

.missed-photo-pick.busy {
    opacity: 0.6;
    pointer-events: none;
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 15, 35, 0.85);
    cursor: zoom-out;
}

.photo-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-sm);
}

.pack-order-hint {
    max-width: 640px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.pack-flip {
    flex: none;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pack-stop {
    max-width: 640px;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.pack-stop.packed {
    opacity: 0.5;
    background: var(--success-bg);
}

.pack-check {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--success-color);
}

.pack-stop .driver-stop-number {
    flex: 0 0 1.7rem;
    height: 1.7rem;
    font-size: 0.85rem;
}

.pack-stop-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.pack-stop-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pack-stop-city {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pack-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pack-chip-note {
    background: #fff3cd;
    border-color: #f3c76b;
    font-weight: 600;
}

/* Saatavuus day headers: full names on wide screens, "Ma/Ti/…" on phones */
.day-short {
    display: none;
}

/* Joukkomuokkaus scrolls sideways inside its box instead of squeezing the columns */
#bulk-editor-table table {
    min-width: 760px;
}

/* Phone layout fixes */
@media (max-width: 768px) {
    /* header button groups wrap instead of squeezing */
    .section-header > div {
        flex-wrap: wrap;
        width: 100%;
    }

    .section-header > div > button {
        flex: 1 1 auto;
        white-space: nowrap;
    }

    /* day tabs scroll sideways on their own row */
    .schedule-view-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 0;
    }

    .schedule-view-tabs::-webkit-scrollbar {
        display: none;
    }

    .schedule-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.6rem 0.85rem;
        bottom: 0;
    }

    /* stop rows: name on its own line, place + drive below it */
    .day-route .delivery-item.stop-row {
        display: grid;
        grid-template-columns: 2.9rem minmax(0, 1fr) auto 1.2rem 1.2rem;
        grid-template-areas: "time name name move remove" "time city drive move remove";
    }

    /* Saatavuus: driver name + five narrow day columns */
    .availability-grid {
        grid-template-columns: minmax(0, 1fr) repeat(5, 2.6rem);
    }

    .availability-header,
    .availability-driver-name,
    .availability-cell {
        padding: 0.6rem 0.3rem;
    }

    .availability-driver-name {
        padding-left: 0.6rem;
        overflow-wrap: anywhere;
    }

    .day-long {
        display: none;
    }

    .day-short {
        display: inline;
    }

    /* customer form: frequency dropdown gets its own row */
    .mat-group-meta {
        flex-wrap: wrap;
    }

    .mat-group-meta .mat-group-frequency {
        flex: 1 1 100% !important;
    }
}

.icon-img {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    object-fit: contain;
}

/* An emoji used as an icon (laundry: 👕), the same size as the image icons */
.icon-emoji {
    font-size: 1.05em;
    line-height: 1;
    vertical-align: -0.1em;
}

/* JPG icon with a white background: blend the white away on light backgrounds */
.icon-img.on-white {
    mix-blend-mode: multiply;
}

/* Remove a stop from a list in the schedule */
.stop-row .sr-remove {
    grid-area: remove;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    align-self: center;
}

.stop-row .sr-remove:hover {
    color: #e74c3c;
}

.stop-row .sr-move {
    grid-area: move;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    align-self: center;
}

.stop-row .sr-move:hover {
    color: #1e88e5;
}

/* "Poistetut listalta" under the day's vans */
.removed-stops {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--border-color, #ccc);
    border-radius: 6px;
    background: #fffaf2;
}

.removed-stops h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.9rem;
}

.removed-stop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    border-top: 1px solid #f0e6d6;
}

.removed-stop .rs-name {
    font-weight: 600;
}

.removed-stop .rs-meta {
    color: var(--text-secondary);
    flex: 1;
}

.removed-stop .rs-move {
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}

.removed-stop .rs-restore {
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}

.route-maps-links {
    font-size: 0.8rem;
    margin: 0.3rem 0;
}

/* Oma reitti: the day's route opened in Google Maps (in parts of up to 9 stops) */
.driver-route-open {
    max-width: 640px;
    margin: 0.5rem 0 0.75rem;
}

.driver-route-open-title {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.driver-route-open-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.driver-route-open-links a {
    flex: 1 1 7rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Driver picker and the move-list button on each van in the schedule */
.van-tools {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0 0 0.4rem 0;
}

.van-tools .van-move {
    flex: none;
    margin-left: auto;
    padding: 0.2rem 0.45rem;
    font-size: 0.8rem;
}

/* 🕘 Muutoshistoria */
.change-log-content {
    max-width: 860px;
}

.cl-entry {
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 0;
}

.cl-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.cl-change {
    margin: 0.3rem 0 0 0.8rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.cl-field {
    font-weight: 600;
}

.cl-before {
    color: #c0392b;
}

.cl-after {
    color: #1e8449;
}

.cl-line {
    display: block;
    margin-left: 0.8rem;
}

/* 📋 Viikon kohteet: a week's stops for checking against Outlook */
.week-list-content {
    max-width: 760px;
}

.week-list-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.week-list-controls input[type="text"] {
    flex: 1;
    min-width: 8rem;
}

.week-list-summary {
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.wl-day {
    margin: 1rem 0 0.3rem 0;
    font-size: 1rem;
    color: var(--primary-color);
}

.wl-van {
    margin: 0.5rem 0 0.2rem 0;
    font-size: 0.85rem;
}

.week-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.week-list-table td {
    padding: 0.2rem 0.4rem 0.2rem 0;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.week-list-table .wl-where {
    white-space: nowrap;
    color: var(--text-secondary);
}

.week-list-table .wl-place {
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .week-list-table .wl-place {
        display: none;
    }
}

.van-driver-select {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
}

/* A van's day over the day-length limit (Optimoi doesn't cap it; the office decides) */
.route-total.too-long {
    color: white;
    background: var(--danger-color);
    border-radius: 3px;
    padding: 0 0.3rem;
}

/* ---- eVaihtomatto: Asiakaspyynnöt and the customer logins in Muokkaa kohdetta ---- */
.nav-badge {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 0.35em;
    margin-left: 0.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35em;
    text-align: center;
}

.nav-badge.unread {
    background: #e53935;
    color: white;
    box-shadow: 0 0 0 2px var(--brand-navy);
}

.requests-list {
    display: grid;
    gap: 0.75rem;
    max-width: 860px;
}

.request-entry {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--warning-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.request-entry.status-approved,
.request-entry.status-done {
    border-left-color: var(--success-color);
}

.request-entry.status-rejected {
    border-left-color: var(--text-secondary);
}

.request-entry.unread {
    box-shadow: 0 0 0 2px var(--brand-aqua), var(--shadow-sm);
}

.request-entry > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.8rem 1rem;
}

.request-entry > summary::-webkit-details-marker {
    display: none;
}

.re-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.re-type {
    color: var(--secondary-color);
    font-weight: 600;
}

.re-status {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--light-bg);
}

/* A complaint not dealt with yet stands out: red; dealt with, green */
.request-entry.type-complaint.status-open {
    border-left-color: var(--danger-color);
}

.request-entry.type-complaint.status-open .re-status {
    background: var(--danger-color);
    color: white;
}

.request-entry.type-complaint.status-done .re-status {
    background: #d5f5e3;
    color: #13653a;
}

.re-delete {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 0.6rem;
}

.re-summary {
    margin-top: 0.2rem;
}

.re-meta,
.re-who,
.portal-muted {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.re-body {
    padding: 0 1rem 1rem;
    display: grid;
    gap: 0.75rem;
}

.re-open {
    justify-self: start;
}

.request-photo {
    max-width: 260px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.re-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.re-msg {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
}

.re-msg.from-customer {
    align-self: flex-start;
    background: var(--light-bg);
}

.re-msg.from-office {
    align-self: flex-end;
    background: var(--brand-aqua-soft);
}

.re-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.request-reply {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.request-reply textarea {
    flex: 1;
}

.re-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.target-portal-section {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--brand-aqua-soft);
    border-radius: 6px;
}

.target-portal-section h4 {
    margin: 0 0 0.35rem 0;
}

.portal-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.portal-add {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.portal-add input {
    flex: 1;
    min-width: 0;
}

/* ---- Kuittaukset on Oma reitti ---- */
.departure-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 640px;
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: var(--radius);
    background: var(--brand-navy);
    color: white;
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.departure-bar.done {
    background: var(--success-bg);
    color: #13653a;
    font-size: 0.95rem;
    cursor: default;
}

.driver-stop.has-check,
.driver-stop:has(.roll-count) {
    flex-direction: column;
}

/* Rullia jäljellä: under a stop where the towel rolls are checked */
.roll-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-alt);
    font-size: 0.95rem;
}

.roll-count label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.roll-count-input {
    width: 4.5rem;
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font: inherit;
    text-align: center;
}

/* The row fills the card, so Navigoi stays at the right edge however short the stop's text is */
.driver-stop-row {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.driver-stop.has-check .driver-stop-row {
    flex: 1;
}

.driver-stop-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-top: 1px solid var(--border-color);
    background: var(--brand-navy);
    color: white;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}

button.driver-stop-check:active {
    background: var(--brand-navy-dark);
}

.driver-stop-check.done {
    background: var(--success-color);
    color: white;
    cursor: default;
}

.driver-stop.checked .driver-stop-main {
    opacity: 0.7;
}

.checkin-undo {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid currentColor;
    color: inherit;
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.6rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.stop-time-done {
    color: var(--success-color);
    font-weight: 700;
}

.stop-time-live {
    color: var(--secondary-color);
    font-weight: 700;
}

.stop-time-skipped {
    color: var(--warning-color);
    font-weight: 700;
}

/* Passed without a check-in: the whole card light orange, to be seen at a glance */
.driver-stop.skipped .driver-stop-main {
    background: rgba(232, 144, 12, 0.18);
}

/* Pesula after the last stop */
.pesula-stop .driver-stop-main {
    background: var(--brand-aqua-soft);
}

.pesula-number {
    background: var(--surface);
}

.pesula-number .icon-img {
    width: 1.4em;
    height: 1.4em;
}

/* Pakkausnäkymä: the roll container on a small white tile, so it shows on the blue active tab too */
.driver-mode-btn .icon-img {
    width: 1.6em;
    height: 1.6em;
    vertical-align: -0.45em;
    padding: 1px;
    background: var(--surface);
    border-radius: 4px;
    mix-blend-mode: normal;
}

/* Pakkausnäkymä: mats with their line's icon, the totals per line */
.pack-chip-mat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pack-chip-mat .mat-line-icon {
    width: 22px;
    height: 15px;
}

.pack-total-mats .pack-total-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pack-total-sum {
    margin-left: auto;
    font-weight: 700;
    color: var(--brand-navy);
}

/* Keys on Pakkausnäkymä, in the orange of the key tag on Reitti */
.pack-chip-key {
    background: #f39c12;
    border-color: #f39c12;
    color: white;
    font-weight: 700;
}

/* Pakkausnäkymä: a stop's mats on a row per line, the line named in front */
.pack-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.pack-line-name {
    flex: 0 0 6.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--brand-navy);
}

.pack-line-name .mat-line-icon {
    width: 22px;
    height: 15px;
}

.pack-line-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

/* "Rullakolla": the customer's things are taken in on a rullakko */
.pack-chip-cart-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #d7f1ee;
    border-color: #3aa39a;
    color: #0f4f4a;
    font-weight: 700;
}

/* The key and "Rullakolla" next to the customer's name */
.pack-stop-name .pack-chip-key,
.pack-stop-name .pack-chip-cart-delivery {
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.85rem;
    vertical-align: 0.05em;
}

/* "Rullakolla" among the stop's tags on Oma reitti, the size of the other tags */
.driver-stop-time .pack-chip-cart-delivery {
    gap: 0.2rem;
    margin-left: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    vertical-align: middle;
}

/* Yhteensä and Avaimet side by side above the stops; the keys under it on a narrow phone */
.pack-boxes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 640px;
    margin-bottom: 0.6rem;
}

.pack-boxes .pack-totals {
    flex: 1 1 18rem;
    margin-bottom: 0;
}

.pack-keys {
    flex: 0 1 14rem;
    background: #fff4e0;
    border: 1px solid #f3c76b;
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
}

.pack-keys summary {
    cursor: pointer;
    font-weight: 700;
    color: #9a5b00;
}

.pack-keys .pack-total-items {
    margin-top: 0.5rem;
}

/* A mat's size stands out in its box */
.pack-size {
    font-weight: 800;
    font-size: 1.05em;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

/* Oma reitti: a stop's card for the driver */
.driver-card h3 {
    margin: 0 2rem 0.2rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.driver-card-address {
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
}

.driver-card h4 {
    margin: 1rem 0 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.driver-card-note {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

/* Oma reitti: a stop's items as on Pakkausnäkymä */
.driver-stop-items .pack-stop-items {
    margin-top: 0.35rem;
}

.driver-stop-note {
    margin-top: 0.25rem;
}


/* Item rows on a phone: the boxes go under the line's name when they don't fit beside it,
   and a box never breaks inside a size (85X150 read one character per line) */
.pack-line {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.pack-line-items {
    flex: 1 1 11rem;
}

.pack-line .pack-chip {
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 600px) {
    /* Oma reitti on a phone: Navigoi as a bar under the stop, so its items get the whole width */
    .driver-stop-row,
    .driver-stop:not(.has-check) {
        flex-wrap: wrap;
    }

    .driver-stop .driver-stop-main {
        flex: 1 1 100%;
    }

    .driver-stop-nav {
        flex: 1 1 100%;
        flex-direction: row;
        gap: 0.4rem;
        padding: 0.6rem;
    }

    .driver-stop-items .pack-chip {
        font-size: 0.85rem;
        padding: 0.1rem 0.5rem;
    }

    /* the boxes under the line's name */
    .driver-stop-items .pack-line-items {
        flex-basis: 100%;
    }
}

/* Pesula: Kesken - how many of a size are still to wash */
.pesula-item.in-progress {
    background: #fff4e0;
}

.pesula-left-count {
    color: #b9770e;
}

.pesula-left-count small {
    font-size: 0.75em;
    color: var(--text-secondary);
}

.pesula-to-wash {
    margin-top: 0.2rem;
    color: #b9770e;
    font-weight: 600;
}

/* Pesula: Vielä pestävänä */
.pesula-shift-open {
    width: 100%;
    margin: 0.2rem 0 0.8rem;
    padding: 0.7rem 1rem;
    border: 2px solid #f0b35a;
    border-radius: var(--radius);
    background: #fff4e0;
    color: #8a5300;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pesula-shift {
    margin: 0.2rem 0 0.8rem;
    padding: 0.8rem 1rem;
    border: 2px solid #f0b35a;
    border-radius: var(--radius);
    background: #fffaf2;
}

.pesula-shift h4 {
    margin: 0 0 0.2rem;
}

.pesula-shift-hint {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pesula-shift-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-top: 1px solid #f3e3c7;
    font-weight: 600;
}

.pesula-shift-name {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pesula-shift-input {
    width: 4.5rem;
    padding: 0.35rem 0.45rem;
    font-size: 1.05rem;
    text-align: right;
}

.pesula-shift-of {
    min-width: 2.6rem;
    color: var(--text-secondary);
}

.pesula-shift-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.pesula-shift-done {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-weight: 600;
    color: #13653a;
    cursor: pointer;
}

.pesula-shift-done input {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: #27ae60;
}

.pesula-shift-row.done .pesula-shift-name {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Pesula: Kaikki pesty under a block's title */
.pesula-block-done {
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid #b7e4c7;
    border-radius: var(--radius-sm);
    background: #eafaf1;
    color: #13653a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pesula-block-done:disabled {
    opacity: 0.6;
}

.pesula-block-done.undo {
    background: var(--surface);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Vielä pestävänä: a mat line's name above its sizes */
.pesula-shift-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding-bottom: 0.2rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.pesula-shift-line + .pesula-shift-row {
    border-top: none;
}

.pesula-shift-row .pesula-shift-name {
    padding-left: 0.3rem;
}

/* Oma reitti, Kaikki kuskit (office): one card per van */
.ov-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    max-width: 1100px;
}

.ov-card {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--secondary-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem 0.9rem;
}

button.ov-card {
    cursor: pointer;
}

button.ov-card:hover {
    box-shadow: var(--shadow-md);
}

.ov-card.all-done {
    border-left-color: var(--success-color);
    background: #f4fbf6;
}

.ov-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.ov-count {
    font-weight: 700;
    color: var(--brand-navy);
    white-space: nowrap;
}

.ov-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--light-bg);
    overflow: hidden;
    margin-bottom: 0.45rem;
}

.ov-bar span {
    display: block;
    height: 100%;
    background: var(--success-color);
}

.ov-line {
    font-size: 0.9rem;
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.ov-line.warn {
    color: #b9770e;
    font-weight: 600;
}

.ov-line.bad {
    color: var(--danger-color);
    font-weight: 600;
}

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

.ov-status {
    font-weight: 700;
}

.ov-status.ok {
    color: var(--success-color);
}

.ov-status.late {
    color: var(--danger-color);
}

/* Kaikki kuskit as columns, one van each, like Viikkoaikataulu; sideways on a phone */
.ov-columns {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: flex-start;
}

.ov-col {
    /* the vans share the width (2 vans = halves, 4 = quarters); sideways only when too narrow */
    flex: 1 1 0;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ov-col .ov-card {
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-left: 5px solid var(--secondary-color);
    border-radius: 0;
    box-shadow: none;
}

.ov-col.all-done .ov-card {
    border-left-color: var(--success-color);
    background: #f4fbf6;
}

.ov-stops {
    padding: 0.2rem 0;
}

.ov-stop {
    display: grid;
    grid-template-columns: minmax(3.6rem, max-content) 1fr;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.88rem;
    border-top: 1px solid var(--light-bg);
}

.ov-stop:first-child {
    border-top: none;
}

.ov-stop-time {
    font-weight: 700;
    white-space: nowrap;
}

.ov-stop-name {
    overflow-wrap: anywhere;
}

.ov-stop.done {
    background: #eef9f1;
}

.ov-stop.done .ov-stop-time {
    color: var(--success-color);
}

.ov-stop.done .ov-stop-name {
    color: var(--text-secondary);
}

.ov-stop.next {
    background: var(--brand-aqua-soft);
    font-weight: 600;
}

.ov-stop.next .ov-stop-time,
.ov-stop.coming .ov-stop-time {
    color: var(--secondary-color);
}

.ov-stop.skipped {
    background: rgba(232, 144, 12, 0.15);
}

.ov-stop.skipped .ov-stop-time {
    color: #b9770e;
}

.ov-stop.missed {
    background: #fdecea;
}

.ov-stop.missed .ov-stop-time {
    color: var(--danger-color);
}

.driver-overview-back {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
}

/* A customer's product kinds (ECO, STANU, Wipperit, Imarit...) apart from each other: a thin line
   between the rows, so it shows which boxes belong to which kind */
.pack-line + .pack-line {
    border-top: 1px solid rgba(36, 57, 140, 0.22);
    padding-top: 0.45rem;
    margin-top: 0.25rem;
}

/* ...and a line between the kind's name and its boxes */
.pack-line-items {
    border-left: 1px solid rgba(36, 57, 140, 0.22);
    padding-left: 0.5rem;
}

/* Rullakko on Pakkausnäkymä: which roll containers the customer's things went into */
.pack-carts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border-color);
}

.pack-carts-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 6.6rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-navy);
}

.pack-carts-title .icon-img {
    width: 1.1rem;
    height: 1.1rem;
}

.pack-carts-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.pack-carts.saving {
    opacity: 0.6;
    pointer-events: none;
}

/* A marked rullakko: the same lilac as on Oma reitti */
.pack-cart-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    height: 2.2rem;
    padding: 0 0.2rem 0 0.6rem;
    border: 1px solid #9271b8;
    border-radius: 6px;
    background: linear-gradient(160deg, #f6eefc 0%, #d3bdeb 35%, #efe3fa 50%, #bb9ddd 70%, #e2d2f3 100%);
    color: #3b2160;
    font-weight: 800;
    font-size: 1rem;
}

.pack-cart-remove {
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    background: transparent;
    color: #3b2160;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

/* Mats' and laundry's rows one under the other, with one line above both */
.pack-carts + .pack-carts {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: none;
}

.pack-cart-input {
    width: 6rem;
    height: 2.2rem;
    padding: 0 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
}

/* V / O / K: where in the van, in front of the number (V1). The picked one is filled in. */
.pack-cart-letters {
    display: inline-flex;
    gap: 0.25rem;
}

.pack-cart-letter {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid var(--brand-navy);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.pack-cart-letter.active {
    background: var(--brand-navy);
    color: white;
}

.pack-cart-add {
    height: 2.2rem;
    padding: 0 0.8rem;
    border: 1px solid var(--brand-navy);
    border-radius: 6px;
    background: var(--brand-navy);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}

/* "Rullakko 3" on Oma reitti: a shiny lilac plate */
.cart-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0.4rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid #9271b8;
    border-radius: 6px;
    background: linear-gradient(160deg, #f6eefc 0%, #d3bdeb 35%, #efe3fa 50%, #bb9ddd 70%, #e2d2f3 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.15);
    color: #3b2160;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cart-badge .icon-img {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 3px;
}

/* Laundry's and wipers' "Viimeksi vaihdettu" row: the date only as wide as it needs (the form's
   100% pushed the minutes box over the window's edge on a phone) */
.modal-content form .item-date-row input[type="date"] {
    width: auto;
    margin-top: 0;
}

/* Pakkausnäkymä's "Rullakot" box next to the keys: what is in which rullakko */
#pack-cart-summary {
    display: contents;
}

.pack-cart-summary {
    flex: 0 1 18rem;
    background: #f6eefc;
    border: 1px solid #c7aee6;
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
}

.pack-cart-summary summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-weight: 700;
    color: #3b2160;
}

.pack-cart-summary summary .icon-img {
    width: 1.1rem;
    height: 1.1rem;
}

.pack-cart-sum-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.45rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.pack-cart-sum-row .pack-cart-chip {
    flex: none;
    height: auto;
    padding: 0.1rem 0.5rem;
}

/* A single mat row's rullakko: right of its chip (2× 150X250 R5 [+]) */
.pack-mat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
}

.pack-mat-carts {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.pack-mat-cart {
    padding: 0.05rem 0.4rem;
    border: 1px solid #9271b8;
    border-radius: 6px;
    background: linear-gradient(160deg, #f6eefc 0%, #d3bdeb 35%, #efe3fa 50%, #bb9ddd 70%, #e2d2f3 100%);
    color: #3b2160;
    font-weight: 800;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pack-mat-cart-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 2.2rem;
    height: 2rem;
    padding: 0 0.3rem;
    border: 1px dashed #9271b8;
    border-radius: 6px;
    background: transparent;
    color: #3b2160;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}

.pack-mat-cart-open .icon-img {
    width: 1.1rem;
    height: 1.1rem;
}

/* A mat row's own rullakko box opens under the row, across the stop */
.pack-stop-items .pack-carts-line {
    width: 100%;
    margin: 0.15rem 0 0.3rem;
    padding: 0.35rem 0.45rem;
    border: 1px dashed #9271b8;
    border-radius: 6px;
}

/* A Lisätoimitus riding inside a customer's stop: easy to see on every card */
.stop-extra {
    margin: 0.35rem 0;
    padding: 0.4rem 0.55rem;
    background: #fff3cd;
    border: 2px solid #f39c12;
    border-radius: 6px;
    color: var(--text-primary, #2c3e50);
}

.stop-extra-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c0700a;
}

.stop-extra-what {
    font-size: 0.95rem;
}

.stop-extra-notes {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* Viikkoaikataulu: the Lisätoimitus on a line of its own under the customer's name */
.stop-row .sr-extra {
    display: block;
    margin-top: 0.1rem;
    padding: 0.05rem 0.35rem;
    background: #fff3cd;
    border-left: 3px solid #f39c12;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    color: #7a4a00;
}

.stop-row .sr-extra-tag {
    font-weight: 700;
    color: #c0700a;
}

.stop-row .sr-extra .icon-img {
    width: 1em;
    height: 0.9em;
}

/* Pakkausnäkymä: the Lisätoimitus chip stands out from the visit's own items */
.pack-extra {
    display: contents;
}

.pack-chip.pack-chip-extra {
    background: #f39c12;
    color: white;
    font-weight: 600;
}

/* A row's name (PYYHERULLAT, WIPPERIT, ...) is never broken inside the word on a phone: the column
   keeps its width for the short names and grows for a long one, the boxes go under it if needed */
.pack-line-name {
    flex: 0 0 auto;
    min-width: 6.6rem;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

/* The Lisätoimitus line takes the stop row's whole width, under the time column */
.stop-row .sr-extras {
    grid-column: 2 / -1;
}

.day-route .stop-row .sr-extras {
    flex: 1 0 100%;
    padding-left: 2.9rem;
}

/* A day-view row with a Lisätoimitus line: time, name, town, drive and buttons stay on the first
   line (a long name wraps inside its own column) and the Lisätoimitus goes under them */
@media (min-width: 769px) {
    .day-route .delivery-item.stop-row:has(.sr-extras) {
        display: grid;
        grid-template-columns: 2.5rem minmax(0, max-content) minmax(1.5rem, 1fr) auto auto auto;
        grid-template-areas: "time name city drive move remove";
        column-gap: 0.4rem;
    }

    .day-route .delivery-item.stop-row:has(.sr-extras) .sr-extras {
        grid-row: 2;
        grid-column: 2 / -1;
        padding-left: 0;
    }
}

/* Yötila: the header's 🌙 / ☀️ button sets data-theme="dark" on <html> (remembered per device).
   The palette is swapped through the variables; light colours hard-coded in the rules above get
   dark versions in the generated block at the end of this file. */
[data-theme="dark"] {
    color-scheme: dark;
    --brand-navy: #4a66d8;
    --brand-navy-dark: #22357f;
    --brand-aqua-soft: #173842;
    --primary-color: #dfe6f7;
    --secondary-color: #4f6fe0;
    --secondary-hover: #6482ea;
    --light-bg: #0c111c;
    --text-primary: #e6ebf4;
    --text-secondary: #a3aec4;
    --border-color: #2f3b55;
    --bg-color: #1a2337;
    --success-bg: #173d2a;
    --surface: #1a2337;
    --surface-alt: #222c43;
    --tint-amber: #3a2f12;
    --tint-red: #43222a;
    --tint-green: #183a29;
    --tint-blue: #172f4d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
}

/* the active tab: dark text on the aqua pill */
[data-theme="dark"] .nav-btn.active {
    color: #0c111c;
}

[data-theme="dark"] .ov-count,
[data-theme="dark"] .ov-stop-time {
    color: var(--primary-color);
}

[data-theme="dark"] header {
    background: #121a33;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #0f1626;
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .delivery-item.stop-row {
    background: var(--surface);
    color: var(--text-primary);
}

[data-theme="dark"] .delivery-item.stop-row:hover {
    background: var(--surface-alt);
}

[data-theme="dark"] .leaflet-container {
    filter: brightness(0.8) contrast(1.1);
}

/* Yötila switch in the header: a pill whose knob slides from the sun (day) to the moon (night) */
.theme-toggle {
    position: relative;
    flex: none;
    width: 3.4rem;
    height: 1.8rem;
    margin-right: 0.5rem;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, #8fd8ee 0%, #4fc3dc 100%);
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.35s ease, border-color 0.35s ease;
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theme-toggle .tt-knob {
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%);
    transition: transform 0.35s cubic-bezier(0.4, 0.1, 0.2, 1.2), background 0.35s ease;
}

.theme-toggle svg {
    position: absolute;
    inset: 0.18rem;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.theme-toggle .tt-sun {
    fill: #f2a91f;
    stroke: #f2a91f;
}

.theme-toggle .tt-moon {
    fill: #fff;
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
}

[data-theme="dark"] .theme-toggle {
    background: linear-gradient(135deg, #1b2457 0%, #2a2f6e 100%);
    border-color: #8c97e8;
}

[data-theme="dark"] .theme-toggle .tt-knob {
    transform: translate(1.6rem, -50%);
    background: #8c97e8;
}

[data-theme="dark"] .theme-toggle .tt-sun {
    opacity: 0;
    transform: rotate(60deg) scale(0.6);
}

[data-theme="dark"] .theme-toggle .tt-moon {
    opacity: 1;
    transform: none;
}

/* Yötila: the Lisätoimitus boxes and lines in dark amber instead of pale yellow */
[data-theme="dark"] .stop-extra {
    background: #33290f;
    border-color: #c98a1e;
    color: #f3e3bb;
}

[data-theme="dark"] .stop-extra-title {
    color: #f2b54e;
}

[data-theme="dark"] .stop-extra-notes {
    color: #d9c89c;
}

[data-theme="dark"] .stop-row .sr-extra {
    background: #33290f;
    color: #f3e3bb;
}

[data-theme="dark"] .stop-row .sr-extra-tag {
    color: #f2b54e;
}

/* Yötila: generated from the light colours hard-coded above (darkgen) */
[data-theme="dark"] .delivery-item.drag-ghost {
    background: var(--surface);
}
[data-theme="dark"] .schedule-cell.drag-over-cell,
[data-theme="dark"] .delivery-items-container.drag-over-cell {
    background: #13375c;
}
[data-theme="dark"] .ohje-warn {
    background: #461f29;
}
[data-theme="dark"] .driver-stop.missed {
    background: #461f29;
}
[data-theme="dark"] .pesula-day-chip.all-done:not(.active) {
    background: var(--surface);
}
[data-theme="dark"] .pesula-day-chip.all-done .chip-count {
    color: #aad0ba;
}
[data-theme="dark"] .pesula-progress-bar {
    background: var(--surface-alt);
}
[data-theme="dark"] .pesula-progress.all-done {
    color: #aad0ba;
}
[data-theme="dark"] .pesula-item.done {
    background: var(--surface);
}
[data-theme="dark"] .pesula-item.changed {
    background: #463929;
}
[data-theme="dark"] .account-request {
    border-color: var(--border-color);
}
[data-theme="dark"] .account-request .ar-role {
    background: #13375c;
}
[data-theme="dark"] .pack-chip.backlog {
    background: #464029;
}
[data-theme="dark"] .pack-chip-note {
    background: #464029;
}
[data-theme="dark"] .removed-stops {
    background: var(--surface);
}
[data-theme="dark"] .removed-stop {
    border-color: var(--border-color);
}
[data-theme="dark"] .cl-before {
    color: #e7b4ae;
}
[data-theme="dark"] .cl-after {
    color: #aad0ba;
}
[data-theme="dark"] .request-entry.type-complaint.status-done .re-status {
    background: #134d3f;
    color: #a5c4b4;
}
[data-theme="dark"] .departure-bar.done {
    color: #a5c4b4;
}
[data-theme="dark"] .pack-keys {
    background: #463b29;
}
[data-theme="dark"] .pack-keys summary {
    color: #d9c19e;
}
[data-theme="dark"] .pesula-item.in-progress {
    background: #463b29;
}
[data-theme="dark"] .pesula-shift-open {
    background: #463b29;
    color: #d3be9e;
}
[data-theme="dark"] .pesula-shift {
    background: var(--surface);
}
[data-theme="dark"] .pesula-shift-done {
    color: #a5c4b4;
}
[data-theme="dark"] .pesula-block-done {
    background: var(--surface);
    color: #a5c4b4;
}
[data-theme="dark"] .ov-card.all-done {
    background: var(--surface);
}
[data-theme="dark"] .ov-col.all-done .ov-card {
    background: var(--surface);
}
[data-theme="dark"] .ov-stop.done {
    background: var(--surface);
}
[data-theme="dark"] .ov-stop.missed {
    background: #461f29;
}
[data-theme="dark"] .pack-cart-chip {
    color: #b5abc3;
}
[data-theme="dark"] .pack-cart-remove {
    color: #b5abc3;
}
[data-theme="dark"] .pack-mat-cart,
[data-theme="dark"] .pack-mat-cart-open {
    color: #b5abc3;
}
[data-theme="dark"] .cart-badge {
    color: #b5abc3;
}
[data-theme="dark"] .pack-cart-summary {
    background: var(--surface-alt);
}
[data-theme="dark"] .pack-cart-summary summary {
    color: #b5abc3;
}
[data-theme="dark"] .stop-extra {
    background: #464029;
}
[data-theme="dark"] .stop-row .sr-extra {
    background: #464029;
    color: #ccba9e;
}

/* Rullat: one row per customer with a roll check - the count big on the left */
.rolls-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.roll-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 16rem);
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--success-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.roll-row:hover {
    background: var(--surface-alt);
}

.roll-row.low {
    border-left-color: var(--danger-color);
}

.roll-row.none {
    border-left-color: var(--border-color);
}

.roll-row .rr-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.roll-row .rr-count {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--success-color);
}

.roll-row.low .rr-count {
    color: var(--danger-color);
}

.roll-row.none .rr-count {
    color: var(--text-secondary);
}

.roll-row .rr-unit {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.roll-row .rr-name {
    font-weight: 600;
}

.roll-row .rr-city,
.roll-row .rr-muted {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.roll-row .rr-products {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.roll-row .rr-history {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
}

.roll-row .rr-meta {
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.roll-row .rr-change.down {
    color: var(--danger-color);
}

.roll-row .rr-change.up {
    color: var(--success-color);
}

@media (max-width: 768px) {
    .roll-row {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .roll-row .rr-meta {
        grid-column: 2;
    }
}

/* Pakkausnäkymä: a Lisätoimitus in the same yellow box as on Oma reitti */
.pack-extra-box {
    display: block;
    flex: 1 0 100%;
    width: 100%;
}

.pack-extra-box > span {
    display: block;
}

.pack-extra-box .pack-extra-lines {
    margin-top: 0.3rem;
}

/* Lisää kotinäyttöön (js/install-hint.js): on a phone until opened from the home screen */
.install-hint { position: relative; display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.85rem 2.2rem 0.85rem 0.85rem; border: 1px solid var(--brand-aqua); border-radius: 10px; background: var(--brand-aqua-soft); color: var(--text-primary, inherit); }
.install-hint[hidden] { display: none; }
.install-text { font-size: 0.9rem; color: var(--text-secondary); }
.install-text p { margin: 0.25rem 0 0.4rem; }
.install-steps { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; }
.install-steps li { margin: 0.15rem 0; }
.install-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.install-close { position: absolute; top: 0.25rem; right: 0.4rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--text-secondary); cursor: pointer; padding: 0.25rem 0.45rem; }
#install-btn { margin-top: 0.3rem; }

/* Viikkoaikataulu, Koko viikko: the grid takes the whole window width (not just the page column),
   the day columns share it evenly, and each stop row keeps its name on the full row width with
   the town and drive time on the line under it (the drive time's own column squeezed the name to
   a letter per line) */
.schedule-container:has(> .schedule-grid) {
    --week-grid-width: min(calc(100vw - 2rem), 2000px);
    width: var(--week-grid-width);
    margin-left: calc((100% - var(--week-grid-width)) / 2);
}

.schedule-grid {
    grid-template-columns: 90px repeat(5, minmax(0, 1fr));
    min-width: 1100px;
}

.schedule-grid .schedule-cell {
    padding: 0.5rem;
}

/* The van's name at the top of its row, not in the middle of a long row */
.schedule-grid .schedule-driver {
    align-items: flex-start;
    padding: 0.75rem 0.4rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.schedule-grid .delivery-item.stop-row {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.1rem 1.1rem;
    grid-template-areas: "time name name move remove" "time city drive drive drive";
}

.schedule-grid .stop-row .sr-name {
    overflow-wrap: break-word;
}

/* Asiakaspyynnöt: a request the customer cancelled */
.request-entry.status-cancelled {
    opacity: 0.65;
}

/* Asiakaspyynnöt: Käyntien palautteet (Pikapalaute from eVaihtomatto) */
.feedback-panel {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface);
}

.feedback-panel > summary {
    padding: 0.65rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

#feedback-list {
    padding: 0 0.9rem 0.6rem;
}

.feedback-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.feedback-row .fb-thumb {
    font-size: 1.2rem;
    line-height: 1.2;
}

.feedback-row .fb-body {
    flex: 1;
    min-width: 0;
}

.feedback-row.down .fb-body {
    color: var(--text-primary);
}

.feedback-row.unread {
    background: var(--tint-red);
    margin: 0 -0.9rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

/* A badge with nothing to count stays hidden (display above would override [hidden]) */
.nav-badge[hidden] {
    display: none;
}