@font-face {font-family: 'InterVar'; src: local('Inter');}
:root {--la-bg: #0b1a27; --la-accent: #0839a3; --la-accent-dark: #345aaa; --la-text: #111; --la-white: #fff; --la-muted: #6b7280;}
* {box-sizing: border-box}
html, body {height: 100%}
body {margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--la-white); background: var(--la-bg) url('/assets/images/image-login-admin.webp') center/cover no-repeat fixed;}
.la-overlay {position: fixed; inset: 0; background: linear-gradient(90deg, rgba(7,15,24,0.85) 0%, rgba(7,15,24,0.65) 40%, rgba(7,15,24,0.25) 100%);}
.la-page {position: relative; min-height: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 40px 48px;}
.la-hero {display: flex; flex-direction: column; justify-content: center; max-width: 680px;}
.la-brand {letter-spacing: 2px; font-weight: 700; font-size: 18px; margin-bottom: 24px}
.la-hero h1 {font-size: 42px; line-height: 1.1; margin: 0 0 12px}
.la-hero h2 {font-size: 28px; font-weight: 400; color: #cfd8e3; margin: 0 0 28px}
.la-cta {display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfd8e3; color: #cfd8e3; padding: 8px 12px; text-decoration: none; font-weight: 600; font-size: 13px}
.la-right {display: flex; flex-direction: column; align-items: flex-start; gap: 20px}
.la-card {background: var(--la-white); color: var(--la-text); border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,0.25);}
.la-login-card {width: 520px; padding: 22px}
.la-card-header {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px}
.la-card-title {font-size: 22px; font-weight: 700}
.la-small-links {display: flex; gap: 14px}
.la-small-links a {font-size: 13px; text-decoration: none; color: var(--la-accent)}
.la-field {margin-bottom: 12px}
.la-input {width: 100%; height: 44px; border: 1px solid #d1d5db; border-radius: 4px; padding: 0 12px; font-size: 14px; background: #fff}
.la-input:focus {border-color: var(--la-accent); outline: none}
.la-input::placeholder {color: #9aa3af}
.la-row {display: flex; justify-content: space-between; align-items: center; margin-top: 12px}
.la-checkbox {display: inline-flex; align-items: center; gap: 8px; color: #374151; font-size: 14px}
.la-checkbox input {width: 16px; height: 16px}
.la-link-muted {font-size: 13px; color: #6b7280; text-decoration: none}
.la-link-muted:hover {color: var(--la-accent)}
.la-btn {width: 100%; height: 46px; background: var(--la-accent); border: none; color: var(--la-white); font-weight: 700; border-radius: 6px; cursor: pointer}
.la-btn:hover {background: var(--la-accent-dark)}
.la-banner-card {width: 520px; padding: 0; overflow: hidden}
.la-banner-top {padding: 18px 22px}
.la-banner-title {text-transform: uppercase; color: var(--la-accent); letter-spacing: .5px; font-size: 13px; font-weight: 800}
.la-banner-heading {font-size: 24px; font-weight: 900; margin: 6px 0}
.la-banner-sub {color: #4b5563; font-size: 14px; margin-bottom: 10px}
.la-banner-img {display: block; width: 100%; height: auto}
@media (max-width: 1024px) {.la-page {grid-template-columns: 1fr; padding: 20px} .la-right {align-items: stretch} .la-login-card, .la-banner-card {width: auto}}

/* Dashboard Shell */
body.la-dashboard {background: #f5f6f8; color: #1f2937}
.la-topbar {height: 40px; background: #0f0f10; color: #e5e7eb; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: sticky; top: 0; z-index: 1000}
.la-topbar .la-brand {color: #fff; font-weight: 800; letter-spacing: 1px; font-size: 14px; margin: 0}
.la-topbar .la-actions {display: flex; gap: 16px; align-items: center;}
.la-topbar a {color: #f9fafb; text-decoration: none; font-size: 12px}
.la-toolbar {background: #2a2a2b; color: #fff; height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #1e1e1f; position: sticky; top: 40px; z-index: 999}
.la-toolbar .la-tool {display: inline-flex; align-items: center; font-size: 12px; border-radius: 4px; color: #f3f4f6}
.la-toolbar .la-tool:hover {background: rgba(255,255,255,0.06)}
.la-toolbar .la-tool.active {color: var(--la-white); border-bottom: 4px solid var(--la-accent)}
.la-secondarybar {background: #efefef; border-bottom: 1px solid #e5e7eb; padding: 6px 8px; display: flex; gap: 8px; align-items: center; overflow-x: auto; position: sticky; top: 100px; z-index: 998}
.la-secondarybar .la-tab {display:inline-flex; align-items:center; gap:8px; padding:5px 16px; text-decoration:none; color:#6b7280; font-size:13px; font-weight:500; border-bottom:3px solid transparent; white-space:nowrap; background:#fff; border-radius:6px}
.la-secondarybar .la-tab:hover {color:#374151; background-color:#f3f4f6}
.la-secondarybar .la-tab.active {color:#0839a3; border-bottom-color:#0839a3; background-color:#fff}
.la-shell {display: grid; grid-template-columns: 220px 1fr; gap: 16px}
.la-shell.la-no-sidebar {grid-template-columns: 1fr}
.la-sidebar {background: #f3f4f6; border-right: 1px solid #e5e7eb; min-height: calc(100vh - 84px)}
.la-side-title {font-size: 13px; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid #e5e7eb}
.la-side-list {list-style: none; margin: 0; padding: 6px}
.la-side-list a {display: block; padding: 8px 10px; margin: 2px 0; font-size: 13px; color: #1f2937; text-decoration: none; border-radius: 4px}
.la-side-list a:hover {background: #e5e7eb}
.la-side-list .active {background: #e5e7eb; font-weight: 600}
/* .la-content {padding: 12px 16px} */
.la-card-plain {background: #fff; border: 1px solid #e5e7eb; border-radius: 4px}
.la-card-plain .la-section {padding: 14px 16px}
.la-form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px}
.la-form-grid .span-2 {grid-column: span 2}
.la-label {font-size: 12px; color: #374151; margin-bottom: 4px}
.la-field-row {display: flex; flex-direction: column}
.la-input-sm {height: 36px; border: 1px solid #d1d5db; border-radius: 3px; padding: 0 10px; font-size: 13px; background: #fff}
.la-select-sm {height: 36px; border: 1px solid #d1d5db; border-radius: 3px; padding: 0 8px; font-size: 13px; background: #fff}
.la-textarea {min-height: 120px; border: 1px solid #d1d5db; border-radius: 3px; padding: 8px 10px; font-size: 13px; background: #fff}
.la-btn-primary {height: 38px; background: var(--la-accent); color: #fff; border: none; border-radius: 3px; padding: 0 12px; font-weight: 700; cursor: pointer}
.la-btn-primary:hover {background: var(--la-accent-dark)}
.la-btn-muted {height: 36px; background: #e5e7eb; color: #111; border: 1px solid #d1d5db; border-radius: 3px; padding: 0 10px; cursor: pointer}

/* Horizontal Navigation Menu */
.la-horizontal-menu {
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 0;
}

.la-menu-container {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
}

.la-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  text-decoration: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.la-menu-item:hover {
  color: #374151;
  background-color: #f3f4f6;
}

.la-menu-item.active {
  color: #0839a3;
  border-bottom-color: #0839a3;
  background-color: #fff;
}

.la-menu-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Fix la-shell overflow issues */
.la-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
.la-shell.la-no-sidebar {grid-template-columns: 1fr}

.la-content {
  min-width: 0;
  overflow-x: auto;
}

/* Responsive */
@media (max-width: 900px) {
  .la-toolbar {display: none}
  .la-shell {grid-template-columns: 1fr}
  .la-sidebar {min-height: auto}
  .la-form-grid {grid-template-columns: 1fr}
  .la-horizontal-menu {display: none}
}

@media (max-width: 768px) {
  .la-filter-bar .row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .la-filter-bar .col-auto {
    width: 100%;
    margin-bottom: 8px;
  }

  .la-filter-bar .form-check-inline {
    display: inline-block;
    margin-right: 10px;
  }

  .la-grid-container {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .la-content {
    padding: 8px;
  }
}

/* Improve table cell readability */
.la-grid td {
  vertical-align: middle;
  line-height: 1.3;
  white-space: normal;
  max-width: 200px;
}

.la-grid th {
  white-space: nowrap;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Better spacing for filter elements */
.la-filter-bar .form-control-sm,
.la-filter-bar .btn {
  height: 32px;
  font-size: 12px;
}

.la-filter-bar .form-check-input {
  margin-top: 2px;
}

/* Smooth transitions */
.la-menu-item,
.la-tool,
.la-tab {
  transition: all 0.2s ease-in-out;
}

/* Better focus states */
.la-menu-item:focus,
.la-tool:focus,
.la-tab:focus {
  outline: 2px solid #0839a3;
  outline-offset: 2px;
}

/* Dispatch Cards */
.la-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px}
.la-job {border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; display: flex; flex-direction: column}
.la-job {position: relative}
.la-job-head {display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid #e5e7eb}
.la-job-svc {font-weight:700; font-size:13px}
.la-job-status {font-size:12px; color:#374151}
.la-job-main {padding:10px 12px}
.la-job-main h4 {margin:0 0 6px; font-size:15px}
.la-row-mini {font-size:12px; color:#374151; margin:2px 0}
.la-job-meta {display:flex; gap:6px; padding:8px 12px; border-top:1px dashed #e5e7eb}
.la-tag {font-size:12px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:3px; padding:3px 6px}
.la-job-actions {display:flex; justify-content:flex-end; gap:8px; padding:10px 12px}
.la-job.assigned .la-job-status {color: #2563eb}
.la-job.done .la-job-status {color: #10b981}
.la-job.customer .la-job-status {color: #f59e0b}
.dropdown-toggle::after {
  font-size: 14px !important;
}
/* Bootstrap dropdown used for grid actions */

/* Dispatch Grid Table */
.la-grid-wrap {overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch}
.la-grid {border-collapse: collapse; width: 100%; min-width: 2400px}
.la-grid th {background: #ccc; color: #000000; font-weight: 700; font-size: 12px; border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; position: relative}
.la-grid th .sort-arrow {font-size: 10px; color: #6b7280; margin-left: 4px}
.la-grid td {
  border: 1px solid #ffffff;
  padding: 0 4px !important;
  font-size: 12px;
  color: #111;
  font-weight: 600;
  word-break: break-word;
  /* Force visibility so the absolute dropdown isn't clipped */
  overflow: visible !important;
  position: relative;
}
.la-grid td a { font-weight: inherit; }
.la-grid, .la-grid td, .la-grid th {overflow: visible}

/* Color Highlights for Status Cells (allow inline styles to override) */
.la-grid .highlight-gray {background-color: #999999; color: #000000;}
.la-grid .highlight-yellow {background-color: #fef3c7}
.la-grid .highlight-cyan {background-color: #66FFFF}
.la-grid .highlight-green {background-color: #dcfce7}
.la-grid .highlight-passenger {background-color: #66FFFF}
.la-grid .highlight-right {background-color: #dcfce7}
.la-grid .highlight-pu {background-color: #fff467}



/* Dropdown Button Styles */
.la-grid .btn-grid-action {background: #6b7280; color: white; border: none; padding: 2px 6px; font-size: 10px; border-radius: 3px; cursor: pointer}
.la-grid .btn-grid-action:hover {background: #4b5563}
.la-grid .dropdown-menu {
  font-size: 12px;
  z-index: 1050; /* Higher than sticky headers (1000) */
  position: absolute;
  top: 100%;
  left: 0;
  /* Prevent the menu from affecting the parent's scroll height */
  margin: 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.la-grid .dropdown-menu {z-index: 1001}
.la-grid .dropdown {
  position: relative;
  /* This ensures the dropdown aligns to the cell */
}

/* Sticky Note Icon */
.la-grid td i.bi-sticky {color: #f59e0b; font-size: 14px}

/* Filter Bar */
.la-filter-bar { margin-bottom: 16px}
.la-filter-bar .form-label-sm {font-size: 12px; font-weight: 600; color: #374151}
.la-filter-bar .form-check-label {font-size: 12px; color: #374151}
.la-filter-bar .form-check-label {font-weight: 600}
.la-filter-bar .btn-orange {background: #0839a3; color: white; border: none; font-size: 12px; font-weight: 600; padding: 4px 12px}
.la-filter-bar .btn-orange:hover {background: #0839a3}
.la-filter-bar a {color: #2563eb; font-size: 12px}

/* Advanced Search Panel */
.la-advanced-panel {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 8px 0 12px;
}

.la-advanced-panel .dropdown-menu {
  left: 0;
  right: auto;
  transform: none;
  z-index: 1001;
}

.la-multi .btn {
  background: #f9fafb;
  border: 1px solid #d1d5db;
}
.la-multi-menu {
  max-height: 260px;
  overflow: auto;
  min-width: 220px;
}
.la-multi .form-check {
  padding: 4px 8px;
}
.la-multi-menu .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
.la-multi-menu .form-check-input {
  margin: 0;
}
.la-multi-menu .form-check-label {
  margin: 0;
  font-weight: 600;
}
.la-multi-clear {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  color: #374151;
}

/* Grid Container for proper overflow handling */
.la-grid-container {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  height: calc(100vh - 230px);
  height: calc(100svh - 230px);
  height: calc(100dvh - 230px);
  /* Changed from auto to allow dropdowns to break out if needed */
  overflow-x: auto;
  overflow-y: visible;
}

.la-grid-wrap {
  min-width: 1200px;
  height: 100%;
  overflow: visible;
}

.la-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
}
.la-pagination .pagination {margin: 0}

/* Row Status Colors */
.la-grid tr.row-done {background: #f9fafb}
.la-grid tr.row-assigned {background: #f0f9ff}
.la-grid tr.row-neutral {background: #f9fafb}
.la-grid tr.row-customer {background: #f0fdf4}
.la-grid tr:hover {filter: brightness(0.98)}

.la-toolbar {
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    padding: 10px;
    gap: 10px;
}

.la-tool {
    display: flex;
    flex-direction: column; /* This puts text on the next row */
    align-items: center;    /* This centers the icon and text horizontally */
    text-decoration: none;
    color: #999;           /* Default grey color */
    font-family: sans-serif;
    font-size: 12px;
    min-width: 80px;
    border-bottom: 3px solid transparent;
}

/* Space between icon and text */
.la-tool svg {
    margin-bottom: 5px;
}

/* Active state styling */
.la-tool.active {
    color: #2563eb; /* Orange text */
    border-bottom: 3px solid #2563eb; /* Orange bottom bar */
}

.la-tool.active svg {
    stroke: #2563eb; /* Orange icon */
}

/* The vertical dotted separators */
.la-separator {
    border-left: 1px dotted #444;
    height: 30px;
    margin: 0 5px;
}
.la-grid tr:focus-within {
  z-index: 20;
  position: relative;
}

/* Wider PU/DO Location Columns */
.la-grid th:nth-child(6),
.la-grid td:nth-child(6) {
  min-width: 120px;
}

.la-grid th:nth-child(12),
.la-grid th:nth-child(3),
.la-grid th:nth-child(13) {
  min-width: 280px;
}
.la-grid td:nth-child(12),
.la-grid td:nth-child(3),
.la-grid td:nth-child(13) {
  width: 280px;
  max-width: none;
}

.la-grid th:nth-child(3) {
  min-width: 160px;
}
.la-grid td:nth-child(3) {
  width: 160px;
  max-width: none;
}