/* ===== BASE RESETS ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ===== WEEKLY REVENUE FLIP CARD ===== */
.rev-flip-container {
    perspective: 600px;
    height: 100%;
}
.rev-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.rev-flip-container.flipped .rev-flip-inner {
    transform: rotateY(180deg);
}
.rev-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.rev-flip-back {
    transform: rotateY(180deg);
}

/* ===== MODAL ANIMATIONS ===== */
.fade-in { animation: fadeIn 0.15s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pop-in { animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes popIn { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ===== DETAIL SHELL (matches Sales Pipeline sp.html) ===== */
.detail-shell {
    width: 1010px;
    max-width: calc(100vw - 54px);
    height: 652px;
    max-height: calc(100vh - 54px);
}
@media (max-width: 1180px) {
    .detail-shell { width: 980px; max-width: calc(100vw - 30px); height: 644px; max-height: calc(100vh - 30px); }
}
@media (max-width: 1024px) {
    .detail-shell { width: 960px; max-width: calc(100vw - 22px); height: 640px; max-height: calc(100vh - 22px); }
}
@media (max-width: 820px) {
    .detail-shell { width: calc(100vw - 14px); max-width: calc(100vw - 14px); height: calc(100vh - 14px); max-height: calc(100vh - 14px); }
}

/* ===== REPORT ACCORDION ===== */
.report-section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    overflow: hidden;
}
.report-section.open .report-section-body {
    grid-template-rows: 1fr;
}
.report-section-body > div {
    overflow: hidden;
}
.report-section-chevron {
    transition: transform 0.25s ease;
}
.report-section.open .report-section-chevron {
    transform: rotate(180deg);
}

/* ===== TANK GAUGES ===== */
.tank-track {
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    height: 10px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
}
.dark .tank-track {
    background: rgba(255,255,255,0.1);
    border: none;
}
.tank-fill {
    height: 100%;
    width: 0%;
    transition: width 1s ease-out;
}

/* ===== BAR ANIMATIONS ===== */
#rev-billed-bar,
#rev-out-bar,
#season-bar {
    transition: width 1s ease-out;
}

/* ===== JOB CARD CLICK ===== */
.job-card {
    transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.2s, box-shadow 0.2s;
}
.job-card:active {
    transform: scale(0.97);
    opacity: 0.8;
}
.job-card-click {
    transform: scale(0.97) !important;
    opacity: 0.8 !important;
}
.tank-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(90deg, transparent, transparent 19%, rgba(0,0,0,0.1) 20%);
    pointer-events: none;
}

/* ===== GAUGE ANIMATION ===== */
.gauge-fill {
    transition: stroke-dashoffset 1s ease-out;
}

/* ===== FOCUS MODE — trucks only, everything else collapses ===== */
body.focus-mode #dashboard-header {
    display: none !important;
}
body.focus-mode #sidebar-target {
    display: none !important;
}
body.focus-mode #main-layout-grid {
    grid-template-columns: 1fr !important;
}
body.focus-mode #right-sidebar {
    display: none !important;
}
body.focus-mode #truck-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* ===== PINNED SLOT (collapses when empty) ===== */
.pinned-slot {
    padding: 12px 12px 0;
}
.pinned-slot:empty {
    padding: 0;
}

/* ===== CARD ENTRANCE ANIMATION ===== */
.card-enter {
    animation: cardEnter 0.7s ease-in-out both;
}
@keyframes cardEnter {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* ===== ACTIVE JOB CARD (in_progress) ===== */
.active-job-card {
    position: relative;
    border: 2px solid #2d6a23;
    background: #fff;
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.3s ease;
    box-shadow:
        0 0 0 1px rgba(45, 106, 35, 0.1),
        0 4px 20px rgba(45, 106, 35, 0.15),
        0 1px 3px rgba(0,0,0,0.08);
}
.dark .active-job-card {
    border: 2px solid #10b981;
    background: rgba(255,255,255,0.04);
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.08),
        0 4px 24px rgba(16, 185, 129, 0.14),
        0 1px 3px rgba(0,0,0,0.3);
}
.active-job-card:active,
.active-job-card.job-card-click {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
}

/* Photo hero area */
.active-job-photo-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #1a1d21;
}
.active-job-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
.active-job-photo-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0.45) 100%
    );
    pointer-events: none;
}
/* Glass reflection overlay */
.active-job-photo-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.06) 30%,
            transparent 50%,
            rgba(255,255,255,0.02) 70%,
            rgba(255,255,255,0.08) 100%
        );
    /* subtle edge highlight like glass bevel */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.dark .active-job-photo-glass {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0.03) 30%,
            transparent 50%,
            rgba(255,255,255,0.01) 70%,
            rgba(255,255,255,0.05) 100%
        );
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* LIVE badge — top left */
.active-job-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 6px;
    background: rgba(45, 106, 35, 0.94);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dark .active-job-live-badge {
    background: rgba(16, 185, 129, 0.88);
}
.active-job-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
    50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(255,255,255,0); }
}

/* Timer pill — top right */
.active-job-timer {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Price overlay — bottom right of photo */
.active-job-price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Info section below photo */
.active-job-info {
    padding: 8px 10px 10px;
}

/* (left accent bar removed per user request) */

/* ===== ACTIVITY CARDS (travel, lunch, gas) ===== */
.activity-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.activity-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    z-index: 2;
}

/* Pulsing dot — matches LIVE badge pattern */
.activity-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Travel — blue (in-motion) */
.activity-card-traveling {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    animation: travelGlow 2.5s ease-in-out infinite;
}
.activity-card-traveling::before { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.activity-card-traveling .activity-icon-circle { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.activity-card-traveling .activity-accent-text { color: #2563eb; }
.activity-card-traveling .activity-timer-pill { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.activity-card-traveling .activity-pulse-dot { background: #3b82f6; animation: dotPulseBlue 1.5s ease-in-out infinite; }
.activity-card-traveling .activity-card-divider { border-color: rgba(59, 130, 246, 0.15); }
/* Road dashes — subtle animated lines at bottom of card */
.activity-card-traveling::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(59,130,246,0.18) 0px, rgba(59,130,246,0.18) 8px, transparent 8px, transparent 16px);
    border-radius: 1px;
    animation: roadScroll 1.2s linear infinite;
}
.dark .activity-card-traveling {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(30,58,138,0.08) 100%);
    border-color: rgba(96, 165, 250, 0.18);
    animation: travelGlowDark 2.5s ease-in-out infinite;
}
.dark .activity-card-traveling .activity-icon-circle { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.dark .activity-card-traveling .activity-accent-text { color: #93bbfd; }
.dark .activity-card-traveling .activity-timer-pill { background: rgba(96, 165, 250, 0.12); color: #bfdbfe; }
.dark .activity-card-traveling .activity-pulse-dot { background: #60a5fa; }
.dark .activity-card-traveling::after {
    background: repeating-linear-gradient(90deg, rgba(96,165,250,0.12) 0px, rgba(96,165,250,0.12) 8px, transparent 8px, transparent 16px);
}

@keyframes travelGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 2px 8px rgba(59, 130, 246, 0.08); }
    50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.06), 0 4px 20px rgba(59, 130, 246, 0.14); }
}
@keyframes travelGlowDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0), 0 2px 8px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.08), 0 4px 20px rgba(96, 165, 250, 0.1); }
}
@keyframes dotPulseBlue {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
}
@keyframes roadScroll {
    0% { background-position: 0 0; }
    100% { background-position: -16px 0; }
}
/* Subtle truck sway — gentle side-to-side like driving */
.travel-truck-icon {
    animation: truckSway 2s ease-in-out infinite;
}
@keyframes truckSway {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(1px) translateY(-0.5px); }
    75% { transform: translateX(-1px) translateY(0.5px); }
}

/* Lunch — purple */
.activity-card-lunch {
    background: #faf5ff;
    border: 1px solid rgba(139, 92, 246, 0.2);
    animation: lunchGlow 2.5s ease-in-out infinite;
}
.activity-card-lunch::before { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }
.activity-card-lunch .activity-icon-circle { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.activity-card-lunch .activity-accent-text { color: #7c3aed; }
.activity-card-lunch .activity-timer-pill { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.activity-card-lunch .activity-pulse-dot { background: #8b5cf6; animation: dotPulsePurple 1.5s ease-in-out infinite; }
.activity-card-lunch .activity-card-divider { border-color: rgba(139, 92, 246, 0.15); }
.dark .activity-card-lunch {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(167, 139, 250, 0.15);
    animation: lunchGlowDark 2.5s ease-in-out infinite;
}
.dark .activity-card-lunch .activity-icon-circle { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }
.dark .activity-card-lunch .activity-accent-text { color: #c4b5fd; }
.dark .activity-card-lunch .activity-timer-pill { background: rgba(167, 139, 250, 0.12); color: #ddd6fe; }
.dark .activity-card-lunch .activity-pulse-dot { background: #a78bfa; }

@keyframes lunchGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), 0 2px 8px rgba(139, 92, 246, 0.08); }
    50% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06), 0 4px 20px rgba(139, 92, 246, 0.14); }
}
@keyframes lunchGlowDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0), 0 2px 8px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.08), 0 4px 20px rgba(167, 139, 250, 0.1); }
}
@keyframes dotPulsePurple {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0); }
}

/* Gas — yellow */
.activity-card-gas {
    background: #fefce8;
    border: 1px solid rgba(234, 179, 8, 0.25);
    animation: gasGlow 2.5s ease-in-out infinite;
}
.activity-card-gas::before { background: linear-gradient(180deg, #eab308, #ca8a04); }
.activity-card-gas .activity-icon-circle { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.activity-card-gas .activity-accent-text { color: #a16207; }
.activity-card-gas .activity-timer-pill { background: rgba(234, 179, 8, 0.12); color: #854d0e; }
.activity-card-gas .activity-pulse-dot { background: #eab308; animation: dotPulseYellow 1.5s ease-in-out infinite; }
.activity-card-gas .activity-card-divider { border-color: rgba(234, 179, 8, 0.15); }
.dark .activity-card-gas {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(250, 204, 21, 0.15);
    animation: gasGlowDark 2.5s ease-in-out infinite;
}
.dark .activity-card-gas .activity-icon-circle { background: rgba(250, 204, 21, 0.15); color: #facc15; }
.dark .activity-card-gas .activity-accent-text { color: #fef08a; }
.dark .activity-card-gas .activity-timer-pill { background: rgba(250, 204, 21, 0.12); color: #fef9c3; }
.dark .activity-card-gas .activity-pulse-dot { background: #facc15; }

@keyframes gasGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0), 0 2px 8px rgba(234, 179, 8, 0.08); }
    50% { box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.06), 0 4px 20px rgba(234, 179, 8, 0.14); }
}
@keyframes gasGlowDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0), 0 2px 8px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08), 0 4px 20px rgba(250, 204, 21, 0.1); }
}
@keyframes dotPulseYellow {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0); }
}

/* ===== LIVE FEED AREA ===== */
.live-feed-area {
    border-top: 1px solid rgba(0,0,0,0.06);
    background:
        linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.03) 50%, transparent 100%);
}
.live-feed-area::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.2), transparent);
    animation: feedScan 4s ease-in-out infinite;
}
.dark .live-feed-area {
    border-top-color: rgba(255,255,255,0.04);
    background:
        linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.04) 50%, transparent 100%);
}
.dark .live-feed-area::after {
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.15), transparent);
}
@keyframes feedScan {
    0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
    50% { opacity: 1; transform: scaleX(1); }
}

/* ===== ALERT PULSE ===== */
#alert-pulse {
    position: relative;
    min-height: 2.5rem;
}
#alert-pulse .pulse-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#alert-pulse .pulse-item.active {
    opacity: 1;
}
/* Chime flash — brief glow on the alert badge when sound plays */
@keyframes chimeFlash {
    0%   { box-shadow: 0 0 0 0 currentColor; filter: brightness(1); }
    30%  { box-shadow: 0 0 8px 2px currentColor; filter: brightness(1.3); }
    100% { box-shadow: 0 0 0 0 currentColor; filter: brightness(1); }
}
.chime-flash {
    animation: chimeFlash 1.2s ease-out;
}

/* Search highlight — pulse ring around a matched job card */
@keyframes searchHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(59, 128, 48, 0.5); }
    40%  { box-shadow: 0 0 0 6px rgba(59, 128, 48, 0.25); }
    70%  { box-shadow: 0 0 0 6px rgba(59, 128, 48, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(59, 128, 48, 0); }
}
html.dark .search-highlight {
    animation: searchHighlightDark 2s ease-out;
}
@keyframes searchHighlightDark {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
    40%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3); }
    70%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.search-highlight {
    animation: searchHighlight 2s ease-out;
}

/* ===== CREW CARD FLIP ===== */
.crew-flap-card {
    perspective: 800px;
    cursor: pointer;
}
.crew-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-style: preserve-3d;
}
.crew-flap-card.flipped .crew-flip-inner {
    transform: rotateX(-180deg);
}
.crew-flip-front,
.crew-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}
.crew-flip-back {
    transform: rotateX(180deg);
}

/* ===== ALERT DETAIL SLIDE ===== */
.alert-detail-slide {
    transform: translateY(8px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    pointer-events: none;
}
.alert-detail-slide.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ===== ALERT HISTORY DRAWER ===== */
.alert-drawer {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.alert-drawer.open {
    transform: translateX(0);
}
.alert-drawer-backdrop {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.alert-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== COMMS BADGE PULSE ===== */
.comms-badge {
    animation: commsPulse 3s ease-in-out infinite;
}
@keyframes commsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0); }
}

/* ===== QUICK REPLY PANEL ===== */
.quick-reply-panel {
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.15s ease;
    pointer-events: none;
}
.quick-reply-panel.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ===== CREW AVATAR ===== */
.crew-avatar {
    font-variant-numeric: normal;
    text-rendering: optimizeLegibility;
}

/* ===== YESTERDAY COMPARISON ===== */
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}
.kpi-delta-up { color: #15803d; }
.kpi-delta-down { color: #b91c1c; }
.dark .kpi-delta-up { color: #4ade80; }
.dark .kpi-delta-down { color: #f87171; }
.kpi-delta-label {
    color: #a8a29e;
    font-weight: 500;
    margin-left: 1px;
}
.dark .kpi-delta-label { color: #64748b; }

/* ===== MUTE TOGGLE ===== */
.mute-btn {
    transition: color 0.2s ease, background-color 0.2s ease;
}
.mute-btn:hover {
    background-color: rgba(0,0,0,0.06);
}
.dark .mute-btn:hover {
    background-color: rgba(255,255,255,0.06);
}

/* ===== MORNING BRIEFING ===== */
.briefing-overlay {
    animation: briefingFadeIn 0.5s ease-out forwards;
}
@keyframes briefingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.briefing-card {
    animation: briefingSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
    opacity: 0;
    transform: translateY(20px);
}
@keyframes briefingSlideUp {
    to { opacity: 1; transform: translateY(0); }
}
.briefing-stat {
    animation: briefingStat 0.4s ease-out forwards;
    opacity: 0;
    transform: scale(0.9);
}
@keyframes briefingStat {
    to { opacity: 1; transform: scale(1); }
}

/* ===== ALERT HISTORY ITEM ENTER ===== */
.history-item {
    transition: background-color 0.15s ease;
}
.history-item:hover {
    background-color: rgba(0,0,0,0.03);
}
.dark .history-item:hover {
    background-color: rgba(255,255,255,0.03);
}

/* ==========================================================
   iPAD RESPONSIVE OVERRIDES
   Targets touch-primary devices at tablet size (iPad).
   Desktop is completely unaffected.
   The toggle lives INSIDE #dashboard-header so it travels
   with the sticky header and stays accessible when collapsed.
   ========================================================== */

/* Solid cover over safe-area zone — prevents scroll content showing above header */
body.is-ipad::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #f2f1eb;
    z-index: 25;
    pointer-events: none;
}
.dark body.is-ipad::after {
    background: #0f1115;
}

/* ---- Make iPad page scrollable ---- */
body.is-ipad main {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 0.75rem !important;
    gap: 0.5rem !important;
}

/* ---- Sticky header ---- */
body.is-ipad #dashboard-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: #f2f1eb !important;
    padding-bottom: 6px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.75rem) !important;
    gap: 0.75rem !important;
    overflow: visible !important;
    height: auto !important;
    flex-shrink: 0 !important;
    /* Extend background past main's side padding so nothing peeks through */
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
body.is-ipad:is(.dark) #dashboard-header,
body.is-ipad #dashboard-header:is(.dark *) {
    background: #0f1115 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* ---- Landscape: narrower crew column → more room for KPIs ---- */
@media (min-width: 1024px) {
    body.is-ipad #dashboard-header {
        grid-template-columns: 1fr 310px !important;
    }
}

/* KPI grid: keep 6 columns, ultra-compact to save vertical space */
body.is-ipad #dashboard-header > div:first-child > div:first-child {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* KPI cells: ultra-compact for single-row 6-col */
body.is-ipad #dashboard-header .grid > div {
    padding: 0.375rem 0.375rem !important;
}
body.is-ipad #dashboard-header .grid {
    padding-left: 0.5rem !important;
}
/* KPI labels: smaller */
body.is-ipad #dashboard-header .text-xs {
    font-size: 0.6rem !important;
    margin-bottom: 0.125rem !important;
}
body.is-ipad #dashboard-header .text-xs svg {
    width: 0.7rem !important;
    height: 0.7rem !important;
}
/* KPI values: compact */
body.is-ipad #dashboard-header .text-xl {
    font-size: 0.9375rem !important;
}

/* Alert feed area */
body.is-ipad .live-feed-area {
    padding: 0.5rem 0.75rem !important;
}
/* Larger touch targets on iPad: mute, history, crew expand */
body.is-ipad #alert-mute-btn,
body.is-ipad #alert-history-btn {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.5rem;
}
body.is-ipad #alert-mute-btn svg,
body.is-ipad #alert-history-btn svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}
/* All expand icons (crew status, fleet activity, tank levels) */
body.is-ipad .group svg.ml-auto,
body.is-ipad #crew-details-btn .flex svg:last-child {
    width: 1rem !important;
    height: 1rem !important;
}
/* Live feed: pill on top line, message wraps below on iPad */
body.is-ipad #alert-pulse {
    min-height: 3.25rem;
}
body.is-ipad #alert-pulse .pulse-item {
    align-items: flex-start;
}
body.is-ipad .alert-feed-row {
    flex-wrap: wrap !important;
    gap: 0.25rem 0.625rem !important;
}
body.is-ipad .alert-feed-msg {
    flex-basis: 100% !important;
}

/* Crew status: 4 rows visible, scrollable on iOS */
body.is-ipad #operators-list {
    height: 160px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overflow-y: auto !important;
}
/* Hide "from yesterday" label on iPad — too cramped */
body.is-ipad .kpi-delta-label {
    display: none !important;
}
body.is-ipad #dashboard-header .h-12 {
    height: 2.5rem !important;
}
/* Crew rows: fit in narrower column */
body.is-ipad #operators-list > div {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 11px !important;
}
body.is-ipad #operators-list > div > div:first-child {
    width: 80px !important;
}
body.is-ipad #operators-list > div > div:last-child {
    width: 60px !important;
}

/* ---- Content: natural height so page scrolls ---- */
body.is-ipad #workspace-content {
    flex: none !important;
    min-height: auto !important;
    overflow: visible !important;
    gap: 0.5rem !important;
}

/* Command bar: thinner, with breathing room below */
body.is-ipad #workspace-content > div:first-child {
    height: 2.5rem !important;
    margin-bottom: 0.25rem !important;
}
/* Sidebar toggle: align with header border (account for safe-area) */
body.is-ipad .sidebar-toggle-edge {
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
}
body.is-ipad #workspace-content > div:first-child .grid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 0.75rem !important;
}
body.is-ipad #workspace-content > div:first-child h2 {
    font-size: 0.9375rem !important;
}
/* Wind widget tighter */
body.is-ipad #workspace-content > div:first-child .absolute {
    padding: 0.125rem 0.5rem !important;
    gap: 0.375rem !important;
}

/* ---- Truck grid: all content flows naturally, page scrolls ---- */
body.is-ipad #truck-grid {
    flex: none !important;
    height: auto !important;
    gap: 0.75rem !important;
    overflow: visible !important;
}
/* All columns: natural height, no clipping */
body.is-ipad #truck-grid > div {
    height: auto !important;
    overflow: visible !important;
}
/* Job lists: show all cards, no internal scroll */
body.is-ipad #truck-grid [id^="list-col-"] {
    flex: none !important;
    overflow: visible !important;
}
/* Sidebar */
body.is-ipad #right-sidebar {
    gap: 0.5rem !important;
}

/* Truck headers: compact single-row on iPad */
body.is-ipad #truck-grid [id^="header-col-"] {
    height: 2.75rem !important;
    padding: 0 0.5rem !important;
    gap: 0.25rem !important;
}
body.is-ipad .truck-vehicle { display: none !important; }
body.is-ipad .truck-crew-name { font-size: 12px !important; white-space: nowrap !important; }
body.is-ipad #truck-grid [id^="header-col-"] > div:first-child { gap: 0.375rem !important; }
body.is-ipad #truck-grid [id^="header-col-"] > div:first-child > div:first-child { width: 1.5rem !important; height: 1.5rem !important; font-size: 9px !important; border-radius: 0.25rem !important; }
body.is-ipad #truck-grid [id^="header-col-"] .text-right { font-size: 9px !important; }
body.is-ipad #truck-grid [id^="header-col-"] .text-right .w-16 { width: 2.5rem !important; }

/* Focus mode: taller active cards + safe area on iPad */
body.focus-mode .active-job-photo-wrap {
    height: 220px !important;
}
body.is-ipad.focus-mode main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
}

/* Job card lists: tighter spacing */
body.is-ipad #truck-grid [id^="list-col-"] {
    padding: 0.5rem !important;
}
body.is-ipad #truck-grid [id^="list-col-"] > * + * {
    margin-top: 0.5rem !important;
}

/* Top widgets row (gauge + revenue) shorter */
body.is-ipad #right-sidebar > div:first-child {
    height: 115px !important;
    gap: 0.5rem !important;
}
/* Sidebar card padding */
body.is-ipad #right-sidebar > div {
    padding: 0.5rem !important;
}

/* ---- iPad portrait (< 1024px) ---- */
@media (pointer: coarse) and (max-width: 1023px) {
    body.is-ipad #dashboard-header {
        height: auto !important;
        grid-template-columns: 1fr !important;
    }
    body.is-ipad #operators-list {
        height: 100px !important;
    }
    body.is-ipad #truck-grid {
        grid-template-columns: 1fr 1fr !important;
        height: auto !important;
        flex: none !important;
    }
    body.is-ipad #truck-grid > div:nth-child(1),
    body.is-ipad #truck-grid > div:nth-child(2) {
        height: auto !important;
    }
    body.is-ipad #right-sidebar {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        height: auto !important;
        overflow: visible !important;
    }
    body.is-ipad #right-sidebar > * {
        flex: 1 1 auto !important;
        min-width: 180px !important;
    }
    body.is-ipad #right-sidebar > div:first-child {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}