/* Vesakha Transport - shared reset/utility styles (Precision Logistics Core) */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

/* Density tweaks used on form-heavy pages (booking form, etc.) */
.form-dense input, .form-dense select, .form-dense textarea { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.form-dense label { margin-bottom: 0.125rem !important; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #c4c6cf; border-radius: 10px; }

/* Site-wide consistency: table heading/cell text and form-field text size.
   Overrides the mixed text-xs/text-sm/text-[11px] utility classes sprinkled
   across individual pages so every table and input reads at the same size. */
table th {
  font-size: 0.9375rem !important;  /* 15px */
  font-weight: 600 !important;
}
table thead,
table thead tr {
  background-color: #cbd5e1 !important; /* slate-300 — distinct from both the page bg (#e2e8f0) and white rows */
}

/* Goods Information table (booking page) is denser than other tables - scale its
   text down below the site-wide 15px table default. */
#goods-table th,
#goods-table td {
  font-size: 0.75rem !important; /* 12px */
}
table td {
  font-size: 0.9375rem !important;  /* 15px */
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
  font-size: 1rem !important;       /* 16px */
}
label,
.form-label {
  font-size: 0.9375rem !important;  /* 15px */
  color: #000000 !important;        /* was a mix of text-slate-500/600 across pages */
}

/* Unify every element — including booking codes, vehicle numbers, invoice
   refs and all other numbers previously in JetBrains Mono — to the same
   Inter font family used by field labels and plain numbers (e.g. the driver
   phone number on trip_view.php). Only icon glyphs are exempt. */
*, *::before, *::after {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

/* Section headings (e.g. "Booking Essentials") were stuck at 14px/regular-weight
   on some pages via arbitrary text-[14px] overrides — bump to match
   .text-section-title (20px, bold) used elsewhere so every section heading
   reads consistently. */
h2 {
  font-size: 1.25rem !important; /* 20px */
  font-weight: 700 !important;
}

/* Unify all field borders to the design system's black border — some pages
   still used the lighter border-slate-200 (#e2e8f0), so this darkens those
   to match .form-control's documented black border everywhere. Readonly/
   disabled fields keep their own lighter border (set in design-system.css). */
a:hover,
.btn-link:hover,
.btn-link-danger:hover {
  text-decoration: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled),
select:not(:disabled),
textarea:not([readonly]):not(:disabled),
.form-control {
  border-color: #a481bb !important;
}

/* The "black" brand color (#a481bb) is for backgrounds/borders/selection
   state only (menu selection, buttons, focus borders) — plain text stays
   true black. */
.text-black,
.hover\:text-black:hover,
.group:focus-within .group-focus-within\:text-black {
  color: #000000 !important;
}

/* Report print mode: every report_*.php page hides its nav/filter-form/action
   buttons (via Tailwind's print:hidden on those elements) and shows a
   print:block summary line (report name + selected date + total) in their
   place. Shared here since every report page uses the same pattern. */
@media print {
  @page { size: landscape; margin: 10mm; }
  body { background: #ffffff !important; }
  .bg-slate-50, .bg-slate-100, .bg-slate-200 { background-color: #ffffff !important; }
  .shadow-sm, .shadow-xl { box-shadow: none !important; }
  table th, table td { padding: 4px 6px !important; font-size: 11px !important; }
}

/* report_customer.php's Customer Detail modal (#customer-detail-modal) is printed in
   place of the report page behind it: while it's open, the page content
   (#report-customer-page) is hidden and the modal's fixed/height-capped/overlay
   styling is relaxed so its table can flow across as many printed pages as it needs. */
@media print {
  body:has(#customer-detail-modal:not(.hidden)) #report-customer-page { display: none !important; }
  #customer-detail-modal { position: static !important; inset: auto !important; background: transparent !important; padding: 0 !important; }
  #customer-detail-modal > div { max-width: 100% !important; max-height: none !important; }
  #customer-detail-modal-body { max-height: none !important; overflow: visible !important; box-shadow: none !important; }
}

/* Report pages (any $active starting "report_", see includes/header.php): tighter table
   rows than the app-wide p-md (16px) cell padding. Also covers report_customer_detail.php's
   modal table, which renders inside report_customer.php's page. */
.report-page table th.p-md,
.report-page table td.p-md {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Report pages: every row stays on a single line. Text cells (anything not a mono
   code/amount cell) are capped and cut with "…", with the full text as a hover tooltip
   on any cell that actually got cut (both done in includes/footer.php). Wide tables already scroll
   sideways inside their overflow-x-auto wrapper. */
.report-page table th.p-md,
.report-page table td.p-md {
  white-space: nowrap;
}
/* Chrome ignores max-width on a table cell itself, so includes/footer.php wraps each
   plain-text cell's content in .cell-trim and the cap goes on that instead. */
.report-page table td .cell-trim {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}