/* RentalCloud.ai — PUBLIC web shared shell = NAVY STEEL (refined glassmorphic).
   Base #070c16, electric-blue accent #4d8dff, frosted glass panels, Archivo/Barlow/JetBrains Mono.
   ONE refined layout + FIVE accent themes (html[data-web-theme]) + Day/Night (html[data-web-mode]).
   Loaded on EVERY public page via web_include_css. Pages that render their own header/footer
   (homepage, marketplace, listing, equipment_detail) scope over this; the rest inherit it. */
:root{
  --bg0:#070c16; --bg1:#0e1728; --accent:#4d8dff; --accentSoft:#8fb4ff;
  --glow:rgba(77,141,255,.45); --text:#eaf1ff; --dim:#8ea3c4;
  --glass:rgba(24,40,70,.45); --border:rgba(120,160,220,.2); --ink:#08111f; --accent-edge:#2e5fb0;
  /* legacy --rc-* aliases so older inline refs resolve to Navy Steel */
  --rc-bg1:var(--bg0); --rc-bg2:var(--bg1); --rc-text:var(--text); --rc-dim:var(--dim);
  --rc-accent:var(--accent); --rc-accent-soft:var(--accentSoft); --rc-primary:var(--accent);
  --rc-glass:var(--glass); --rc-border:var(--border);
  --rc-orange:var(--accent); --rc-orange-hi:var(--accentSoft); --rc-orange-edge:var(--accent-edge); --rc-yellow:#f5b700;
}
/* Frappe's website bundle defines --text-muted (#525252) and --text-light (#7c7c7c) for a
   LIGHT page. Every www console that writes `var(--text-muted, <dark-appropriate grey>)` therefore
   NEVER sees its own fallback — the vendor variable IS defined, just for the wrong palette. On
   /counter that painted the category label under every catalogue tile, the empty-cart hint and the
   page subtitle at 2.15-2.5:1 on the dark register. Re-point the vendor tokens at --dim, which the
   day block already flips, so this is correct in both modes. `html:root` is (0,1,1) and therefore
   beats the vendor's `:root` (0,1,0) whatever the load order. */
html:root{ --text-muted:var(--dim); --text-light:var(--dim); }

/* ---- FIVE accent themes (swap via html[data-web-theme]; default = Navy Steel) ---- */
html[data-web-theme="iron"]{--bg0:#0d0e11;--bg1:#181a1f;--accent:#e07a3c;--accentSoft:#f0a06a;--glow:rgba(224,122,60,.42);--text:#f1f3f6;--dim:#9aa1ad;--glass:rgba(54,58,66,.45);--border:rgba(180,186,196,.16);--accent-edge:#a8500f}
html[data-web-theme="amber"]{--bg0:#12100a;--bg1:#1e1810;--accent:#f5a623;--accentSoft:#ffc861;--glow:rgba(245,166,35,.45);--text:#fbf4e6;--dim:#b9a888;--glass:rgba(74,60,28,.4);--border:rgba(235,185,90,.18);--accent-edge:#a8700f}
html[data-web-theme="diesel"]{--bg0:#0a0f0b;--bg1:#121a12;--accent:#a6e22e;--accentSoft:#c8f06a;--glow:rgba(166,226,46,.4);--text:#eef5e8;--dim:#93a58a;--glass:rgba(40,60,36,.42);--border:rgba(166,226,46,.16);--accent-edge:#5f8a1e}
html[data-web-theme="cyan"]{--bg0:#080b0e;--bg1:#0f151a;--accent:#22d3ee;--accentSoft:#7ce9f7;--glow:rgba(34,211,238,.4);--text:#e6f6fa;--dim:#89a6ad;--glass:rgba(20,44,52,.42);--border:rgba(90,200,220,.16);--accent-edge:#0e7d90}
/* ---- DAY mode: lifted frosted "paper" keeping the SAME per-theme accent (opt-in data attr) ---- */
/* ROOT-CLASS FIX 2026-07-25 — portal.css carries its own mode axis (data-web-mode="day"),
   but the CONSOLES run on the shell/token axis (data-theme-mode="light"). Nothing set
   data-web-mode on a console, so portal.css stayed on its DARK defaults there — and its
   `.card{background:var(--glass)!important}` then painted a dark navy scrim over every
   console card in day mode, with dark-mode ink on top. That single override produced the
   bulk of the day-mode contrast failures across the cockpits (587 of them on /rcops alone).
   Honour BOTH axes so the two theme systems can never disagree about what mode it is. */
html[data-web-mode="day"], html[data-theme-mode="light"]{--bg0:#eef2f9;--bg1:#dfe6f2;--text:#0c1626;--dim:#4a5b76;--glass:rgba(255,255,255,.62);--border:rgba(40,70,120,.16)}

html,body { min-height:100%; }
/* Native controls the sheet does not restyle — an unclassed <select>, input[type=range],
   scrollbars — render in the OS LIGHT palette unless the document declares its scheme. That is
   why the marketplace radius select (#rc-geo-radius) and price slider (#mktMax) painted pure
   white on the night storefront: two of the largest white-background leaks on the busiest public
   page. Declare the scheme on the same two axes everything else here uses. */
html{ color-scheme:dark; }
html[data-web-mode="day"], html[data-theme-mode="light"]{ color-scheme:light; }
body { background:var(--bg0) !important; color:var(--text); overflow-x:hidden; }
/* full-viewport fixed backdrop: dark base + accent aurora over a blurred equipment hero */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(42% 42% at 18% 18%, var(--glow), transparent 60%),
    radial-gradient(46% 46% at 84% 86%, var(--glow), transparent 66%),
    linear-gradient(180deg, rgba(7,12,22,.74), rgba(7,12,22,.9)),
    url('/assets/rental_theme/images/hero.jpg') center center / cover no-repeat;
}
body::after{
  content:""; position:fixed; inset:-15%; z-index:-1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(30% 30% at 60% 28%, var(--glow), transparent 60%),
    radial-gradient(26% 26% at 12% 62%, var(--glow), transparent 60%);
  animation: rcMeshStore 30s ease-in-out infinite;
}
html[data-web-mode="day"] body::before{
  background:radial-gradient(50% 50% at 20% 8%, var(--glow), transparent 60%), var(--bg0);
  opacity:.85;
}
@keyframes rcMeshStore{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(6%,-5%) scale(1)}100%{transform:translate(0,0) scale(1.1)}}

/* ---- HEADER (shared Frappe navbar) — glass bar + cloud-keyhole brand logo ---- */
.navbar{ background-color:#070c16 !important;   /* opaque base UNDER the gradient */
  background-image:linear-gradient(180deg,rgba(7,12,22,.85),rgba(7,12,22,.55)) !important;
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border); }
/* The navbar stays DARK in BOTH modes by design (the gradient above is not mode-scoped), but its
   text inherits --text, which flips to dark ink in day mode — giving dark-on-dark at 1.46:1 on
   every portal page. The bar is the constant here, so its ink must be too: pin light ink for day.
   Measured 2026-07-25 on /superadmin and /party; it affected every page carrying the shared bar. */
html[data-theme-mode="light"] .navbar,
html[data-theme-mode="light"] .navbar a,
html[data-theme-mode="light"] .navbar .nav-link,
html[data-theme-mode="light"] .navbar .navbar-brand,
html[data-theme-mode="light"] .navbar .dropdown-toggle{ color:#eaf1ff !important; }
html[data-theme-mode="light"] .navbar .nav-link:hover,
html[data-theme-mode="light"] .navbar a:hover{ color:#ffffff !important; }
@media(prefers-color-scheme:light){
  html:not([data-theme-mode="dark"]) .navbar,
  html:not([data-theme-mode="dark"]) .navbar a,
  html:not([data-theme-mode="dark"]) .navbar .nav-link,
  html:not([data-theme-mode="dark"]) .navbar .navbar-brand,
  html:not([data-theme-mode="dark"]) .navbar .dropdown-toggle{ color:#eaf1ff !important; }
}
.navbar .navbar-brand{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em;
  color:var(--text) !important; display:inline-flex; align-items:center; }
.navbar .navbar-brand::before{ content:""; width:30px; height:30px; margin-right:10px; flex:0 0 auto; border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='k'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Ccircle cx='12' cy='12.4' r='2.3' fill='%23000'/%3E%3Cpath d='M10.4 13.2 13.6 13.2 14.1 17.6 9.9 17.6Z' fill='%23000'/%3E%3C/mask%3E%3Cg mask='url(%23k)' fill='%230e1728'%3E%3Crect x='3.5' y='13.5' width='17' height='5' rx='2.4'/%3E%3Ccircle cx='7.5' cy='14' r='4'/%3E%3Ccircle cx='12' cy='10.3' r='5.6'/%3E%3Ccircle cx='16.5' cy='14' r='4'/%3E%3C/g%3E%3C/svg%3E") center / 18px 18px no-repeat,
    linear-gradient(140deg,var(--accent),var(--accentSoft));
  box-shadow:0 8px 22px -8px var(--glow); }
.navbar a.nav-link, .navbar .nav-link{ color:var(--dim) !important; font-family:'Barlow',sans-serif;
  text-transform:none; letter-spacing:0; font-size:.95rem; }
.navbar a.nav-link:hover, .navbar .nav-link:hover, .navbar a.nav-link.active{ color:var(--text) !important; }
/* Mobile hamburger */
.navbar-toggler{ border:1px solid var(--border) !important; border-radius:8px !important;
  padding:.4rem .55rem !important; background:var(--glass) !important; outline:none; }
.navbar-toggler:focus{ box-shadow:0 0 0 2px var(--glow); }
.navbar-toggler .icon, .navbar-toggler svg{ display:none !important; }
.navbar-toggler::before{ content:""; display:block; width:22px; height:2px; border-radius:2px;
  background:var(--text); box-shadow:0 7px 0 var(--text), 0 -7px 0 var(--text); }
@media (max-width:991px){
  .navbar .navbar-collapse{ background:rgba(7,12,22,.94); backdrop-filter:blur(16px);
    border:1px solid var(--border); border-radius:12px; margin-top:.6rem; padding:.4rem .6rem; }
  .navbar .navbar-collapse .nav-link{ padding:.6rem .4rem; }
}

/* ---- Typography ---- */
h1,h2,h3,h4,h5{ color:var(--text); font-family:'Archivo',sans-serif; text-transform:none; letter-spacing:-.01em; }
a{ color:var(--accent); }
/* Day mode link ink. --accent (#4d8dff) is 2.85:1 on the day paper (#eef2f9) and fails AA.
   The accent token itself must NOT be darkened: .btn-primary paints dark ink (--ink) ON an
   accent slab, so darkening the accent fixes the link and breaks the button. Give the TEXT
   usage its own day ink instead, at (0,1,1) and without !important, so any page-level or
   navbar rule still wins. #1d4ed8 on #eef2f9 = 5.9:1. */
html[data-web-mode="day"] a, html[data-theme-mode="light"] a{ color:#1d4ed8; }

/* ---- Portal hero (consign / quote get the refined Navy Steel treatment) ---- */
.rc-phero{ position:relative; padding:3.2rem 0 1.4rem; margin-bottom:1.4rem; overflow:hidden; }
.rc-phero .eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.rc-phero .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.rc-phero h1{ font-family:'Archivo',sans-serif; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(30px,4vw,46px); color:var(--text); margin:0 0 .55rem; }
.rc-phero p{ color:var(--dim); font-size:1.05rem; max-width:560px; margin:0; }
.rc-phero .orb{ position:absolute; top:-70%; right:-8%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 62%); filter:blur(30px); opacity:.5; pointer-events:none; z-index:-1; }
@media (max-width:600px){ .rc-phero{ padding:2.2rem 0 1rem; } }

/* ---- Cards (glass panels) ---- */
.card{ background:var(--glass) !important; backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--border) !important; border-radius:18px !important;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6); color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 22px 50px -22px var(--glow); border-color:var(--accent) !important; }
.card .text-muted, .text-muted{ color:var(--dim) !important; }
.border-bottom{ border-color:var(--border) !important; }

/* ---- Buttons: 3D raised-slab, electric-accent primary ---- */
.btn-primary{ background:var(--accent) linear-gradient(180deg,var(--accentSoft),var(--accent)) !important; border:1px solid var(--accent-edge) !important;
  border-top-color:rgba(255,255,255,.4) !important; color:var(--ink) !important; font-weight:700 !important; border-radius:12px !important;
  font-family:'Barlow',sans-serif; text-transform:none; letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 var(--accent-edge), 0 12px 26px -8px var(--glow) !important;
  transition:transform .08s ease, box-shadow .08s ease !important; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 7px 0 var(--accent-edge), 0 16px 30px -8px var(--glow) !important; }
.btn-primary:active{ transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 var(--accent-edge), 0 4px 12px var(--glow) !important; }
.btn-primary.disabled, .btn-primary:disabled{ opacity:.45; transform:none !important; box-shadow:0 2px 6px var(--glow) !important; }
/* outline / secondary — glass chips */
.btn-outline-light, .btn-outline-secondary{ background:var(--glass) !important; border:1px solid var(--border) !important; color:var(--text) !important;
  border-radius:11px !important; font-family:'Barlow',sans-serif; font-weight:600; text-transform:none; letter-spacing:0; }
.btn-outline-light:hover, .btn-outline-light.active, .btn-outline-secondary:hover{ background:rgba(120,160,220,.14) !important; border-color:var(--accent) !important; color:var(--text) !important; }
.btn-link{ color:var(--accent) !important; text-decoration:none; }
/* safety-yellow only for high-value (label export/ZIP) */
.btn-warning{ background:linear-gradient(180deg,#ffd54a,#f5b700) !important; border:1px solid #b9860a !important; color:#1a1305 !important; font-weight:700 !important; border-radius:11px !important; }
/* semantic check-in / check-out (yard/scan) */
.btn-danger{ background:linear-gradient(180deg,#ff6a7f,#e5384f) !important; border:1px solid #a51b2e !important; color:#fff !important; font-weight:700 !important; border-radius:11px !important; }
.btn-success{ background:linear-gradient(180deg,#4ee08a,#22b366) !important; border:1px solid #14834a !important; color:#04160c !important; font-weight:700 !important; border-radius:11px !important; }

/* ---- Badges ---- */
.badge{ border-radius:999px; font-weight:600; font-family:'JetBrains Mono',monospace; font-size:.72em; letter-spacing:.03em; padding:.42em .7em; }
.badge.bg-primary{ background:rgba(77,141,255,.18) !important; color:var(--accentSoft) !important; border:1px solid rgba(77,141,255,.35); }
.badge.bg-success{ background:rgba(34,197,94,.18) !important; color:#7ee6a8 !important; border:1px solid rgba(34,197,94,.35); }
.badge.bg-secondary{ background:var(--glass) !important; color:var(--dim) !important; border:1px solid var(--border); }
.badge.bg-warning{ background:rgba(245,183,0,.2) !important; color:#ffd970 !important; border:1px solid rgba(245,183,0,.4); }
.badge.bg-danger{ background:rgba(229,72,77,.2) !important; color:#ff9aa6 !important; border:1px solid rgba(229,72,77,.4); }
.badge.bg-light, .badge.bg-light.text-dark{ background:var(--glass) !important; color:var(--text) !important; border:1px solid var(--border); }

/* DAY-MODE badge text. The variants above hard-code light text (#7ee6a8 / #ffd970 / #ff9aa6 /
   --accentSoft) chosen against a dark page, over an 18-20% alpha chip that is nearly white in
   day mode. Measured on /consign: "You keep 70%" at 1.36:1 and "Deposit-backed damage cover" at
   1.84:1 — the consignor value proposition, unreadable on the page that exists to win consignors.
   Same hue family, same chip, darker text so it reads. Night mode is deliberately untouched. */
html[data-web-mode="day"] .badge.bg-primary,
html[data-theme-mode="light"] .badge.bg-primary{ color:#14448f !important; border-color:rgba(20,68,143,.35); }
html[data-web-mode="day"] .badge.bg-success,
html[data-theme-mode="light"] .badge.bg-success{ color:#116635 !important; border-color:rgba(17,102,53,.35); }
html[data-web-mode="day"] .badge.bg-warning,
html[data-theme-mode="light"] .badge.bg-warning{ color:#6b4a00 !important; border-color:rgba(107,74,0,.4); }
html[data-web-mode="day"] .badge.bg-danger,
html[data-theme-mode="light"] .badge.bg-danger{ color:#8c1420 !important; border-color:rgba(140,20,32,.4); }

/* ---- Tables ---- */
.table, .table td, .table th{ color:var(--text); border-color:var(--border) !important; background:transparent !important; }

/* ---- Alerts ---- */
.alert{ border-radius:12px; border:1px solid var(--border); }
.alert-info{ background:rgba(77,141,255,.12) !important; color:var(--text) !important; border-color:rgba(77,141,255,.3) !important; }
.alert-warning{ background:rgba(245,183,0,.12) !important; color:#ffe0a3 !important; border-color:rgba(245,183,0,.32) !important; }
.alert-danger{ background:rgba(229,72,77,.12) !important; color:#ffb3ba !important; border-color:rgba(229,72,77,.32) !important; }

/* ---- Inline text helpers ---- */
.text-success{ color:#7ee6a8 !important; }
.text-warning{ color:#ffd970 !important; }
.text-danger{ color:#ff9aa6 !important; }

/* ---- Inputs (dark glass) + native date/time pickers ---- */
input.form-control, textarea.form-control, select.form-control, .form-control, .form-select{
  background:rgba(8,16,32,.55) !important; color:var(--text) !important; border:1px solid var(--border) !important; border-radius:11px !important; }
input.form-control::placeholder, textarea.form-control::placeholder{ color:var(--dim) !important; }
input.form-control:focus, textarea.form-control:focus, select.form-control:focus, .form-control:focus, .form-select:focus{
  background:rgba(8,16,32,.7) !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(77,141,255,.25) !important; color:var(--text) !important; }
input[type=date], input[type=datetime-local], input[type=time], input[type=month]{ color-scheme:dark; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.85); }

/* ---- DAY mode inputs ------------------------------------------------------
   The glass fill above is a HARDCODED dark (rgba(8,16,32,.55)) while the ink on
   top of it is var(--text), which the day block flips to near-black. Every text
   input and select on the storefront therefore rendered dark ink on a navy fill
   in day mode — /shop measured 4.3:1 on #q and #catsel, and the placeholder
   (var(--dim)) was worse. Lift the fill with the mode, on BOTH axes, so the two
   theme systems cannot disagree about what an input looks like. */
html[data-web-mode="day"] input.form-control, html[data-theme-mode="light"] input.form-control,
html[data-web-mode="day"] textarea.form-control, html[data-theme-mode="light"] textarea.form-control,
html[data-web-mode="day"] select.form-control, html[data-theme-mode="light"] select.form-control,
html[data-web-mode="day"] .form-control, html[data-theme-mode="light"] .form-control,
html[data-web-mode="day"] .form-select, html[data-theme-mode="light"] .form-select{
  background:#ffffff !important; border-color:rgba(40,70,120,.28) !important; }
html[data-web-mode="day"] input.form-control:focus, html[data-theme-mode="light"] input.form-control:focus,
html[data-web-mode="day"] textarea.form-control:focus, html[data-theme-mode="light"] textarea.form-control:focus,
html[data-web-mode="day"] select.form-control:focus, html[data-theme-mode="light"] select.form-control:focus,
html[data-web-mode="day"] .form-control:focus, html[data-theme-mode="light"] .form-control:focus,
html[data-web-mode="day"] .form-select:focus, html[data-theme-mode="light"] .form-select:focus{
  background:#ffffff !important; }
/* --dim is 4a5b76 in day mode: 4.6:1 on white, so the placeholder passes on the lifted fill. */
html[data-web-mode="day"] input[type=date], html[data-theme-mode="light"] input[type=date],
html[data-web-mode="day"] input[type=datetime-local], html[data-theme-mode="light"] input[type=datetime-local],
html[data-web-mode="day"] input[type=time], html[data-theme-mode="light"] input[type=time],
html[data-web-mode="day"] input[type=month], html[data-theme-mode="light"] input[type=month]{ color-scheme:light; }
html[data-web-mode="day"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme-mode="light"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-web-mode="day"] input[type=datetime-local]::-webkit-calendar-picker-indicator,
html[data-theme-mode="light"] input[type=datetime-local]::-webkit-calendar-picker-indicator{ filter:none; }

/* ---- Touch-target accessibility: 44px minimum tap target (WCAG 2.5.5) ----
   This sheet loads on EVERY public/portal page (customer + consignor phone flows).
   Bootstrap's default .btn / .btn-sm / .form-control sit at ~31-38px, below the 44px
   accessibility minimum. Baseline the interactive controls this sheet already restyles:
   action buttons (incl. .btn-sm) and form fields. GLOBAL (not media-queried) on purpose —
   on desktop these controls are already ~34-38px, so 44px is a harmless floor and nothing
   shrinks; the accessibility win applies everywhere.
   Deliberately EXCLUDED:
   - bare <button>: the storefront uses many small custom <button> controls
     (theme-swatch pickers, favorite hearts, grid/map toggles, close-x, the push toggle
     switch) that must keep their intended size — forcing 44px would distort them. Real
     Bootstrap action buttons all carry .btn, which IS covered.
   - checkbox / radio / hidden / range: a 44px checkbox/radio is wrong (its tap target
     comes from the label/wrapper), hidden has no box, and range is a custom-styled slider. */
.btn, .btn-sm,
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),
select, textarea, .form-control, .form-select{ min-height:44px; }

/* ---- Footer ---- */
.web-footer, .page-footer, footer.web-footer, .footer{ background:var(--bg1) !important; border-top:1px solid var(--border) !important; color:var(--dim) !important; }
.web-footer a, .footer a{ color:var(--dim) !important; }
/* The vendor footer hardcodes #7c7c7c on its own columns (not via a token), so re-pointing
   --text-light did not reach it: 4.29:1 on the dark footer, the last measured miss on /counter. */
.web-footer .footer-col-left, .web-footer .footer-col-right, .web-footer .footer-info,
.footer .footer-col-left, .footer .footer-col-right, .footer .footer-info{ color:var(--dim) !important; }
.web-footer a:hover, .footer a:hover{ color:var(--accent) !important; }
.footer-powered, a[href*="frappe.io"], [class*="powered-by"]{ display:none !important; }

/* login screen: moody haul-road image, heavy gauze so it stays subtle */
body[data-path="login"]::before{
  background:
    linear-gradient(rgba(7,12,22,.9), rgba(7,12,22,.95)),
    url("/assets/rental_theme/images/hero2.jpg") center center / cover no-repeat !important;
}
/* SSO /login — Navy Steel glass card + accent 3D raised-slab SSO button (cosmetic only) */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .for-login .page-card{
  background:rgba(14,23,40,.5) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--border) !important; border-radius:16px !important;
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06) !important; color:var(--text) !important; }
body[data-path="login"] .page-card-head,
body[data-path="login"] .page-card-head h4,
body[data-path="login"] .login-content h4{ color:var(--text) !important; font-family:'Archivo',sans-serif; text-transform:none; letter-spacing:-.01em; }
body[data-path="login"] .login-content .text-muted,
body[data-path="login"] .login-divider{ color:var(--dim) !important; }
body[data-path="login"] .btn-login-option,
body[data-path="login"] .btn-login-option.btn-default,
body[data-path="login"] .btn-keycloak{
  background:linear-gradient(180deg,var(--accentSoft),var(--accent)) !important;
  border:1px solid var(--accent-edge) !important; border-top-color:rgba(255,255,255,.4) !important;
  color:var(--ink) !important; font-weight:700 !important; border-radius:12px !important;
  font-family:'Barlow',sans-serif; text-transform:none; letter-spacing:0;
  height:auto !important; min-height:42px; padding:11px 16px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 5px 0 var(--accent-edge), 0 12px 26px -8px var(--glow) !important;
  transition:transform .08s ease, box-shadow .08s ease !important; }
body[data-path="login"] .btn-login-option:hover{ transform:translateY(-2px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 7px 0 var(--accent-edge), 0 16px 30px -8px var(--glow) !important; }
body[data-path="login"] .btn-login-option:active{ transform:translateY(3px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 var(--accent-edge), 0 4px 12px var(--glow) !important; }
body[data-path="login"] .btn-login-option .mr-2,
body[data-path="login"] .btn-login-option img{ filter:brightness(0) saturate(100%) invert(6%) sepia(20%) saturate(2000%) hue-rotate(190deg); opacity:.95; }

/* ===== Web Push opt-in pill (rc_push.js) — storefront ===== */
#rc-push-host{position:fixed;left:16px;bottom:16px;z-index:1200}
#rc-push{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.5);color:var(--text);font-size:13px;font-weight:600;font-family:'Barlow',-apple-system,sans-serif}
#rc-push .rc-push-bell{opacity:.85;flex:0 0 auto}
#rc-push.on{border-color:var(--accent)}
#rc-push.denied{opacity:.55}
#rc-push .rc-push-lbl{white-space:nowrap}
#rc-push .rc-push-sw{position:relative;width:38px;height:21px;border-radius:11px;border:none;cursor:pointer;background:rgba(255,255,255,.22);padding:0;flex:0 0 auto;transition:background .15s}
#rc-push .rc-push-sw i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#rc-push.on .rc-push-sw{background:linear-gradient(180deg,var(--accentSoft),var(--accent))}
#rc-push.on .rc-push-sw i{left:19px}
#rc-push .rc-push-sw:disabled{opacity:.6;cursor:wait}
/* On phones the centred theme picker (bottom:20px) reaches into the bottom-left corner and
   overlapped this pill — stack the pill vertically ABOVE the picker so neither covers content. */
@media (max-width:600px){#rc-push-host{left:12px;bottom:72px}#rc-push .rc-push-lbl{display:none}}

/* ===== Leaflet map controls — dark mode (public marketplace map is dark by default) =====
   Match the desk treatment (desk_shell.css) so zoom +/- and attribution stay legible.
   Day mode keeps Leaflet's native light controls. */
html:not([data-web-mode="day"]) .leaflet-control-attribution,
html:not([data-web-mode="day"]) .leaflet-bar a,
html:not([data-web-mode="day"]) .leaflet-control-zoom a,
html:not([data-web-mode="day"]) .leaflet-control{background:rgba(15,23,42,.85)!important;color:#cbd5e1!important;border-color:rgba(255,255,255,.12)!important}
html:not([data-web-mode="day"]) .leaflet-control-attribution a{color:#60a5fa!important}

/* ===== CHECKBOX / RADIO visible checked-state (www pages + consoles) — root-class fix so a
   checked box never looks identical to an unchecked one. Mirrors desk_shell.css F-1; uses the
   shared --rc-* tokens with safe fallbacks so it works on portal AND console CSS contexts. ===== */
input[type=checkbox],input[type=radio]{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  width:16px;height:16px;flex:0 0 16px;vertical-align:middle;
  background:var(--rc-input-bg,rgba(255,255,255,.05))!important;
  border:1.5px solid var(--rc-border,rgba(255,255,255,.28))!important;
  border-radius:4px;cursor:pointer;position:relative;box-shadow:none!important;
  transition:background-color .12s,border-color .12s;
}
input[type=radio]{border-radius:50%!important}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:rgba(var(--rc-a-rgb,77,141,255),.7)!important}
input[type=checkbox]:checked,input[type=radio]:checked{
  background-color:var(--rc-a,#4d8dff)!important;border-color:var(--rc-a,#4d8dff)!important;}
input[type=checkbox]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;}
input[type=radio]:checked{
  background-image:radial-gradient(circle,#fff 0 34%,transparent 38%)!important;
  background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;}
input[type=checkbox]:focus,input[type=radio]:focus,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{
  outline:none!important;box-shadow:0 0 0 3px rgba(var(--rc-a-rgb,77,141,255),.35)!important;}
/* ROOT-FIX (owner day-mode visibility): unchecked box was near-invisible on white — solid edge unchecked. */
html[data-theme-mode="light"] input[type=checkbox]:not(:checked):not(:indeterminate),
html[data-theme-mode="light"] input[type=radio]:not(:checked){border-color:#6b7280!important;background:#fff!important}
@media(prefers-color-scheme:light){html:not([data-theme-mode="dark"]) input[type=checkbox]:not(:checked):not(:indeterminate),html:not([data-theme-mode="dark"]) input[type=radio]:not(:checked){border-color:#6b7280!important;background:#fff!important}}