/* Dark Mode Styles */

/* Override CSS variables for dark mode */
body.dark-mode {
    --background-color: #1a1a2e;
    --surface-color: #16213e;
    --hover-color: #1a4c7c;
    --border-color: #0f3460;
    --text-color: #e8e8e8;
    --text-secondary: #94a3b8;
    --primary-color: #e94560;
    --danger-color: #dc3545;
}

/* Apply dark mode when body has dark-mode class */
body.dark-mode {
    background: #1a1a2e;
}

/* Dashboard */
body.dark-mode .dashboard {
    background: #1a1a2e;
}

/* Header */
body.dark-mode .dashboard-header {
    background: #16213e;
    border-bottom: 1px solid #0f3460;
}

/* Sidebars */
body.dark-mode .sidebar-left,
body.dark-mode .sidebar-right {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .sidebar h2 {
    color: #e8e8e8;
    background: #16213e;
}

/* Main viewbox */
body.dark-mode .viewbox-container {
    background: #1a1a2e;
}

body.dark-mode .viewbox {
    background: #0f0f23;
}

/* SVG grid */
body.dark-mode #grid path {
    stroke: #2a2a4a;
}

/* Control panel */
body.dark-mode .control-panel {
    background: #16213e;
    border-top-color: #0f3460;
}

body.dark-mode .control-group h3 {
    color: #e8e8e8;
}

/* Buttons */
body.dark-mode .btn {
    background: #0f3460;
    color: #e8e8e8;
    border-color: #1a4c7c;
}

body.dark-mode .btn:hover {
    background: #1a4c7c;
}

body.dark-mode .btn-small {
    background: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .btn-small:hover {
    background: #1a4c7c;
}

body.dark-mode .btn-toggle.active {
    background: #e94560;
}

body.dark-mode .btn-danger {
    background: #c0392b;
}

body.dark-mode .btn-danger:hover {
    background: #e74c3c;
}

body.dark-mode .btn-offset.enabled {
    background: #8e44ad;
}

body.dark-mode .btn-offset.enabled:hover {
    background: #9b59b6;
}

/* Item library */
body.dark-mode .library-category {
    background: #0f3460;
}

body.dark-mode .category-header {
    background: #16213e;
    color: #e8e8e8;
}

body.dark-mode .category-header:hover {
    background: #1a4c7c;
}

body.dark-mode .category-items {
    background: transparent;
}

body.dark-mode .library-item {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .library-item:hover {
    background: #0f3460;
    border-color: #1a4c7c;
}

/* Clickable items (vehicles, pallets, packages) */
body.dark-mode .clickable-item {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .clickable-item:hover {
    background: #1a4c7c;
    border-color: #3498db;
}

body.dark-mode .clickable-item .item-label {
    color: #e8e8e8;
}

body.dark-mode .clickable-item .item-dimensions {
    color: #94a3b8;
}

body.dark-mode .clickable-item.vehicle {
    border-color: #3498db;
}

body.dark-mode .clickable-item.pallet {
    border-color: #e67e22;
}

body.dark-mode .clickable-item.package {
    border-color: #2ecc71;
}

body.dark-mode .item-label {
    color: #e8e8e8;
}

body.dark-mode .item-dimensions {
    color: #94a3b8;
}

/* Weight Balance Panel */
body.dark-mode .wb-section {
    background: #0f3460;
}

body.dark-mode .section-header {
    background: #16213e;
    color: #e8e8e8;
}

body.dark-mode .section-header:hover {
    background: #1a4c7c;
}

body.dark-mode .section-content {
    background: #1a1a2e;
    color: #e8e8e8;
}

body.dark-mode .section-content.expanded {
    border-top: 1px solid #0f3460;
}

/* WB Section styling */
body.dark-mode .wb-section {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .section-label {
    color: #e8e8e8;
}

body.dark-mode .section-toggle {
    color: #94a3b8;
}

body.dark-mode .wb-input-group label {
    color: #94a3b8;
}

body.dark-mode .wb-input-group input,
body.dark-mode .wb-input-group select {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .wb-input-group input:focus,
body.dark-mode .wb-input-group select:focus {
    border-color: #e94560;
}

body.dark-mode .cargo-item-entry {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .cargo-item-entry:hover {
    background: #1a4c7c;
}

body.dark-mode .cargo-item-entry.selected {
    border-color: #e94560;
    background: #2a1a3e;
}

/* Popup */
body.dark-mode .item-properties-popup {
    background: #16213e;
    border-color: #0f3460;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .popup-header {
    background: #0f3460;
    border-bottom-color: #1a4c7c;
}

body.dark-mode .popup-title {
    color: #e8e8e8;
}

body.dark-mode .popup-close {
    color: #94a3b8;
}

body.dark-mode .popup-close:hover {
    color: #e94560;
}

body.dark-mode .popup-content {
    background: #16213e;
}

body.dark-mode .popup-row label {
    color: #94a3b8;
}

body.dark-mode .popup-row input {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .popup-row input:focus {
    border-color: #e94560;
}

/* Charts section */
body.dark-mode .charts-header {
    background: #0f3460;
}

body.dark-mode .charts-header:hover {
    background: #1a4c7c;
}

body.dark-mode .charts-content {
    background: #1a1a2e;
}

body.dark-mode .chart-container {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .chart-container h4 {
    color: #e8e8e8;
}

/* Modal */
body.dark-mode .modal-content {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .modal-header {
    background: #0f3460;
    color: #e8e8e8;
    border-bottom-color: #1a4c7c;
}

body.dark-mode .modal-close {
    color: #94a3b8;
}

body.dark-mode .modal-close:hover {
    color: #e94560;
}

body.dark-mode .modal-body {
    color: #e8e8e8;
}

body.dark-mode .tab-btn {
    background: #1a1a2e;
    color: #94a3b8;
    border-color: #0f3460;
}

body.dark-mode .tab-btn:hover {
    background: #0f3460;
}

body.dark-mode .tab-btn.active {
    background: #e94560;
    color: white;
    border-color: #e94560;
}

body.dark-mode .tab-content {
    background: #1a1a2e;
    border-color: #0f3460;
}

body.dark-mode .setting-item label {
    color: #e8e8e8;
}

body.dark-mode .setting-item input,
body.dark-mode .setting-item select {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .setting-item input:focus,
body.dark-mode .setting-item select:focus {
    border-color: #e94560;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #0f3460;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #1a4c7c;
}

/* WB Summary */
body.dark-mode .wb-summary {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .wb-summary-panel {
    background: #0f3460;
}

body.dark-mode .summary-group label {
    color: #94a3b8;
}

body.dark-mode .summary-value {
    color: #e8e8e8;
}

body.dark-mode .summary-item label {
    color: #94a3b8;
}

body.dark-mode .summary-item .value {
    color: #e8e8e8;
}

/* Weight stations */
body.dark-mode .weight-station {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .station-name {
    color: #e8e8e8;
}

body.dark-mode .station-weight,
body.dark-mode .station-arm {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .station-weight:focus,
body.dark-mode .station-arm:focus {
    border-color: #e94560;
}

/* Cargo summary and rows */
body.dark-mode .cargo-summary {
    background: #16213e;
    border-color: #0f3460;
}

body.dark-mode .summary-row span:first-child {
    color: #94a3b8;
}

body.dark-mode .summary-row span:last-child {
    color: #e8e8e8;
}

body.dark-mode .cargo-item-row {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .cargo-item-row:hover {
    background: #1a4c7c;
}

body.dark-mode .cargo-item-row .item-stats {
    color: #94a3b8;
}

/* CG Indicator limits */
body.dark-mode .limit-forward,
body.dark-mode .limit-aft {
    background: #16213e;
    border-color: #0f3460;
    color: #94a3b8;
}

/* Charts */
body.dark-mode .chart-container h4 {
    color: #e8e8e8;
}

/* Status colors remain vibrant in dark mode */
body.dark-mode .status-ok {
    color: #2ecc71;
}

body.dark-mode .status-warning {
    color: #f39c12;
}

body.dark-mode .status-danger {
    color: #e74c3c;
}

/* Text colors */
body.dark-mode p,
body.dark-mode span {
    color: #e8e8e8;
}

body.dark-mode .placeholder {
    color: #94a3b8;
}

/* Fuel mode buttons */
body.dark-mode .fuel-mode-btn {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .fuel-mode-btn:hover {
    background: #1a4c7c;
}

body.dark-mode .fuel-mode-btn.active {
    background: #e94560;
    border-color: #e94560;
    color: white;
}

/* Add station button */
body.dark-mode .add-station {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .add-station:hover {
    background: #1a4c7c;
    border-color: #3498db;
}

/* Global input styling for dark mode */
body.dark-mode input[type="number"],
body.dark-mode input[type="text"] {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode input[type="number"]:focus,
body.dark-mode input[type="text"]:focus {
    border-color: #e94560;
}

/* Global h2 (sidebar headers) */
body.dark-mode h2 {
    background: #0f3460;
    color: #e8e8e8;
}

/* Global h3 (section headers in control panel) */
body.dark-mode h3 {
    color: #e8e8e8;
}

/* General text color */
body.dark-mode {
    color: #e8e8e8;
}

/* Preset tables */
body.dark-mode .preset-table th {
    background: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .preset-table td {
    border-bottom-color: #0f3460;
}

body.dark-mode .preset-table tr:hover {
    background: #1a4c7c;
}

body.dark-mode .preset-table .add-preset-row {
    background: #1a3a5c;
}

body.dark-mode .preset-table .add-preset-row:hover {
    background: #1a4c7c;
}

body.dark-mode .preset-input {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .preset-input:focus {
    border-color: #e94560;
}

body.dark-mode .preset-unit-select {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* Airdrop styles */
body.dark-mode .cargo-item-row.airdrop {
    border-left-color: #f39c12;
}

body.dark-mode .popup-row-checkbox {
    background: #16213e;
    border-top-color: #0f3460;
}

body.dark-mode .popup-row-checkbox .checkbox-label {
    color: #94a3b8;
}

body.dark-mode .popup-row-checkbox span {
    color: #f39c12;
}

/* Passenger grid */
body.dark-mode .pax-grid {
    border-color: #9b59b6;
}

body.dark-mode .pax-grid th {
    background: #7b3fa0;
}

body.dark-mode .pax-grid td {
    border-color: #2a1a3e;
    background: #16213e;
}

body.dark-mode .pax-grid-row-label {
    background: #1a1a2e;
    color: #94a3b8;
}

body.dark-mode .pax-config-row label {
    color: #94a3b8;
}

body.dark-mode .pax-global-input {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .pax-apply-btn {
    background: #8e44ad;
}

body.dark-mode .pax-apply-btn:hover {
    background: #9b59b6;
}

body.dark-mode .pax-clear-btn {
    border-color: #c0392b;
    color: #e74c3c;
}

body.dark-mode .pax-clear-btn:hover {
    background: #2a1520;
}

body.dark-mode .pax-active-summary {
    background: #1a1a2e;
    border-color: #2a1a3e;
}

body.dark-mode .pax-summary-row {
    color: #e8e8e8;
}

body.dark-mode .pax-summary-row span:last-child {
    color: #94a3b8;
}

body.dark-mode .pax-summary-total {
    border-top-color: #2a1a3e;
    color: #bb8fd9;
}

body.dark-mode .popup-info {
    color: #bb8fd9;
    border-top-color: #0f3460;
}

body.dark-mode .popup-value {
    color: #e8e8e8;
}

body.dark-mode .cargo-item-row.passenger-row {
    border-left-color: #9b59b6;
}

/* Passenger section config in W&B panel */
body.dark-mode .passenger-section-config {
    background: #16213e;
    border-color: #0f3460;
    border-left-color: #9b59b6;
}

body.dark-mode .pax-section-header {
    color: #e8e8e8;
}

body.dark-mode .pax-section-rows {
    color: #94a3b8;
}

body.dark-mode .pax-input-row label {
    color: #94a3b8;
}

body.dark-mode .pax-input-row input {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .pax-input-row input:focus {
    border-color: #e94560;
}

body.dark-mode .pax-unit {
    color: #94a3b8;
}

/* Passenger Popup (new) */
body.dark-mode .passenger-popup {
    background: #16213e;
    border-color: #0f3460;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .pax-popup-header {
    background: #7b3fa0;
}

body.dark-mode .pax-popup-content {
    background: #16213e;
}

body.dark-mode .pax-popup-grid th {
    background: #7b3fa0;
}

body.dark-mode .pax-popup-grid td {
    border-color: #0f3460;
}

body.dark-mode .pax-popup-grid .row-label {
    background: #1a1a2e;
    color: #94a3b8;
}

body.dark-mode .pax-cell-btn {
    background: #1a1a2e;
    border-color: #0f3460;
    color: #94a3b8;
}

body.dark-mode .pax-cell-btn:hover {
    border-color: #9b59b6;
    background: #2a1a3e;
}

body.dark-mode .pax-cell-btn[data-state="1"],
body.dark-mode .pax-cell-btn[data-state="2"],
body.dark-mode .pax-cell-btn[data-state="3"] {
    background: #8e44ad;
    border-color: #9b59b6;
    color: white;
}

body.dark-mode .pax-popup-sections {
    border-top-color: #0f3460;
}

body.dark-mode .pax-popup-section {
    background: #1a1a2e;
    border-color: #0f3460;
}

body.dark-mode .pax-popup-section-header {
    color: #bb8fd9;
}

body.dark-mode .pax-popup-input-group label {
    color: #94a3b8;
}

body.dark-mode .pax-popup-input-group input {
    background: #16213e;
    border-color: #0f3460;
    color: #e8e8e8;
}

body.dark-mode .pax-popup-input-group input:focus {
    border-color: #9b59b6;
}

body.dark-mode .pax-popup-actions {
    border-top-color: #0f3460;
}

body.dark-mode .pax-clear-btn {
    background: #16213e;
    border-color: #0f3460;
    color: #94a3b8;
}

body.dark-mode .pax-clear-btn:hover {
    background: #1a1a2e;
    border-color: #0f3460;
}

/* Passenger Section Row (read-only in W&B panel) */
body.dark-mode .passenger-section-row {
    background: #16213e;
    border-color: #9b59b6;
}

body.dark-mode .pax-section-name {
    color: #bb8fd9;
}

body.dark-mode .pax-section-info {
    color: #94a3b8;
}

/* Preview badges */
body.dark-mode .pax-preview-badge {
    background: #2a1a3e;
    color: #bb8fd9;
}

/* Popup unit */
body.dark-mode .popup-unit {
    color: #94a3b8;
}