/* =====================================================================
   Krishna Driver Service — Admin Panel
   Design language: "dispatch console" — a near-black command surface with
   the brand red as the single high-energy accent and the brand yellow
   reserved strictly for live/alert states, so it keeps its urgency.
   Tokens:
     --kds-black   #111111  (surfaces, chrome)
     --kds-red     #C8102E  (primary actions, brand mark)
     --kds-yellow  #FFCC00  (live/online status only)
     --kds-ink     #1B1D22  (panel background, one step off pure black)
     --kds-paper   #F5F6F8  (content canvas)
     --kds-mist    #7C828D  (secondary text)
   Type: "Inter" for UI/data (tight, legible at small sizes), a heavier
   weight reserved for section headers so hierarchy reads without extra color.
   ===================================================================== */

:root {
  --kds-black: #111111;
  --kds-red: #C8102E;
  --kds-red-dark: #9E0C24;
  --kds-yellow: #FFCC00;
  --kds-ink: #1B1D22;
  --kds-paper: #F5F6F8;
  --kds-mist: #7C828D;
  --kds-line: #E4E6EA;
  --kds-radius: 10px;
  --kds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--kds-font);
  background: var(--kds-paper);
  color: var(--kds-black);
  font-size: 14px;
}

a { text-decoration: none; }

/* ---------------------- Layout shell ---------------------- */

.kds-shell {
  display: flex;
  min-height: 100vh;
}

.kds-sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--kds-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1030;
}

.kds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.kds-sidebar-collapse-btn {
  margin-left: auto;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
}
.kds-sidebar-collapse-btn:hover { background: rgba(255,255,255,0.16); }

/* ---------------------- Manual sidebar collapse ----------------------
   User-controlled (via the button above), independent of screen width —
   collapses the sidebar completely out of view and lets the main content
   (bookings table, etc.) use the full screen width. The choice is
   remembered (localStorage) across page navigations, since each admin
   page is its own reload, not a single-page app. */
.kds-sidebar.kds-manually-collapsed {
  transform: translateX(-100%);
  transition: transform 0.2s;
}
.kds-main.kds-sidebar-collapsed-main {
  margin-left: 0 !important;
  transition: margin-left 0.2s;
}

.kds-sidebar-reopen-btn {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 1040;
  background: var(--kds-ink);
  color: #fff;
  border: none;
  width: 38px; height: 38px;
  border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-size: 16px;
}
.kds-sidebar-reopen-btn.show { display: flex; }

.kds-brand-mark {
  width: 34px; height: 34px;
  background: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  object-fit: contain;
  padding: 2px;
}

.kds-brand-text { line-height: 1.15; }
.kds-brand-text strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0.2px; }
.kds-brand-text span { font-size: 11px; color: var(--kds-mist); }

.kds-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.kds-nav-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--kds-mist); padding: 14px 10px 6px;
}
.kds-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: 8px;
  color: #C9CBD1;
  font-size: 13.5px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.kds-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kds-nav a.active { background: var(--kds-red); color: #fff; }
.kds-nav a i { width: 18px; text-align: center; font-size: 14.5px; }

.kds-sidebar-foot {
  padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: var(--kds-mist);
}

.kds-main {
  margin-left: 248px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.kds-topbar {
  height: 46px; flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--kds-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 1020;
}
/* Bookings page merges its toolbar into the topbar, so it needs to wrap
   and grow past the standard fixed 46px height on narrow screens instead
   of clipping — every other page keeps the plain fixed-height version
   above. */
.kds-topbar-wrap { height: auto; min-height: 46px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
/* Bookings list's "Free In" progress bar — a thin horizontal track with
   a colored fill showing how much of a started trip's allotted time has
   elapsed, so an admin can scan down the list and spot who's about to
   free up soonest. */
.kds-freein-bar-wrap { width: 60px; height: 6px; background: #EFF0F3; border-radius: 3px; overflow: hidden; }
.kds-freein-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
/* Booking Code link in the Bookings table — clicking opens the full
   timeline directly, so it needs a subtle hover cue without looking like
   a full-blown link the rest of the time. */
.kds-booking-code-link:hover { text-decoration: underline !important; }
/* Compact, professional icon-only toolbar buttons — a small square with
   just the icon and a hover tooltip (title attr), instead of a
   full-width outlined button with text, for actions that sit in a
   crowded single-row toolbar. */
.btn-kds-icon {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kds-line); border-radius: 8px;
  background: #fff; color: var(--kds-mist);
  font-size: 14px;
}
.btn-kds-icon:hover { background: #F5F6F8; }
.kds-topbar h1 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--kds-ink); margin: 0; }
.kds-topbar-date {
  font-size: 11.5px;
  color: var(--kds-mist);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.kds-topbar-date i { font-size: 12px; opacity: 0.7; }

@media (max-width: 576px) {
  .kds-topbar { padding: 0 14px; gap: 8px; flex-wrap: wrap; height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .kds-topbar h1 { font-size: 13px; }
  .kds-topbar-date { font-size: 10.5px; }
}

.kds-content { padding: 24px; flex: 1; }

/* ---------------------- Live status strip (signature element) ---------------------- */

.kds-pulse-strip {
  display: flex; gap: 0;
  background: var(--kds-ink);
  border-radius: var(--kds-radius);
  overflow: hidden;
  margin-bottom: 22px;
}
.kds-pulse-cell {
  flex: 1; padding: 11px 18px;
  border-right: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.kds-pulse-cell:last-child { border-right: none; }
.kds-pulse-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #9498A2; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.kds-pulse-value { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }

.kds-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kds-yellow);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,204,0,0.6);
  animation: kds-pulse 1.8s infinite;
}
@keyframes kds-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,204,0,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(255,204,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .kds-dot { animation: none; }
}

/* ---------------------- Cards / tables ---------------------- */

.kds-card {
  background: #fff;
  border: 1px solid var(--kds-line);
  border-radius: var(--kds-radius);
  padding: 20px;
}
.kds-card-title {
  font-size: 14px; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}

.table-kds { font-size: 13.5px; }
.table-kds thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--kds-mist); font-weight: 600; border-bottom: 1px solid var(--kds-line);
  background: #FAFAFB;
}
.table-kds td { vertical-align: middle; }

.kds-badge { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; display: inline-block; }
.kds-badge-online { background: #EAF9EE; color: #1E8E4A; }
.kds-badge-offline { background: #F0F1F3; color: var(--kds-mist); }
.kds-badge-busy { background: #FFF4E0; color: #B9770E; }
.kds-badge-pending { background: #FFF4E0; color: #B9770E; }
.kds-badge-verified { background: #EAF9EE; color: #1E8E4A; }
.kds-badge-suspended,
.kds-badge-rejected,
.kds-badge-cancelled { background: #FDEAEC; color: var(--kds-red-dark); }
.kds-badge-completed { background: #EAF9EE; color: #1E8E4A; }
.kds-badge-assigned,
.kds-badge-accepted,
.kds-badge-started { background: #E9F0FF; color: #2554C7; }
/* KDS status colours: accepted = neela, started = peela */
.kds-badge-accepted { background: #CFE0FF; color: #1D4ED8; }
.kds-badge-started { background: #FFE066; color: #6B4E00; }
/* pending = laal (booking ko abhi driver nahi mila) */
.kds-bookings-table-wrap .kds-badge-pending, .kds-booking-mobile-card .kds-badge-pending { background: #F9C9D0; color: #A00D25; }

.btn-kds-primary {
  background: var(--kds-red); border-color: var(--kds-red); color: #fff;
}
.btn-kds-primary:hover { background: var(--kds-red-dark); border-color: var(--kds-red-dark); color: #fff; }
.btn-kds-outline {
  border: 1px solid var(--kds-line); color: var(--kds-black); background: #fff;
}
.btn-kds-outline:hover { background: #F5F6F8; }

/* ---------------------- Login page ---------------------- */

.kds-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--kds-ink);
  background-image: radial-gradient(circle at 20% 20%, rgba(200,16,46,0.18), transparent 45%),
                     radial-gradient(circle at 80% 80%, rgba(255,204,0,0.08), transparent 40%);
}
.kds-login-card {
  width: 380px; background: #fff; border-radius: 14px; padding: 34px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.kds-login-mark {
  width: 64px; height: 64px; border-radius: 12px;
  object-fit: contain; margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* ---------------------- Leaderboard ---------------------- */

.kds-leader-card {
  border: 1px solid var(--kds-line);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 150px;
  text-align: center;
}
.kds-leader-card .rank { font-size: 11px; font-weight: 700; color: var(--kds-red); }
.kds-leader-card .name { font-weight: 700; font-size: 13px; margin: 4px 0 2px; }
.kds-leader-card .metric { font-size: 12px; color: var(--kds-mist); }

/* ---------------------- Customer picker (searchable dropdown) ---------------------- */

.kds-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kds-mist);
  font-size: 12.5px;
  pointer-events: none;
}
.kds-search-input {
  padding-left: 28px !important;
  height: 30px;
  font-size: 12px;
  border-radius: 18px;
  border-width: 1.5px;
  border-color: var(--kds-red);
  background: #FFF5F6;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.08);
}
.kds-search-input:focus {
  border-width: 1.5px;
  border-color: var(--kds-red);
  box-shadow: 0 0 0 0.1rem rgba(200, 16, 46, 0.12);
}

/* ---------------------- Compact dropdown (e.g. Car Type — short words like "Sedan"/"SUV" don't need a full-column-width box) ---------------------- */
.kds-select-compact {
  max-width: 160px;
}

/* ---------------------- Hour/Minute picker (Scheduled Date & Time) ----------------------
   A pair of plain <select> dropdowns instead of native datetime-local's
   time-scroll widget — browsers don't reliably honor step="300" in their
   native picker (still lets you scroll every single minute), so this
   guarantees only real 5-minute-aligned options ever show up, in one
   click, no scrolling through 1/2/3/4... one minute at a time. */
.kds-time-select {
  max-width: 78px;
  text-align: center;
  text-align-last: center;
  flex-shrink: 0;
}

/* ---------------------- Driver-details-not-yet-shared highlight ---------------------- */

.kds-row-needs-share {
  background: #FFF8E1 !important;
}
.kds-row-needs-share:hover {
  background: #FFF1C7 !important;
}
.kds-share-badge {
  background: #FFCC00;
  color: #7A5C00;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
}

.kds-customer-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--kds-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  z-index: 1060;
  max-height: 280px;
  overflow-y: auto;
}
.kds-customer-dropdown.show { display: block; }
.kds-customer-add-new {
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--kds-red);
  cursor: pointer; border-bottom: 1px solid var(--kds-line);
}
.kds-customer-add-new:hover { background: #FFF5F6; }
.kds-customer-result {
  padding: 10px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #F3F3F4;
}
.kds-customer-result:last-child { border-bottom: none; }
.kds-customer-result:hover { background: #FAFAFB; }
.kds-customer-result .mobile { color: var(--kds-mist); font-size: 11.5px; }
.kds-customer-empty { padding: 14px; text-align: center; color: var(--kds-mist); font-size: 12.5px; }

/* ---------------------- Map ---------------------- */

#liveMap { width: 100%; height: 560px; border-radius: var(--kds-radius); }

.kds-driver-chip {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--kds-line); border-radius: 8px; margin-bottom: 8px;
  font-size: 13px; cursor: pointer; background: #fff;
}
.kds-driver-chip:hover { border-color: var(--kds-red); }
.kds-driver-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.kds-driver-chip .dot.online { background: #1E8E4A; }
.kds-driver-chip .dot.busy { background: var(--kds-yellow); box-shadow: 0 0 0 0 rgba(255,204,0,0.6); }
.kds-driver-chip .stale { color: var(--kds-mist); font-size: 11px; margin-left: auto; }

/* ---------------------- Medium widths (laptop half-screen, tablets) ----------------------
   Instead of hiding the sidebar entirely (which used to kick in as early as
   900px — well within normal "snap window to half screen" laptop widths,
   making the whole left nav vanish with no obvious way back), it collapses
   to an icon-only rail here. Still fully usable, just narrower — hover
   shows a tooltip with the full label (see the title attribute in ui.js). */
@media (max-width: 1024px) and (min-width: 601px) {
  .kds-sidebar { width: 64px; }
  .kds-brand-text, .kds-nav-label, .kds-nav-item-label, .kds-sidebar-foot { display: none; }
  .kds-brand { justify-content: center; padding: 0; }
  .kds-nav a { justify-content: center; padding: 12px 0; }
  .kds-nav a i { margin: 0; font-size: 18px; }
  .kds-main { margin-left: 64px; }
}

/* ---------------------- Narrow widths (phones) ----------------------
   True mobile — the sidebar hides completely and opens via the hamburger
   button instead, since even the icon-only rail above doesn't leave enough
   room for comfortable content on an actual phone screen. */
@media (max-width: 600px) {
  .kds-sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 248px; }
  .kds-sidebar.open { transform: translateX(0); }
  .kds-main { margin-left: 0; }
  .kds-hamburger { display: flex; }
  .kds-sidebar-reopen-btn { display: none !important; }
}

.kds-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--kds-ink, #111111);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.kds-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.kds-sidebar-backdrop.open { display: block; }
.kds-sidebar { z-index: 1000; }

/* Mobile card view for Bookings (used by narrow-screen browsers and the
   Admin App's WebView) — mirrors the Driver App's own booking-card look
   (colored left accent bar, rounded card, status badge) so bookings feel
   consistent across both apps, instead of a cramped desktop-style table. */
.kds-bookings-card-list { display: none; }

.kds-booking-mobile-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
}
.kds-booking-mobile-card__accent { width: 6px; flex-shrink: 0; }
.kds-booking-mobile-card__body { flex: 1; padding: 14px 14px 12px; min-width: 0; }
.kds-booking-mobile-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kds-booking-mobile-card__code { font-weight: 800; font-size: 14px; letter-spacing: 0.2px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-booking-mobile-card__badge { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }
.kds-booking-mobile-card__row { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #1A1D29; margin-bottom: 5px; }
.kds-booking-mobile-card__row i { color: #7C828D; font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.kds-booking-mobile-card__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kds-booking-mobile-card__divider { height: 1px; background: #EFF0F3; margin: 10px 0 8px; }
.kds-booking-mobile-card__bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.kds-booking-mobile-card__time { font-size: 12.5px; font-weight: 800; color: #1A1D29; display: flex; align-items: center; gap: 5px; }
.kds-booking-mobile-card__time i { color: #C8102E; }
.kds-booking-mobile-card__fare { font-weight: 800; color: #C8102E; font-size: 17px; }
.kds-booking-mobile-card__menu {
  background: none; border: none; color: #7C828D; font-size: 20px;
  padding: 4px 10px; margin: -4px -6px -4px 0; flex-shrink: 0;
}

@media (max-width: 600px) {
  .kds-bookings-table-wrap { display: none; }
  .kds-bookings-card-list { display: block; }
}

/* Dashboard's "pulse strip" (5 live stats) on mobile — a cramped 5-in-a-
   row layout would truncate labels like "Completed Today"/"Collected
   Today" on a narrow screen, so this switches to a cleaner 2-column grid
   instead, giving each stat proper breathing room. */
@media (max-width: 600px) {
  .kds-pulse-strip { flex-wrap: wrap; }
  .kds-pulse-cell {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .kds-pulse-cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); }
  .kds-pulse-cell:nth-last-child(-n+2) { border-bottom: none; }
}

/* Bookings page's topbar on mobile — the "New Booking" button (the most
   important action on this page) used to just get squeezed wherever
   flexbox happened to put it alongside the filter dropdown and small
   icon buttons. This makes it a clear, full-width, easy-to-tap primary
   action on its own row instead, with the secondary controls (filter,
   refresh, pool/invoice actions) staying together above it. */
@media (max-width: 600px) {
  .kds-topbar-wrap { flex-direction: column; align-items: stretch; }
  .kds-topbar-wrap > .d-flex.flex-wrap { order: 1; }
  .kds-new-booking-btn {
    order: 2;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 700;
  }
}

/* KDS_TIGHT_LAYOUT: laptop par daayein-baayein khaali jagah kam, table ko poori chaudai */
@media (min-width: 601px) {
  .kds-content { padding: 12px 10px 16px; }
  .kds-bookings-table-wrap { padding-left: 8px !important; padding-right: 8px !important; }
}