/* --- LAYOUT & SKELETON --- */
.fleet-check-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 24px;
}
@media (min-width: 1024px) { .fleet-check-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr); } }
.fleet-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.fleet-section-title { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin: 0; padding: 0; border-bottom: none; }
@keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skeleton-line { height: 20px; background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-interactive-hover) 50%, var(--bg-tertiary) 75%); background-size: 200px 100%; border-radius: var(--radius-sm); animation: skeleton-loading 1.5s infinite linear; }
.truck-card-skeleton { display: flex; gap: 16px; align-items: center; background: var(--bg-secondary); padding: 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.skeleton-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background-color: var(--bg-tertiary); animation: skeleton-loading 1.5s infinite linear; }
.skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* --- SESSION BANNER & PROGRESS --- */
.session-banner { display: flex; flex-wrap:wrap; justify-content: space-between; align-items: center; padding: 16px 24px; border-radius: var(--radius-lg); margin-bottom: 12px; border: 1px solid; animation: fadeIn 0.3s ease-out; }
.session-banner span { font-size: 1.1rem; font-weight: 500; margin-right: 16px; flex-grow: 1;}
.session-banner .session-banner-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.session-banner .btn { margin-left: 0; }
.session-banner.status-inactive { background-color: var(--bg-tertiary); border-color: var(--border-secondary); }
.session-banner.status-active { background-color: var(--accent-primary-light); color: var(--text-primary); border-color: var(--accent-primary); }
.session-banner.status-finalized { background-color: var(--bg-success-light); color: var(--text-success); border-color: var(--accent-secondary); }

.session-progress-bar-container {
    margin-bottom: 24px;
    padding: 12px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.session-progress-bar-container .progress-bar-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.session-progress-bar-container .progress-bar-label strong {
    color: var(--accent-primary);
    font-weight: 600;
}
.session-progress-bar-container .progress-bar {
    height: 20px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.session-progress-bar-container .progress-bar-fill {
    height: 100%;
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: width 0.5s ease-out;
}


/* --- FLEET DASHBOARD & CARDS --- */
.fleet-dashboard-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.fleet-filter-controls { display: flex; gap: 8px; background-color: var(--bg-tertiary); padding: 6px; border-radius: var(--radius-md); }
.filter-btn { padding: 6px 14px; border: none; background: transparent; border-radius: var(--radius-sm); font-weight: 500; font-size: var(--font-size-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.filter-btn:hover { color: var(--text-primary); background-color: var(--bg-interactive-hover); }
.filter-btn.active { background-color: var(--bg-secondary); color: var(--accent-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.filter-btn:disabled { opacity: 0.5; cursor: not-allowed; }


.fleet-dashboard { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { 
    .fleet-dashboard { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } 
} 
@media (min-width: 1200px) { 
    .fleet-dashboard { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } 
}


.truck-card { background-color: var(--bg-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-secondary); border-left-width: 5px; transition: all 0.2s ease-in-out; }
.truck-card.checking { opacity: 0.6; pointer-events: none; } 
.truck-card.status-ok { border-left-color: var(--accent-secondary); }
.truck-card.status-issue { border-left-color: var(--accent-warning); }
.truck-card.status-out_of_service { border-left-color: var(--accent-danger); }
.truck-card.status-unchecked { border-left-color: var(--border-interactive); } 
.truck-card.status-pending-check { 
    border-left-color: var(--text-placeholder);
    background-color: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
}
.truck-card.status-partial-check { 
    border-left-color: var(--accent-info);
}
.dark-theme .truck-card.status-pending-check {
    background-color: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
}

.truck-card.overall-status-issue.status-ok, 
.truck-card.overall-status-out_of_service.status-ok { 
    background-color: var(--bg-warning-light); 
}
.dark-theme .truck-card.overall-status-issue.status-ok, 
.dark-theme .truck-card.overall-status-out_of_service.status-ok { 
    background-color: rgba(var(--accent-warning-rgb), 0.1); 
}


.truck-card-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); background-color: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--text-secondary); }
.truck-card.status-ok .truck-card-icon { background-color: var(--bg-success-light); color: var(--text-success); }
.truck-card.status-issue .truck-card-icon, .truck-card.status-out_of_service .truck-card-icon { background-color: var(--bg-danger-light); color: var(--text-danger); }
.truck-card.status-pending-check .truck-card-icon { background-color: var(--border-secondary); }
.truck-card.status-partial-check .truck-card-icon { background-color: var(--bg-info-light); color: var(--text-info); }


.truck-card-info { flex-grow: 1; min-width: 0; }
.truck-card-name { font-weight: 600; font-size: 1.05rem; color: var(--text-primary); display: flex; align-items: center; word-break: break-word; }
.water-logged-indicator, .notes-indicator {
    font-size: 1em; 
    margin-right: 6px;
    line-height: 1;
}
.water-logged-indicator.logged { color: var(--accent-info); } 
.water-logged-indicator.needs-log { color: var(--text-placeholder); opacity: 0.7; } 
.notes-indicator { color: var(--text-placeholder); }

.truck-card-status { margin-top: 4px; font-size: 0.9rem; }
.truck-card-status .status-text { text-transform: capitalize; font-weight: 500; }
.truck-card.status-ok .status-text { color: var(--text-success); }
.truck-card.status-issue .status-text, .truck-card.status-out_of_service .status-text { color: var(--text-danger); }
.truck-card.status-unchecked .status-text { color: var(--text-secondary); }
.truck-card.status-pending-check .status-text, .truck-card.status-partial-check .status-text { color: var(--text-placeholder); font-style: italic; }
.truck-card-status .overall-status-indicator {
    font-size: 0.75rem;
    color: var(--text-placeholder);
    margin-left: 8px;
    font-style: italic;
}


.last-check-info { margin-top: 8px; font-size: 0.8rem; color: var(--text-placeholder); font-style: italic; }

.fleet-card-actions-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-left: 8px; 
    flex-shrink: 0; 
    align-items: stretch; 
} 
.fleet-card-actions-wrapper .btn { 
    width: 100%; 
    text-align: center;
    padding: 8px 10px; 
    font-size: var(--font-size-sm);
    min-height: 38px; 
    position: relative; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
.fleet-card-actions-wrapper .btn .spinner {
    width: 1em; 
    height: 1em;
    border-width: 2px; 
    margin-right: 0.5em;
    vertical-align: middle;
    display: inline-block; 
}

.fleet-card-actions-wrapper .btn .spinner + svg,
.fleet-card-actions-wrapper .btn .spinner + span { 
    margin-left: 0.5em;
}
.fleet-card-actions-wrapper .btn svg:not(:first-child) { 
    margin-right: 0.5em;
}


.fleet-card-actions-wrapper .btn-info .spinner,
.fleet-card-actions-wrapper .btn-success .spinner {
    border-color: rgba(255, 255, 255, 0.5); 
    border-right-color: #fff; 
}
.fleet-card-actions-wrapper .btn-warning-outline .spinner,
.fleet-card-actions-wrapper .btn-secondary .spinner {
     border-color: rgba(0,0,0,0.2); 
     border-right-color: var(--text-primary); 
}
.fleet-card-actions-wrapper .btn-danger .spinner {
    border-color: rgba(255, 255, 255, 0.5);
    border-right-color: #fff;
}


.fleet-card-actions-wrapper .btn svg {
    width: 1em; height: 1em; 
}
.quick-action-btn.btn-info { background-color: var(--accent-info); border-color: var(--accent-info); color: var(--text-on-accent); }
.quick-action-btn.btn-info:hover:not(:disabled) { background-color: var(--accent-info-hover); border-color: var(--accent-info-hover); }
.quick-action-btn.btn-info:disabled { 
    background-color: var(--accent-info) !important; 
    border-color: var(--accent-info) !important;
    color: var(--text-on-accent) !important;
    opacity: 0.6 !important; 
}
.quick-action-btn.btn-success:disabled {
    background-color: var(--accent-secondary) !important;
    border-color: var(--accent-secondary) !important;
    color: var(--text-on-accent) !important;
    opacity: 0.6 !important;
}


.quick-action-btn.btn-warning-outline {
    background-color: transparent;
    border: 1px solid var(--accent-warning);
    color: var(--accent-warning);
}
.quick-action-btn.btn-warning-outline:hover:not(:disabled) {
    background-color: var(--bg-warning-light);
}


.fleet-card-actions-wrapper.hidden { display: none; }

@keyframes flash-success-anim { 0% { box-shadow: var(--shadow-md); } 50% { box-shadow: 0 0 15px 3px var(--accent-secondary), var(--shadow-lg); } 100% { box-shadow: var(--shadow-md); } }
.truck-card.flash-success { animation: flash-success-anim 1s ease-out; }

/* --- LOG FEED & BROWSER --- */
.log-feed-container { background-color: var(--bg-secondary); padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.log-feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.fleet-log-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 450px; overflow-y: auto; }
.log-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background-color: var(--bg-primary); border-left: 3px solid; position: relative;}
.log-item.empty-log { justify-content: center; font-style: italic; color: var(--text-secondary); background: var(--bg-tertiary); border: none; padding: 20px; }
.log-item.status-ok { border-color: var(--accent-secondary); }
.log-item.status-issue { border-color: var(--accent-warning); } 
.log-item.status-out_of_service { border-color: var(--accent-danger); }
.log-item-details { flex-grow: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.9rem;}
.log-item-status { text-transform: capitalize; font-weight: 600; }
.log-item-time { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.log-delete-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.log-item:hover .log-delete-btn {
    opacity: 1;
}
.dark-theme .log-delete-btn {
    color: var(--accent-danger); 
}
.dark-theme .log-delete-btn:hover {
     background-color: rgba(var(--accent-danger-rgb), 0.15);
}

/* --- FLEET STATS CONTAINER --- */
.fleet-stats-container {
    background-color: var(--bg-secondary);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.fleet-stats-content .stat-entry {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}
.fleet-stats-content .stat-entry:last-child {
    border-bottom: none;
}
.fleet-stats-content .stat-label {
    color: var(--text-secondary);
}
.fleet-stats-content .stat-value {
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.fleet-stats-content .stat-value:empty::before {
    content: "N/A";
    color: var(--text-placeholder);
    font-style: italic;
}
.fleet-stats-content .stat-entry:nth-child(odd) .stat-value {
    background-color: var(--bg-tertiary);
}


/* --- FLEET MANAGEMENT PANEL --- */
.fleet-management-panel { padding-top: 16px; }
.fleet-management-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.management-vehicle-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.management-vehicle-item { display: flex; align-items: center; gap: 16px; background-color: var(--bg-secondary); padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.management-vehicle-item.inactive-vehicle { opacity: 0.6; background-color: var(--bg-tertiary); border-left: 5px solid var(--text-placeholder); }
.management-vehicle-info { flex-grow: 1; }
.management-vehicle-info strong { font-size: 1.1rem; }
.management-vehicle-info span { font-size: 0.85rem; color: var(--text-secondary); display: block; }
.management-vehicle-info .vehicle-persistent-notes-summary {
    font-style: italic;
    color: var(--text-placeholder);
    font-size: 0.8rem;
    margin-top: 2px;
}
.management-vehicle-actions { display: flex; gap: 8px; }
.management-vehicle-actions .btn-warning-outline { font-size: var(--font-size-sm); }


/* --- MODAL STYLES --- */
.modal-xlarge .modal-dialog { max-width: 90vw; }
@media(min-width: 992px) { .modal-xlarge .modal-dialog { max-width: 900px; } }
.modal-large .modal-dialog { max-width: 700px; }
.modal-issue-report .modal-dialog { max-width: 500px; }


.perform-check-vehicle-notes {
    background-color: var(--bg-info-light);
    color: var(--text-info);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--accent-info);
    margin-bottom: 16px;
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
}
.perform-check-vehicle-notes strong { font-weight: 600; }

.perform-check-modal-header {
    padding: 8px var(--content-padding) 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
    font-weight: 500;
}
#modalCheckProgress, #modalIssueCount {
    background-color: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
#modalIssueCount.has-issues {
    color: var(--text-on-accent);
    background-color: var(--accent-danger);
}
.perform-check-modal-header .btn-outline-success {
    margin-left: auto; 
}


.perform-check-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 10px;
}

.check-item-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    border-left-width: 4px;
    border-left-color: transparent;
    transition: border-left-color 0.3s ease-out, background-color 0.3s ease-out;
}
.check-item-row.actioned { background-color: var(--bg-tertiary); }
.check-item-row.actioned.status-ok { border-left-color: var(--accent-secondary); }
.check-item-row.actioned.status-issue { border-left-color: var(--accent-warning); }
.check-item-row.actioned.status-out_of_service { border-left-color: var(--accent-danger); }

@media(min-width: 768px) {
    .check-item-row {
        grid-template-columns: minmax(180px, 1fr) 2.5fr;
        align-items: center;
    }
}

.check-item-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.check-item-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media(min-width: 600px) {
    .check-item-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}


.check-item-controls .status-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.check-item-controls .btn-status {
    flex-grow: 1;
    font-size: var(--font-size-sm);
    padding: 8px 12px;
    min-height: 38px;
}
.btn-outline-success { border: 1px solid var(--accent-secondary); color: var(--accent-secondary); background-color: transparent; }
.btn-outline-warning { border: 1px solid var(--accent-warning); color: var(--accent-warning); background-color: transparent; }
.btn-outline-danger { border: 1px solid var(--accent-danger); color: var(--accent-danger); background-color: transparent; }

.btn-outline-success:hover:not(.active):not(:disabled) { background-color: color-mix(in srgb, var(--accent-secondary) 10%, transparent); }
.btn-outline-warning:hover:not(.active):not(:disabled) { background-color: color-mix(in srgb, var(--accent-warning) 10%, transparent); }
.btn-outline-danger:hover:not(.active):not(:disabled) { background-color: color-mix(in srgb, var(--accent-danger) 10%, transparent); }

.btn-status.active { color: var(--text-on-accent) !important; }


.check-item-controls .input-field.compact-input {
    font-size: var(--font-size-sm);
    padding: 8px 10px;
    min-height: 38px;
    flex-grow: 1;
    min-width: 150px;
}
.check-item-controls .notes-input {
    min-height: 60px;
    resize: vertical;
}
.check-item-controls .numeric-input-container {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.check-item-controls .numeric-value-input {
    width: 100px;
    text-align: right;
}

.check-item-controls .timer-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.timer-controls .btn-small svg { width: 14px; height: 14px; margin-right: 4px;}
.timer-controls .btn-very-small svg { width: 12px; height: 12px; margin-right: 0; }
.timer-display, .logged-time {
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-primary);
    background-color: var(--accent-primary-light);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}
.logged-time {
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    font-style: italic;
}


.modal-issue-report .status-buttons {
    display: flex;
    justify-content: space-around; 
    width: 100%;
}
.modal-issue-report .status-buttons .btn-status {
    flex-basis: 48%; 
}


/* Log Browser Modal Styles */
.log-browser-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}
.log-browser-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}
.log-browser-results {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.history-item { 
    background-color: var(--bg-secondary); 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border-secondary); 
    border-left-width: 5px; 
    box-shadow: var(--shadow-sm);
}
.history-item.status-ok { border-left-color: var(--accent-secondary); }
.history-item.status-issue { border-left-color: var(--accent-warning); }
.history-item.status-out_of_service { border-left-color: var(--accent-danger); }

.history-item.session-summary-item .history-item-header {
    font-size: 1.05rem;
    align-items: center;
}
.history-item.session-summary-item .history-item-header span:first-child {
    flex-grow: 1;
}
.history-item.session-summary-item .history-item-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.history-item.session-summary-item .history-item-body p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}


.history-item-header { display: flex; justify-content: space-between; padding: 10px 14px; background-color: var(--bg-tertiary); border-bottom: 1px solid var(--border-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0;}
.history-status { font-weight: 600; text-transform: capitalize; }
.history-time { font-size: 0.85rem; color: var(--text-secondary); }
.history-item-body { padding: 14px; }
.history-notes { margin: 0 0 10px 0; color: var(--text-primary); font-style: italic; white-space: pre-wrap; word-break: break-word; }
.history-user { font-size: 0.85rem; color: var(--text-secondary); text-align: right; }

/* Historical Session Detail View in Modal */
.historical-session-detail-view {
    max-height: calc(60vh - 50px); 
    overflow-y: auto;
}
.detailed-session-checks-table {
    width: 100%;
    border-collapse: collapse;
}
.detailed-session-checks-table th,
.detailed-session-checks-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-secondary);
    font-size: var(--font-size-sm);
    vertical-align: middle;
}
.detailed-session-checks-table th {
    background-color: var(--bg-tertiary);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    position: sticky; 
    top: 0;
    z-index: 1;
}
.detailed-session-checks-table tbody tr:hover {
    background-color: var(--bg-interactive-hover);
}
.detailed-session-checks-table .status-text {
    text-transform: capitalize;
    font-weight: 500;
}
.detailed-session-checks-table tr.status-ok .status-text { color: var(--text-success); }
.detailed-session-checks-table tr.status-issue .status-text,
.detailed-session-checks-table tr.status-out_of_service .status-text { color: var(--text-danger); }
.detailed-session-checks-table .notes-cell {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 300px; 
}
.detailed-session-checks-table .actions-cell-tight {
    text-align: right;
    padding: 6px 8px; 
}
.detailed-session-checks-table .btn-very-small {
    padding: 4px 6px; 
}
.detailed-session-checks-table .btn-very-small svg {
    width: 12px;
    height: 12px;
    margin-right: 0;
}

.empty-state-inline {
display: block; width: 100%;
padding: 18px 22px; margin-top: 16px;
background-color: var(--bg-tertiary);
border: 1px dashed var(--border-primary);
border-radius: var(--radius-md); color: var(--text-secondary);
font-size: var(--font-size-base); text-align: center;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .fleet-card-actions-wrapper {
        flex-direction: row; 
        align-items: center; 
        margin-left: 0; 
        margin-top: 12px; 
        width: 100%;
        justify-content: space-around; 
    }
    .fleet-card-actions-wrapper .btn {
        flex-grow: 1; 
        margin-left: 0 !important;
        min-width: 100px; 
    }
    .fleet-dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }
    .fleet-filter-controls {
        width: 100%;
        justify-content: space-around;
    }
    .session-banner {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
    }
     .session-banner .session-banner-actions {
        width: 100%;
        flex-direction: column;
    }
    .session-banner .btn {
        margin-left: 0;
        width: 100%;
    }
    .log-browser-controls {
        grid-template-columns: 1fr; 
    }
    .detailed-session-checks-table th,
    .detailed-session-checks-table td {
        font-size: 0.8rem;
        padding: 6px 8px;
    }
    .detailed-session-checks-table .notes-cell {
        max-width: 150px;
    }
     .check-item-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .check-item-controls .status-buttons {
        justify-content: space-between;
    }
    .check-item-controls .notes-input, 
    .check-item-controls .numeric-input-container,
    .check-item-controls .timer-controls {
        width: 100%;
    }
}
@media (max-width: 480px) {
    .fleet-dashboard {
        grid-template-columns: 1fr;
    }
     .detailed-session-checks-table .notes-cell {
        max-width: 100px; 
    }
    .detailed-session-checks-table th,
    .detailed-session-checks-table td {
        white-space: normal;
    }
     .modal-xlarge .modal-dialog {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
     .modal-large .modal-dialog {
        max-width: calc(100vw - 20px);
    }
    .fleet-card-actions-wrapper {
        flex-direction: column; 
        align-items: stretch;
    }
    .fleet-card-actions-wrapper .btn {
        width: 100%;
    }
}

.modal-dialog .modal-actions {
    display: flex;
    justify-content: flex-end;
}
.perform-check-modal .modal-actions {
    justify-content: space-between;
}
.perform-check-modal .modal-actions .btn {
    flex-grow: 1;
}
@media (min-width: 600px) {
    .perform-check-modal .modal-actions .btn {
        flex-grow: 0;
    }
}