/* ===== MyMileMargin – Shared Stylesheet ===== */

/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== HEADER ===== */
.app-header {
  background: #16213e;
  padding: 10px 16px;
  border-bottom: 2px solid #0f3460;
  display: flex;
  align-items: center;
  position: relative;
}
.app-header h1 {
  font-size: 18px; color: #e94560; font-weight: 700;
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.app-logo-wrap {
  height: 56px; width: auto; flex-shrink: 0;
  display: flex; align-items: center;
  cursor: pointer; text-decoration: none;
}
.app-logo { height: 260%; width: auto; object-fit: contain; }
.app-logo-placeholder { font-size: 48px; line-height: 1; opacity: 0.6; }
.app-header-spacer { display: none; }

/* ===== MAIN TABS (bottom nav) ===== */
.main-content { flex: 1; overflow-y: auto; padding-bottom: 56px; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #16213e;
  display: flex;
  border-top: 2px solid #0f3460;
  z-index: 10000;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav button {
  flex: 0 0 auto; min-width: 64px; padding: 8px 6px; background: none; border: none;
  color: #7a7a9e; font-size: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: color 0.2s; white-space: nowrap;
}
.bottom-nav button.active { color: #e94560; }
.bottom-nav button .nav-icon { font-size: 18px; }

.tab-page { display: none; }
.tab-page.active { display: flex; flex-direction: column; height: 100%; }

/* ===== SUB TABS (within Revenue) ===== */
.sub-tabs {
  display: flex; background: #16213e;
  border-bottom: 1px solid #0f3460;
}
.sub-tabs button {
  flex: 1; padding: 8px; background: none; border: none;
  color: #7a7a9e; font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.sub-tabs button.active {
  color: #e94560; border-bottom-color: #e94560;
}
.sub-tab-content { display: none; flex: 1; overflow-y: auto; }
.sub-tab-content.active { display: block; }

/* ===== LOAD LIST ===== */
.load-list { padding: 4px 8px; }
.load-list-header {
  display: grid;
  padding: 6px 4px;
  font-size: 10px; font-weight: 700; color: #e94560;
  border-bottom: 1px solid #0f3460;
  background: #16213e;
  position: sticky; top: 0; z-index: 5;
}
.load-row {
  display: grid;
  padding: 4px 4px;
  font-size: 11px;
  border-bottom: 1px solid #0f3460;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.load-row:hover { background: #1f2b4d; }
.load-row.child-row {
  background: #0d1b3e;
  border-left: 3px solid #0f3460;
  padding-left: 5px;
  display: none;
}
.load-row.child-row.expanded { display: grid; }
.load-row.child-row .child-indent { font-size:10px; color:#4a4a6e; }
.load-row.linked-group-summary {
  background: #1a2845;
  border-left: 3px solid #4ecca3;
}
.load-row.linked-group-summary:hover {
  background: #223556;
}
.row-checkbox {
  accent-color: #e94560; width: 15px; height: 15px; cursor: pointer;
}
.expand-arrow {
  background: none; border: none; color: #7a7a9e; font-size: 14px;
  cursor: pointer; padding: 0; width: 26px; text-align: center;
  transition: transform 0.2s, color 0.2s;
}
.expand-arrow:hover { color: #e94560; }
.expand-arrow.open { transform: rotate(90deg); }

/* Link toolbar */
.link-toolbar {
  display: none; padding: 6px 10px;
  background: #0f3460; border-bottom: 1px solid #1a4a8a;
  align-items: center; gap: 8px; justify-content: space-between;
}
.link-toolbar.visible { display: flex; }
.link-toolbar .sel-count { font-size: 12px; color: #b0b0c8; }
.link-toolbar .toolbar-btns { display: flex; gap: 6px; }

/* Search & Sort bar */
.list-controls {
  display: flex; gap: 6px; padding: 6px 8px;
  background: #16213e; border-bottom: 1px solid #0f3460;
  align-items: center; flex-wrap: wrap;
}
.list-controls input[type="text"] {
  flex: 1; min-width: 120px;
  background: #0f3460; border: 1px solid #1a4a8a;
  color: #e0e0e0; padding: 5px 8px; border-radius: 4px;
  font-size: 12px; outline: none;
}
.list-controls input::placeholder { color: #4a4a6e; }
.list-controls select {
  background: #0f3460; border: 1px solid #1a4a8a;
  color: #e0e0e0; padding: 5px 6px; border-radius: 4px;
  font-size: 11px; outline: none;
}
.sort-btn {
  background: none; border: 1px solid #1a4a8a; color: #7a7a9e;
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  font-size: 12px; transition: color 0.2s;
}
.sort-btn:hover { color: #e94560; }

/* Group section headers */
.group-header {
  background: linear-gradient(135deg, #1a3a6a 0%, #16213e 100%);
  border: 1px solid #0f3460; border-left: 3px solid #4ecca3;
  padding: 8px 12px; margin-top: 6px;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 4px;
}
.group-header:first-child { margin-top: 0; }
.group-header .gh-title {
  font-size: 12px; font-weight: 600; color: #4ecca3;
}
.group-header .gh-meta {
  font-size: 10px; color: #7a7a9e;
  display: flex; gap: 10px;
}
.group-header .gh-meta .gh-total {
  color: #e0e0ff; font-weight: 600;
}

/* Scrollable list for wide grid */
.list-scroll-wrapper {
  overflow-x: auto; flex: 1;
}
.load-row .loc-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.load-row .pay-amount { color: #4ecca3; font-weight: 600; }
.load-row .type-badge {
  font-size: 10px; padding: 1px 5px; border-radius: 3px;
  display: inline-block; text-align: center;
}
.badge-load { background: #0f3460; color: #53a8ff; }
.badge-detention { background: #3d1e0f; color: #ffa14e; }
.badge-bonus { background: #1e3d0f; color: #7ef04e; }
.badge-reimburse { background: #3d0f3d; color: #e04ef0; }

.load-list-totals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 8px 12px;
  background: #16213e;
  border-top: 2px solid #0f3460;
  font-size: 12px;
  position: sticky; bottom: 0;
}
.total-item { text-align: center; }
.total-item .label { color: #7a7a9e; font-size: 10px; }
.total-item .value { color: #4ecca3; font-weight: 700; font-size: 14px; }

/* ===== ADD ENTRY FORM ===== */
.entry-form { padding: 10px 12px; }
.form-row {
  display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-end;
}
.form-group { display: flex; flex-direction: column; flex: 1; }
.form-group label {
  font-size: 10px; color: #7a7a9e; margin-bottom: 2px;
  text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: #0f3460; border: 1px solid #1a4a8a;
  color: #e0e0e0; padding: 6px 8px; border-radius: 4px;
  font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus { border-color: #e94560; }
.form-group input::placeholder { color: #4a4a6e; }

/* Checkbox row */
.checkbox-row {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; padding: 4px 0;
}
.checkbox-row input[type="checkbox"] {
  accent-color: #e94560; width: 16px; height: 16px;
}
.checkbox-row label { font-size: 12px; color: #b0b0c8; cursor: pointer; }

/* Mileage split section */
.mileage-split { display: none; }
.mileage-split.visible { display: block; }
.split-section {
  background: #0d1b3e; border: 1px solid #1a3a6a;
  border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;
}
.split-section h4 {
  font-size: 11px; color: #7a7a9e; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Pay type dependent sections */
.pay-section { display: none; }
.pay-section.visible { display: block; }

/* Buttons */
.btn {
  padding: 8px 16px; border: none; border-radius: 5px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.btn-primary { background: #e94560; color: #fff; }
.btn-primary:hover { background: #d63550; }
.btn-secondary { background: #0f3460; color: #e0e0e0; }
.btn-secondary:hover { background: #1a4a8a; }
.btn-danger { background: #7a1a1a; color: #ff8a8a; }
.btn-danger:hover { background: #9a2a2a; }
.form-actions {
  display: flex; gap: 8px; margin-top: 4px; justify-content: flex-end;
}

/* Empty state */
.empty-state {
  text-align: center; padding: 40px 20px; color: #4a4a6e;
}
.empty-state .icon { font-size: 36px; margin-bottom: 8px; }
.empty-state p { font-size: 13px; }

/* Overview placeholder */
.placeholder-content {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; color: #4a4a6e; text-align: center; padding: 40px;
}
.placeholder-content .icon { font-size: 48px; margin-bottom: 12px; }
.placeholder-content h2 { font-size: 16px; margin-bottom: 4px; color: #7a7a9e; }
.placeholder-content p { font-size: 12px; }

/* Overview Tabs (browser-style) */
.overview-wrap { display: flex; flex-direction: column; height: 100%; }
.ov-tab-bar {
  display: flex; background: #16213e; border-bottom: 2px solid #0f3460;
  overflow-x: auto; flex-shrink: 0;
}
.ov-tab-btn {
  flex: 1; min-width: 0; padding: 10px 6px; border: none; background: transparent;
  color: #7a7a9e; font-size: 12px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s;
  white-space: nowrap; text-align: center;
}
.ov-tab-btn:hover { color: #e0e0e0; background: rgba(233,69,96,0.06); }
.ov-tab-btn.active { color: #e94560; border-bottom-color: #e94560; background: rgba(233,69,96,0.08); }
.ov-tab-panel { display: none; flex: 1; overflow-y: auto; padding: 10px 12px; }
.ov-tab-panel.active { display: block; }
.ov-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #0f3460; font-size: 13px; }
.ov-row:last-child { border-bottom: none; }
.ov-label { color: #7a7a9e; }
.ov-value { color: #e0e0e0; font-weight: 600; }
.ov-value.green { color: #4ecca3; }
.ov-value.red { color: #e94560; }
.ov-divider { font-size: 11px; color: #4a4a6e; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 4px; }
.ov-date-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.ov-date-row input[type="date"] { flex: 1; min-width: 120px; background: #1a1a2e; border: 1px solid #0f3460; color: #e0e0e0; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.ov-date-row button { background: #e94560; border: none; color: #fff; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.ov-date-row button.secondary { background: #0f3460; }
.ov-big-num { font-size: 22px; font-weight: 700; color: #4ecca3; text-align: center; margin: 8px 0; }
.ov-big-num.red { color: #e94560; }
.chart-wrap { position: relative; height: 200px; margin-top: 6px; }
.chart-wrap-sm { position: relative; height: 180px; margin-top: 6px; }
.chart-hdr { display:flex; align-items:center; justify-content:space-between; margin:14px 0 6px; }
.chart-hdr-title { font-size:11px; color:#7a7a9e; text-transform:uppercase; letter-spacing:.8px; }
.ct-btns { display:flex; gap:2px; background:#0f3460; border-radius:6px; padding:2px; }
.ct-btn { background:transparent; border:none; color:#7a7a9e; font-size:11px; padding:3px 10px; border-radius:4px; cursor:pointer; transition:all .15s; }
.ct-btn.active { background:#1a1a2e; color:#e0e0e0; font-weight:600; }

/* Settlements */
.settlement-card { background:#16213e; padding:14px; border-radius:6px; margin-bottom:10px; cursor:pointer; border-left:3px solid #0f3460; transition: border-color .2s, background .2s; }
.settlement-card:hover { border-left-color:#4ecca3; background:#1a2a50; }
.settlement-card.correct { border-left-color:#4ecca3; }
.settlement-card.incorrect { border-left-color:#e94560; }
.settlement-badge { display:inline-block; font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
.settlement-badge.correct { background:rgba(78,204,163,0.15); color:#4ecca3; }
.settlement-badge.incorrect { background:rgba(233,69,96,0.15); color:#e94560; }
.settlement-badge.pending { background:rgba(122,122,158,0.15); color:#7a7a9e; }
#settlementModal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.78); z-index:2000; overflow-y:auto; padding:16px 12px; box-sizing:border-box; }
#settlementModalInner { background:#1a1a2e; border-radius:10px; max-width:580px; margin:0 auto; overflow:hidden; border:1px solid #0f3460; }
.settle-modal-header { background:#0f3460; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.settle-section { padding:14px 16px; border-bottom:1px solid #0f3460; }
.settle-section:last-child { border-bottom:none; }
.settle-section-title { color:#7a7a9e; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.settle-load-row { background:#0f3460; padding:10px 12px; border-radius:4px; margin-bottom:6px; }
.settle-exp-row { background:#0f3460; padding:10px 12px; border-radius:4px; margin-bottom:6px; border-left:3px solid #e94560; }
.settle-accuracy-btn { padding:8px 24px; border-radius:6px; border:1px solid #0f3460; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.settle-accuracy-btn.yes { background:rgba(78,204,163,0.1); color:#4ecca3; border-color:#4ecca3; }
.settle-accuracy-btn.yes.active, .settle-accuracy-btn.yes:hover { background:#4ecca3; color:#1a1a2e; }
.settle-accuracy-btn.no { background:rgba(233,69,96,0.1); color:#e94560; border-color:#e94560; }
.settle-accuracy-btn.no.active, .settle-accuracy-btn.no:hover { background:#e94560; color:#fff; }

/* Scrollable list wrapper */
.list-wrapper {
  flex: 1; overflow-y: auto;
}

/* Entry detail modal / expand */
.entry-detail-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 200;
  justify-content: center; align-items: center;
}
.entry-detail-overlay.active { display: flex; }
.entry-detail-card {
  background: #1a1a2e; border: 1px solid #0f3460;
  border-radius: 10px; padding: 16px; width: 90%; max-width: 400px;
  max-height: 80vh; overflow-y: auto;
}
.detail-row {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid #0f3460;
  font-size: 12px;
}
.detail-row .dl { color: #7a7a9e; }
.detail-row .dv { color: #e0e0e0; font-weight: 600; }
.detail-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }

/* Section divider */
.section-divider {
  font-size: 11px; color: #e94560; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 0 4px; border-bottom: 1px solid #0f3460;
  margin-bottom: 8px;
}
.info-tip:hover .info-tip-popup,
.info-tip.show .info-tip-popup { display: block !important; }

/* ===== ACCOUNT TAB ===== */
.account-sub-tabs { display: flex; background: #16213e; border-bottom: 1px solid #0f3460; }
.account-sub-tabs button { flex: 1; padding: 8px; background: none; border: none; color: #7a7a9e; font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.account-sub-tabs button.active { color: #e94560; border-bottom-color: #e94560; }
.acct-sub { overflow-y: auto; }

.profile-card { background: #16213e; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.profile-card .pf-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #0f3460; font-size: 12px; }
.profile-card .pf-row:last-child { border-bottom: none; }
.profile-card .pf-label { color: #7a7a9e; }
.profile-card .pf-value { color: #e0e0e0; font-weight: 600; }

/* ===== EXPENSES TAB ===== */
.cat-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.cat-chip {
  padding: 5px 10px; border-radius: 14px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1px solid #0f3460; background: #0f3460; color: #7a7a9e;
  transition: all 0.2s; white-space: nowrap;
}
.cat-chip.selected { background: #e94560; color: #fff; border-color: #e94560; }
.cat-chip.add-chip { border-style: dashed; color: #4ecca3; border-color: #4ecca3; }
.cat-chip.add-chip:hover { background: #1a3a2e; }
.cat-chip .remove-cat {
  margin-left: 4px; color: #ff8a8a; font-weight: 700; cursor: pointer;
  font-size: 13px;
}

/* Category Dropdown Styles */
.cat-selector-wrap {
  position: relative; display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
}
.cat-selector {
  flex: 1; position: relative;
}
.cat-selector input {
  width: 100%;
  padding: 8px 12px;
  background: #0f3460;
  border: 1px solid #0f3460;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
}
.cat-selector input:focus {
  outline: none;
  border-color: #e94560;
  background: #16213e;
}
.cat-selector input::placeholder {
  color: #7a7a9e;
}
.cat-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #16213e;
  border: 1px solid #0f3460;
  border-radius: 6px;
  margin-top: 4px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: none;
}
.cat-dropdown.visible {
  display: block;
}
.cat-dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  color: #e0e0e0;
  font-size: 13px;
  transition: background 0.15s;
  border-bottom: 1px solid #0f3460;
}
.cat-dropdown-item:last-child {
  border-bottom: none;
}
.cat-dropdown-item:hover {
  background: #0f3460;
}
.cat-dropdown-item.selected {
  background: #e94560;
  color: #fff;
}
.cat-dropdown-item.new-entry {
  color: #4ecca3;
  font-weight: 600;
}
.cat-dropdown-item.new-entry:hover {
  background: #1a3a2e;
}
.cat-manage-btn {
  padding: 8px 12px;
  background: #0f3460;
  border: 1px solid #0f3460;
  border-radius: 6px;
  color: #7a7a9e;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}
.cat-manage-btn:hover {
  background: #16213e;
  color: #4ecca3;
  border-color: #4ecca3;
}

.img-upload-area {
  border: 2px dashed #0f3460; border-radius: 8px;
  padding: 16px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: #4a4a6e; font-size: 12px;
}
.img-upload-area:hover { border-color: #e94560; background: #1a1a3e; }
.img-preview {
  position: relative; display: inline-block; margin-top: 8px;
}
.img-preview img {
  max-width: 100%; max-height: 180px; border-radius: 6px;
  border: 1px solid #0f3460;
}
.img-preview .remove-img {
  position: absolute; top: -6px; right: -6px;
  background: #e94560; color: #fff; border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Fuel-specific fields */
.fuel-fields {
  display: none; background: #0d1b3e;
  border: 1px solid #1a3a6a; border-radius: 6px;
  padding: 10px; margin-bottom: 8px;
}
.fuel-fields.visible { display: block; }
.fuel-fields h4 {
  font-size: 11px; color: #ffa14e; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* Address autocomplete suggestions */
.address-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #16213e; border: 1px solid #1a3a6a; border-top: none;
  border-radius: 0 0 6px 6px; z-index: 9999; max-height: 200px;
  overflow-y: auto; display: none;
}
.address-suggestions.visible { display: block; }
.address-suggestions .sug-item {
  padding: 8px 10px; font-size: 12px; color: #c0c0e0;
  cursor: pointer; border-bottom: 1px solid #0f3460;
}
.address-suggestions .sug-item:hover {
  background: #0f3460; color: #fff;
}
.address-suggestions .sug-item small {
  display: block; font-size: 10px; color: #7a7a9e; margin-top: 2px;
}

.fuel-savings {
  background: #1a3a2e; border: 1px solid #2a5a3e; border-radius: 6px;
  padding: 8px 10px; margin-top: 6px; text-align: center;
}
.fuel-savings .sav-label { font-size: 10px; color: #7a7a9e; }
.fuel-savings .sav-amount { font-size: 16px; font-weight: 700; color: #4ecca3; }

.exp-row {
  display: grid;
  grid-template-columns: 62px 1fr 70px 26px;
  padding: 8px;
  border-bottom: 1px solid #0f3460;
  align-items: center; cursor: pointer;
  transition: background 0.15s; font-size: 12px;
}
.exp-row:hover { background: #1f2b4d; }
.exp-row .exp-cat-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: #0f3460; color: #53a8ff; display: inline-block;
}
.exp-row .exp-amount { color: #ff6b6b; font-weight: 700; }
.exp-row .exp-note {
  font-size: 10px; color: #7a7a9e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exp-row .exp-receipt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ecca3; display: inline-block;
}
.exp-list-header {
  display: grid;
  grid-template-columns: 62px 1fr 70px 26px;
  padding: 6px 8px; font-size: 10px; font-weight: 700; color: #e94560;
  border-bottom: 1px solid #0f3460;
  background: #16213e; position: sticky; top: 0; z-index: 5;
}

/* Fuel Map Styles */
#fuelMapContainer {
  width: 100%; height: calc(100vh - 150px);
  border-radius: 8px; overflow: hidden;
  min-height: 200px;
}
.fuel-map-controls {
  display: flex; gap: 8px; padding: 8px 12px;
  align-items: center; flex-wrap: wrap;
}
.fuel-map-controls select, .fuel-map-controls input {
  background: #0f3460; border: 1px solid #1a4a8a;
  color: #e0e0e0; padding: 6px 8px; border-radius: 6px;
  font-size: 12px; outline: none;
}
.fuel-map-controls button {
  padding: 6px 14px; background: #e94560; color: #fff;
  border: none; border-radius: 6px; font-size: 12px;
  cursor: pointer;
}
.fuel-map-controls button.secondary {
  background: #0f3460; border: 1px solid #1a4a8a;
}
.fuel-popup { font-size: 13px; color: #1a1a2e; max-width: 280px; }
.fuel-popup .fp-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.fuel-popup .fp-addr { color: #555; font-size: 11px; margin-bottom: 6px; }
.fuel-popup .fp-row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; border-bottom: 1px solid #eee; }
.fuel-popup .fp-row:last-child { border-bottom: none; }
.fuel-popup .fp-label { color: #666; }
.fuel-popup .fp-val { font-weight: 600; }
.fuel-popup .fp-good { color: #2e7d32; }
.fuel-popup .fp-divider { border-top: 1px solid #ccc; margin: 6px 0; }
.fuel-popup .fp-history-title { font-weight: 600; font-size: 12px; margin-bottom: 4px; color: #333; }
.fuel-popup .fp-hist-item { font-size: 11px; padding: 3px 0; border-bottom: 1px dotted #ddd; }
.map-layer-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  background: #16213e; border-radius: 8px; padding: 4px;
  display: flex; gap: 2px; border: 1px solid #0f3460;
}
.map-layer-toggle button {
  padding: 5px 10px; border: none; border-radius: 6px;
  background: transparent; color: #7a7a9e; font-size: 11px;
  cursor: pointer; transition: all 0.2s;
}
.map-layer-toggle button.active {
  background: #e94560; color: #fff;
}

.period-preview {
  background: #16213e; border-radius: 8px; padding: 10px 12px;
  font-size: 12px;
}
.period-preview .pp-row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
}
.period-preview .pp-label { color: #7a7a9e; }
.period-preview .pp-value { color: #4ecca3; font-weight: 600; }

/* Customize menu items */
.settings-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px; background: #16213e; border-radius: 6px;
  margin-bottom: 6px; cursor: pointer;
  border: 1px solid #0f3460; transition: background 0.15s;
}
.settings-menu-item:hover { background: #1f2b4d; }
.settings-menu-item .smi-left { display: flex; align-items: center; gap: 10px; }
.settings-menu-item .smi-icon { font-size: 20px; }
.settings-menu-item .smi-label { font-size: 13px; font-weight: 600; }
.settings-menu-item .smi-desc { font-size: 10px; color: #7a7a9e; }
.settings-menu-item .smi-arrow { color: #7a7a9e; font-size: 16px; }

.cust-back-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #0f3460;
  border-bottom: 1px solid #1a4a8a;
  cursor: pointer; font-size: 13px; color: #e94560;
  font-weight: 600; transition: background 0.15s;
}
.cust-back-bar:hover { background: #1a4a8a; }
.cust-back-bar .back-arrow { font-size: 16px; }

/* Customize checkboxes */
.customize-list {
  list-style: none; padding: 0;
}
.customize-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #16213e; border-radius: 6px;
  margin-bottom: 6px; cursor: pointer;
  border: 1px solid #0f3460;
  transition: background 0.15s;
}
.customize-list li:hover { background: #1f2b4d; }
.customize-list li input[type="checkbox"] {
  accent-color: #e94560; width: 18px; height: 18px; cursor: pointer;
}
.customize-list li .col-label { font-size: 13px; font-weight: 600; }
.customize-list li .col-desc { font-size: 10px; color: #7a7a9e; }

/* Import/Export Modal */
.ie-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.75); z-index:300;
  justify-content:center; align-items:center;
}
.ie-overlay.active { display:flex; }
.ie-card {
  background:#1a1a2e; border:1px solid #0f3460;
  border-radius:12px; padding:20px; width:90%; max-width:360px;
}
.ie-card h3 { margin:0 0 14px; color:#e0e0ff; font-size:16px; text-align:center; }
.ie-option {
  display:flex; align-items:center; gap:10px;
  padding:12px; margin:6px 0; border-radius:8px;
  background:#16213e; border:1px solid #0f3460;
  cursor:pointer; transition:all .2s;
}
.ie-option:hover:not(.ie-disabled) { border-color:#4ecca3; background:#1a2a4e; }
.ie-option.ie-disabled { opacity:0.35; cursor:not-allowed; }
.ie-option .ie-icon { font-size:22px; }
.ie-option .ie-text { flex:1; }
.ie-option .ie-title { font-size:13px; color:#e0e0ff; font-weight:600; }
.ie-option .ie-desc { font-size:10px; color:#7a7a9e; margin-top:2px; }
.ie-option .ie-badge {
  font-size:9px; padding:2px 6px; border-radius:4px;
  background:#0f3460; color:#7a7a9e;
}
.ie-option:not(.ie-disabled) .ie-badge { background:#4ecca320; color:#4ecca3; }
.ie-close {
  display:block; margin:14px auto 0; padding:8px 24px;
  background:#0f3460; border:1px solid #1a4a8a; color:#7a7a9e;
  border-radius:6px; cursor:pointer; font-size:12px;
}
.ie-close:hover { color:#e0e0ff; }
.ie-result {
  margin-top:12px; padding:10px; border-radius:6px;
  font-size:12px; text-align:center; display:none;
}
.ie-result.success { display:block; background:#4ecca320; color:#4ecca3; border:1px solid #4ecca340; }
.ie-result.error { display:block; background:#e9456020; color:#e94560; border:1px solid #e9456040; }

/* Auth UI Styles */
.auth-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 8px 16px; background: #0f3460; border-bottom: 1px solid #1a4a8a;
  font-size: 12px;
}
.auth-bar.authed { background: #1a4a8a; }
.auth-user-info {
  display: flex; align-items: center; gap: 8px; color: #4ecca3; font-weight: 600;
}
.auth-user-avatar {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #4ecca3;
}
.auth-btn {
  background: #4ecca3; color: #0f3460; border: none; padding: 6px 12px;
  border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: background 0.2s;
}
.auth-btn:hover { background: #6ee7ba; }
.auth-btn.logout {
  background: #e94560; color: white;
}
.auth-btn.logout:hover { background: #ff5a73; }
#g_id_onload { display: none; }

/* Login Modal */
.login-modal {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8); z-index: 99999;
  align-items: center; justify-content: center;
}
.login-modal.active { display: flex; }
.login-card {
  background: #16213e; border: 1px solid #0f3460; border-radius: 12px;
  padding: 32px; width: 90%; max-width: 400px; text-align: center;
  position: relative;
}
.login-card h2 { color: #e94560; margin-bottom: 16px; font-size: 20px; }
.login-card p { color: #7a7a9e; margin-bottom: 24px; font-size: 13px; }
.google-signin-button { margin: 16px 0; }
.login-card-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: #7a7a9e;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.login-card-close:hover { color: #e0e0e0; }

/* Dev Notice Banner */
.dev-notice {
  background: linear-gradient(135deg, #1a2a1a, #0f2a3a);
  border-bottom: 2px solid #4ecca3;
  color: #4ecca3; font-size: 12px; font-weight: 600;
  text-align: center; padding: 8px 16px; flex-shrink: 0;
}
.dev-notice a { color: #e94560; text-decoration: underline; cursor: pointer; }

/* News Tab */
.news-card {
  background: #16213e; border-radius: 8px; padding: 14px 16px;
  margin-bottom: 10px; border-left: 3px solid #4ecca3;
}
.news-card .news-meta { font-size: 10px; color: #7a7a9e; margin-bottom: 4px; }
.news-card .news-title { font-size: 14px; font-weight: 700; color: #e0e0e0; margin-bottom: 8px; }
.news-card .news-body { font-size: 12px; color: #a0a0c0; line-height: 1.65; }

/* ===== Bridge Map page ===== */
#toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: #16213e;
  border-bottom: 1px solid #0f3460; flex-shrink: 0;
}
#toolbar h1 { font-size: 16px; color: #4ecca3; white-space: nowrap; }
label.file-btn {
  background: #4ecca3; color: #0f3460; font-weight: 700;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; white-space: nowrap;
}
label.file-btn:hover { background: #6ee7ba; }
#fileInput { display: none; }
#stats { font-size: 12px; color: #7a7a9e; margin-left: auto;
         display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%;
       display: inline-block; margin-right: 3px; vertical-align: middle; }
#map { flex: 1; }
.bp { font-size: 12px; line-height: 1.7; min-width: 230px; }
.bp-name { font-weight: 700; font-size: 13px; margin-bottom: 6px;
           border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.bp-row { display: flex; justify-content: space-between; gap: 10px; }
.bp-lbl { color: #666; flex-shrink: 0; }
.c-g { color: #2a9d6a; font-weight: 600; }
.c-f { color: #c98000; font-weight: 600; }
.c-p { color: #c0392b; font-weight: 600; }
#layerToggle {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  display: flex; gap: 4px; background: #16213e;
  border: 1px solid #0f3460; border-radius: 8px; padding: 4px;
}
#layerToggle button {
  padding: 5px 12px; border: none; border-radius: 6px;
  background: transparent; color: #7a7a9e;
  font-size: 11px; cursor: pointer; transition: all 0.2s;
}
#layerToggle button.active { background: #e94560; color: #fff; }

/* Responsive tweaks */
@media (max-width: 400px) {
  .load-list-header, .load-row {
    font-size: 9px;
    padding: 3px 2px;
  }
}

/* ===========================================================================
   LIGHT MODE
   =========================================================================== */
body:not(.dark-mode) { background: #f0f8f8; color: #1a2e2e; }
body:not(.dark-mode) .app-header { background: linear-gradient(135deg, #007a7a, #009999); border-bottom-color: #006060; }
body:not(.dark-mode) .app-header h1 { color: #ffffff; }
body:not(.dark-mode) .auth-bar { background: #006060; border-bottom-color: #004d4d; }
body:not(.dark-mode) .auth-bar.authed { background: #005050; }
body:not(.dark-mode) .auth-user-info { color: #bbffee; }
body:not(.dark-mode) #authSignIn .auth-btn { background: #4ecca3; color: #003333; }
body:not(.dark-mode) .bottom-nav { background: linear-gradient(90deg, #006666 0%, #008080 50%, #006666 100%); border-top-color: #004d4d; }
body:not(.dark-mode) .bottom-nav button { color: rgba(255,255,255,0.55); }
body:not(.dark-mode) .bottom-nav button.active { color: #ffffff; }
body:not(.dark-mode) .bottom-nav button:nth-child(even) { background: rgba(0,0,0,0.09); }
body:not(.dark-mode) .sub-tabs { background: #e4f3f3; border-bottom-color: #b0d8d8; }
body:not(.dark-mode) .sub-tabs button { color: #557777; }
body:not(.dark-mode) .sub-tabs button.active { color: #007a7a; border-bottom-color: #007a7a; }
body:not(.dark-mode) .account-sub-tabs { background: #e4f3f3; border-bottom-color: #b0d8d8; }
body:not(.dark-mode) .account-sub-tabs button { color: #557777; }
body:not(.dark-mode) .account-sub-tabs button.active { color: #007a7a; border-bottom-color: #007a7a; }
body:not(.dark-mode) .ov-tab-bar { background: #e4f3f3; border-bottom-color: #b0d8d8; }
body:not(.dark-mode) .ov-tab-btn { color: #557777; }
body:not(.dark-mode) .ov-tab-btn.active { color: #007a7a; border-bottom-color: #007a7a; background: rgba(0,122,122,0.08); }
body:not(.dark-mode) .ov-tab-btn:hover { color: #005f5f; }
body:not(.dark-mode) .settlement-card,
body:not(.dark-mode) .profile-card,
body:not(.dark-mode) .news-card,
body:not(.dark-mode) .period-preview,
body:not(.dark-mode) .settings-menu-item,
body:not(.dark-mode) .customize-list li,
body:not(.dark-mode) .entry-detail-card,
body:not(.dark-mode) .ie-card,
body:not(.dark-mode) .ie-option { background: #ffffff; border-color: #c0dede; color: #1a2e2e; }
body:not(.dark-mode) .load-list-totals,
body:not(.dark-mode) .list-controls,
body:not(.dark-mode) .exp-list-header,
body:not(.dark-mode) .load-list-header { background: #e4f3f3; border-color: #b0d8d8; }
body:not(.dark-mode) .load-list-header { color: #007a7a; }
body:not(.dark-mode) .exp-list-header { color: #007a7a; }
body:not(.dark-mode) .total-item .value { color: #007a7a; }
body:not(.dark-mode) .settlement-card:hover,
body:not(.dark-mode) .settings-menu-item:hover,
body:not(.dark-mode) .customize-list li:hover { background: #e4f3f3; }
body:not(.dark-mode) .ie-option:hover:not(.ie-disabled) { background: #e4f3f3; border-color: #007a7a; }
body:not(.dark-mode) .ov-label,
body:not(.dark-mode) .total-item .label,
body:not(.dark-mode) .form-group label,
body:not(.dark-mode) .settings-menu-item .smi-desc,
body:not(.dark-mode) .settings-menu-item .smi-arrow,
body:not(.dark-mode) .profile-card .pf-label,
body:not(.dark-mode) .period-preview .pp-label,
body:not(.dark-mode) .detail-row .dl,
body:not(.dark-mode) .ov-divider,
body:not(.dark-mode) .ie-option .ie-desc,
body:not(.dark-mode) .customize-list li .col-desc,
body:not(.dark-mode) .gh-meta,
body:not(.dark-mode) .exp-row .exp-note,
body:not(.dark-mode) .news-card .news-meta { color: #668888; }
body:not(.dark-mode) .ov-value { color: #1a2e2e; }
body:not(.dark-mode) .ov-value.green,
body:not(.dark-mode) .ov-big-num,
body:not(.dark-mode) .period-preview .pp-value,
body:not(.dark-mode) .load-row .pay-amount,
body:not(.dark-mode) .gh-title { color: #007a7a; }
body:not(.dark-mode) .section-divider { color: #007a7a; border-bottom-color: #b0d8d8; }
body:not(.dark-mode) .news-card .news-title,
body:not(.dark-mode) .profile-card .pf-value,
body:not(.dark-mode) .detail-row .dv,
body:not(.dark-mode) .ie-option .ie-title,
body:not(.dark-mode) .ie-card h3,
body:not(.dark-mode) .customize-list li .col-label,
body:not(.dark-mode) .gh-meta .gh-total { color: #1a2e2e; }
body:not(.dark-mode) .news-card .news-body { color: #445566; }
body:not(.dark-mode) .exp-row .exp-amount { color: #cc2244; }
body:not(.dark-mode) .empty-state { color: #99aaaa; }
body:not(.dark-mode) .load-row { border-bottom-color: #d0e8e8; color: #1a2e2e; }
body:not(.dark-mode) .load-row:hover { background: #e4f3f3; }
body:not(.dark-mode) .load-row.child-row { background: #f4fbfb; border-left-color: #a0d0d0; }
body:not(.dark-mode) .load-row.linked-group-summary { background: #e0f8f0; border-left-color: #007a7a; }
body:not(.dark-mode) .load-row.linked-group-summary:hover { background: #d0f0e8; }
body:not(.dark-mode) .exp-row { border-bottom-color: #d0e8e8; color: #1a2e2e; }
body:not(.dark-mode) .exp-row:hover { background: #e4f3f3; }
body:not(.dark-mode) .exp-row .exp-cat-badge { background: #e0f0f0; color: #007a7a; }
body:not(.dark-mode) .ov-row { border-bottom-color: #d0e8e8; }
body:not(.dark-mode) .detail-row { border-bottom-color: #d0e8e8; }
body:not(.dark-mode) .profile-card .pf-row { border-bottom-color: #d0e8e8; }
body:not(.dark-mode) .form-group input,
body:not(.dark-mode) .form-group select,
body:not(.dark-mode) .form-group textarea,
body:not(.dark-mode) .list-controls input[type="text"],
body:not(.dark-mode) .list-controls select,
body:not(.dark-mode) .ov-date-row input[type="date"],
body:not(.dark-mode) .fuel-map-controls select,
body:not(.dark-mode) .fuel-map-controls input,
body:not(.dark-mode) #fbMessage { background: #f4fbfb; border-color: #b0d0d0; color: #1a2e2e; }
body:not(.dark-mode) .form-group input:focus,
body:not(.dark-mode) .form-group select:focus { border-color: #007a7a; }
body:not(.dark-mode) .form-group input::placeholder,
body:not(.dark-mode) .list-controls input::placeholder { color: #99aaaa; }
body:not(.dark-mode) .cat-selector input { background: #f4fbfb; border-color: #b0d0d0; color: #1a2e2e; }
body:not(.dark-mode) .cat-selector input:focus { background: #ffffff; border-color: #007a7a; }
body:not(.dark-mode) .cat-selector input::placeholder { color: #99aaaa; }
body:not(.dark-mode) .cat-dropdown { background: #ffffff; border-color: #b0d0d0; }
body:not(.dark-mode) .cat-dropdown-item { color: #1a2e2e; border-bottom-color: #e8f4f4; }
body:not(.dark-mode) .cat-dropdown-item:hover { background: #e4f3f3; }
body:not(.dark-mode) .cat-dropdown-item.new-entry { color: #007a7a; }
body:not(.dark-mode) .address-suggestions { background: #ffffff; border-color: #b0d0d0; }
body:not(.dark-mode) .address-suggestions .sug-item { color: #1a2e2e; border-bottom-color: #e8f4f4; }
body:not(.dark-mode) .address-suggestions .sug-item:hover { background: #e4f3f3; color: #1a2e2e; }
body:not(.dark-mode) .address-suggestions .sug-item small { color: #668888; }
body:not(.dark-mode) .btn-primary { background: #007a7a; }
body:not(.dark-mode) .btn-primary:hover { background: #006060; }
body:not(.dark-mode) .btn-secondary { background: #e4f3f3; color: #1a2e2e; border: 1px solid #b0d0d0; }
body:not(.dark-mode) .fuel-map-controls button { background: #007a7a; }
body:not(.dark-mode) .fuel-map-controls button.secondary { background: #e4f3f3; border-color: #b0d0d0; color: #1a2e2e; }
body:not(.dark-mode) .expand-arrow { color: #99aaaa; }
body:not(.dark-mode) .expand-arrow:hover { color: #007a7a; }
body:not(.dark-mode) .cat-chip { background: #e4f3f3; border-color: #b0d0d0; color: #557777; }
body:not(.dark-mode) .cat-chip.selected { background: #007a7a; color: #fff; border-color: #007a7a; }
body:not(.dark-mode) .cat-chip.add-chip { color: #007a7a; border-color: #007a7a; }
body:not(.dark-mode) .cat-chip.add-chip:hover { background: #d0eee8; }
body:not(.dark-mode) .cust-back-bar { background: #e4f3f3; border-bottom-color: #b0d8d8; color: #007a7a; }
body:not(.dark-mode) .cust-back-bar:hover { background: #d0e8e8; }
body:not(.dark-mode) .link-toolbar { background: #d0e8e8; border-bottom-color: #a0c8c8; }
body:not(.dark-mode) .link-toolbar .sel-count { color: #445566; }
body:not(.dark-mode) .group-header { background: linear-gradient(135deg, #d8f0f0 0%, #e4f3f3 100%); border-color: #b0d8d8; border-left-color: #007a7a; }
body:not(.dark-mode) #settlementModalInner { background: #ffffff; border-color: #b0d0d0; }
body:not(.dark-mode) .settle-modal-header { background: #e4f3f3; }
body:not(.dark-mode) .settle-section { border-bottom-color: #d0e8e8; }
body:not(.dark-mode) .settle-load-row,
body:not(.dark-mode) .settle-exp-row { background: #e4f3f3; }
body:not(.dark-mode) .settlement-badge.correct { background: rgba(0,122,122,0.12); color: #007a7a; }
body:not(.dark-mode) .dev-notice { background: linear-gradient(135deg, #e8f8ef, #e0f4f8); border-bottom-color: #007a7a; color: #007a7a; }
body:not(.dark-mode) .dev-notice a { color: #e94560; }
body:not(.dark-mode) .login-card { background: #ffffff; border-color: #b0d0d0; }
body:not(.dark-mode) .login-card h2 { color: #007a7a; }
body:not(.dark-mode) .login-card p { color: #668888; }
body:not(.dark-mode) .login-card-close { color: #99aaaa; }
body:not(.dark-mode) .login-card-close:hover { color: #1a2e2e; }
body:not(.dark-mode) .ie-close { background: #e4f3f3; border-color: #b0d0d0; color: #668888; }
body:not(.dark-mode) .ie-close:hover { color: #1a2e2e; }
body:not(.dark-mode) .ie-option .ie-badge { background: #e4f3f3; color: #668888; }
body:not(.dark-mode) .split-section { background: #f4fbfb; border-color: #b0d0d0; }
body:not(.dark-mode) .split-section h4 { color: #668888; }
body:not(.dark-mode) .fuel-savings { background: #e0f8f0; border-color: #a0ddd0; }
body:not(.dark-mode) .map-layer-toggle { background: #ffffff; border-color: #b0d8d8; }
body:not(.dark-mode) .map-layer-toggle button { color: #668888; }
body:not(.dark-mode) .map-layer-toggle button.active { background: #007a7a; color: #fff; }
body:not(.dark-mode) .ct-btns { background: #e0eee8; }
body:not(.dark-mode) .ct-btn { color: #668888; }
body:not(.dark-mode) .ct-btn.active { background: #ffffff; color: #1a2e2e; }
body:not(.dark-mode) .chart-hdr-title { color: #668888; }
body:not(.dark-mode) .checkbox-row label { color: #445566; }
body:not(.dark-mode) .badge-load { background: #e0f0f0; color: #007a7a; }
body:not(.dark-mode) .img-upload-area { border-color: #b0d0d0; color: #99aaaa; }
body:not(.dark-mode) .img-upload-area:hover { border-color: #007a7a; background: #e4f3f3; }