:root {
    color-scheme: light;
    --ink: #0f2537;
    --muted: #536976;
    --line: #d1dbe0;
    --teal: #086c72;
    --teal-hover: #065459;
    --teal-soft: #eaf3f3;
    --paper: #f4f6f8;
    --card: #ffffff;
    --success: #1a7f4b;
    --success-bg: #eafaf1;
    --warning: #a16207;
    --warning-bg: #fefce8;
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
}

* { box-sizing: border-box; }
/* Keep room for the page scrollbar on every page, so the header does not shift between short and long pages. */
html { scrollbar-gutter: stable; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    padding: 10px 20px;
    background: white;
    z-index: 99;
}
.skip-link:focus { top: 12px; }

/* Site Header */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}
/* One compact, full-width header on every page (owner 2026-10-13: same as the Hours page, nothing jumps). */
.header-inner {
    max-width: 1840px;
    padding: 4px 24px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.brand {
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--ink);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.brand small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .03em;
    margin-top: 1px;
}
.brand-mark {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}
/* Company logo from Settings (owner 2026-10-14): large, any shape, but never taller than the header or wider than
   a quarter of it; the product name sits to its right behind a thin divider. */
.brand-company {
    display: block;
    height: auto;
    width: auto;
    max-height: 48px;
    max-width: 192px;
    object-fit: contain;
    flex-shrink: 0;
}
.brand-has-company .brand-name {
    padding-left: 16px;
    border-left: 1px solid var(--line);
}

nav.main-nav { display: flex; gap: 6px; }
nav.main-nav a {
    text-decoration: none;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
nav.main-nav a[aria-current="page"] {
    background: #eaf1f4;
    color: var(--ink);
    font-weight: 600;
}
nav.main-nav a:hover { background: #f0f4f6; color: var(--ink); }

/* Dev Notice Banner */
.dev-banner {
    background: #fffbe6;
    border-bottom: 1px solid #ffe58f;
    padding: 6px 32px;
    font-size: 12px;
    color: #7a5400;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dev-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.dev-badge::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #faad14;
}

/* Admin Primary Navigation Tabs */
.admin-nav-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin: 0 0 28px;
    padding: 0;
}
.admin-nav-tabs a {
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, background 0.15s;
}
.admin-nav-tabs a:hover {
    color: var(--ink);
    background: #eaeff2;
    text-decoration: none;
}
.admin-nav-tabs a[aria-current="page"] {
    color: var(--teal);
    border-bottom-color: var(--teal);
    background: transparent;
    font-weight: 700;
}

/* Secondary Sub-nav / Switcher */
.sub-nav {
    display: inline-flex;
    background: #e5ebef;
    padding: 3px;
    border-radius: 6px;
    gap: 3px;
    margin-bottom: 20px;
}
.sub-nav a {
    text-decoration: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 4px;
}
.sub-nav a:hover { color: var(--ink); text-decoration: none; }
.sub-nav a[aria-current="page"] {
    background: white;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Main Content Layout */
.content {
    max-width: 1400px;
    margin: auto;
    padding: 32px 32px 64px;
    min-height: calc(100vh - 160px);
}

.content.content-wide,
.content:has(.workrest-workspace-grid) {
    max-width: 1840px;
    padding: 14px 24px 32px;
}

/* Work & Rest fits one screen: compact header/footer; the month overview takes the remaining height (script). */
body:has(.workrest-workspace-grid) .content { padding-bottom: 12px; min-height: 0; }
body:has(.workrest-workspace-grid) .site-footer { padding: 8px 32px; }

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-header h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.page-header p {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--muted);
}
.page-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--teal);
    color: white;
    border-color: var(--teal);
}
.btn-primary:hover {
    background: var(--teal-hover);
    border-color: var(--teal-hover);
    color: white;
}
.btn-secondary {
    background: white;
    color: var(--ink);
    border-color: #b0c2cc;
}
.btn-secondary:hover {
    background: #f1f5f7;
    border-color: #92a7b3;
    color: var(--ink);
}
.btn-sm {
    padding: 5px 11px;
    font-size: 12px;
}
.button {
    /* Legacy alias matching previous views */
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--teal);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}
.button:hover { background: var(--teal-hover); color: white; text-decoration: none; }

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-active { background: #eafaf1; color: #15803d; }
.badge-inactive { background: #f1f5f7; color: #64748b; }
.badge-onboard { background: #e0f2fe; color: #0369a1; }
.badge-planned { background: #fef3c7; color: #92400e; }
.badge-ashore { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* Filters and Search Toolbar */
.filter-bar, .filter-card {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.filter-main-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
}

.filter-group .form-control {
    height: 34px;
    padding: 4px 10px;
    font-size: 13px;
    background-color: #ffffff;
}

.filter-search {
    flex: 1 1 200px;
    min-width: 150px;
}

.filter-select {
    flex: 0 1 180px;
    min-width: 130px;
}

.filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.filter-actions .btn {
    height: 34px;
    padding: 4px 14px;
    font-size: 13px;
    white-space: nowrap;
}

.btn-reset {
    color: var(--crimson) !important;
    border-color: #fecdd3 !important;
    background: #fff1f2 !important;
}
.btn-reset:hover {
    background: #ffe4e6 !important;
}

/* Collapsible Date Filters */
.filter-more {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

.filter-more-summary {
    font-size: 12px;
    font-weight: 600;
    color: var(--teal);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}
.filter-more-summary:hover {
    color: var(--ink);
}

.filter-more-content {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 10px;
}

.filter-date-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-date-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.filter-date-inputs {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.filter-date-inputs .form-control {
    width: 135px;
    height: 34px;
    font-size: 13px;
    padding: 4px 8px;
}

/* Accessible Typeahead Combobox */
.combobox-container {
    position: relative;
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
}

.combobox-option {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.combobox-option:hover,
.combobox-option.active {
    background-color: #f1f5f9;
    color: var(--teal);
}

.combobox-option strong {
    font-weight: 600;
    color: var(--ink);
}

.combobox-option .badge-code {
    display: inline-block;
    padding: 1px 6px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
}

.combobox-option .badge-dept {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
}

/* Subtle, Discreet Sort Headers */
.sort-header {
    color: var(--muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    font-weight: 600;
}
.sort-header:hover {
    color: var(--teal);
    text-decoration: none;
}
.sort-header.active {
    color: var(--ink);
    font-weight: 700;
}
.sort-icon {
    font-size: 10px;
    line-height: 1;
    color: var(--teal);
}

@media (max-width: 1023px) {
    .filter-main-row {
        flex-wrap: wrap;
    }
    .filter-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

/* Tables */
.table-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    margin-bottom: 24px;
    position: relative;
}
.table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
th {
    background: #f7fafb;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f9fbfc; }
.actions-cell {
    text-align: right;
    white-space: nowrap;
}
.actions-cell > a {
    margin-left: 10px;
    font-weight: 600;
    font-size: 13px;
}

/* Stat Grid (Admin Overview) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
}
.stat-sub {
    font-size: 13px;
    color: var(--muted);
}
.stat-link {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
}
.stat-split {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.stat-split-item {
    display: flex;
    flex-direction: column;
}
.stat-dual-values {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}
.stat-value-dept {
    min-width: 114px;
}
.stat-value-rank {
    display: inline-block;
}

/* Operational Quick Actions Card */
.actions-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
    margin-bottom: 28px;
}
.actions-card h2 {
    font-size: 16px;
    margin: 0 0 14px;
    font-weight: 700;
}
.actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Details Card */
.details-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}
.details-card h2 {
    font-size: 18px;
    margin: 0 0 16px;
    font-weight: 700;
}
.details-list {
    display: grid;
    grid-template-columns: 180px 1fr;
    row-gap: 12px;
    column-gap: 16px;
    font-size: 14px;
    margin: 0;
}
.details-list dt {
    color: var(--muted);
    font-weight: 500;
}
.details-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

/* Forms */
.form-card {
    max-width: 640px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.form-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}
.form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 14px;
    border: 1px solid #9fb2bc;
    border-radius: 6px;
    background: white;
    color: var(--ink);
    font-family: inherit;
}
.form-control:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.form-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

/* Advanced collapsible section */
.advanced {
    margin: 16px 0;
    border: 1px dashed var(--line);
    border-radius: 6px;
    padding: 12px 16px;
    background: #fbfcfd;
}
.advanced summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.advanced-body {
    margin-top: 12px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border: 1px dashed var(--line);
    border-radius: 8px;
    margin-bottom: 24px;
}
.empty-state h3 {
    font-size: 16px;
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--ink);
}
.empty-state p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

/* Validation */
.validation {
    background: var(--danger-bg);
    border: 1px solid #fecaca;
    color: var(--danger);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
}
.validation ul { margin: 0; padding-left: 20px; }
.validation-summary-valid { display: none; }

/* Status message */
.notice-banner {
    background: var(--success-bg);
    border: 1px solid #bbf7d0;
    color: var(--success);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Site Footer (owner 2026-10-14): one quiet line — the vessel on the left, what the records are on the right. */
.site-footer {
    max-width: 1840px;
    margin: 24px auto 0;
    padding: 10px 24px 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    color: var(--muted);
}
.site-footer .footer-vessel strong { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.site-footer .footer-note { opacity: .8; }
@media print { .site-footer { display: none; } }

/* Confirmation Dialog / Modal */
dialog.confirm-modal {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background: white;
}
dialog.confirm-modal::backdrop {
    background: rgba(15, 37, 55, 0.5);
    backdrop-filter: blur(2px);
}
.confirm-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.confirm-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--ink);
}
.confirm-modal-body {
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}
.confirm-modal-actions {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--line);
    background: #fafbfc;
}

/* Exact Work Interval Modal Styles */
.exact-interval-modal {
    max-width: 490px;
    width: 95%;
}
.interval-action-pills {
    display: flex;
    gap: 10px;
}
.action-pill-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #f8fafc;
    color: #334155;
    user-select: none;
}
.action-pill-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.action-pill-label:hover {
    border-color: #cbd5e1;
    background: #f1f5f9;
}
.action-pill-label.active {
    border-color: #0d9488;
    background: #f0fdfa;
    color: #0f766e;
    font-weight: 600;
}
.pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.pill-dot-work {
    background-color: #1e40af;
}
.pill-dot-rest {
    background-color: #ffffff;
    border: 1.5px solid #94a3b8;
}
.interval-msg {
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.interval-msg-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-weight: 500;
}
.interval-msg-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-weight: 500;
}

/* Action buttons in tables */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--teal);
    cursor: pointer;
    text-decoration: none;
    display: inline;
}
.btn-link:hover {
    text-decoration: underline;
}
.btn-link.text-danger {
    color: var(--danger);
}
.actions-cell form {
    display: inline;
    margin: 0;
}
.actions-cell {
    white-space: nowrap;
}
.actions-cell > a, .actions-cell > .btn-link {
    margin-right: 10px;
}
.actions-cell > a:last-child, .actions-cell > .btn-link:last-child {
    margin-right: 0;
}

/* Suggestion special items */
.combobox-option.option-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    cursor: pointer;
}
.combobox-option.option-action:hover, .combobox-option.option-action.active {
    background: #edf2f7;
}
.badge-action {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.badge-action.activate {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid #fde047;
}
.badge-action.link {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

@media (max-width: 768px) {
    .header-inner { padding: 4px 16px; }
    .brand-company { max-height: 32px; max-width: 112px; }
    .brand-mark { width: 44px; height: 44px; }
    .brand-has-company .brand-name { padding-left: 10px; }
    .content { padding: 24px 16px 48px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .details-list { grid-template-columns: 1fr; row-gap: 4px; }
    .admin-nav-tabs { overflow-x: auto; }
}

/* Bulk Catalog Picker */
.catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    background: #ffffff;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
.catalog-search-wrap {
    flex: 1;
    min-width: 220px;
}
.catalog-buttons-wrap {
    display: flex;
    gap: 8px;
}
.catalog-counter-wrap {
    display: flex;
    align-items: center;
}
.badge-counter {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
}
.badge-counter strong {
    color: var(--teal);
    font-size: 14px;
}
.table-catalog {
    width: 100%;
    border-collapse: collapse;
}
.table-catalog tr.row-disabled {
    background-color: #f8fafc;
    color: var(--muted);
}
.table-catalog tr.row-disabled td {
    color: var(--muted);
}
.table-catalog .code-input {
    width: 100%;
    max-width: 140px;
    padding: 4px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}
.badge-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.catalog-submit-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.manual-hint a {
    font-weight: 600;
}

/* Contextual Row Action Menus */
.action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
}

.action-menu {
    position: relative;
    display: inline-block;
}

.action-menu[open] {
    z-index: 250;
}

tr:has(.action-menu[open]) {
    position: relative;
    z-index: 250;
}

.action-menu summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: 6px;
}

.action-menu summary::-webkit-details-marker,
.action-menu summary::marker {
    display: none;
}

.action-menu-dropdown {
    position: fixed;
    z-index: 1100;
    min-width: 190px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
    text-align: left;
    margin: 0;
}

.action-menu-dropdown a,
.action-menu-dropdown button,
.action-menu-dropdown .dropdown-item,
.actions-cell .action-menu-dropdown a,
.actions-cell .action-menu-dropdown button,
.actions-cell .action-menu-dropdown .dropdown-item {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    text-align: left;
    background: none;
    border: none;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.4;
}

.action-menu-dropdown a:hover,
.action-menu-dropdown button:hover,
.action-menu-dropdown .dropdown-item:hover,
.actions-cell .action-menu-dropdown a:hover,
.actions-cell .action-menu-dropdown button:hover {
    background: #f1f5f9;
    color: var(--teal);
    text-decoration: none;
}

.action-menu-dropdown .dropdown-item.text-danger,
.action-menu-dropdown button.dropdown-item.text-danger {
    color: var(--danger);
}

.action-menu-dropdown .dropdown-item.text-danger:hover,
.action-menu-dropdown button.dropdown-item.text-danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.action-menu-dropdown .dropdown-item.text-muted,
.action-menu-dropdown button.dropdown-item.text-muted {
    color: var(--muted);
}

.action-menu-dropdown .dropdown-item.text-muted:hover,
.action-menu-dropdown button.dropdown-item.text-muted:hover {
    background: #f1f5f9;
    color: var(--ink);
}

.dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--line);
    border: none;
}

.action-menu-dropdown form {
    margin: 0;
    padding: 0;
    display: block;
}

/* Vessel Switcher in Overview */
.vessel-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    padding: 0;
    border: none;
}
.vessel-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}
.vessel-nav-btn:hover {
    background: #e2e8f0;
    color: var(--ink);
    text-decoration: none;
}
.vessel-nav-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: normal;
    padding: 0 3px;
    white-space: nowrap;
    text-transform: none;
}

/* Crew Member List Styling */
.crew-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}
.crew-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    user-select: none;
}
.crew-name-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.crew-name-link {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.25;
}
.crew-name-link:hover {
    color: var(--teal);
    text-decoration: underline;
}
.crew-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.vessel-badge {
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}
.vessel-planned {
    color: #475569;
}
.rank-title {
    font-weight: 500;
    color: #1e293b;
}

/* Password Visibility Toggle */
.password-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-group input {
    width: 100%;
    padding-right: 42px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 6px;
    margin: 0;
    cursor: pointer;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 1;
    z-index: 2;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.password-toggle-btn:hover {
    color: #111827;
    background-color: rgba(0, 0, 0, 0.06);
}

.password-toggle-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.password-toggle-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

/* Suppress aggressive browser autofill background coloration */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #111827 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   Work & Rest Timesheet Workspace (Unified Master Design System)
   ========================================================================== */

.workrest-page-header {
    display: none;
}

.workrest-workspace-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1024px) {
    .workrest-workspace-grid {
        grid-template-columns: 1fr;
    }
}

/* Desktop (owner 2026-10-23): the crew list ends level with the Day Editor. The left column takes the height of the
   right one (the month overview fills the window, see the page script) and the crew list scrolls inside it.
   Narrow screens and phones keep the stacked layout. */
@media (min-width: 1025px) {
    .workrest-workspace-grid { align-items: stretch; }
    .workrest-sidebar-card { min-height: 0; }
    .workrest-sidebar-card .workrest-crew-list { flex: 1 1 0; min-height: 0; max-height: none; }
}

/* Area A: Crew Roster Sidebar */
.workrest-sidebar-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.workrest-search-box {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    position: relative;
    display: flex;
    align-items: center;
}

.workrest-search-icon {
    position: absolute;
    left: 20px;
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.workrest-search-input {
    width: 100%;
    padding: 6px 26px 6px 30px;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.workrest-search-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 15%, transparent);
}

.workrest-clear-search {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.workrest-sidebar-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
}

.workrest-crew-list {
    max-height: 600px;
    min-height: 380px;
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workrest-crew-item {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 48px;
    box-sizing: border-box;
    transition: background 0.12s ease, border-color 0.12s ease;
    border-left: 3px solid transparent;
    border-bottom: 1px solid #f1f5f9;
}

.workrest-crew-item:last-child {
    border-bottom: none;
}

.workrest-crew-item:hover {
    background: #eef4f6;
    text-decoration: none;
    color: var(--ink);
}

.workrest-crew-item.active {
    background: #d9eeee;            /* clearly selected (owner 2026-10-14) */
    border-left: 4px solid var(--teal);
    text-decoration: none;
}

.workrest-crew-item.active:hover { background: #cfe8e8; }
.workrest-crew-item.active .crew-rank { color: #0f5257; }

.crew-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.workrest-crew-item .crew-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workrest-crew-item.active .crew-name {
    color: #075e63;
    font-weight: 700;
}

.workrest-crew-item .crew-rank {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Screen Reader Only Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Red Attention Dot */
.roster-attention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc2626;
    flex-shrink: 0;
    margin-left: 6px;
    animation: subtleAttentionPulse 2.5s ease-in-out infinite;
    cursor: default;
}

@keyframes subtleAttentionPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        transform: scale(1.18);
        opacity: 0.8;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .roster-attention-dot {
        animation: none;
    }
}

.workrest-no-crew {
    padding: 24px 12px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
}

/* Main Area Column */
.workrest-main-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Area B: Seafarer Particulars Card */
.workrest-particulars-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.particulars-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.particulars-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.particulars-seafarer-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.particulars-rank-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    background: #f1f5f9;
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 4px;
}

.particulars-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.particulars-meta-row strong {
    color: var(--ink);
    font-weight: 600;
}

.particulars-meta-sep {
    color: var(--line);
}

/* Watchkeeper duty segmented toggle */
.watchkeeper-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wk-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.wk-segmented-control {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.wk-btn {
    border: none;
    background: #ffffff;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    border-right: 1px solid var(--line);
    line-height: 1.4;
}

.wk-btn:last-child {
    border-right: none;
}

.wk-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: var(--ink);
}

.wk-btn.active-yes {
    background: #0f766e;
    color: #ffffff;
    font-weight: 700;
}

.wk-btn.active-no {
    background: #475569;
    color: #ffffff;
    font-weight: 700;
}

.wk-segmented-control.wk-readonly {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.wk-segmented-control.wk-readonly .wk-btn:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.wk-segmented-control.wk-readonly .wk-btn.active-yes {
    background: #0f766e;
    color: #ffffff;
}

.wk-segmented-control.wk-readonly .wk-btn.active-no {
    background: #64748b;
    color: #ffffff;
}

.particulars-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Month Switcher */
.workrest-month-switcher {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.btn-month-step {
    border: none;
    background: none;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s ease;
}

.btn-month-step:hover {
    background: #f1f5f7;
}

.month-display-text {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    white-space: nowrap;
}

/* Save button cluster & status indicator */
.save-button-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-workrest-save {
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 13px;
}

.save-status-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    /* Same width for "Saved", "Unsaved changes", "Saved 19:24": the header must not re-wrap and push the grid
       down under the mouse on the first change (owner test 2026-10-14, 1366 px). */
    min-width: 138px;
    justify-content: flex-start;
}

.save-status-box.status-saved {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.save-status-box.status-dirty {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.save-status-box.status-saving {
    color: var(--teal);
    background: #f0fdfa;
    border-color: #99f6e4;
}

.save-status-box.status-failed {
    color: var(--danger);
    background: #fef2f2;
    border-color: #fecaca;
}

.save-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.save-dot.dot-saved { background-color: #16a34a; }
.save-dot.dot-dirty { background-color: #f59e0b; }
.save-dot.dot-saving { background-color: var(--teal); }
.save-dot.dot-failed { background-color: var(--danger); }

/* Area C: Month Overview Card */
.workrest-month-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workrest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.workrest-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.workrest-card-subtitle {
    font-size: 12px;
    color: var(--muted);
}

.workrest-table-container {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    /* Fallback; Work & Rest script sizes it to the remaining window height so the page does not scroll. */
    max-height: 320px;
    overflow-y: auto;
}

.workrest-month-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    user-select: none;
}

.workrest-month-table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--line);
    padding: 5px 6px;
    z-index: 5;
    text-align: left;
}

.th-w-date { width: 56px; }
.th-w-day { width: 52px; }
.th-w-timeline { width: auto; }
.th-w-work { width: 56px; text-align: right !important; }
.th-w-rest { width: 56px; text-align: right !important; }

.workrest-hours-header {
    display: grid;
    grid-template-columns: repeat(48, minmax(0, 1fr));
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.2;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.workrest-hours-header span {
    grid-column: span 2;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid #cbd5e1;
}

.workrest-hours-header span:last-child {
    border-right: none;
}

.workrest-day-row {
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid #f1f5f9;
}

.workrest-day-row:hover {
    background-color: #f8fafc;
}

.workrest-day-row.selected-row {
    background-color: #eaf1f4 !important;
}

.workrest-day-row td {
    padding: 2px 6px;
    vertical-align: middle;
}

.td-w-date {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.td-w-day {
    color: var(--muted);
    white-space: nowrap;
    width: 52px;
}

.day-dow-wrap {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.day-dow-text {
    display: inline-block;
    width: 28px;
    flex-shrink: 0;
}

.workrest-day-row.selected-row .td-w-date,
.workrest-day-row.selected-row .td-w-day {
    color: var(--teal);
    font-weight: 700;
}

.workrest-remark-icon {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    cursor: default;
    vertical-align: middle;
}

.workrest-row-timeline {
    display: grid;
    grid-template-columns: repeat(48, minmax(0, 1fr));
    height: 15px;
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 2px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Grid lines: half-hour light, hour darker, every 6 hours strongest (watch blocks). */
.w-slot {
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #d5dde6;
}

.w-slot:nth-child(2n) {
    border-right: 1px solid #8a9bb0;
}

.w-slot:nth-child(12n) {
    border-right: 2px solid #475569;
}

.w-slot:last-child {
    border-right: none;
}

.w-slot.slot-work {
    background-color: #1e3a8a;
}

.w-slot.slot-rest {
    background-color: #ffffff;
}

.w-slot.slot-outside {
    background: repeating-linear-gradient(
        -45deg,
        #f1f5f9,
        #f1f5f9 2px,
        #cbd5e1 2px,
        #cbd5e1 4px
    );
}

.td-w-work {
    text-align: right;
    font-weight: 700;
    color: #1e3a8a;
    font-variant-numeric: tabular-nums;
}

.td-w-rest {
    text-align: right;
    font-weight: 700;
    color: #15803d;
    font-variant-numeric: tabular-nums;
}

.td-w-rest.has-nc {
    color: #dc2626;
}

.btn-rest-nc {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #dc2626;
    cursor: pointer;
    text-decoration: underline dotted #dc2626;
    text-underline-offset: 2px;
    display: inline-block;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.btn-rest-nc:hover,
.btn-rest-nc:focus-visible {
    color: #b91c1c;
    text-decoration: underline solid #b91c1c;
    outline: none;
}

.btn-rest-vetting {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #d97706;
    cursor: pointer;
    text-decoration: underline dotted #d97706;
    text-underline-offset: 2px;
    display: inline-block;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.btn-rest-vetting:hover,
.btn-rest-vetting:focus-visible {
    color: #b45309;
    text-decoration: underline solid #b45309;
    outline: none;
}

.has-vetting-obs {
    background-color: rgba(245, 158, 11, 0.08) !important;
}

.roster-attention-dot-vetting {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f59e0b;
    display: inline-block;
    flex-shrink: 0;
}

/* Area D: Selected Day Editor Card */

.workrest-day-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workrest-day-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-timeline-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
}

.day-slots-interactive-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.day-hour-markers {
    display: grid;
    grid-template-columns: repeat(48, minmax(0, 1fr));
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.day-hour-markers span {
    grid-column: span 2;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid #cbd5e1;
}

.day-hour-markers span:last-child {
    border-right: none;
}

.day-slots-48 {
    display: grid;
    grid-template-columns: repeat(48, minmax(0, 1fr));
    height: 36px;
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
    box-sizing: border-box;
}

.day-interactive-slot {
    height: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.08s ease;
    box-sizing: border-box;
    border-right: 1px dashed #aab7c6;
}

.day-interactive-slot:nth-child(2n) {
    border-right: 1px solid #64748b;
}

.day-interactive-slot:nth-child(12n) {
    border-right: 2px solid #334155;
}

.day-interactive-slot:last-child {
    border-right: none;
}

.day-interactive-slot.slot-work {
    background-color: #1e3a8a;
}

.day-interactive-slot.slot-work:hover {
    background-color: #1d4ed8;
}

.day-interactive-slot.slot-rest {
    background-color: #ffffff;
}

.day-interactive-slot.slot-rest:hover {
    background-color: #e2e8f0;
}

.day-interactive-slot.slot-outside {
    background: repeating-linear-gradient(
        -45deg,
        #f1f5f9,
        #f1f5f9 3px,
        #cbd5e1 3px,
        #cbd5e1 6px
    );
    cursor: not-allowed !important;
}

.day-interactive-slot.readonly {
    cursor: default !important;
}

.day-totals-summary-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 110px;
    border-left: 1px solid var(--line);
    padding-left: 16px;
}

.day-total-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
}

.day-total-lbl {
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

.day-total-val {
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.day-total-val-work { color: #1e3a8a; }
.day-total-val-rest { color: #15803d; }

/* Day Editor bottom: one line — comment (max 15 characters) and the legend (ADR-071). */
.workrest-bottom-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.day-comment-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-comment-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.day-char-counter {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    min-width: 38px;
}

.day-char-counter.is-over { color: var(--warning); font-weight: 600; }

.day-comment-input {
    width: 200px;
    height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.day-comment-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 15%, transparent);
}

.day-comment-input[readonly] {
    background-color: #f8fafc;
    cursor: default;
}

.workrest-legend-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
}

.workrest-legend-line > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.workrest-legend-line .legend-line-hint { color: #94a3b8; }
.legend-line-guide {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--teal); font-weight: 700; font-size: 12px; text-decoration: none;
}
.legend-line-guide:hover { border-color: var(--teal); text-decoration: none; }

@media (max-width: 860px) {
    .workrest-legend-line { margin-left: 0; }
    .day-comment-input { width: 160px; }
}

.legend-box-swatch {
    display: inline-block;
    width: 14px;
    height: 11px;
    border-radius: 2px;
    flex-shrink: 0;
}

.swatch-box-work { background-color: #1e3a8a; border: 1px solid #1e3a8a; }
.swatch-box-rest { background-color: #ffffff; border: 1px solid #cbd5e1; }
.swatch-box-outside {
    background: repeating-linear-gradient(
        -45deg,
        #f1f5f9,
        #f1f5f9 2px,
        #cbd5e1 2px,
        #cbd5e1 4px
    );
    border: 1px solid #cbd5e1;
}

/* Floating Toast Banner */
.workrest-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1e293b;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 8px;
}

.workrest-toast.toast-error {
    background: var(--danger);
}

/* Rest-Hours Non-Conformity Explanation Dialog */
.nc-explanation-dialog {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 0;
    width: 460px;
    max-width: 92vw;
    background: #ffffff;
    color: var(--ink);
}

.nc-explanation-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.nc-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fef2f2;
    border-bottom: 1px solid #fee2e2;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.nc-dialog-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.nc-dialog-icon {
    font-size: 20px;
    line-height: 1.2;
}

.nc-dialog-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #991b1b;
}

.nc-dialog-date {
    display: inline-block;
    font-size: 12px;
    color: #7f1d1d;
    font-weight: 600;
    margin-top: 2px;
}

.nc-dialog-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #991b1b;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
    transition: background 0.1s;
}

.nc-dialog-close:hover {
    background: #fee2e2;
}

.nc-dialog-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.nc-explanation-item {
    padding: 10px 12px;
    background: #fffafa;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nc-rule-title {
    font-weight: 700;
    font-size: 13px;
    color: #991b1b;
}

.nc-rule-req {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.nc-rule-window {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    margin-top: 2px;
}




/* Compact navigation: common tasks stay direct; occasional tools remain grouped. */
.nav-menu { position: relative; flex-shrink: 0; }
.nav-menu > summary { cursor: pointer; padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--muted); list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: ' ▾'; font-size: 11px; margin-left: 5px; }
.nav-menu[open] > summary, .nav-menu > summary:hover, .nav-menu > .nav-current { background: var(--teal-soft); color: var(--teal); }
.nav-menu > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.nav-menu-panel { position: absolute; top: calc(100% + 5px); right: 0; min-width: 230px; padding: 6px; border: 1px solid #d9e3e7; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #20384020; z-index: 100; }
.nav-menu-panel a { display: block; padding: 11px 12px; margin: 0; border: 0; border-radius: 4px; white-space: nowrap; text-decoration: none; color: #334d58; }
.nav-menu-panel a:hover, .nav-menu-panel a[aria-current="page"] { background: var(--teal-soft); color: var(--teal); }
.admin-nav-tabs { overflow: visible; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) {
    .nav-menu-panel { position: static; min-width: 0; width: 100%; box-shadow: none; margin-top: 4px; }
    .nav-menu[open] { flex-basis: 100%; }
}

/* Settings page (ADR-064): groups of plain links, one per thing to configure. */
.settings-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: #fff; border: 1px solid #d9e2e6; border-radius: 8px; color: inherit; text-decoration: none; }
.settings-link:hover { border-color: #9fb3bc; background: #f7fafb; }
.settings-link:focus-visible { outline: 3px solid #6ba0b0; outline-offset: 2px; }
.settings-link strong { font-size: 15px; }
.settings-link span { font-size: 13px; color: var(--muted); }
/* Crew list: a red dot after the name when a rest rule was not met in the last 30 days (ADR-070). */
.crew-name-row { display: inline-flex; align-items: center; gap: 8px; }
.nc-flag { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; }
.nc-flag:hover { box-shadow: 0 0 0 3px #fee2e2; }

/* Crew list import (ADR-065) */
.import-upload { max-width: 720px; }
.import-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
    border:2px dashed var(--line); border-radius:12px; padding:36px 16px; margin-bottom:18px; cursor:pointer; background:#f9fbfc; color:var(--muted); }
.import-drop:hover, .import-drop.is-over { border-color: var(--teal); background:#eef7f7; }
.import-drop svg { width:36px; height:36px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.import-drop strong { color: var(--ink); font-size:16px; }
.import-drop input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.import-summary { display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; margin-bottom:16px; }
.import-summary .muted { margin-right:6px; }
.import-counts { display:flex; gap:8px; flex-wrap:wrap; }
.import-columns { background:white; border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:20px; }
.import-columns summary { cursor:pointer; font-weight:600; color:var(--teal); }
.import-columns-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:12px 0; }
.import-columns-controls label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.import-sample td, .import-sample th { padding:6px 8px; font-size:13px; white-space:nowrap; }
.import-sample select { min-width:130px; }
.import-header-row td { font-weight:700; background:#f7fafb; }
.import-h2 { font-size:16px; margin:22px 0 10px; }
.import-table td { padding:8px 12px; }
.import-table select, .import-table input.form-control { min-width:200px; }
.import-new { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.import-new[hidden] { display:none; }
.row-muted td { color: var(--muted); background:#fbfcfd; }
.muted { color: var(--muted); }
.small { font-size:12px; }
.import-date { align-items:flex-end; }
.import-actions { display:flex; gap:8px; margin-top:12px; }

/* Crew portal — "My hours" for the seafarer (ADR-066). Mobile first: works at 360 px; touch targets >= 44 px. */
.content.crew-portal { max-width: 560px; padding: 16px 12px 40px; }
.crew-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 16px; }
.crew-card h1 { font-size: 22px; margin: 0 0 6px; }
.crew-lead { color: var(--muted); margin: 0 0 16px; }
.crew-search { display: flex; gap: 8px; }
.crew-input { min-height: 48px; font-size: 18px; }
.crew-pin { letter-spacing: .3em; max-width: 220px; }
.crew-btn { min-height: 48px; font-size: 16px; padding: 0 18px; }
.crew-btn-wide { width: 100%; margin-top: 16px; }
/* "My hours" sign-in list; was .crew-name, which clashed with the officer roster (fixed 2026-10-14). */
.crew-names { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.crew-pick { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 10px; text-decoration: none; color: var(--ink); min-height: 48px; }
.crew-pick:hover, .crew-pick:focus-visible { border-color: var(--teal); background: #f2f8f8; }
.crew-pick span { color: var(--muted); font-size: 14px; grid-column: 1; }
.crew-pick em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--teal); font-weight: 600; font-size: 14px; }
.crew-empty { color: var(--muted); margin-top: 16px; }
.crew-back { display: inline-block; margin-bottom: 8px; text-decoration: none; color: var(--teal); font-weight: 600; }
.crew-pin-form { display: flex; flex-direction: column; gap: 6px; }
.crew-pin-form label { font-weight: 600; margin-top: 8px; }
.crew-remember { display: flex; gap: 10px; align-items: center; font-weight: 400 !important; color: var(--muted); }
.crew-remember input { width: 22px; height: 22px; }
.crew-help { color: var(--muted); font-size: 14px; margin: 10px 0; }
.crew-error { background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.crew-ok { background: #e9f7ef; color: #166534; border: 1px solid #bfe3cc; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.crew-who { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.crew-who-name { display: flex; flex-direction: column; min-width: 0; }
.crew-who-name strong { font-size: 18px; }
.crew-who-name span { color: var(--muted); font-size: 14px; }
/* Watchkeeper switch (ADR-075): its own row under the name, like a phone setting, so name and vessel keep the width. */
.crew-watch { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 14px;
    margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit;
    font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; min-height: 48px; }
.crew-watch-text small { font-weight: 400; color: var(--muted); font-size: 13px; }
.crew-watch-track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #cbd5dc; transition: background .15s; }
.crew-watch-track i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.crew-watch.is-on { border-color: #1e3a8a; color: #1e3a8a; background: #eef2fb; }
.crew-watch.is-on .crew-watch-track { background: #1e3a8a; }
.crew-watch.is-on .crew-watch-track i { left: 19px; }
.crew-watch:disabled { opacity: .6; }
/* Under the day: my record (print) and the full view (ADR-075). */
.crew-more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 8px; }
.crew-more-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
    color: var(--ink); text-decoration: none; background: #fff; min-height: 64px; box-shadow: 0 1px 2px rgba(15, 37, 55, .06); }
.crew-more-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #e6f2f2; color: var(--teal);
    display: flex; align-items: center; justify-content: center; }
.crew-more-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crew-more-text { flex: 1; min-width: 0; }
.crew-more-text strong { display: block; font-size: 15px; }
.crew-more-text small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.crew-more-go { flex: none; color: var(--teal); font-size: 24px; line-height: 1; }
.crew-more-link:hover, .crew-more-link:active { border-color: var(--teal); text-decoration: none; background: #f2f8f8; }
.crew-menu-sep { border-top: 1px solid var(--line); }
.crew-daynav { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center; margin-bottom: 12px; }
.crew-daynav .btn { min-height: 48px; font-size: 22px; display: flex; align-items: center; justify-content: center; padding: 0; }
.crew-daynav .is-disabled { opacity: .35; pointer-events: none; }
.crew-date { text-align: center; display: flex; flex-direction: column; }
.crew-date strong { font-size: 18px; }
.crew-date span { color: var(--muted); font-size: 13px; }
.crew-grid { display: grid; gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.crew-grid-row { display: grid; gap: 2px; }
.crew-grid-hours { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 12px; color: var(--muted); }
.crew-grid-cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.crew-cell { min-height: 44px; border: 1px solid #c9d6dc; border-radius: 6px; background: #fff; padding: 0; cursor: pointer; }
.crew-cell:nth-child(2n) { border-left-style: dashed; }
.crew-cell.is-work { background: #1e3a8a; border-color: #1e3a8a; }
.crew-cell.is-locked { background: repeating-linear-gradient(45deg, #f1f4f6, #f1f4f6 4px, #e3e9ec 4px, #e3e9ec 8px); cursor: not-allowed; }
.crew-cell.is-work.is-locked { background: #6b7fb3; }
.crew-cell:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }
.crew-totals { display: flex; justify-content: space-between; gap: 12px; margin: 14px 2px 6px; font-size: 16px; }
.crew-totals strong { font-size: 20px; }
.crew-nc { list-style: none; padding: 10px 12px; margin: 6px 0; background: #fdecec; color: #9b1c1c; border-radius: 8px; font-size: 14px; }
.crew-rules-ok { color: #166534; margin: 6px 0; font-size: 14px; }
.crew-label { display: block; font-weight: 600; margin: 12px 0 4px; }
.crew-h2 { font-size: 16px; margin: 24px 0 8px; }
.crew-week { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.crew-week a { display: grid; grid-template-columns: 56px 1fr 52px 18px; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 8px;
    text-decoration: none; color: var(--ink); min-height: 44px; }
.crew-week li.is-current a { background: #eef6f6; }
.crew-week-day { font-size: 14px; font-weight: 600; }
.crew-week-bar { display: grid; grid-template-columns: repeat(48, 1fr); height: 14px; border: 1px solid #d5dfe4; border-radius: 3px; overflow: hidden; }
.crew-week-bar i { display: block; }
.crew-week-bar i.on { background: #1e3a8a; }
.crew-week-bar i.out { background: #e3e9ec; }
.crew-week-h { font-size: 14px; text-align: right; }
.crew-week-flag { color: #b91c1c; }
.crew-signout { margin-top: 20px; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Crew portal: Day / Month switch, "Same as yesterday", month calendar (ADR-066). */
.crew-views { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #eef3f5; padding: 4px; border-radius: 10px; margin-bottom: 12px; }
.crew-view { text-align: center; padding: 10px 0; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; min-height: 44px; box-sizing: border-box; }
.crew-view.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0001; }
.crew-help-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.crew-help-row .crew-help { margin: 8px 0; flex: 1 1 180px; }
.crew-copy { min-height: 44px; white-space: nowrap; }
.crew-copy:disabled { opacity: .45; cursor: not-allowed; }
.crew-save-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.crew-save-row .crew-btn:only-child { grid-column: 1 / -1; }
.crew-h2 { display: flex; justify-content: space-between; align-items: baseline; }
.crew-h2-link { font-size: 14px; font-weight: 600; color: var(--teal); text-decoration: none; }
.crew-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.crew-cal-head { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.crew-cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border-radius: 8px;
    text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.crew-cal-day .n { font-size: 13px; font-weight: 600; }
.crew-cal-day .h { font-size: 15px; font-weight: 700; }
.crew-cal-day.is-ok { background: #dcfce7; border-color: #86efac; color: #14532d; }
.crew-cal-day.is-bad { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.crew-cal-day.is-empty { background: #f1f4f6; border-color: #dbe3e7; color: #64748b; }
.crew-cal-day.is-out, .crew-cal-day.is-future { color: #b6c2c8; }
.crew-cal-day.is-today { outline: 2px solid var(--teal); outline-offset: 1px; }
.crew-cal-legend { list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.crew-cal-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 4px; }
.crew-cal-legend i.is-ok { background: #dcfce7; border: 1px solid #86efac; }
.crew-cal-legend i.is-bad { background: #fee2e2; border: 1px solid #fca5a5; }
.crew-cal-legend i.is-empty { background: #f1f4f6; border: 1px solid #dbe3e7; }

/* "My hours": actions on top (sticky), short work/rest key next to the name (owner 2026-10-13). */
.crew-who-row { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; }
.crew-who-row > div:first-child { display: flex; flex-direction: column; }
.crew-key { font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 4px; padding-top: 4px; }
.crew-key i { display: inline-block; width: 14px; height: 14px; border: 1px solid #c9d6dc; border-radius: 3px; background: #fff; margin-left: 6px; }
.crew-key i.on { background: #1e3a8a; border-color: #1e3a8a; margin-left: 0; }
.crew-actions { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
    background: #fff; padding: 8px 0; margin-bottom: 6px; }
.crew-actions .btn { min-height: 48px; padding: 0 6px; font-size: 15px; white-space: nowrap; }
.crew-actions .btn:only-child, .crew-actions .crew-copy:nth-last-child(2) { }
.crew-actions:not(:has(.crew-next)) { grid-template-columns: 1fr 1fr; }

/* Settings → Crew access & QR code (ADR-067) */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.portal-h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.portal-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.portal-switch input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
.portal-addr { display: inline-block; margin: 2px 8px 2px 0; font-family: Consolas, monospace; }
.portal-help { margin-top: 16px; font-size: 14px; }
.portal-help summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.portal-qr-card { text-align: center; }
.portal-qr svg { width: 220px; height: 220px; }
.portal-url { word-break: break-all; margin: 8px 0 12px; }
.portal-link { display: inline-block; margin-top: 10px; color: var(--teal); font-weight: 600; text-decoration: none; }
.portal-mode { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 14px 0; display: grid; gap: 8px; }
.portal-mode legend { font-weight: 600; padding: 0 4px; }
.portal-mode label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.portal-mode input { margin-top: 3px; }

/* "My hours" v2 (ADR-069): day bar, quick fills, Periods / Grid, fixed bottom bar, compact crew header. */
body:has(.crew-portal) .header-inner { padding: 2px 12px; flex-wrap: nowrap; }
body:has(.crew-portal) .brand-mark { width: 36px; height: 36px; }
body:has(.crew-portal) .brand-company { max-height: 32px; max-width: 120px; }
body:has(.crew-portal) .brand small { display: none; }
body:has(.crew-portal) .site-footer { display: none; }
.crew-menu { position: relative; }
.crew-menu > summary { list-style: none; cursor: pointer; font-size: 22px; padding: 6px 12px; border-radius: 8px; color: var(--ink); }
.crew-menu > summary::-webkit-details-marker { display: none; }
.crew-menu[open] > summary { background: #eef3f5; }
.crew-menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; background: #fff; border: 1px solid var(--line);
    border-radius: 10px; box-shadow: 0 8px 24px #20384022; min-width: 200px; padding: 6px; display: grid; }
.crew-menu-panel a { padding: 12px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.crew-menu-panel a:hover { background: #eef6f6; }
.crew-menu-name { padding: 8px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }

.crew-daybar { display: grid; grid-template-columns: repeat(48, 1fr); height: 22px; border: 1px solid #c9d6dc; border-radius: 5px; overflow: hidden; }
.crew-daybar i { display: block; border-right: 1px solid #eef2f4; }
.crew-daybar i:nth-child(12n) { border-right-color: #b9c7ce; }
.crew-daybar i.on { background: #1e3a8a; border-right-color: #1e3a8a; }
.crew-daybar i.out { background: repeating-linear-gradient(45deg, #f1f4f6, #f1f4f6 3px, #e3e9ec 3px, #e3e9ec 6px); }
.crew-daybar-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 2px 0 10px; }

/* Quick fill: "As yesterday" on its own line, the four 12-hour shifts in one even row under it (no sideways scrolling). */
.crew-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.crew-quick #crewCopy { grid-column: 1 / -1; }
.crew-chip { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #c9d6dc; border-radius: 20px; background: #fff;
    font-size: 14px; white-space: nowrap; cursor: pointer; color: var(--ink); }
.crew-chip:hover { border-color: var(--teal); }
.crew-chip:disabled { opacity: .4; cursor: not-allowed; }

.crew-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #eef3f5; padding: 3px; border-radius: 9px; margin-bottom: 10px; }
.crew-mode { min-height: 40px; border: 0; border-radius: 7px; background: transparent; font-weight: 600; color: var(--muted); cursor: pointer; }
.crew-mode.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px #0001; }

.crew-period-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.crew-period { display: grid; grid-template-columns: auto 1fr auto 1fr 44px; gap: 6px; align-items: center; }
.crew-period-label { font-weight: 600; color: #1e3a8a; }
.crew-period select { min-height: 44px; font-size: 17px; padding: 0 6px; }
.crew-period-del { min-height: 44px; border: 1px solid #f0c4c4; border-radius: 8px; background: #fff; color: #9b1c1c; font-size: 16px; cursor: pointer; }
.crew-add { width: 100%; min-height: 44px; margin-top: 8px; }
.crew-periods-empty { margin: 8px 0 0; }

.crew-grid { touch-action: pan-y; }
.crew-grid.is-painting { touch-action: none; }
.crew-grid[hidden], .crew-periods[hidden] { display: none; }

.content.crew-portal { padding-bottom: 150px; }
.crew-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px #20384014; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.crew-bottom > * { max-width: 536px; margin-left: auto; margin-right: auto; }
.crew-bottom-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14px; }
.crew-bottom-totals strong { font-size: 17px; }
.crew-rules { border: 0; background: none; padding: 4px 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.crew-rules.is-ok { color: #166534; }
.crew-rules.is-bad { color: #b91c1c; }
.crew-rules.is-wait { color: var(--muted); }
.crew-rules.is-partial { color: #3f6212; }   /* no rule broken, 7-day rule not fully checked yet (SI-03) */
.crew-unsaved { color: #b45309; font-weight: 600; font-size: 13px; }
.crew-unsaved[hidden] { display: none; }
/* Leaving "My hours" with days not saved yet. */
.crew-leave { border: 0; border-radius: 14px; padding: 20px; width: min(360px, calc(100vw - 32px)); box-shadow: 0 12px 40px rgba(15, 37, 55, .25); color: var(--ink); }
.crew-leave::backdrop { background: rgba(15, 37, 55, .45); }
.crew-leave-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.crew-leave-text { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.crew-leave-actions { display: grid; gap: 8px; }
.crew-leave-actions .btn { width: 100%; min-height: 44px; }
.crew-rules-list { margin: 4px auto; padding: 8px 10px 8px 26px; background: #fdecec; color: #9b1c1c; border-radius: 8px; font-size: 13px; max-height: 22vh; overflow: auto; }
.crew-rules-list[hidden] { display: none; }
.crew-bottom-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.crew-bottom-actions .btn { min-height: 48px; font-size: 16px; }
.crew-bottom-actions .btn:only-child { grid-column: 1 / -1; }

/* ===== Hours overview for Master / Administrator: crew × month (ADR-070) ===== */
.workrest-back-overview { display: block; padding: 8px 12px 6px; font-size: 13px; font-weight: 600; }
.hov { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; }
.hov-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hov-title { margin: 0; font-size: 22px; }
.hov-month { display: flex; align-items: center; gap: 8px; }
.hov-month strong { min-width: 130px; text-align: center; font-size: 16px; }
.hov-month .btn { padding: 4px 12px; }
.hov-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.hov-search { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; width: 200px; }
.hov-only { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hov-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 8px; padding: 0; font-size: 12px; color: var(--muted); }
.hov-legend li { display: flex; align-items: center; gap: 5px; }
.hov-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.hov-legend i.is-ok { background: #dcfce7; border: 1px solid #86efac; }
.hov-legend i.is-bad { background: #fee2e2; border: 1px solid #fca5a5; }
.hov-legend i.is-empty { background: #e5eaee; border: 1px solid #cbd5dc; }
.hov-legend i.is-out { background: repeating-linear-gradient(45deg, #fff 0 3px, #eef2f4 3px 6px); border: 1px solid #e2e8ec; }
.hov-legend-note { margin-left: auto; }
.hov-empty { padding: 30px; text-align: center; color: var(--muted); }
.hov-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; max-height: calc(100vh - 230px); overflow-y: auto; }
.hov-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.hov-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafb; border-bottom: 1px solid var(--line); }
.hov-name-h, .hov-name { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; min-width: 190px; max-width: 240px; padding: 3px 10px; border-right: 1px solid var(--line); }
.hov-table thead .hov-name-h { z-index: 3; background: #f8fafb; font-size: 12px; color: var(--muted); }
.hov-name a { font-weight: 600; font-size: 13px; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hov-name a:hover { color: var(--teal); }
.hov-rank { display: block; font-size: 11px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hov-day-h { padding: 3px 0; min-width: 30px; text-align: center; font-weight: 600; color: var(--ink); }
.hov-day-h .n { display: block; font-size: 12px; line-height: 1.2; }
.hov-day-h .w { display: block; font-size: 10px; color: var(--muted); font-weight: 400; line-height: 1.1; }
.hov-day-h.is-weekend .w { color: #94a3b8; }
.hov-day-h.is-today { background: var(--teal); color: #fff; }
.hov-day-h.is-today .w { color: #d6f0f1; }
.hov-dept th { position: sticky; left: 0; text-align: left; background: #eef4f5; color: var(--teal); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-top: 1px solid var(--line); }
.hov-row > * { border-bottom: 1px solid #eef2f4; }
.hov-row:hover .hov-name { background: #f4f9f9; }
.hov-cell { padding: 2px; text-align: center; height: 34px; }
.hov-cell a { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; min-width: 26px; border-radius: 5px; border: 1px solid transparent; color: inherit; font-size: 11px; font-weight: 600; text-decoration: none; }
.hov-cell a:hover { outline: 2px solid var(--teal); outline-offset: 0; }
.hov-cell.is-ok a { background: #dcfce7; border-color: #86efac; color: #14532d; }
.hov-cell.is-bad a { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.hov-cell.is-empty a { background: #e5eaee; border-color: #cbd5dc; }
.hov-cell .hov-out { display: block; height: 28px; min-width: 26px; border-radius: 5px; border: 1px solid #e2e8ec;
    background: repeating-linear-gradient(45deg, #fff 0 3px, #eef2f4 3px 6px); }
.hov-note { position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: #0f2537; opacity: .55; }
.hov-nomatch { color: var(--muted); padding: 12px; }

/* Hours: view switch, department and quick filters, number in the day grid (owner 2026-10-23). */
.hov-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hov-view { border: 0; background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer; }
.hov-view + .hov-view { border-left: 1px solid var(--line); }
.hov-view.is-active { background: var(--teal); color: #fff; }
.hov-dept-filter { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--card); color: var(--ink); }
/* A view's own parts are switched with the hidden attribute; it must win over display rules (both legends showed). */
.hov [hidden] { display: none !important; }
.hov-line2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 8px; }
.hov-line2 .hov-legend { margin: 0; }
.hov-line2-note { margin-left: auto; font-size: 12px; color: var(--muted); }
.hov-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.hov-filter { display: inline-flex; align-items: center; gap: 6px; }
.hov-filter .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hov-filter .dot.is-ok { background: #16a34a; }
.hov-filter .dot.is-part { background: #94a3b8; }
.hov-filter .dot.is-bad { background: #dc2626; }
.hov-filter { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.hov-filter b { font-weight: 700; color: var(--muted); margin-left: 2px; }
.hov-filter.is-active { background: #e6f2f2; border-color: var(--teal); color: var(--teal); }
.hov-filter.is-active b { color: var(--teal); }
.hov-no { display: inline-block; min-width: 20px; margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hov-name .hov-no + a { display: inline; }

/* Compact view: the whole crew at a glance, numbered in crew list order, flowing down the columns. */

/* Crew page: running number. */
th.crew-no, td.crew-no { width: 44px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 4px; }
@media (max-width: 700px) {
    .hov { padding: 10px; }
    .hov-tools { margin-left: 0; width: 100%; }
    .hov-search { flex: 1; }
    .hov-name-h, .hov-name { min-width: 120px; max-width: 140px; }
    .hov-legend-note { margin-left: 0; }
}
a.crew-cal-day.is-future { color: #64748b; border-style: dashed; border-color: #cbd5dc; }
/* Day Editor: previous / next day and "Same as previous day" (owner 2026-10-14). */
.workrest-day-actions .day-nav-btn { min-width: 32px; padding-left: 8px; padding-right: 8px; font-size: 16px; line-height: 1; justify-content: center; }
.workrest-day-actions button:disabled { opacity: .45; cursor: default; }
/* Crew list import: per-person dates, bulk date, reliefs (ADR-073). */
.import-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 13px; color: var(--muted); }
.import-bulk .form-control { width: 160px; height: 32px; padding: 4px 8px; }
.import-table .import-day { width: 150px; height: 32px; padding: 4px 8px; }
.import-relief { font-size: 12px; color: var(--teal); font-weight: 600; }

/* Full view is for computers: no full-view links on a phone (owner 2026-10-14). */
@media (max-width: 899px) {
    .crew-view-switch { display: none !important; }
    .crew-more { grid-template-columns: 1fr; }
}
.crew-closed { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #f1f4f6; color: #475569; font-size: 14px; }

/* Department users (ADR-082) */
.du-form { padding: 18px 20px; margin-bottom: 20px; }
.du-form h2 { font-size: 18px; margin: 0 0 12px; }
.du-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.du-grid label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; }
.du-set { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.du-set legend { font-weight: 700; padding: 0 6px; }
.du-set .muted.small { flex-basis: 100%; margin: 2px 0 0; font-size: 12.5px; }
.du-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.du-positions { display: block; }
.du-group { margin: 10px 0 0; }
.du-group-head { font-size: 14.5px; }
.du-group-list { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 4px 0 0 24px; }
.du-actions { display: flex; gap: 8px; }
.du-pass { display: inline-block; }
.du-pass summary { list-style: none; cursor: pointer; }
.du-pass summary::-webkit-details-marker { display: none; }
.du-pass[open] form { display: flex; gap: 6px; margin-top: 6px; }
.du-pass .form-control { max-width: 150px; }

/* Department users: rights as cards with switches (owner 2026-10-14). */
.du-rights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; width: 100%; }
.du-right { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.du-right:hover { border-color: #9fb4bf; }
.du-right input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.du-right:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 25%, transparent); }
.du-right:has(input:checked) { border-color: var(--teal); background: #eef7f7; }
.du-right.is-fixed { cursor: default; background: #f7f9fa; }
.du-right-icon { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eaf1f4; color: var(--muted); }
.du-right:has(input:checked) .du-right-icon, .du-right.is-fixed .du-right-icon { background: var(--teal); color: #fff; }
.du-right-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.du-right-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.du-right-text strong { font-size: 14.5px; }
.du-right-text small { font-size: 12.5px; color: var(--muted); }
.du-right-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.du-switch { flex: 0 0 38px; height: 22px; border-radius: 11px; background: #c5d1d7; position: relative; transition: background .15s; }
.du-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.du-right:has(input:checked) .du-switch { background: var(--teal); }
.du-right:has(input:checked) .du-switch::after { transform: translateX(16px); }
.du-chip { display: inline-block; padding: 1px 8px; margin: 0 4px 2px 0; border-radius: 10px; font-size: 12px; font-weight: 600;
    background: #eaf1f4; color: var(--muted); }
.du-chip.is-edit { background: #e6f4f1; color: var(--teal); }
.du-chip.is-print { background: #eef2ff; color: #3949ab; }
.du-count { font-size: 11px; font-weight: 700; color: var(--muted); background: #eaf1f4; border-radius: 9px; padding: 0 6px; }
.du-count:empty { display: none; }
.btn-danger-outline { background: #fff; color: var(--danger); border: 1px solid #f1b5b5; }
.btn-danger-outline:hover { background: var(--danger-bg); border-color: var(--danger); }

/* Guide (rewritten 2026-10-15) */
.guide { max-width: 980px; margin: 0 auto; padding: 8px 0 24px; }
.guide-head h1 { margin: 8px 0 6px; font-size: 26px; }
.guide-head p { margin: 0 0 14px; color: var(--muted); font-size: 15px; max-width: 760px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 8px 0; }
.guide-toc a { font-size: 13px; padding: 5px 11px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.guide-toc a:hover { border-color: var(--teal); color: var(--teal); }
.guide-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; margin: 0 0 16px; scroll-margin-top: 56px; }
.guide-card h2 { margin: 0 0 10px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.guide-card h3 { margin: 16px 0 6px; font-size: 15px; }
.guide-card p, .guide-card li, .guide-card dd { font-size: 14px; line-height: 1.55; }
.guide-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); background: #e6f4f1; padding: 2px 8px; border-radius: 10px; }
.guide-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.guide-roles div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #f9fbfc; }
.guide-roles strong { display: block; margin-bottom: 3px; }
.guide-roles span { font-size: 13px; color: #3e5563; line-height: 1.45; }
.guide-steps { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: gstep; }
.guide-steps > li { counter-increment: gstep; position: relative; padding: 6px 0 6px 38px; }
.guide-steps > li::before { content: counter(gstep); position: absolute; left: 0; top: 5px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.guide-list { margin: 6px 0 0; padding-left: 20px; }
.guide-list li { margin: 4px 0; }
.guide-note { margin: 12px 0 0; padding: 10px 12px; background: #f4f8f9; border-left: 3px solid var(--teal); border-radius: 4px; color: #3e5563; }
.guide-legend { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.guide-legend-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.guide-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.guide-legend i { width: 22px; height: 22px; border-radius: 4px; flex: 0 0 22px; border: 1px solid #cbd5e1; }
.guide-legend .g-ok { background: #c9ecd7; border-color: #8fd1aa; }
.guide-legend .g-nc { background: #f8c9c9; border-color: #e99595; }
.guide-legend .g-empty { background: #e5e9ec; }
.guide-legend .g-out { background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 4px, #f8fafc 4px, #f8fafc 8px); }
.guide-legend .g-work { background: #0284c7; border-color: #0369a1; }
.guide-legend .g-rest { background: #fff; }
.guide-legend .g-red { flex: 0 0 auto; min-width: 34px; text-align: center; font-weight: 700; color: #fff; background: #dc2626; border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.guide-legend .g-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #dc2626; margin: 0 6px; }
.guide-legend .g-bubble { flex: 0 0 22px; text-align: center; }
.guide-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0; }
.guide-rules div { border: 1px solid #f3c7c7; background: #fffafa; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.guide-rules b { font-size: 22px; color: #b91c1c; line-height: 1; }
.guide-rules span { font-size: 13.5px; line-height: 1.4; }
.guide-more { margin-top: 8px; }
.guide-more summary { cursor: pointer; color: var(--teal); font-weight: 600; font-size: 14px; }
.guide-faq dt { font-weight: 700; margin-top: 10px; font-size: 14px; }
.guide-faq dd { margin: 2px 0 0; color: #3e5563; }
@media print { .guide-toc, .sub-nav { display: none; } .guide-card { break-inside: avoid; } }
.import-h3 { font-size: 15px; margin: 14px 0 6px; }
.import-others { margin-top: 12px; }
.import-others > summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--teal); }
.leaving-note { color: #a16207; font-weight: 600; }
.import-relation { margin-top: 6px; font-size: 12.5px; max-width: 280px; }

/* Audit log: what changed, in plain words (ADR-091) */
.audit-changes { list-style: none; margin: 0 0 4px; padding: 0; }
.audit-changes li { margin: 0 0 2px; line-height: 1.35; }
.audit-field { color: var(--muted); }
.audit-old { color: #b91c1c; text-decoration: line-through; text-decoration-thickness: 1px; }
.audit-new { color: #15803d; font-weight: 600; }
.audit-arrow { color: var(--muted); }

/* Restore: copy made by another version (ADR-091) */
.backup-version-badge { background: #fef3c7; color: #92400e; font-size: 0.72rem; margin-left: 6px; }
.restore-version-note { font-size: 0.85rem; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; }
.import-relief-warn { color: #b91c1c; font-size: 0.75rem; margin-top: 2px; }
.import-table td { overflow-wrap: anywhere; }
.import-relation { max-width: 100%; }
#dayCommentInput[readonly] { background: #f1f5f9; color: #64748b; cursor: default; }
.guide-legend .g-amber { flex: 0 0 auto; min-width: 34px; text-align: center; font-weight: 700; color: #78350f; background: #fcd34d; border-radius: 4px; padding: 1px 6px; font-size: 13px; }

/* Notices (ADR-093) */
.alert { border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; font-size: 0.875rem; border: 1px solid transparent; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Settings: Stop Rest Hours (vessel edition, ADR-095) */
.settings-stop { margin: 0; }
.settings-link-button { width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* ── First-steps tour (ADR-099) ───────────────────────────────────────────── */
.tour { position: fixed; inset: 0; z-index: 2000; }
.tour-shade { position: absolute; inset: 0; }
.tour-centered .tour-shade { background: rgba(15, 37, 55, 0.55); }
.tour-spot {
    position: fixed; border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 9999px rgba(15, 37, 55, 0.55);
    transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.tour-pop {
    position: fixed; background: var(--card); color: var(--ink); border-radius: 12px;
    padding: 16px 18px 14px; box-shadow: 0 18px 48px rgba(15, 37, 55, 0.32); outline: none;
    transition: left .2s ease, top .2s ease;
}
.tour-arrow { position: absolute; width: 14px; height: 14px; background: var(--card); transform: translateX(-50%) rotate(45deg); }
.tour-arrow.is-up { top: -7px; }
.tour-arrow.is-down { bottom: -7px; }
.tour-arrow.is-left { left: -7px !important; transform: translateY(-50%) rotate(45deg); }
.tour-arrow.is-right { left: auto !important; right: -7px; transform: translateY(-50%) rotate(45deg); }
.tour-count { font-size: 12px; font-weight: 600; color: var(--teal); letter-spacing: .02em; margin-bottom: 2px; }
.tour-title { font-size: 17px; margin: 0 0 6px; line-height: 1.3; }
.tour-text { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-gap { flex: 1; }
.tour-skip { background: none; border: 0; padding: 4px 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.tour-skip:hover { color: var(--ink); text-decoration: underline; }
.tour-onward {
    display: block; margin: 12px -18px -14px; padding: 10px 18px; border-top: 1px solid var(--line);
    border-radius: 0 0 12px 12px; background: #eef6f6; font-weight: 600; font-size: 14px;
}
.tour-onward:hover { background: #e2f0f0; text-decoration: none; }
.tour [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-pop { transition: none; } }
.guide-tips { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #eef6f6; border: 1px solid #cfe5e5; border-radius: 10px; padding: 10px 16px; margin: 0 0 12px; }
.guide-tips p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--ink); }

/* Officer idle sign-out warning (audit 2026-10-25) */
.idle-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2100; display: flex; align-items: center; gap: 14px;
    background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 37, 55, .35); font-size: 14px; max-width: calc(100% - 24px); }
.idle-bar[hidden] { display: none; }

/* ADR-101: a day nobody saved is "Not filled in" — grey, never shown as rest. */
.w-slot.slot-unknown,
.day-interactive-slot.slot-unknown { background-color: #e5e7eb; }
.day-interactive-slot.slot-unknown:hover { background-color: #d1d5db; }
.swatch-box-unknown { background-color: #e5e7eb; border: 1px solid #cbd5e1; }
.workrest-day-row.is-unfilled td.td-w-work,
.workrest-day-row.is-unfilled td.td-w-rest { color: #94a3b8; }
.day-unfilled-note { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem;
    padding: .45rem .7rem; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: .9rem; }
.day-unfilled-note[hidden] { display: none; }
.crew-daybar.is-unfilled i:not(.out):not(.on) { background: #e5e7eb; }

/* ADR-102: closed months */
.month-closed-box { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-radius: 6px;
    background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; font-size: 14px; }
.month-message { margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 14px; }
.hov-close { margin-left: 8px; }
.hcv-lock { margin-left: 4px; font-size: 12px; }

/* Crew list (owner 2026-10-26): no initials; every heading centred over its column, the column centred too. */
.crew-table th, .crew-table td { text-align: center; }
.crew-table td:nth-child(2) { text-align: left; }   /* names start at the left (owner 2026-10-26); the heading stays centred */
.crew-table .action-group { justify-content: center; }

/* ADR-102: warnings in the "Close month" dialogs */
.close-warn { margin: 8px 0 0; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 10px; font-size: 0.9rem; }
.month-message.is-error { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
/* Keyboard: the day row in focus is visible (audit 30.10, UX-04) */
.workrest-day-row:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
/* Month end in one line: check → print → close (audit 30.10) */
.month-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; background: #f8fafc; font-size: 13px; }
.month-steps li { display: flex; gap: 6px; align-items: baseline; color: #334155; }
.month-steps li + li::before { content: "→"; color: #94a3b8; margin-right: 12px; }
.month-steps li.is-todo span { color: #92400e; }
.month-steps li.is-done span { color: #166534; }
.month-steps .link-button { background: none; border: 0; padding: 0; color: var(--teal, #0f766e); text-decoration: underline; cursor: pointer; font: inherit; }
/* Crew page (owner 2026-10-30): tabs and actions in one row, compact header and filter — the list starts higher. */

/* Online demo (ADR-114) */
.demo-banner { background: #1f2a44; color: #fff; font-size: 13px; text-align: center; padding: 6px 12px; }
.demo-banner a { color: #ffd479; margin-left: 4px; }
.demo-logins { display: flex; flex-direction: column; gap: 4px; background: #eef2ff; border: 1px solid #c7d2fe; color: #1e293b;
    border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; font-size: 14px; }
.demo-logins code { background: #fff; border: 1px solid #c7d2fe; border-radius: 4px; padding: 0 5px; font-size: 13px; }