/* ============================================================================
WINTERIDE UI — the shared design system. ONE source of truth for every page.
Load in : is left alone, so
tab bars, +/- steppers and status toggles keep their own look.
============================================================================ */
:root{
/* brand */
--wr-navy:#0D2B4E; --wr-navy-900:#081D36; --wr-orange:#F47920; --wr-orange-dark:#C85F0A; --wr-orange-tint:#FFF0E6;
/* alpine */
--wr-blue:#1A5F8A; --wr-sky:#2B7FC4; --wr-sky2:#1D5E96; --wr-pale-blue:#D6EEF8; --wr-frost:#EEF4F9; --wr-frost-hover:#E1ECF6;
/* neutrals (navy-biased) */
--wr-ink:#12243A; --wr-muted:#5A6A7A; --wr-faint:#94A3B8; --wr-line:#D0DDE8; --wr-line-soft:#E7EEF5;
--wr-ground:#F4F8FB; --wr-surface:#FFFFFF;
/* semantic */
--wr-ok:#1F8A5B; --wr-ok-bg:#E7F5EE; --wr-warn:#8A6D0E; --wr-warn-bg:#FBF3D6;
--wr-red:#C0392B; --wr-red-bg:#FBEAE8; --wr-red-line:#ECC9C4; --wr-red-hover:#F6D8D2;
--wr-wa:#1FA855; --wr-wa-dark:#17823F;
/* shape + depth + motion */
--wr-r-sm:7px; --wr-r:9px; --wr-r-lg:14px; --wr-r-pill:999px;
--wr-shadow:0 4px 20px rgba(13,43,78,.08); --wr-shadow-lg:0 14px 40px rgba(13,43,78,.20);
--wr-ring:0 0 0 2px var(--wr-surface), 0 0 0 4px var(--wr-sky2);
--wr-font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
--wr-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
/* ---------------------------------------------------------------- BUTTONS -- */
.b,.g,.del,.wa,
.btn,.btn-primary,.btn-ghost,.btn-secondary,.btn-danger,.btn-wa,.primary,.ghost,.sec,.ed,.danger,.reject{
font:inherit; font-weight:700; line-height:1.1; cursor:pointer;
border:1px solid transparent; border-radius:var(--wr-r); padding:9px 14px;
display:inline-flex; align-items:center; justify-content:center; gap:6px;
text-decoration:none; white-space:nowrap;
transition:background .12s ease, filter .12s ease, box-shadow .12s ease;
}
.b:focus-visible,.g:focus-visible,.del:focus-visible,.wa:focus-visible,
.btn:focus-visible,.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-secondary:focus-visible,
.btn-danger:focus-visible,.btn-wa:focus-visible,.primary:focus-visible,.ghost:focus-visible,
.sec:focus-visible,.ed:focus-visible,.danger:focus-visible,.reject:focus-visible{ box-shadow:var(--wr-ring); outline:none; }
.b:active,.g:active,.del:active,.wa:active,.btn:active,.primary:active,.ghost:active,.danger:active,.reject:active{ filter:brightness(.96); }
.b[disabled],.g[disabled],.del[disabled],.wa[disabled],.btn[disabled],.primary[disabled],.ghost[disabled],.danger[disabled]{ opacity:.5; cursor:default; filter:none; }
/* PRIMARY */
.b,.btn,.btn-primary,.primary{ background:var(--wr-orange); color:#fff; }
.b:hover,.btn:hover,.btn-primary:hover,.primary:hover{ background:var(--wr-orange-dark); }
/* SECONDARY */
.g,.btn-ghost,.btn-secondary,.ghost,.sec,.ed{ background:var(--wr-frost); color:var(--wr-sky2); border-color:var(--wr-line); }
.g:hover,.btn-ghost:hover,.ghost:hover,.sec:hover,.ed:hover{ background:var(--wr-frost-hover); }
/* DANGER */
.del,.btn-danger,.danger,.reject{ background:var(--wr-red-bg); color:var(--wr-red); border-color:var(--wr-red-line); }
.del:hover,.btn-danger:hover,.danger:hover,.reject:hover{ background:var(--wr-red-hover); }
/* WHATSAPP */
.wa,.btn-wa{ background:var(--wr-wa); color:#fff; }
.wa:hover,.btn-wa:hover{ background:var(--wr-wa-dark); }
/* button GROUP — for a row/cell of actions: even gaps, tidy wrapping, uniform sizing.
Short labels snap to a common min-width so they line up; long labels expand naturally. */
.wr-btns{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wr-btns > .b, .wr-btns > .g, .wr-btns > .del, .wr-btns > .wa,
.wr-btns > .btn, .wr-btns > .ghost, .wr-btns > .danger, .wr-btns > button, .wr-btns > a{ min-width:100px; }
/* size / shape modifiers */
.btn-sm{ padding:5px 10px; font-size:12.5px; border-radius:var(--wr-r-sm); }
.btn-lg{ padding:13px 22px; font-size:16px; border-radius:var(--wr-r-lg); }
.btn-block{ display:flex; width:100%; }
a.b,a.g,a.del,a.wa,a.btn{ vertical-align:middle; }
/* ---------------------------------------------------------- BADGES / PILLS -- */
.wr-badge{ display:inline-block; padding:3px 11px; border-radius:var(--wr-r-pill); font-size:12px; font-weight:700; }
.wr-badge.ok{ background:var(--wr-ok-bg); color:var(--wr-ok); }
.wr-badge.warn{ background:var(--wr-warn-bg); color:var(--wr-warn); }
.wr-badge.bad{ background:var(--wr-red-bg); color:var(--wr-red); }
.wr-badge.info{ background:var(--wr-pale-blue); color:var(--wr-blue); }
.wr-pill{ display:inline-block; padding:3px 10px; border-radius:var(--wr-r-pill); font-size:11px; font-weight:700; background:var(--wr-pale-blue); color:var(--wr-blue); }
/* ---------------------------------------------------------------- INPUTS --- */
.wr-field{ display:flex; flex-direction:column; gap:4px; }
.wr-field > span{ font-size:12px; color:var(--wr-muted); }
.wr-input,.wr-field input,.wr-field select,.wr-field textarea{
padding:9px 11px; border:1px solid var(--wr-line); border-radius:var(--wr-r-sm);
font:inherit; background:var(--wr-surface); color:var(--wr-ink); }
.wr-input:focus-visible,.wr-field input:focus-visible,.wr-field select:focus-visible,.wr-field textarea:focus-visible{
outline:none; border-color:var(--wr-sky); box-shadow:0 0 0 3px rgba(43,127,196,.18); }
/* ----------------------------------------------------------------- CARD ---- */
.wr-card{ background:var(--wr-surface); border:1px solid var(--wr-line); border-radius:var(--wr-r-lg); padding:18px; box-shadow:var(--wr-shadow); }
/* -------------------------------------------------- MODAL / POPUP (ui.js) -- */
.wr-overlay{ position:fixed; inset:0; background:rgba(9,24,43,.48); backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;
opacity:0; transition:opacity .16s ease; }
.wr-overlay.on{ opacity:1; }
.wr-modal{ background:var(--wr-surface); color:var(--wr-ink); border-radius:var(--wr-r-lg);
box-shadow:var(--wr-shadow-lg); width:100%; max-width:440px; max-height:calc(100vh - 40px); overflow:auto;
transform:translateY(8px) scale(.98); transition:transform .16s ease; font-family:var(--wr-font); }
.wr-overlay.on .wr-modal{ transform:none; }
.wr-modal-head{ display:flex; align-items:flex-start; gap:12px; padding:20px 22px 0; }
.wr-modal-head h3{ margin:0; font-size:18px; font-weight:800; color:var(--wr-navy); flex:1; }
.wr-modal-x{ background:none; border:0; font-size:22px; line-height:1; color:var(--wr-faint); cursor:pointer; padding:0 2px; }
.wr-modal-x:hover{ color:var(--wr-ink); }
.wr-modal-body{ padding:12px 22px 4px; font-size:15px; line-height:1.55; color:var(--wr-ink); }
.wr-modal-body .wr-field{ margin-top:12px; }
.wr-modal-foot{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding:16px 22px 22px; }
.wr-modal.sm{ max-width:380px; }
/* ------------------------------------------------------------ TOAST (ui.js) */
.wr-toasts{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column;
gap:8px; align-items:center; z-index:1100; pointer-events:none; }
.wr-toast{ background:var(--wr-navy-900); color:#fff; padding:10px 16px; border-radius:var(--wr-r-pill);
font:600 13.5px/1.3 var(--wr-font); box-shadow:var(--wr-shadow-lg); display:flex; align-items:center; gap:8px;
opacity:0; transform:translateY(10px); transition:opacity .18s ease, transform .18s ease; max-width:90vw; }
.wr-toast.on{ opacity:1; transform:none; }
.wr-toast.ok{ background:var(--wr-ok); } .wr-toast.bad{ background:var(--wr-red); } .wr-toast.warn{ background:var(--wr-warn); }
@media (prefers-reduced-motion: reduce){
.b,.g,.del,.wa,.btn,.primary,.ghost,.danger,.reject,.wr-overlay,.wr-modal,.wr-toast{ transition:none; }
}