/* ============================================================
   app-extra.css — utilities missing from the compiled app.css
   ============================================================
   assets/css/app.css is a pre-built Tailwind bundle. It only contains
   the classes the app used at build time, so any utility introduced
   afterwards resolves to nothing and silently does nothing — which is
   how the combobox chevron ended up rendering below its input instead
   of inside it.

   These rules reproduce Tailwind's output for the classes added since.
   If app.css is ever regenerated from a real Tailwind build, this file
   becomes redundant and can be dropped.
   ============================================================ */

/* ── Positioning ─────────────────────────────────────────── */
.inset-y-0        { top: 0; bottom: 0; }
.z-40             { z-index: 40; }

/* ── Sizing / overflow ───────────────────────────────────── */
.max-h-64         { max-height: 16rem; }
.max-h-96         { max-height: 24rem; }
.overflow-y-auto  { overflow-y: auto; }

/* ── Spacing ─────────────────────────────────────────────── */
.px-6             { padding-left: 1.5rem; padding-right: 1.5rem; }
.pr-4             { padding-right: 1rem; }
.py-14            { padding-top: 3.5rem; padding-bottom: 3.5rem; }

/* ── Flex / grid ─────────────────────────────────────────── */
.items-end        { align-items: flex-end; }

@media (min-width: 1024px) {
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Borders ─────────────────────────────────────────────── */
.border-t-2       { border-top-width: 2px; }
.border-amber-100 { --tw-border-opacity: 1; border-color: rgb(254 243 199 / var(--tw-border-opacity, 1)); }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}

/* ── Type ────────────────────────────────────────────────── */
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.text-\[11px\]    { font-size: 11px; line-height: 1.45; }
.text-brand-700   { --tw-text-opacity: 1; color: rgb(163 26 27 / var(--tw-text-opacity, 1)); }

/* ── Shadow ──────────────────────────────────────────────── */
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── Interactive states ──────────────────────────────────── */
.hover\:bg-brand-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

/* ── Dark-mode variants ──────────────────────────────────── */
.dark .dark\:bg-gray-800\/60      { background-color: rgb(31 41 55 / .6); }
.dark .dark\:border-amber-900\/50 { border-color: rgb(120 53 15 / .5); }
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
}
.dark .dark\:hover\:bg-brand-900\/30:hover { background-color: rgb(59 18 18 / .3); }

/* ── Combobox: keep the panel above sticky table headers ─── */
.ss-panel { box-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 4px 10px -6px rgba(0,0,0,.1); }
.dark .ss-panel { box-shadow: 0 10px 25px -5px rgba(0,0,0,.5), 0 4px 10px -6px rgba(0,0,0,.4); }


/* ── Directional padding ─────────────────────────────────────
   Only px-* variants were in the compiled build, so every pl-*/pr-*
   used in an RTL ternary resolved to nothing and the combobox text sat
   flush against its border. */
.pl-2   { padding-left: 0.5rem; }
.pl-3   { padding-left: 0.75rem; }
.pl-3\.5 { padding-left: 0.875rem; }
.pl-9   { padding-left: 2.25rem; }
.pl-10  { padding-left: 2.5rem; }
.pr-2   { padding-right: 0.5rem; }
.pr-3   { padding-right: 0.75rem; }
.pr-3\.5 { padding-right: 0.875rem; }
.pr-9   { padding-right: 2.25rem; }
.pr-10  { padding-right: 2.5rem; }

/* ── Positioning used by the Profits tab search icon ─────── */
.left-3    { left: 0.75rem; }
.right-3   { right: 0.75rem; }
.top-1\/2  { top: 50%; }
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ── Misc ────────────────────────────────────────────────── */
.w-48             { width: 12rem; }
.tracking-widest  { letter-spacing: 0.1em; }

/* ── Combobox ────────────────────────────────────────────── */
.ss-input {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ss-input::placeholder      { color: #9ca3af; opacity: 1; }
.dark .ss-input::placeholder { color: #6b7280; }

/* A chosen value should read as data, not as a hint */
.ss-input.ss-has-value { font-weight: 600; }

.ss-panel {
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 4px 10px -6px rgba(0,0,0,.1);
  animation: ssIn .12s ease-out;
}
.dark .ss-panel { box-shadow: 0 10px 25px -5px rgba(0,0,0,.5), 0 4px 10px -6px rgba(0,0,0,.4); }

@keyframes ssIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-panel { animation: none; }
}

/* Comfortable hit targets on touch devices */
@media (max-width: 640px) {
  .ss-option { padding-top: .625rem; padding-bottom: .625rem; }
}

.ss-option mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Responsive grid spans for the settlement filter bar ──── */
.pointer-events-none { pointer-events: none; }

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-2   { grid-column: span 2 / span 2; }
  .lg\:col-span-3   { grid-column: span 3 / span 3; }
  .lg\:col-span-4   { grid-column: span 4 / span 4; }
  .lg\:col-span-6   { grid-column: span 6 / span 6; }
}

/* ============================================================
   Dashboard charts
   ============================================================
   SVG has no notion of Tailwind's dark: variant, so chart chrome
   is themed here through the .dark class on <html>.
   ============================================================ */

.chart-grid  { stroke: #eef0f3; }
.chart-guide { stroke: #9ca3af; }
.chart-axis  { fill: #9ca3af; font-size: 10px; font-variant-numeric: tabular-nums; }

.dark .chart-grid  { stroke: #262f3d; }
.dark .chart-guide { stroke: #6b7280; }
.dark .chart-axis  { fill: #6b7280; }

/* Bars grow into place on load, and resize smoothly when the period changes */
.chart-bar { transition: width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1); }

/* Weekday columns reveal their value on hover, keeping the row uncluttered */
.chart-col-value { opacity: 0; transition: opacity .15s ease; }
.chart-col:hover .chart-col-value,
.chart-col:focus-within .chart-col-value { opacity: 1; }
.chart-col:hover .chart-bar { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .chart-bar { transition: none; }
}

/* Charts must not force the page to scroll sideways on a phone */
.kpi-grid { min-width: 0; }
svg { max-width: 100%; }

/* Utilities used by the charts that the compiled bundle lacks */
.h-7    { height: 1.75rem; }
.w-4    { width: 1rem; }
.w-10   { width: 2.5rem; }
.w-14   { width: 3.5rem; }
.h-1\.5 { height: 0.375rem; }
.h-5    { height: 1.25rem; }
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }
.mt-auto { margin-top: auto; }
.min-w-0 { min-width: 0; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-1 { row-gap: 0.25rem; }
.rounded-sm  { border-radius: 0.125rem; }
.rounded-md  { border-radius: 0.375rem; }
.rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.text-blue-400  { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); }
.bg-amber-400   { --tw-bg-opacity: 1; background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1)); }
.bg-blue-400    { --tw-bg-opacity: 1; background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); }

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Layout utilities used by the dashboard overview ──────── */
.items-baseline { align-items: baseline; }
.items-start    { align-items: flex-start; }
.justify-end    { justify-content: flex-end; }
.gap-2\.5       { gap: 0.625rem; }
.pt-2\.5        { padding-top: 0.625rem; }
.px-1\.5        { padding-left: 0.375rem; padding-right: 0.375rem; }

@media (min-width: 640px) {
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:p-5   { padding: 1.25rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Rider detail rows on the settlement page ─────────────── */
.px-0 { padding-left: 0; padding-right: 0; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.hover\:bg-white:hover           { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.hover\:border-brand-300:hover   { --tw-border-opacity: 1; border-color: rgb(247 168 168 / var(--tw-border-opacity, 1)); }

.dark .dark\:bg-gray-800\/40 { background-color: rgb(31 41 55 / .4); }
.dark .dark\:bg-gray-800\/50 { background-color: rgb(31 41 55 / .5); }
.dark .dark\:hover\:border-brand-700:hover { border-color: rgb(163 26 27 / 1); }

/* ── Settlement page: alert banner, lens switcher, money bar ─ */
.p-3            { padding: 0.75rem; }
.gap-6          { gap: 1.5rem; }
.w-1\.5         { width: 0.375rem; }
.w-56           { width: 14rem; }
.hover\:underline:hover { text-decoration-line: underline; }

.text-amber-900   { --tw-text-opacity: 1; color: rgb(120 53 15 / var(--tw-text-opacity, 1)); }
.border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity, 1)); }
.bg-amber-500     { --tw-bg-opacity: 1; background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1)); }
.hover\:bg-amber-600:hover { --tw-bg-opacity: 1; background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1)); }

.dark .dark\:text-amber-200        { --tw-text-opacity: 1; color: rgb(253 230 138 / var(--tw-text-opacity, 1)); }
.dark .dark\:bg-amber-900\/20      { background-color: rgb(120 53 15 / .2); }
.dark .dark\:bg-amber-900\/50      { background-color: rgb(120 53 15 / .5); }
.dark .dark\:bg-green-900\/20      { background-color: rgb(20 83 45 / .2); }
.dark .dark\:border-amber-900\/60  { border-color: rgb(120 53 15 / .6); }
.dark .dark\:border-green-900\/60  { border-color: rgb(20 83 45 / .6); }

@media (min-width: 640px) {
  .sm\:p-3        { padding: 0.75rem; }
  .sm\:p-4        { padding: 1rem; }
  .sm\:gap-8      { gap: 2rem; }
  .sm\:flex-none  { flex: none; }
  .sm\:inline-flex { display: inline-flex; }
}

@media (min-width: 1024px) {
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}

/* ── Driver portal ────────────────────────────────────────── */
.mt-1\.5    { margin-top: 0.375rem; }
.opacity-50 { opacity: 0.5; }
.opacity-80 { opacity: 0.8; }
.text-4xl   { font-size: 2.25rem; line-height: 2.5rem; }

/* ── Rider account card ───────────────────────────────────── */
.rider-card {
  background: linear-gradient(135deg, #e0292a 0%, #b81f20 55%, #8f1718 100%);
  box-shadow: 0 10px 30px -10px rgba(224, 41, 42, .45);
}
.rider-card::after {
  content: '';
  position: absolute;
  top: -55%; right: -18%;
  width: 78%; height: 190%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 68%);
  pointer-events: none;
}
.dark .rider-card { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }

/* ── Notification toast ───────────────────────────────────── */
.toast-in { animation: toastIn .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .toast-in { animation: none; } }

/* ── Utilities the compiled bundle lacks ──────────────────── */
.min-w-\[16px\]  { min-width: 16px; }
.max-w-\[92vw\]  { max-width: 92vw; }
.max-w-\[90vw\]  { max-width: 90vw; }
.w-72   { width: 18rem; }
.w-80   { width: 20rem; }
.w-9    { width: 2.25rem; }
.h-5    { height: 1.25rem; }
.h-4    { height: 1rem; }
.w-8    { width: 2rem; }
.h-8    { height: 2rem; }
.top-0\.5   { top: 0.125rem; }
.left-0\.5  { left: 0.125rem; }
.right-0\.5 { right: 0.125rem; }
.top-1  { top: 0.25rem; }
.right-1 { right: 0.25rem; }
.left-1  { left: 0.25rem; }
.max-h-80 { max-height: 20rem; }
.z-50   { z-index: 50; }
.bottom-4 { bottom: 1rem; }
.right-4  { right: 1rem; }
.left-4   { left: 1rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pb-1   { padding-bottom: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.-m-2   { margin: -0.5rem; }
.text-brand-400 { --tw-text-opacity: 1; color: rgb(242 112 112 / var(--tw-text-opacity, 1)); }
.bg-green-400   { --tw-bg-opacity: 1; background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1)); }
.bg-green-500   { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); }
.bg-brand-50\/40 { background-color: rgb(254 242 242 / .4); }
.dark .dark\:bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); }
.dark .dark\:bg-brand-900\/10 { background-color: rgb(59 18 18 / .1); }
.dark .dark\:bg-gray-900\/50  { background-color: rgb(17 24 39 / .5); }
.dark .dark\:border-gray-700\/50 { border-color: rgb(55 65 81 / .5); }
.dark .dark\:hover\:bg-gray-700\/50:hover { background-color: rgb(55 65 81 / .5); }
.dark .dark\:hover\:bg-gray-700:hover { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); }

/* ── Remaining utilities for the bell and rider card ──────── */
.bg-gray-300      { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); }
.bg-transparent   { background-color: transparent; }
.border-gray-50   { --tw-border-opacity: 1; border-color: rgb(249 250 251 / var(--tw-border-opacity, 1)); }
.border-white\/15 { border-color: rgb(255 255 255 / .15); }
.leading-relaxed  { line-height: 1.625; }
.pointer-events-auto { pointer-events: auto; }
.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }
.opacity-75 { opacity: .75; }
.hover\:opacity-100:hover { opacity: 1; }
.pt-4  { padding-top: 1rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.text-\[10px\] { font-size: 10px; line-height: 1.4; }
.dark .dark\:bg-gray-600 { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)); }