/* ═══════════════════════════════════════════════════════════════════════════
   Wellride UI — shared design tokens + components (Phase 1, 2026-11)
   One file, identical copies in: WellRide_Dashboard_v2, WellRide_Booking_v2,
   WellRide_Driver, WellRide_App_v2/dashboard. Edit one, copy to all.

   Load it LAST in <head> so it can take over each app's older color variables
   (--red, --black, --gray, --border …). Dark mode = html[data-theme="dark"],
   which every app already sets from its theme switch.
   Approved direction: radiant Wellride red, official logo, Montserrat.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand. --wr-brand is the logo red (decorative only: white text on it is 3.8:1).
     Text and button fills use --wr-act or the gradient, which pass 4.5:1. */
  --wr-brand:#FC2B2B;
  --wr-act:#DC1F1F;
  --wr-act-ink:#C41A1A;
  --wr-act-soft:#FFE9E9;
  --wr-act-line:#F8C4C4;
  --wr-act-grad:linear-gradient(135deg,#E5232A 0%,#D41C1C 55%,#B81717 100%);
  --wr-red-radiant:linear-gradient(135deg,#E5232A 0%,#C41A1A 55%,#8E1010 100%);
  --wr-halo:rgba(252,43,43,.45);
  --wr-on-act:#FFFFFF;

  /* Neutrals (cool, navy-tinted) */
  --wr-bg:#F5F7FC;
  --wr-surface:#FFFFFF;
  --wr-surface-2:#F3F5FA;
  --wr-surface-3:#EBEFF7;
  --wr-ink:#101B38;
  --wr-ink-2:#3D4866;
  --wr-muted:#5F6A87;
  --wr-soft:#646E8B;
  --wr-line:#E3E8F2;
  --wr-line-2:#D3DAE8;
  --wr-navy:#101B38;

  /* Status / meaning. Warnings are amber so they never look like a red button. */
  --wr-ok:#0B7A57;     --wr-ok-soft:#DFF6EC;     --wr-ok-line:#A9E2CB;
  --wr-warn:#8A5300;   --wr-warn-soft:#FFF1D9;   --wr-warn-line:#F2CC86;
  --wr-amber:#E08A00;
  --wr-bad:#B42318;    --wr-bad-soft:#FDECEA;    --wr-bad-line:#F5C2BC;
  --wr-info:#2448D8;   --wr-info-soft:#E6EDFF;   --wr-info-line:#C3D1FF;
  --wr-cyan:#06687A;   --wr-cyan-soft:#D9F6FB;
  --wr-violet:#5B32D6; --wr-violet-soft:#EFE9FE;
  --wr-pink:#BE185D;   --wr-pink-soft:#FCE7F3;

  /* Type, shape, depth, motion */
  --wr-font:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wr-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wr-r-sm:8px; --wr-r-md:12px; --wr-r-lg:16px; --wr-r-pill:999px;
  --wr-shadow-sm:0 1px 2px rgba(16,27,56,.05),0 4px 12px -6px rgba(16,27,56,.10);
  --wr-shadow-md:0 2px 4px rgba(16,27,56,.04),0 12px 30px -12px rgba(16,27,56,.18);
  --wr-glow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(184,23,23,.32),0 8px 22px -8px var(--wr-halo);
  --wr-glow-lg:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(184,23,23,.32),0 12px 30px -8px var(--wr-halo),0 0 22px -6px var(--wr-halo);
  --wr-ease:cubic-bezier(.2,.7,.2,1);
  --wr-dur:180ms;
}

:root[data-theme="dark"]{
  --wr-act:#FF5C5C;
  --wr-act-ink:#FF8A8A;
  --wr-act-soft:rgba(252,43,43,.16);
  --wr-act-line:rgba(252,43,43,.38);
  --wr-halo:rgba(252,43,43,.55);

  --wr-bg:#0A1128;
  --wr-surface:#111C3A;
  --wr-surface-2:#16234A;
  --wr-surface-3:#1C2B58;
  --wr-ink:#E8EDFB;
  --wr-ink-2:#C3CCE6;
  --wr-muted:#93A0C4;
  --wr-soft:#8592B8;
  --wr-line:#22305A;
  --wr-line-2:#2E3E6E;

  --wr-ok:#5FE0B4;   --wr-ok-soft:rgba(18,184,134,.16);  --wr-ok-line:rgba(95,224,180,.35);
  --wr-warn:#FFCB7A; --wr-warn-soft:rgba(255,181,71,.16); --wr-warn-line:rgba(255,203,122,.38);
  --wr-amber:#FFB547;
  --wr-bad:#FF9A9A;  --wr-bad-soft:rgba(255,90,90,.16);   --wr-bad-line:rgba(255,154,154,.38);
  --wr-info:#A9BFFF; --wr-info-soft:rgba(91,133,255,.18); --wr-info-line:rgba(169,191,255,.38);
  --wr-cyan:#6FE3F5; --wr-cyan-soft:rgba(18,203,234,.16);
  --wr-violet:#C5B0FF; --wr-violet-soft:rgba(130,87,245,.20);
  --wr-pink:#F9A8D4; --wr-pink-soft:rgba(236,72,153,.18);

  --wr-shadow-sm:0 1px 0 rgba(255,255,255,.03) inset,0 4px 14px -6px rgba(0,0,0,.55);
  --wr-shadow-md:0 1px 0 rgba(255,255,255,.03) inset,0 14px 34px -12px rgba(0,0,0,.65);
}

/* ── Bridge: the apps' older variables now point at the tokens.
   :root[data-theme] outranks the apps' own html[data-theme="dark"]{…} blocks. ── */
:root,:root[data-theme]{
  --red:var(--wr-act); --red-dark:var(--wr-act-ink); --red-soft:var(--wr-act-soft);
  --black:var(--wr-ink); --ink:var(--wr-ink);
  --gray:var(--wr-muted); --soft:var(--wr-soft);
  --gray-light:var(--wr-surface-2); --border:var(--wr-line);
  --white:var(--wr-surface); --bg:var(--wr-bg);
  --green:var(--wr-ok);
  --shadow-sm:var(--wr-shadow-sm); --shadow-md:var(--wr-shadow-md);
  --card:var(--wr-surface); --line:var(--wr-line); --track:var(--wr-surface-3); --red-tint:var(--wr-act-soft);
  --shadow:var(--wr-shadow-sm); --shadow-lg:var(--wr-shadow-md);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═════════════ Components (for new and redesigned screens) ═════════════ */
.wr-btn{font:inherit;font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--wr-r-md);border:1px solid var(--wr-line);background:var(--wr-surface);color:var(--wr-ink);cursor:pointer;transition:transform var(--wr-dur) var(--wr-ease),box-shadow var(--wr-dur) var(--wr-ease),border-color var(--wr-dur),filter var(--wr-dur)}
.wr-btn:hover{border-color:var(--wr-line-2)}
.wr-btn:focus-visible{outline:2px solid var(--wr-act);outline-offset:2px}
.wr-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.wr-btn--primary{background:var(--wr-act-grad);color:var(--wr-on-act);border-color:transparent;box-shadow:var(--wr-glow)}
.wr-btn--primary:hover{transform:translateY(-1px);filter:brightness(.97);box-shadow:var(--wr-glow-lg)}
.wr-btn--danger{background:transparent;color:var(--wr-bad);border-color:var(--wr-bad-line)}
.wr-btn--danger:hover{background:var(--wr-bad-soft)}
.wr-btn--lg{min-height:56px;font-size:1rem;border-radius:var(--wr-r-lg)}

.wr-card{background:var(--wr-surface);border:1px solid var(--wr-line);border-radius:var(--wr-r-lg);box-shadow:var(--wr-shadow-sm)}
.wr-card--radiant{background:var(--wr-red-radiant);color:#fff;border-color:transparent;box-shadow:0 14px 30px -14px var(--wr-halo)}

.wr-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;line-height:1.5;padding:2px 9px;border-radius:var(--wr-r-pill);white-space:nowrap;background:var(--wr-surface-3);color:var(--wr-ink-2)}
.wr-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.wr-pill--ok{background:var(--wr-ok-soft);color:var(--wr-ok)}
.wr-pill--warn{background:var(--wr-warn-soft);color:var(--wr-warn)}
.wr-pill--bad{background:var(--wr-bad-soft);color:var(--wr-bad)}
.wr-pill--info{background:var(--wr-info-soft);color:var(--wr-info)}
.wr-pill--cyan{background:var(--wr-cyan-soft);color:var(--wr-cyan)}
.wr-pill--violet{background:var(--wr-violet-soft);color:var(--wr-violet)}

.wr-skel{position:relative;overflow:hidden;background:var(--wr-surface-3);border-radius:var(--wr-r-sm);color:transparent!important}
.wr-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:wr-shimmer 1.3s infinite}
:root[data-theme="dark"] .wr-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
@keyframes wr-shimmer{to{transform:translateX(100%)}}

.wr-grad-text{background:linear-gradient(120deg,#FC2B2B 0%,#B81717 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .wr-grad-text{background-image:linear-gradient(120deg,#FF9A8A 0%,#FC2B2B 100%)}

/* ═════════════ Adoption: radiant red on the apps' existing controls ═════════════
   Same list in every copy; selectors that don't exist in an app do nothing. */

/* Main action buttons (booking's Copy/Book button included) */
.btn.copy,.btn-refresh,.btn-add,.td-nav-btn,.m-save,.confirm-actions .c-ok,#gateBtn,.onb-btn.primary,
#login button,.actbtn:not(.done),#callDispatch,.ib-btn:not(.ib-btn-ghost),.clockbtn.out{
  background:var(--wr-act-grad);color:var(--wr-on-act);border-color:transparent;box-shadow:var(--wr-glow);
  transition:transform var(--wr-dur) var(--wr-ease),box-shadow var(--wr-dur) var(--wr-ease),filter var(--wr-dur);
}
.btn-refresh:hover,.btn-add:hover,.td-nav-btn:hover,.m-save:hover,.confirm-actions .c-ok:hover,#gateBtn:hover,.onb-btn.primary:hover,
.btn.copy:hover,#login button:hover,.actbtn:not(.done):hover,#callDispatch:hover,.ib-btn:not(.ib-btn-ghost):hover,.clockbtn.out:hover{
  background:var(--wr-act-grad);filter:brightness(.96);box-shadow:var(--wr-glow-lg);
}
.btn-refresh:active,.m-save:active,#gateBtn:active,#login button:active,.actbtn:not(.done):active,#callDispatch:active{
  background:var(--wr-act-grad);transform:scale(.99);filter:brightness(.92);
}
.btn-refresh:disabled,.m-save:disabled,.btn-add:disabled,#gateBtn:disabled,.actbtn:not(.done):disabled{filter:grayscale(.3);box-shadow:none}

/* Selected tabs / segments: red gradient, quieter glow */
.ib-tab.on,.cal-view-btn.on,.appr-seg button.on,.seg.red button.on,.calcell.sel{
  background:var(--wr-act-grad);color:var(--wr-on-act);border-color:transparent;box-shadow:0 4px 14px -6px var(--wr-halo);
}

/* Count badges */
.notif-badge,#notifBadge,#inboxBadge,.carry-badge{background:var(--wr-act-grad);color:var(--wr-on-act);box-shadow:0 0 10px -1px var(--wr-halo)}

/* Progress fills and the dashboard's selected sidebar item */
.onb-prog>i,.fac-bar{background:var(--wr-act-grad)}
.sb-item.on{background:linear-gradient(90deg,var(--wr-act-soft),transparent 120%);color:var(--wr-act-ink);box-shadow:inset 0 0 0 1px var(--wr-act-line)}
.sb-avatar{background:var(--wr-red-radiant)}

/* Frosted top bars follow the theme background (were warm beige / fixed dark) */
.nav,:root[data-theme="dark"] .nav{background:color-mix(in srgb,var(--wr-bg) 86%,transparent);border-bottom-color:var(--wr-line)}
/* Dark feature card (e.g. Net Profit) stays navy in both themes */
.card.dark,:root[data-theme="dark"] .card.dark{background:var(--wr-navy);border-color:transparent}
:root[data-theme="dark"] .card.dark{background:#070D20;border-color:var(--wr-line)}
/* Red segmented choices (e.g. Private Pay) stay radiant in dark mode too */
:root[data-theme="dark"] .seg.red button.on{background:var(--wr-act-grad);color:var(--wr-on-act);border-color:transparent;box-shadow:0 4px 14px -6px var(--wr-halo)}

/* Printing always uses the light palette, whatever theme is on screen */
@media print{:root,:root[data-theme]{
  /* Brand. --wr-brand is the logo red (decorative only: white text on it is 3.8:1).
     Text and button fills use --wr-act or the gradient, which pass 4.5:1. */
  --wr-brand:#FC2B2B;
  --wr-act:#DC1F1F;
  --wr-act-ink:#C41A1A;
  --wr-act-soft:#FFE9E9;
  --wr-act-line:#F8C4C4;
  --wr-act-grad:linear-gradient(135deg,#E5232A 0%,#D41C1C 55%,#B81717 100%);
  --wr-red-radiant:linear-gradient(135deg,#E5232A 0%,#C41A1A 55%,#8E1010 100%);
  --wr-halo:rgba(252,43,43,.45);
  --wr-on-act:#FFFFFF;

  /* Neutrals (cool, navy-tinted) */
  --wr-bg:#F5F7FC;
  --wr-surface:#FFFFFF;
  --wr-surface-2:#F3F5FA;
  --wr-surface-3:#EBEFF7;
  --wr-ink:#101B38;
  --wr-ink-2:#3D4866;
  --wr-muted:#5F6A87;
  --wr-soft:#646E8B;
  --wr-line:#E3E8F2;
  --wr-line-2:#D3DAE8;
  --wr-navy:#101B38;

  /* Status / meaning. Warnings are amber so they never look like a red button. */
  --wr-ok:#0B7A57;     --wr-ok-soft:#DFF6EC;     --wr-ok-line:#A9E2CB;
  --wr-warn:#8A5300;   --wr-warn-soft:#FFF1D9;   --wr-warn-line:#F2CC86;
  --wr-amber:#E08A00;
  --wr-bad:#B42318;    --wr-bad-soft:#FDECEA;    --wr-bad-line:#F5C2BC;
  --wr-info:#2448D8;   --wr-info-soft:#E6EDFF;   --wr-info-line:#C3D1FF;
  --wr-cyan:#06687A;   --wr-cyan-soft:#D9F6FB;
  --wr-violet:#5B32D6; --wr-violet-soft:#EFE9FE;
  --wr-pink:#BE185D;   --wr-pink-soft:#FCE7F3;

  /* Type, shape, depth, motion */
  --wr-font:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --wr-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wr-r-sm:8px; --wr-r-md:12px; --wr-r-lg:16px; --wr-r-pill:999px;
  --wr-shadow-sm:0 1px 2px rgba(16,27,56,.05),0 4px 12px -6px rgba(16,27,56,.10);
  --wr-shadow-md:0 2px 4px rgba(16,27,56,.04),0 12px 30px -12px rgba(16,27,56,.18);
  --wr-glow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(184,23,23,.32),0 8px 22px -8px var(--wr-halo);
  --wr-glow-lg:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px rgba(184,23,23,.32),0 12px 30px -8px var(--wr-halo),0 0 22px -6px var(--wr-halo);
  --wr-ease:cubic-bezier(.2,.7,.2,1);
  --wr-dur:180ms;
  color-scheme:light;}}