/* 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;
}
/* ---- 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) ---- */
html[data-web-mode="day"]{--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%; }
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: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); }
.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); }

/* ---- 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: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); }

/* ---- 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); }

/* ---- 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; }
.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}