/* ==========================================================================
   Fleet Manager Design System & Custom Properties
   ========================================================================== */

/* Droid Sans Mono — self-hosted, since this font was removed from Google
   Fonts and is no longer loadable via the standard CDN link. Chosen
   specifically because its zero (0) is a plain oval with no dot or slash
   through it, unlike JetBrains Mono / IBM Plex Mono / most other coding
   monospace fonts, which deliberately mark the zero to distinguish it
   from the letter O. See design/fonts/LICENSE.txt for attribution. */
@font-face {
  font-family: 'Droid Sans Mono';
  src: url('fonts/DroidSansMono.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark Mode (Default) */
  --bg-primary: #0a0d14;
  --bg-secondary: #111722;
  --bg-tertiary: #182030;
  --bg-elevated: #1e293b;
  --bg-input: #0f1623;
  --bg-input-focus: #141e30;

  --border-subtle: #1e293b;
  --border-normal: #2a374f;
  --border-focus: #3b82f6;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-disabled: #475569;

  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.2);

  --accent-orange: #f97316;
  --accent-green: #10b981;
  --accent-green-bg: rgba(16, 185, 129, 0.12);
  --accent-red: #ef4444;
  --accent-red-bg: rgba(239, 68, 68, 0.12);
  --accent-amber: #f59e0b;
  --accent-amber-bg: rgba(245, 158, 11, 0.15);
  --accent-purple: #8b5cf6;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Droid Sans Mono', monospace;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #f8fafc;

  --border-subtle: #e2e8f0;
  --border-normal: #cbd5e1;
  --border-focus: #2563eb;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;

  --accent-primary: #2563eb;
  --accent-primary-hover: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.12);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

/* Base Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Ambient glow accents */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.glow-1 {
  width: 450px;
  height: 450px;
  top: -100px;
  right: -50px;
  background: radial-gradient(circle, #3b82f6, transparent 70%);
}
.glow-2 {
  width: 400px;
  height: 400px;
  bottom: 50px;
  left: -80px;
  background: radial-gradient(circle, #f97316, transparent 70%);
  opacity: 0.15;
}

/* Live Pulse Dot Indicators */
.live-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  position: relative;
  margin-right: 4px;
}
.live-pulse-dot::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.4);
  animation: pulseRipple 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.live-pulse-dot.large {
  width: 12px;
  height: 12px;
}
.live-pulse-dot.large::after {
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
}

.live-pulse-dot.holding {
  background-color: #f59e0b;
}
.live-pulse-dot.holding::after {
  background-color: rgba(245, 158, 11, 0.45);
}

@keyframes pulseRipple {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.status-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* TP No. Generated Live Badge Preview */
.tp-badge-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}
.tp-label {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.tp-val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: #60a5fa;
  letter-spacing: 0.04em;
}

/* Header Navigation */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background-color: rgba(17, 23, 34, 0.88);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition-normal);
}
[data-theme="light"] .app-header {
  background-color: rgba(255, 255, 255, 0.9);
}

.header-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.brand-text h1 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.sub-badge {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Navigation Tabs */
.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-tertiary);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-btn:hover {
  color: var(--text-primary);
}

.nav-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.count-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.count-pill.live {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.nav-btn.active .count-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }
[data-theme="light"] .sun-icon { display: none; }
[data-theme="light"] .moon-icon { display: block; }

/* Main Layout & Panels */
.app-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  min-width: 0;
  padding: 1.5rem;
  padding-top: calc(1.5rem + 78px); /* clears the now-fixed .app-topbar's height */
}

.view-panel {
  display: none;
  animation: fadeIn 0.2s ease;
}
.view-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.layout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}

/* Fleet Filter Pills */
.fleet-filter-pills {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
  margin-bottom: 0.25rem;
}
.pill-filter-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 700;
  font-family: var(--font-main);
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pill-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.pill-filter-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #ffffff;
}

/* Vehicle Lock Alert & Status Pills */
.vehicle-lock-alert {
  display: flex;
  gap: 1rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-left: 4px solid var(--accent-amber);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.alert-icon { font-size: 1.3rem; }
.alert-content h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-amber);
  margin-bottom: 0.2rem;
}
.alert-content p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}
.alert-actions {
  display: flex;
  gap: 0.5rem;
}

.vehicle-status-pill {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  margin-left: 0.5rem;
}
.vehicle-status-pill.idle {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.vehicle-status-pill.busy {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

/* Section Cards & Form Inputs */
.section-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}
.section-card:hover {
  border-color: var(--border-normal);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}
.trip-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.expense-icon { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.account-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.section-header h2 {
  font-size: 1.02rem;
  font-weight: 700;
}
.section-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.expense-subheading {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0.9rem 0 0.55rem 0;
  padding-left: 0.35rem;
  border-left: 3px solid var(--accent-primary);
}

/* Grids */
.fields-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.fields-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.fields-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
}
.form-group.full-width {
  grid-column: 1 / -1;
}

.field-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}
.req {
  color: var(--accent-red);
  margin-left: 2px;
}
.field-hint {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  display: block;
  line-height: 1.3;
}

.input-wrapper,
.currency-input-wrapper,
.custom-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-main);
  font-size: 0.82rem;
  background-color: var(--bg-input);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus);
  background-color: var(--bg-input-focus);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

input.is-invalid,
select.is-invalid {
  border-color: var(--accent-red) !important;
  box-shadow: 0 0 0 2px var(--accent-red-bg) !important;
}

/* Division/Company locked to the selected vehicle — looks intentionally
   "fixed" (not just visually identical to a normal editable field) but
   isn't grayed out like a disabled input, since the value inside it is
   still valid and meaningful, just not directly editable right now. */
select.field-locked-by-vehicle {
  cursor: not-allowed;
  background-color: var(--bg-tertiary);
  border-color: var(--border-subtle);
  border-left: 3px solid var(--accent-primary);
}
select.field-locked-by-vehicle:focus {
  box-shadow: none;
  border-color: var(--border-subtle);
}

.field-error {
  font-size: 0.68rem;
  color: var(--accent-red);
  min-height: 12px;
}

.currency-input-wrapper .currency-symbol {
  position: absolute;
  left: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  pointer-events: none;
}
.currency-input-wrapper input {
  padding-left: 1.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
}
.currency-input-wrapper.highlight-input input {
  border-color: var(--accent-green);
  background: var(--accent-green-bg);
  font-weight: 600;
  color: #10b981;
}

/* Combobox */
.combobox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.combobox-input {
  padding-right: 2rem !important;
}
.combobox-toggle {
  position: absolute;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: none;
}
.combobox-dropdown.open {
  display: block;
}
.combobox-item {
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.combobox-item:hover {
  background: var(--accent-primary);
  color: #ffffff;
}
.combobox-item.selected {
  font-weight: 700;
  background: rgba(59, 130, 246, 0.15);
}
.combobox-empty {
  padding: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
}

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.quick-chip {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.quick-chip:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

/* Form Action Bar */
.form-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.35rem;
  box-shadow: var(--shadow-sm);
}



.btn-group {
  display: flex;
  gap: 0.65rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
}
.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--accent-primary-hover);
}
.btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  color: var(--text-primary);
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-focus);
}
.btn-warning {
  background: #f59e0b;
  color: #ffffff;
}
.btn-warning:hover {
  background: #d97706;
}
.btn-danger {
  background: var(--accent-red);
  color: #ffffff;
}
.btn-danger:hover {
  background: #dc2626;
}

/* Sidebar & Live Summary */
.sidebar-summary {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.summary-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.summary-card-header h3 {
  font-size: 0.92rem;
  font-weight: 700;
}

.status-indicator {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}
.status-indicator.live {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.summary-metric-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  text-align: center;
  margin-bottom: 0.75rem;
}
.metric-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
}
.metric-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-orange);
  margin: 0.2rem 0;
}
.metric-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.summary-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.mini-metric {
  background: var(--bg-tertiary);
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.mini-label {
  display: block;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 600;
}
.mini-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 0.1rem;
}
.text-green { color: var(--accent-green); }
.text-red { color: var(--accent-red); }
.text-orange { color: var(--accent-orange); }
.text-primary-accent { color: var(--accent-primary); }

.breakdown-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
  margin-bottom: 0.85rem;
}
.breakdown-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}
.breakdown-item { margin-bottom: 0.55rem; }
.breakdown-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}
.breakdown-header span:last-child { font-family: var(--font-mono); }
.progress-bar-bg {
  width: 100%;
  height: 5px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.progress-bar-fill.fuel { background: #f97316; }
.progress-bar-fill.toll { background: #3b82f6; }
.progress-bar-fill.driver { background: #8b5cf6; }
.progress-bar-fill.maint { background: #eab308; }
.progress-bar-fill.other { background: #64748b; }

.quick-helpers {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.helper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-normal);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.helper-btn:hover {
  border-color: var(--border-focus);
  color: var(--accent-primary);
}

.stat-summary-card { font-size: 0.78rem; }
.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.stat-title { font-weight: 700; }
.stat-date {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.stat-row:last-child { border-bottom: none; }

/* Open & Holding Trips Cards */
.open-trips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.open-trip-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.open-trip-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-md);
}
.open-trip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
}
.open-trip-card.is-holding::before {
  background: linear-gradient(90deg, #f59e0b, #ef4444);
}
.open-trip-card.is-holding {
  border-color: rgba(245, 158, 11, 0.4);
}

.open-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.open-plate {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-primary);
}
.open-tp-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #60a5fa;
  margin-top: 0.1rem;
}
.open-driver {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}
.open-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.open-status-badge.holding {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.open-route-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
}
.route-node strong {
  display: block;
  font-size: 0.85rem;
}
.route-node span {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
}
.route-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Holding Info Segment */
.holding-info-box {
  background: rgba(245, 158, 11, 0.1);
  border: 1px dashed rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
}
.holding-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  color: #fbbf24;
  font-weight: 700;
}
.holding-info-desc {
  color: var(--text-secondary);
  line-height: 1.4;
}

.holding-summary-strip {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem;
  margin-top: 0.65rem;
  font-size: 0.76rem;
  color: #fbbf24;
}

.open-card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.76rem;
  margin-bottom: 1rem;
  color: var(--text-secondary);
}
.open-detail-item strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.open-card-actions {
  display: flex;
  gap: 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.btn-close-trip {
  flex: 1;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}
.btn-close-trip:hover {
  background: linear-gradient(135deg, #059669, #047857);
}
.btn-holding-action {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}
.btn-holding-action:hover {
  background: rgba(245, 158, 11, 0.35);
  color: #ffffff;
}
.btn-resume-trip {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
}
.btn-resume-trip:hover {
  background: rgba(16, 185, 129, 0.35);
  color: #ffffff;
}
.table-btn.resume-trip {
  color: #34d399;
}
.table-btn.resume-trip:hover {
  background: rgba(16, 185, 129, 0.2);
  color: #ffffff;
}

/* Clickable KPI Cards & Drilldown */
/* ==========================================================================
   APP SHELL: LEFT SIDEBAR LAYOUT
   ========================================================================== */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.app-sidebar {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 50;
  transition: width var(--transition-normal);
  overflow: visible;
}

/* Collapsed state: icon-only rail. Logo stays visible; all text labels hide.
   The content area needs no extra JS to "adjust right side" — it's a flex
   sibling with flex:1, so shrinking the sidebar's width automatically gives
   it the freed space. */
.app-sidebar.collapsed {
  width: 76px;
}
.app-sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 1.1rem 0;
}
.app-sidebar.collapsed .brand-info,
.app-sidebar.collapsed .nav-label,
.app-sidebar.collapsed .count-pill,
.app-sidebar.collapsed .sidebar-profile-info {
  display: none;
}
.app-sidebar.collapsed .sidebar-nav .nav-btn {
  justify-content: center;
  padding: 0.6rem;
}
.app-sidebar.collapsed .sidebar-profile-btn {
  justify-content: center;
  padding: 0.55rem;
}
.app-sidebar.collapsed .sidebar-collapse-toggle svg {
  transform: rotate(180deg);
}

.sidebar-collapse-toggle {
  position: absolute;
  top: 22px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 51;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}
.sidebar-collapse-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.sidebar-collapse-toggle svg {
  transition: transform var(--transition-fast);
}
@media (max-width: 900px) {
  .sidebar-collapse-toggle { display: none; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-brand .brand-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.sidebar-brand .brand-info h1 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}
.sidebar-brand .brand-subtitle {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem;
  overflow-y: auto;
  flex: 1;
}
.sidebar-nav .nav-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  white-space: nowrap;
}
.sidebar-nav .nav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.sidebar-nav .nav-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.sidebar-nav .nav-btn.active .count-pill {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.sidebar-nav .nav-btn span:last-child.count-pill,
.sidebar-nav .nav-btn .count-pill {
  margin-left: auto;
}

.sidebar-footer {
  padding: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}
.profile-dropdown-wrapper {
  position: relative;
}
.sidebar-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sidebar-profile-btn:hover {
  border-color: var(--border-focus);
}
.profile-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  flex-shrink: 0;
}
.sidebar-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  overflow: hidden;
}
.sidebar-profile-info strong {
  font-size: 0.78rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.sidebar-profile-info span {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.profile-dropdown-wrapper .profile-dropdown-menu {
  bottom: calc(100% + 0.5rem);
  top: auto;
  left: 0;
  right: 0;
}

.app-content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 232px;
  /* The sidebar is position:fixed, so it occupies no flex space. Without an
     explicit width the flex:1 child sizes against the FULL shell width and
     then margin-left pushes it right, overflowing the viewport by exactly
     the sidebar's width. Stating the width removes that ambiguity. */
  width: calc(100% - 232px);
  max-width: calc(100% - 232px);
  overflow-x: hidden;
  transition: margin-left var(--transition-normal), width var(--transition-normal), max-width var(--transition-normal);
}
.app-content-area.sidebar-collapsed {
  margin-left: 76px;
  width: calc(100% - 76px);
  max-width: calc(100% - 76px);
}

.app-topbar {
  position: fixed;
  top: 0;
  left: 232px;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  background: rgba(17, 23, 34, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: left var(--transition-normal);
}
/* Same toggle the sidebar collapse already applies to .app-content-area —
   reused here so the topbar's left edge stays flush with the sidebar's
   current width without needing any extra JS wiring. */
.app-content-area.sidebar-collapsed .app-topbar {
  left: 76px;
}
@media (max-width: 900px) {
  .app-topbar {
    left: 0;
  }
}
[data-theme="light"] .app-topbar {
  background: rgba(255, 255, 255, 0.9);
}
.topbar-title h1 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.topbar-title p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.topbar-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
  }
  .app-sidebar.open {
    transform: translateX(0);
  }
  .mobile-sidebar-toggle {
    display: inline-flex !important;
  }
  .sidebar-backdrop.open {
    display: block;
  }
  .app-content-area,
  .app-content-area.sidebar-collapsed {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
}

.mobile-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
}
.mobile-sidebar-toggle:hover {
  color: var(--text-primary);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 49;
}

/* ==========================================================================
   DASHBOARD: FILTER BAR
   ========================================================================== */
.dash-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  margin-bottom: 1.35rem;
}
.dash-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dash-filter-group label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.date-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  background: var(--bg-tertiary);
  padding: 0.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}
.date-preset-btn {
  padding: 0.4rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.date-preset-btn:hover { color: var(--text-primary); }
.date-preset-btn.active {
  background: var(--accent-primary);
  color: #fff;
}
.dash-filter-group input[type="date"],
.dash-filter-group select {
  min-width: 140px;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
}
.dash-filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* ==========================================================================
   DASHBOARD: KPI CARD EXTRAS (delta + sparkline)
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.15rem;
  margin-bottom: 1.35rem;
}
.kpi-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all var(--transition-fast);
}
.kpi-card.clickable {
  cursor: pointer;
}
.kpi-card.clickable:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.kpi-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.82rem;
}
.kpi-icon.red { background: var(--accent-red-bg); color: var(--accent-red); }
.kpi-icon.green { background: var(--accent-green-bg); color: var(--accent-green); }
.kpi-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.kpi-icon.orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.kpi-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.kpi-value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0.35rem 0 0.15rem 0;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.kpi-footer {
  font-size: 0.7rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.kpi-delta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: var(--radius-full);
}
.kpi-delta.up { background: var(--accent-green-bg); color: var(--accent-green); }
.kpi-delta.down { background: var(--accent-red-bg); color: var(--accent-red); }
.kpi-delta-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.kpi-sparkline {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 90px;
  height: 32px;
  opacity: 0.85;
}

/* ==========================================================================
   DASHBOARD: WIDGET GRID / TABLE CARDS
   ========================================================================== */
.dash-row-3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.dash-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  gap: 0.5rem;
}
.dash-card-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
}
.dash-mini-select {
  padding: 0.35rem 0.55rem;
  font-size: 0.72rem;
  min-width: unset;
  width: auto;
}

/* Status Donut */
.status-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.status-donut-svg {
  flex-shrink: 0;
}
.status-donut-center {
  font-family: var(--font-mono);
}
.status-legend {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.status-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-legend-row strong {
  margin-left: auto;
  font-family: var(--font-mono);
  padding-left: 1rem;
}

/* Company Bar Chart */
.company-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  height: 170px;
  padding-top: 0.5rem;
}
.company-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
  gap: 0.4rem;
  cursor: pointer;
}
.company-bar-value {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.company-bar-fill {
  width: 60%;
  min-width: 20px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  transition: all var(--transition-fast);
}
.company-bar-col:hover .company-bar-fill {
  filter: brightness(1.15);
}
.company-bar-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* Ranked mini-tables (Top Vehicles / Top Drivers) */
.dash-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.dash-mini-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.dash-mini-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  overflow-wrap: break-word;
}
.dash-mini-table tbody tr {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.dash-mini-table tbody tr:hover {
  background: var(--bg-tertiary);
}
.dash-mini-table tbody tr:last-child td {
  border-bottom: none;
}
.dash-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}
.dash-table-link {
  display: block;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-top: 0.75rem;
  cursor: pointer;
}

/* Recent Trips */
.dash-recent-trips-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}
.dashboard-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.dashboard-empty-state svg {
  color: var(--text-disabled);
  margin-bottom: 0.35rem;
}
.dashboard-empty-state strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}
.dashboard-empty-state span {
  font-size: 0.8rem;
}

/* +232px-shifted breakpoint to account for the sidebar's reserved width — see
   the fuller explanation near the main "Responsive & Print Breakpoints" block. */
@media (max-width: 1432px) {
  .dash-row-3, .dash-row-2, .dash-recent-trips-row {
    grid-template-columns: 1fr;
  }
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.chart-card-wide { grid-column: 1 / -1; }
.analytics-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.analytics-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
}
.chart-subtitle {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chart-legend {
  display: flex;
  gap: 0.85rem;
  font-size: 0.74rem;
  font-weight: 600;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.chart-container {
  position: relative;
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  margin-top: 0.5rem;
}
.interactive-chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart-container-wide {
  height: 340px;
}
.chart-container-wide .interactive-chart-svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 1000px) {
  .chart-container-wide {
    height: 260px;
  }
}
.chart-point {
  cursor: pointer;
  transition: r 0.15s ease;
}
.chart-point:hover {
  r: 6.5px;
}
.chart-tooltip {
  position: absolute;
  display: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  z-index: 10;
}

.company-share-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.company-share-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.company-share-card:hover {
  border-color: var(--border-focus);
  background: var(--bg-elevated);
}
.company-share-card strong {
  display: block;
  font-size: 1.1rem;
  font-family: var(--font-mono);
  margin: 0.25rem 0;
}

.top-vehicles-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.top-vehicle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.top-vehicle-row:hover {
  border-color: var(--border-focus);
  background: var(--bg-elevated);
}
.top-vehicle-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vehicle-plate {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-primary);
}

/* Drilldown Modal Summary */
.drilldown-summary-banner {
  display: flex;
  justify-content: space-between;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

/* Reports Hub */
.reports-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1rem;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.filter-group label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-muted);
}
.filter-input-date {
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  background: var(--bg-input);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.reports-summary-banner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}
.rep-metric span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rep-metric strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-top: 0.2rem;
}

/* Master Data Tabs */
.master-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
}
.master-tab-btn {
  padding: 0.5rem 0.85rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.master-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.master-tab-btn.active {
  background: var(--accent-primary);
  color: #ffffff;
}

.master-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Bulk Multi-Select Toolbar */
.bulk-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1e293b, #111722);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: 0.65rem 1.15rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
  animation: slideDown 0.2s ease;
}
.bulk-select-bar span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.col-check {
  width: 38px;
  text-align: center;
}
input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-primary);
}

/* Document Upload Badges & Previews */
.doc-upload-section {
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-top: 0.85rem;
}
.doc-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.doc-upload-header h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
}
.doc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.doc-badge:hover {
  border-color: var(--border-focus);
  background: rgba(59, 130, 246, 0.12);
}
.doc-badge svg {
  color: var(--accent-primary);
}
.doc-remove-btn {
  background: transparent;
  border: none;
  color: var(--accent-red);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
}
.doc-remove-btn:hover {
  color: #ff6b6b;
}

/* Document Viewer Modal */
.doc-viewer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 1rem;
  overflow: auto;
}
.doc-preview-img {
  max-width: 100%;
  max-height: 520px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.doc-preview-pdf-embed {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: var(--radius-sm);
}
.doc-fallback-box {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}
.doc-fallback-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: var(--accent-primary);
}

/* ==========================================================================
   Audit & Activity History Log Styles (Structured Multi-Section)
   ========================================================================== */
.log-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.log-badge-create { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.log-badge-update { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.log-badge-delete { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.log-badge-status { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.log-badge-sync   { background: rgba(139, 92, 246, 0.15); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.3); }

.log-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--text-primary);
}
.log-user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  color: var(--accent-primary);
}
.log-time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Granular Multi-Section Log Card in Table */
.log-structured-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.2rem 0;
}
.log-summary-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}
.log-sections-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}
.log-section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.log-section-tag strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.log-section-tag.master-sync-tag {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.log-section-tag.finance-tag {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.log-section-tag.diff-tag {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

/* Audit Activity Detail Modal & Diff Engine */
.audit-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.audit-meta-item span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.audit-meta-item strong {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.audit-section-heading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.diff-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.diff-table th {
  background: var(--bg-tertiary);
  padding: 0.65rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-normal);
}
.diff-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}
.diff-table tr:last-child td {
  border-bottom: none;
}

.diff-val-old {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-decoration: line-through;
}
.diff-val-new {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
}
.diff-arrow {
  margin: 0 0.4rem;
  color: var(--text-muted);
  font-weight: bold;
}

/* Master Ledger Table Sticky Columns */
.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.panel-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.panel-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  width: 260px;
}
.search-box input {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.8rem;
}
.search-box input:focus { box-shadow: none; }

.filter-select {
  padding: 0.45rem 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-primary);
}

.table-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-scroll-hint {
  padding: 0.4rem 0.85rem;
  background: var(--bg-tertiary);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
  text-align: left;
}
.data-table thead { background: var(--bg-tertiary); }
.data-table th {
  padding: 0.75rem 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-normal);
}
.data-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  white-space: nowrap;
}
.data-table tbody tr:hover td {
  background: var(--bg-tertiary);
}

.master-table th.sticky-col,
.master-table td.sticky-col {
  position: sticky;
  left: 0;
  background: var(--bg-secondary);
  z-index: 2;
}
.master-table thead th.sticky-col {
  background: var(--bg-tertiary);
  z-index: 3;
}
.master-table th.col-status,
.master-table td.col-status { left: 38px; }
.master-table th.col-id,
.master-table td.col-id { left: 120px; }
.master-table th.sticky-right,
.master-table td.sticky-right {
  position: sticky;
  right: 0;
  background: var(--bg-secondary);
  z-index: 2;
}
.master-table thead th.sticky-right {
  background: var(--bg-tertiary);
  z-index: 3;
}

.highlight-th { color: var(--accent-orange) !important; }
.highlight-th-green { color: var(--accent-green) !important; }

.tag-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
}
.tag-open { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.tag-holding { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.tag-closed { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.tag-gati { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.tag-tci { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.tag-market { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

.action-btn-group {
  display: flex;
  gap: 0.3rem;
}
.table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.table-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}
.table-btn.delete:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
}
.table-btn.close-trip:hover {
  color: var(--accent-green);
  border-color: var(--accent-green);
}
.table-btn.hold-trip:hover {
  color: #fbbf24;
  border-color: #fbbf24;
}

.table-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Bulk Upload */
.bulk-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.drop-zone {
  border: 2px dashed var(--border-normal);
  border-radius: var(--radius-lg);
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.drop-zone:hover,
.drop-zone.dragover {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}
.drop-zone-icon {
  margin-bottom: 0.85rem;
  color: var(--accent-primary);
}
.drop-zone h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.drop-zone p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.bulk-preview-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.bulk-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Bulk Upload Warning Banners & Row Validation */
.bulk-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left: 4px solid var(--accent-amber);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  animation: slideDown 0.2s ease;
}
.bulk-warning-banner.has-errors {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  border-left-color: var(--accent-red);
}
.bulk-warning-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.bulk-warning-content strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}
.bulk-warning-banner.has-errors .bulk-warning-content strong {
  color: #f87171;
}
.bulk-warning-content p {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.bulk-stat-pills {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}
.bulk-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
}
.bulk-stat-pill.valid {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
}
.bulk-stat-pill.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.bulk-stat-pill.error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

tr.row-error td {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #fca5a5;
}
tr.row-warning td {
  background: rgba(245, 158, 11, 0.08) !important;
}

.issue-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 0.35rem;
}
.issue-tag.error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.issue-tag.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-card.modal-lg { max-width: 920px; }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title-group h3 {
  font-size: 1.05rem;
  font-weight: 700;
}
.modal-id {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent-primary);
}
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.modal-close-btn:hover { color: var(--text-primary); }
.modal-body { padding: 1.35rem; overflow-wrap: break-word; }

.outward-summary-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 1rem;
}
.outward-badge {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.outward-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  font-size: 0.8rem;
}
.consolidated-financial-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-top: 1rem;
  text-align: center;
}
.consolidated-financial-box span {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
}
.consolidated-financial-box strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-top: 0.15rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.35rem;
  border-top: 1px solid var(--border-subtle);
}

/* Voucher */
.voucher-print-area {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.voucher-header {
  text-align: center;
  border-bottom: 2px dashed var(--border-normal);
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
}
.voucher-header h4 {
  font-size: 1.15rem;
  font-weight: 800;
}
.voucher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  font-size: 0.8rem;
  margin-bottom: 0.85rem;
}
.voucher-field strong {
  color: var(--text-muted);
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
}
.voucher-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 0.85rem;
}
.voucher-table th,
.voucher-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-normal);
}
.voucher-table th { background: var(--bg-elevated); }

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.15rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  animation: slideUp 0.25s ease;
}
.toast.success { border-left: 4px solid var(--accent-green); }
.toast.error { border-left: 4px solid var(--accent-red); }
.toast.info { border-left: 4px solid var(--accent-primary); }
.toast-content { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.toast-message { line-height: 1.35; }
.toast-detail-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  width: fit-content;
  opacity: 0.75;
}
.toast-detail-btn:hover { opacity: 1; color: var(--text-secondary); }
.toast-detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.toast-detail-text {
  display: none;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  margin-top: 0.15rem;
  max-width: 320px;
  word-break: break-word;
  white-space: pre-wrap;
}
.toast-detail-text.open { display: block; }

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Responsive & Print Breakpoints
   NOTE: thresholds below are shifted +232px from the "natural" round numbers
   (1200->1432, 768->1000, 480->712). That 232px is the expanded sidebar's
   width. These media queries target the *content area's* available width,
   not the browser window's — but max-width queries can only measure the
   window. Since the sidebar permanently reserves 232px above 900px window
   width (it goes off-canvas below that), a query written for "content is
   ≤1200px" has to fire at "window is ≤1432px" to mean the same thing.
   Don't round these back down without accounting for that offset again. */
@media (max-width: 1432px) {
  .layout-grid { grid-template-columns: 1fr; }
  .sidebar-summary { position: static; }
  .panel-header-row {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-controls {
    width: 100%;
    justify-content: flex-start;
  }
  /* .kpi-grid intentionally NOT overridden here — its base rule uses
     repeat(auto-fit, minmax(200px, 1fr)), which already reflows column
     count responsively on its own. Forcing a fixed column count here would
     fight that and produce a worse result at in-between widths. */
  .analytics-grid { grid-template-columns: 1fr; }
  .reports-summary-banner { grid-template-columns: repeat(3, 1fr); }
}

/* Defensive: closes off the classic flex/grid "child won't shrink below its
   content's intrinsic width" bug class. Flex and grid children default to
   min-width:auto, which means they refuse to shrink below their content's
   intrinsic width — for a 35-column table that intrinsic width is enormous,
   so the whole page gets pushed wider than the viewport instead of the table
   scrolling inside its own wrapper. */
.app-main,
.view-panel,
.table-card,
.panel-header-row,
.panel-controls,
.section-card,
.analytics-card {
  min-width: 0;
  max-width: 100%;
}

/* The header row and its control cluster must wrap rather than push the page
   sideways. .search-box has a fixed 260px width, so it needs permission to
   shrink on narrow content areas. */
.panel-header-row,
.panel-controls {
  flex-wrap: wrap;
}
.search-box {
  min-width: 0;
  max-width: 100%;
}

/* Last-resort guard: nothing in the app should be able to scroll the page
   body sideways. Wide content scrolls inside .table-responsive instead. */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

@media (max-width: 1000px) {
  .header-container { flex-direction: column; align-items: stretch; padding: 0.6rem 0.85rem; }
  .app-main { padding: 0.85rem; padding-top: calc(0.85rem + 78px); }
  .fields-grid-2,
  .fields-grid-3,
  .fields-grid-4 { grid-template-columns: 1fr; }
  .form-action-bar { flex-direction: column; gap: 1rem; }
  .btn-group { flex-direction: column; width: 100%; }
  .reports-summary-banner { grid-template-columns: 1fr 1fr; }

  /* Comfortable tap targets on touch screens (44px is the standard
     accessibility minimum) — desktop .btn sizing is untouched since this
     is inside the mobile-only media query. */
  .btn { min-height: 44px; padding: 0.6rem 1.1rem; }
  .btn-sm { min-height: 38px; padding: 0.5rem 0.8rem; }
  .nav-btn { min-height: 42px; padding: 0.55rem 0.8rem; }
  .header-nav {
    -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */
    scroll-behavior: smooth;
  }

  /* Modals: use more of the narrow screen's width, reduce inner padding
     so content isn't cramped against the edges. */
  .modal-overlay { padding: 0.5rem; }
  .modal-card { max-width: 100%; max-height: 95vh; }
  .modal-body { padding: 1rem; }
  .modal-header { padding: 0.9rem 1rem; }

  /* Tables inside their existing horizontal-scroll wrapper: slightly
     smaller text so more columns are visible before needing to scroll. */
  .data-table { font-size: 0.78rem; }
  .table-btn { min-width: 32px; min-height: 32px; }

  /* Login screen: less side padding so the card isn't squeezed. */
  .login-card { padding: 1.5rem 1.25rem; margin: 0 0.75rem; }
}

/* Smaller phones specifically — tighter spacing still, on top of
   everything already set at the 768px breakpoint above. */
@media (max-width: 712px) {
  .app-main { padding: 0.6rem; padding-top: calc(0.6rem + 78px); }
  .header-container { padding: 0.5rem 0.6rem; }
  .kpi-card { padding: 0.85rem; }
  .modal-body { padding: 0.75rem; }
  .reports-summary-banner { grid-template-columns: 1fr; }
  .brand-title-row h1 { font-size: 1.05rem; }
  .brand-subtitle { display: none; } /* saves vertical space on very small screens */
}

@media print {
  @page {
    margin: 10mm;
  }

  /* Fixed: dark-mode text colors (light grays meant to sit on a dark
     background) and dark navy table backgrounds were being used as-is
     when printed — on white paper, light gray text has very poor
     contrast and is hard to read. These overrides force dark,
     high-contrast text on clean white backgrounds for print specifically,
     regardless of which theme (dark or light) is active on screen. */
  #reports-hub-view,
  #reports-hub-view * ,
  .modal-overlay.open .voucher-print-area,
  .modal-overlay.open .voucher-print-area * {
    color: #111111 !important;
    background-color: #ffffff !important;
    border-color: #999999 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* Slightly softer (but still clearly readable) tone for secondary/muted
     text, matching the visual hierarchy on screen without going anywhere
     near illegible light gray. */
  #reports-hub-view .field-hint,
  #reports-hub-view small,
  .voucher-print-area .field-hint,
  .voucher-print-area small {
    color: #444444 !important;
  }

  /* Status badges (Open/Holding/Closed) need to keep their color-coding
     for at-a-glance scanning — the blanket dark-text-on-white rule above
     would otherwise flatten all three into identical black-on-white boxes.
     These are more specific, so they correctly take priority. */
  #reports-hub-view .tag-open {
    background-color: #e7f8f0 !important;
    color: #0a7a4f !important;
    border: 1px solid #0a7a4f !important;
  }
  #reports-hub-view .tag-holding {
    background-color: #fef3e0 !important;
    color: #92620a !important;
    border: 1px solid #92620a !important;
  }
  #reports-hub-view .tag-closed {
    background-color: #f0f1f3 !important;
    color: #444444 !important;
    border: 1px solid #999999 !important;
  }
  #reports-hub-view .live-pulse-dot {
    background-color: #0a7a4f !important;
  }
  #reports-hub-view .live-pulse-dot.holding {
    background-color: #92620a !important;
  }
  #reports-hub-view .live-pulse-dot::after {
    display: none !important; /* the pulse-ripple animation doesn't render meaningfully in a static print/PDF */
  }

  body * { visibility: hidden; }
  .modal-overlay.open,
  .modal-overlay.open .voucher-print-area,
  .modal-overlay.open .voucher-print-area *,
  #reports-hub-view,
  #reports-hub-view * {
    visibility: visible;
  }

  /* Fixed: previously used position:absolute here, which removed this
     element from its parent's (.app-main, which is position:relative)
     normal document flow — meaning .app-main's own height no longer
     reflected the report's actual content height at all. With every
     other panel hidden too, the page's total height collapsed to almost
     nothing, so the browser only ever printed about one page regardless
     of how much data there actually was. Staying in normal flow (no
     position override) means the full height of the report — however
     many rows it has — is what the browser sees, so it correctly spans
     as many pages as needed. */
  .app-sidebar,
  .app-topbar,
  .sidebar-backdrop,
  .reports-filter-bar,
  .panel-controls {
    display: none !important;
  }
  .app-main {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .app-content-area {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide the Actions column (edit/delete/print icon buttons) everywhere
     it appears when printed — those buttons don't do anything on paper,
     and removing them frees up width for the data columns that matter. */
  #reports-hub-view table th:last-child,
  #reports-hub-view table td:last-child,
  #reports-hub-view .action-btn-group {
    display: none !important;
  }

  /* Shrink text/padding specifically for print so a full trip's row of
     data (all columns) fits on one printed line instead of being cut off
     at the page edge — smaller, but everything stays fully visible. */
  #reports-hub-view table {
    width: 100% !important;
    table-layout: auto;
    font-size: 7.5px !important;
  }
  #reports-hub-view table th,
  #reports-hub-view table td {
    padding: 3px 4px !important;
    white-space: nowrap;
  }
}

/* ==========================================================================
   ADMIN AUTHENTICATION & LOGIN PORTAL
   ========================================================================== */
.login-portal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.99) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.login-portal-backdrop.authenticated {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: loginCardPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginCardPop {
  0% { transform: scale(0.92) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.login-card-header {
  padding: 2.2rem 2rem 1.4rem;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
}

.login-brand-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 8px 25px -4px rgba(59, 130, 246, 0.5);
}

.login-card-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.login-card-header p {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.login-card-body {
  padding: 1.8rem 2rem 2.2rem;
}

.login-form-group {
  margin-bottom: 1.25rem;
}

.login-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
}

.login-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-box svg.input-icon {
  position: absolute;
  left: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
}

.login-input-box input {
  width: 100%;
  padding: 0.75rem 0.9rem 0.75rem 2.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

.login-input-box input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.login-pwd-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.login-pwd-toggle:hover {
  color: var(--text-primary);
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  font-size: 0.8rem;
}

.login-remember-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
}

.login-alert-box {
  display: none;
  padding: 0.75rem 0.9rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-md);
  color: #f87171;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
  align-items: center;
  gap: 0.5rem;
}

.login-btn-submit {
  width: 100%;
  padding: 0.85rem 1.2rem;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.login-btn-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.login-demo-hint {
  margin-top: 1.3rem;
  padding: 0.75rem 0.9rem;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-normal);
  border-radius: var(--radius-md);
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

.login-demo-hint code {
  color: var(--accent-primary);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Header Admin Profile Pill & Dropdown */
.admin-profile-container {
  position: relative;
}

.admin-profile-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-profile-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.admin-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: #ffffff;
}

.admin-info-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

.admin-info-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
}

.admin-info-role {
  font-size: 0.66rem;
  color: var(--accent-primary);
}

.admin-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  padding: 0.5rem;
  display: none;
  z-index: 1000;
  animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-dropdown-menu.open {
  display: block;
}

@keyframes dropdownPop {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.admin-dropdown-header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.35rem;
}

.admin-dropdown-header strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.admin-dropdown-header span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.admin-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.admin-dropdown-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.admin-dropdown-item.logout {
  color: var(--accent-red);
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.35rem;
}

.admin-dropdown-item.logout:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* User Management Table Styles */
.table-action-btn.delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red, #ef4444);
  border-color: rgba(239, 68, 68, 0.3);
}

.table-filter-select {
  padding: 0.45rem 0.8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.table-filter-select:focus {
  border-color: var(--accent-primary);
}

/* ==========================================================================
   CLOUD DATABASE SYNC INDICATOR & FIREBASE MODAL STYLES
   ========================================================================== */
.cloud-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  font-family: var(--font-main);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-normal);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
  outline: none;
}

.cloud-status-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cloud-status-pill.connected {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.cloud-status-pill.connected:hover {
  background: rgba(16, 185, 129, 0.18);
  border-color: #10b981;
}

.cloud-status-pill.connecting {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.cloud-status-pill.unconfigured {
  background: var(--bg-tertiary);
  border-color: var(--border-normal);
  color: var(--text-secondary);
}

.cloud-status-pill.unconfigured:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.cloud-status-pill.offline {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.cloud-status-pill .live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.fb-setup-step-box {
  background: var(--bg-tertiary);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  line-height: 1.55;
  border-left: 3px solid var(--accent-primary);
  color: var(--text-secondary);
}

.fb-setup-step-box strong {
  color: var(--text-primary);
}

.fb-setup-step-box ol {
  margin: 0.4rem 0 0 1.2rem;
  padding: 0;
}

.fb-setup-step-box li {
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   PROFILE ROUND AVATAR BUTTON & DROPDOWN MENU
   ========================================================================== */
/* Wrapper keeps dropdown positioned relative to button */
.profile-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

/* Round avatar button */
.profile-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid var(--border-normal);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.profile-avatar-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Dropdown panel — slides down from button */
.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.profile-dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* MySQL status row */
.pdrop-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pdrop-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.pdrop-item .cloud-status-pill {
  width: 100%;
  justify-content: center;
}

/* Divider line */
.pdrop-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 0.1rem 0;
}

/* Theme toggle row-button */
.pdrop-action {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition-fast);
}

.pdrop-action:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* Keep sun/moon icon toggle behaviour working */
[data-theme="dark"] .sun-icon  { display: block; }
[data-theme="dark"] .moon-icon { display: none;  }
[data-theme="light"] .sun-icon  { display: none;  }
[data-theme="light"] .moon-icon { display: block; }

.profile-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.profile-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-name {
  white-space: nowrap;
}

.chevron-icon {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

/* Sliding Menu Backdrop Overlay */
.profile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.profile-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sliding Menu Drawer Container */
.profile-sliding-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-normal);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
  z-index: 2001;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-sliding-menu.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 1.2rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.drawer-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-title-row h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.drawer-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.drawer-body {
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

/* User Profile Card */
.user-profile-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.user-avatar-large {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), #6366f1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.user-display-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-handle {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.user-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #10b981;
  margin-top: 0.2rem;
}

.status-dot-active {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.drawer-section-divider {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Drawer Menu Items */
.drawer-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.drawer-menu-item.clickable {
  cursor: pointer;
}

.drawer-menu-item.clickable:hover {
  background: var(--bg-elevated);
  border-color: var(--border-normal);
}

.drawer-item-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.item-icon-box {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.item-title {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.item-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.drawer-menu-item .cloud-status-pill {
  font-size: 0.76rem;
  padding: 0.3rem 0.6rem;
}

.drawer-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
}

.drawer-action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.drawer-logout-wrapper {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.drawer-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: #ef4444;
  font-family: var(--font-main);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.drawer-logout-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ==========================================================================
   LOGIN SCREEN
   ========================================================================== */
#login-wrapper {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}
.login-card {
  background: var(--bg-secondary);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border-normal);
  text-align: center;
}
.login-header {
  margin-bottom: 2rem;
}
.login-header h1 {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.login-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.login-form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}
.login-form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}
.login-form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1rem;
  transition: all var(--transition-fast);
}
.login-form-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.login-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.login-btn:hover {
  background: var(--accent-primary-hover);
}
#login-error-msg {
  color: var(--accent-red);
  font-size: 0.9rem;
  margin-top: 1rem;
  display: none;
}

/* ==========================================================================
   USER MANAGEMENT & TOGGLES
   ========================================================================== */
.users-table-wrapper {
  background: var(--bg-secondary);
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 1.5rem;
}
.users-table {
  width: 100%;
  border-collapse: collapse;
}
.users-table th, .users-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-normal);
  color: var(--text-primary);
}
.users-table th {
  background: var(--bg-primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.users-table tr:hover {
  background: var(--bg-hover);
}
.users-table td.actions-cell {
  text-align: right;
}

/* iOS Style Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
[data-theme="dark"] .toggle-slider {
  background-color: var(--bg-input);
  border: 1px solid var(--border-normal);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
[data-theme="dark"] .toggle-slider:before {
  background-color: var(--text-muted);
}
input:checked + .toggle-slider {
  background-color: var(--accent-green);
  border-color: var(--accent-green);
}
input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: white;
}
.permission-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-normal);
}
.permission-row:last-child {
  border-bottom: none;
}
.permission-label {
  display: flex;
  flex-direction: column;
}
.permission-label strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}
.permission-label span {
  color: var(--text-muted);
  font-size: 0.8rem;
}



/* Sub-Permissions Styling */
.sub-permission-row { padding-left: 2rem; opacity: 0.85; border-left: 2px solid var(--border-normal); margin-left: 0.5rem; }


.toggle-switch input:disabled + .toggle-slider { opacity: 0.4; cursor: not-allowed; }


/* Keep the header-row filter controls compact and on one line where there's
   room. Without a bound, the global `select { width: 100% }` rule makes each
   dropdown stretch across the whole header row once .panel-controls wraps. */
.panel-controls > select,
.panel-controls .filter-select {
  width: auto;
  min-width: 150px;
  max-width: 220px;
  flex: 0 1 auto;
}
.panel-controls .search-box {
  flex: 0 1 260px;
}
.panel-controls .btn {
  flex: 0 0 auto;
}