/* Shared staff workspace: same palette and hierarchy as the admin portal. */
body { line-height: 1.5; }
.crew-bg, [data-theme="light"] body.crew-public .crew-bg { background: none; }
.crew-desktop-nav { display: none; }
.crew-wrap { max-width: 800px; padding: 20px 16px 32px; }
.crew-top { background: var(--surface); border-color: var(--border-strong); padding-inline: 12px; }
.crew-title { font-weight: 600; }
.crew-head { margin-bottom: 20px; }
.crew-head h1 { font-size: clamp(23px, 3vw, 30px); letter-spacing: -.025em; line-height: 1.2; }
.crew-head-sub, .crew-row-meta { color: var(--text-2); }
.crew-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.crew-dashboard-head p { margin: 8px 0 0; }
.crew-dashboard-head .crew-head-when { flex-shrink: 0; font-size: 13px; }
.crew-overview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 20px; padding: 16px 0; }
.crew-overview > div { padding: 0 16px; border-right: 1px solid var(--border); }
.crew-overview > div:last-child { border: 0; }
.crew-overview span { display: block; color: var(--text-2); font-size: 12px; }
.crew-overview strong { display: block; font-size: 28px; font-weight: 650; margin-top: 4px; }
.crew-pending-value { color: var(--amber-text); }
.crew-card, .crew-list, .crew-clock, .crew-notice, .crew-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.crew-card, .crew-notice { margin-bottom: 12px; }
.crew-clock { padding: 16px; margin-bottom: 24px; }
.crew-section-label { margin: 24px 0 10px; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
.crew-row { padding: 16px; gap: 12px; align-items: center; }
.crew-row-main { min-width: 0; }
.crew-row-title { line-height: 1.4; overflow-wrap: anywhere; }
.crew-row-meta { margin-top: 4px; line-height: 1.5; overflow-wrap: anywhere; }
.crew-day { padding: 10px 16px; background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.crew-actions { gap: 10px; }
.c-btn { min-height: 44px; border-radius: 8px; padding: 10px 14px; line-height: 1.4; font-weight: 600; }
.c-btn.primary { background: #b72e35; border-color: #b72e35; color: #fff; }
.c-input { min-width: 0; max-width: 100%; border-radius: 8px; border-color: var(--border-strong); background-color: var(--surface); color: var(--text); }
select.c-input { appearance: none; -webkit-appearance: none; height: 46px; padding: 0 38px 0 12px; line-height: normal; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238894a3' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.crew-tabs { background: var(--surface); border-color: var(--border-strong); }
.crew-tabs a.on { color: var(--brand); }
.crew-panel, [data-theme="light"] .crew-panel { background: var(--surface); backdrop-filter: none; padding: 24px; }
.crew-public .crew-wrap { max-width: 460px; }
.crew-wrap img, .crew-wrap video { max-width: 100%; }
.crew-wrap pre { max-width: 100%; overflow-x: auto; }
.crew-wrap a { overflow-wrap: anywhere; }
@media (max-width: 480px) {
    .crew-dashboard-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .crew-overview > div { padding-inline: 10px; }
    .crew-overview span { min-height: 36px; }
    .crew-row { padding: 14px; }
    .crew-overview { margin-bottom: 16px; }
    .crew-wrap { padding-top: 16px; }
}
@media (min-width: 1000px) {
    .crew-desktop-nav { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: 244px; padding: 28px 16px 20px; background: var(--surface); border-right: 1px solid var(--border); z-index: 45; overflow-y: auto; }
    .crew-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; text-decoration: none; color: var(--text); font-size: 22px; font-weight: 700; }
    .crew-brand img { width: 34px; height: 34px; object-fit: contain; }
    .crew-brand small { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
    .crew-desktop-account { margin-top: auto; padding: 24px 10px 0; }
    .crew-desktop-account .crew-who { padding: 16px 0; }
    .crew-auth { padding-left: 244px; }
    .crew-auth .crew-top { padding-inline: 28px; height: 68px; }
    .crew-auth #drawer-open { display: none; }
    .crew-auth .crew-wrap { max-width: 1040px; padding: 32px 32px 48px; }
    .crew-auth .crew-tabs { display: none; }
    .crew-dnav a.on { background: var(--brand-soft); color: var(--brand); }
    .crew-clock > .c-btn { width: auto; min-width: 180px; }
}
.crew-clock-shift { display: flex; gap: 16px; align-items: center; }
.crew-clock-shift .crew-row-main { flex: 1; }
.crew-clock-shift .c-btn { width: auto; flex: none; }
.crew-avatar { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 360px) { .crew-clock-shift { align-items: stretch; flex-direction: column; gap: 10px; } }
/* Keep the status area opaque and count each system inset exactly once. */
:root { --crew-safe-top: env(safe-area-inset-top, 0px); --crew-safe-bottom: env(safe-area-inset-bottom, 0px); }
.crew-top, .crew-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 999px) {
    body.crew-auth { padding-top: calc(54px + var(--crew-safe-top)); }
    .crew-auth .crew-top { position: fixed; inset: 0 0 auto; height: calc(54px + var(--crew-safe-top)); padding-top: var(--crew-safe-top); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); background: var(--surface); }
    .crew-tabs { padding-bottom: max(8px, calc(var(--crew-safe-bottom) - 12px)); }
    .crew-tabs a { padding-top: 6px; padding-bottom: 2px; min-height: 48px; }
    body.crew-auth .crew-wrap { padding-bottom: calc(56px + max(8px, calc(var(--crew-safe-bottom) - 12px))); }
}