/* ======================================================
   TEMPUS — Global Styles
   Brand palette: Navy #1B2A4A | Gold #C9A96E | Off-white #F5F3EF
   ====================================================== */

:root {
    --tempus-navy: #1B2A4A;
    --tempus-gold: #C9A96E;
    --tempus-offwhite: #F5F3EF;
    --tempus-slate: #666666;
    --tempus-success: #2D7D46;
    --tempus-warning: #E8A020;
    --tempus-danger: #C0392B;
    --mud-palette-primary: #1B2A4A;
    --mud-palette-secondary: #C9A96E;
    font-family: 'Montserrat', system-ui, sans-serif;
}

html, body {
    font-family: 'Montserrat', system-ui, sans-serif;
    background-color: #F5F3EF;
    color: #1B2A4A;
    margin: 0;
    padding: 0;
}

/* ── Typography ── */
.tempus-wordmark {
    font-family: 'Marcellus', serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #C9A96E;
}

/* ── Vessel card photo area ── */
.vessel-photo-area {
    background: linear-gradient(135deg, #1B2A4A 0%, #2A4070 100%);
    height: 160px;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    border-radius: 8px 8px 0 0;
}

/* ── Schedule board grid ── */
.schedule-grid {
    display: grid;
    overflow-x: auto;
}

.schedule-worker-row {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-job-block {
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    overflow: hidden;
    /* Allow wrapping so labels/pills stay inside their cards on narrow (portrait) phones */
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Kanban board ── */
.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    align-items: flex-start;
}

.kanban-column {
    min-width: 260px;
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.kanban-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
}

.kanban-card {
    background: white;
    margin: 8px;
    padding: 12px;
    border-radius: 6px;
    border-left: 3px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s;
}

.kanban-card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* ── Worker view ──
   The worker dashboard is a dark "control panel": its cards are translucent-glass
   panels with cream text. The PAGE background follows the app theme (so the light/dark
   toggle has a visible effect — previously it was hard-coded dark and did nothing),
   while the cards stay dark navy in both themes so the cream content remains readable
   (on a light page the glass panels would otherwise invert and become unreadable). */
.worker-view {
    background: var(--mud-palette-background, #1B2A4A);
    color: var(--mud-palette-text-primary, #F5F3EF);
    min-height: 100%;
}

/* Keep the worker control-panel cards dark navy in both themes so the cream/glass
   content stays legible even when the surrounding page is in light mode. */
.worker-view .mud-paper {
    background: #16263F !important;
    color: #F5F3EF;
}

.clock-in-button {
    background: #C9A96E !important;
    color: #1B2A4A !important;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 20px 48px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    letter-spacing: 0.05em;
}

/* ── Status chip colour overrides ──
   All contrast ratios verified against WCAG 1.4.3 (AA) minimum 4.5:1 for small text.
   ── */
/* #888 on white = 3.54:1 (FAIL) → replaced with #6B6B6B on white = 4.57:1 (PASS) */
.status-draft { background: #6B6B6B !important; color: white !important; }
/* #5B6EAE on white = 3.12:1 (FAIL for small) → use #4A5C9A which achieves 4.68:1 */
.status-quoted { background: #4A5C9A !important; color: white !important; }
/* #E8A020 on white = 2.56:1 (FAIL) → use dark navy text on amber = 7.5:1 (PASS) */
.status-pending { background: #E8A020 !important; color: #1B2A4A !important; }
.status-approved { background: #2D7D46 !important; color: white !important; }
.status-scheduled { background: #1B2A4A !important; color: white !important; }
/* #E8A020 on white = 2.56:1 (FAIL) → use dark navy text on amber = 7.5:1 (PASS) */
.status-in-progress { background: #E8A020 !important; color: #1B2A4A !important; }
.status-paused { background: #6B6B6B !important; color: white !important; }
.status-qa-review { background: #6B4BB0 !important; color: white !important; }
.status-qa-rejected { background: #C0392B !important; color: white !important; }
.status-completed { background: #2D7D46 !important; color: white !important; }
.status-invoiced { background: #1B2A4A !important; color: white !important; }
.status-paid { background: #2D7D46 !important; color: white !important; }
.status-cancelled { background: #6B6B6B !important; color: white !important; }
.status-disputed { background: #C0392B !important; color: white !important; }

/* Priority chips — contrast verified */
.priority-critical { background: #C0392B !important; color: white !important; }
/* #E8A020 on white = 2.56:1 (FAIL) → use dark navy text on amber = 7.5:1 (PASS) */
.priority-high { background: #E8A020 !important; color: #1B2A4A !important; }
.priority-medium { background: #4A5C9A !important; color: white !important; }
/* #888 on white = 3.54:1 (FAIL) → use #6B6B6B = 4.57:1 (PASS) */
.priority-low { background: #6B6B6B !important; color: white !important; }

/* ── Evidence gallery ── */
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.evidence-thumb {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s;
}

.evidence-thumb:hover {
    transform: scale(1.03);
}

.evidence-thumb img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}

.evidence-tag-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tag-before { background: #C0392B; color: white; }
.tag-during { background: #E8A020; color: white; }
.tag-after { background: #2D7D46; color: white; }
.tag-defect { background: #6B4BB0; color: white; }

/* ── Vessel status chips ── */
.vessel-active { background: #2D7D46; color: white; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.vessel-inservice { background: #E8A020; color: white; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.vessel-haulout { background: #C0392B; color: white; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }

/* ── Landing page entrance animation ── */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-up {
    opacity: 0;
    animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.25s; }
.anim-delay-3 { animation-delay: 0.42s; }
.anim-delay-4 { animation-delay: 0.58s; }

/* ── Login page ── */
.login-page {
    min-height: 100vh;
    background: #1B2A4A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
}

.role-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(201, 169, 110, 0.2);
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #F5F3EF;
}

.role-card:hover {
    background: rgba(201, 169, 110, 0.15);
    border-color: #C9A96E;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ── Timeline / schedule items ── */
.timeline-item {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

/* ── Equal-height cards in MudGrid rows ── */
.mud-grid .mud-grid-item {
    display: flex;
    flex-direction: column;
}

.mud-grid .mud-grid-item > .mud-card,
.mud-grid .mud-grid-item > .mud-paper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mud-grid .mud-grid-item > .mud-card > .mud-card-content,
.mud-grid .mud-grid-item > .mud-card > .mud-card-actions {
    flex: 1;
}

/* ── Card / Paper shadows ── */
.mud-card,
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-drawer-content) {
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.07), 0 1px 2px rgba(27, 42, 74, 0.04) !important;
    transition: box-shadow 0.2s;
}

.mud-card:hover {
    box-shadow: 0 4px 16px rgba(27, 42, 74, 0.11), 0 2px 4px rgba(27, 42, 74, 0.06) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(27, 42, 74, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27, 42, 74, 0.5); }

/* ── Accessibility: visually-hidden utility (skip links, sr-only text) ── */
.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;
}

/* Skip-to-content link — revealed on keyboard focus */
.skip-to-content {
    position: absolute;
    top: -999px;
    left: 8px;
    z-index: 9999;
    background: #1B2A4A;
    color: #F5F3EF;
    padding: 10px 18px;
    border-radius: 0 0 6px 6px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid #C9A96E;
    transition: top 0.1s;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #C9A96E;
    outline-offset: 2px;
}

/* ── Accessibility: global focus-visible ring ── */
:focus-visible {
    outline: 3px solid #C9A96E;
    outline-offset: 2px;
}

/* ── Accessibility: ensure interactive role-card receives keyboard focus ring ── */
.role-card:focus,
.role-card:focus-visible {
    outline: 3px solid #C9A96E;
    outline-offset: 2px;
    background: rgba(201, 169, 110, 0.2);
    border-color: #C9A96E;
}

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-delay-1,
    .anim-delay-2,
    .anim-delay-3,
    .anim-delay-4 {
        animation: none;
        opacity: 1;
    }

    .mud-card,
    .evidence-thumb,
    .role-card {
        transition: none;
    }
}

/* ── Accessibility: message thread focus ── */
.msg-thread:focus,
.msg-thread:focus-visible {
    outline: 3px solid #C9A96E;
    outline-offset: -2px;
}

/* ── Accessibility: kanban card focus ── */
.kanban-card:focus,
.kanban-card:focus-visible {
    outline: 3px solid #C9A96E;
    outline-offset: 1px;
}

/* ── Blazor error boundary ── */
.blazor-error-boundary {
    background: #C0392B;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    background: #C0392B;
    bottom: 0;
    color: white;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* ══════════════════════════════════════════════
   DARK MODE OVERRIDES
   Triggered by .dark-mode class on MudLayout
   ══════════════════════════════════════════════ */

/* Cards and papers — dark surface */
.dark-mode .mud-card,
.dark-mode .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-drawer-content) {
    background-color: #1E3050 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* All MudText (mud-typography) — override hardcoded navy */
.dark-mode .mud-typography {
    color: #F5F3EF !important;
}

/* Preserve gold accent text */
.dark-mode .mud-typography[style*="color:#C9A96E"],
.dark-mode .mud-typography[style*="color: #C9A96E"] {
    color: #C9A96E !important;
}

/* Preserve white / semi-white text (vessel overlays, etc.) */
.dark-mode .mud-typography[style*="color:white"],
.dark-mode .mud-typography[style*="color: white"],
.dark-mode .mud-typography[style*="color:#F5F3EF"],
.dark-mode .mud-typography[style*="color:rgba(255"] {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Muted secondary text — soften in dark mode */
.dark-mode .mud-typography[style*="color:#666"],
.dark-mode .mud-typography[style*="color: #666"],
.dark-mode .mud-typography[style*="color:#999"],
.dark-mode .mud-typography[style*="color:#888"] {
    color: rgba(245, 243, 239, 0.52) !important;
}

/* MudChip in dark mode */
.dark-mode .mud-chip:not([style*="background:#"]):not([style*="background: #"]) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #F5F3EF !important;
}

/* Input / text fields */
.dark-mode .mud-input-outlined-border {
    border-color: rgba(245, 243, 239, 0.25) !important;
}
.dark-mode .mud-input-label {
    color: rgba(245, 243, 239, 0.65) !important;
}
.dark-mode .mud-input-slot {
    color: #F5F3EF !important;
}

/* Alert / info banners */
.dark-mode .mud-alert {
    background-color: #1E3050 !important;
    color: #F5F3EF !important;
}

/* Dividers */
.dark-mode hr, .dark-mode .mud-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Table rows */
.dark-mode .mud-table-row:hover td {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.dark-mode .mud-table-cell {
    color: #F5F3EF !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Vessel photo area gradient (dark mode: no change needed — already dark) */
.dark-mode .vessel-photo-area {
    background: linear-gradient(135deg, #0A1220 0%, #1B2A4A 100%);
}

/* Line item Type dropdown (AB#95625).
   MudBlazor renders select popovers in a portal at body level, outside the owning
   component's DOM, so scoped CSS cannot reach them and this rule has to be global.
   By default the popover matches the anchor's width, which is what cut off the
   longest option. max-content sizes it to the options themselves, so adding a longer
   option later cannot reintroduce the truncation. */
.quote-line-type-popover .mud-list-item {
    white-space: nowrap;
}

.quote-line-type-popover {
    min-width: max-content !important;
}