/* ResDri driver app — RTL, theme tokens */

:root {
  /* Palette: teal (default) */
  --primary: #0F766E;
  --primary-600: #0D6F67;
  --primary-700: #115E59;
  --primary-100: #CCFBF1;
  --accent: #F59E0B;          /* "money" */
  --accent-700: #B45309;
  --success: #16A34A;
  --warning: #F59E0B;
  --danger: #DC2626;
  --whatsapp: #25D366;

  /* Surfaces — light */
  --bg: #F1F4F7;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;

  /* Typography */
  --font: "Cairo", "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Sans Arabic", "Cairo", system-ui;

  /* Density */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --card-r: 18px;
  --pad-card: 16px;
  --row-h: 56px;
}

[data-density="compact"] {
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --pad-card: 12px;
  --row-h: 48px;
  --card-r: 14px;
}

[data-theme="dark"] {
  --bg: #0B1220;
  --surface: #131B2B;
  --surface-2: #1A2336;
  --line: #1F2B43;
  --line-strong: #2E3D5C;
  --text: #E2E8F0;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --primary-100: rgba(20, 184, 166, 0.18);
}

/* Palette swaps */
[data-palette="orange"] {
  --primary: #EA580C;
  --primary-600: #DC4F08;
  --primary-700: #C2410C;
  --primary-100: #FFEDD5;
  --accent: #0EA5E9;
  --accent-700: #0369A1;
}
[data-palette="indigo"] {
  --primary: #4338CA;
  --primary-600: #3D32B6;
  --primary-700: #312E81;
  --primary-100: #E0E7FF;
  --accent: #F59E0B;
}
[data-palette="mono"] {
  --primary: #18181B;
  --primary-600: #27272A;
  --primary-700: #09090B;
  --primary-100: #E4E4E7;
  --accent: #F59E0B;
}
[data-theme="dark"][data-palette="mono"] {
  --primary: #FAFAFA;
  --primary-600: #E4E4E7;
  --primary-700: #D4D4D8;
  --primary-100: rgba(255,255,255,0.10);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: #0E1116;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, #1a2233, #0a0d14 70%);
  padding: 24px;
}

#root {
  width: 100%;
}

/* Numbers: always LTR, monospace-ish for tabular feel */
.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-feature-settings: "tnum", "lnum";
}

/* RTL helpers */
[dir="rtl"] .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Scrollbar hide in screens */
.screen-scroll::-webkit-scrollbar { display: none; }
.screen-scroll { scrollbar-width: none; }

/* Pressed feedback */
.tap {
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tap:active {
  transform: scale(0.97);
  opacity: 0.85;
}

/* Pulse for "online" dot */
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.pulse-ring::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background: currentColor;
  animation: pulse-ring 1.8s ease-out infinite;
}

/* Skeleton / chevron animation for incoming alert */
@keyframes radar-sweep {
  0%   { transform: scale(0.4); opacity: 0.6; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* Leaflet container */
.leaflet-container {
  background: var(--bg) !important;
  font-family: var(--font);
}
.leaflet-control-attribution {
  display: none !important;
}
[data-theme="dark"] .leaflet-tile {
  filter: brightness(0.65) invert(0.92) contrast(1.0) hue-rotate(180deg) saturate(0.4);
}

/* Slide-to-confirm */
.slide-track {
  position: relative;
  height: 64px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--success) 14%, transparent);
  overflow: hidden;
  user-select: none;
  border: 1px solid color-mix(in oklch, var(--success) 28%, transparent);
}
.slide-thumb {
  position: absolute;
  top: 4px;
  height: 56px;
  width: 56px;
  border-radius: 999px;
  background: var(--success);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: grab;
  box-shadow: 0 6px 20px rgba(22,163,74,0.35);
  touch-action: none;
}
.slide-thumb:active { cursor: grabbing; }

/* Glove-target ripple */
@keyframes radar-soft {
  0%   { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(2.6); opacity: 0; }
}