/* ════════════════════════════════════════════════════════════════════════
   Impeerium global skin — rebrands the stock LeaderOS (Tabler/Bootstrap) pages
   to the "medieval-market" look used on the custom pages. Loaded LAST on
   layouts/main, layouts/auth and layouts/error so it overrides Tabler.
   Theme-aware via [data-bs-theme]. Hand-written CSS (no Tailwind build needed).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Brand the Tabler design tokens ──────────────────────────────────────── */
:root, [data-bs-theme=light] {
  --tblr-primary:#16a34a; --tblr-primary-rgb:22,163,74;
  --tblr-success:#16a34a; --tblr-success-rgb:22,163,74;
  --tblr-link-color:#15803d; --tblr-link-color-rgb:21,128,61;
  --tblr-link-hover-color:#0f7a3c;
  --tblr-border-radius:12px;
  --tblr-font-sans-serif:'Inter',system-ui,-apple-system,sans-serif;
}
[data-bs-theme=dark] {
  --tblr-primary:#22c55e; --tblr-primary-rgb:34,197,94;
  --tblr-success:#22c55e;
  --tblr-link-color:#86efac; --tblr-link-color-rgb:134,239,172;
  --tblr-link-hover-color:#bbf7d0;
  --tblr-body-bg:#0e2818; --tblr-body-bg-rgb:14,40,24;
  --tblr-bg-surface:#173a26; --tblr-bg-surface-rgb:23,58,38;
  --tblr-bg-surface-secondary:#11301f; --tblr-bg-surface-tertiary:#0e2818;
  --tblr-border-color:#3a6a48; --tblr-border-color-translucent:rgba(255,255,255,.08);
  --tblr-body-color:#e6f6ec; --tblr-secondary:#9fc7bb;
}

/* ── Fonts ───────────────────────────────────────────────────────────────── */
body, .page, .h1,.h2,.h3,.h4,.h5,.h6, h1,h2,h3,h4,h5,h6,
.btn, .form-control, .form-select, .nav-link, .card-title {
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
}
h1,h2,h3,.h1,.h2,.h3,.page-title{font-weight:900;}

/* ── Living shop backdrop on every page (meadow / forest night) ──────────── */
/* Clip horizontal overflow from the animated scene (drifting mist/sparks poke a
   few px past the edge → flickering bottom scrollbar). clip (not hidden) keeps
   the sticky header working. */
html { overflow-x: clip; }
/* Make all page chrome transparent so the fixed scene shows through.
   Theme-prefixed to beat dark-mode.css's [data-bs-theme=dark] .page-wrapper rule. */
html, body, .page, .page-wrapper, .page-body, .page-center, .empty { background:transparent !important; background-color:transparent !important; }
[data-bs-theme=dark] body, [data-bs-theme=dark] .page, [data-bs-theme=dark] .page-wrapper, [data-bs-theme=dark] .page-body, [data-bs-theme=dark] .page-center, [data-bs-theme=dark] .empty { background:transparent !important; background-color:transparent !important; }
[data-bs-theme=light] body, [data-bs-theme=light] .page, [data-bs-theme=light] .page-wrapper, [data-bs-theme=light] .page-body { background:transparent !important; background-color:transparent !important; }
/* Content containers/sections must not cover the scene either (cards keep their bg) */
.container, .container-xl, .container-fluid, .section, .page-section, .imp-cart,
[data-bs-theme=dark] .container, [data-bs-theme=dark] .container-xl, [data-bs-theme=dark] .container-fluid, [data-bs-theme=dark] .section, [data-bs-theme=dark] .page-section, [data-bs-theme=dark] .imp-cart,
[data-bs-theme=light] .container, [data-bs-theme=light] .section, [data-bs-theme=light] .page-section, [data-bs-theme=light] .imp-cart { background:transparent !important; background-color:transparent !important; }
.imp-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#eef9ef 0%,#e3f3e6 45%,#d7ecdc 100%);}
[data-bs-theme=dark] .imp-scene{background:linear-gradient(180deg,#11301d 0%,#15402a 50%,#0e2818 100%);}
.imp-scene::after{content:'';position:absolute;left:50%;top:-30%;width:90vw;height:60vh;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(252,211,77,.24),transparent 65%);}
.imp-scene__mist{position:absolute;left:-30%;width:160%;height:140px;background:radial-gradient(50% 100% at 50% 50%,rgba(255,255,255,.5),transparent 75%);animation:impSceneMist 38s ease-in-out infinite alternate;}
[data-bs-theme=dark] .imp-scene__mist{background:radial-gradient(50% 100% at 50% 50%,rgba(134,239,172,.16),transparent 75%);}
.imp-scene__mist--a{top:24%;}
.imp-scene__mist--b{top:62%;animation-duration:47s;animation-direction:alternate-reverse;}
@keyframes impSceneMist{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.imp-scene-spark{position:absolute;bottom:-4vh;width:var(--s,7px);height:var(--s,7px);animation:impSceneRise var(--d,15s) linear var(--dl,0s) infinite;opacity:0;}
.imp-scene-spark.g{background:#fbbf24;box-shadow:0 0 10px 2px rgba(251,191,36,.5);}
.imp-scene-spark.l{background:#4ade80;box-shadow:0 0 10px 2px rgba(74,222,128,.45);}
@keyframes impSceneRise{0%{transform:translate(0,0) rotate(45deg);opacity:0;}10%{opacity:.9;}50%{transform:translate(16px,-55vh) rotate(225deg);opacity:.7;}90%{opacity:.4;}100%{transform:translate(-12px,-110vh) rotate(405deg);opacity:0;}}
@media (prefers-reduced-motion: reduce){.imp-scene__mist,.imp-scene-spark{animation:none;}}

/* ── Cards → plaque feel (soft) ──────────────────────────────────────────── */
.card{border:2px solid #d9e7da;border-radius:14px;box-shadow:0 12px 28px rgba(15,60,35,.10);}
[data-bs-theme=dark] .card{background:#173a26;border-color:#3a6a48;box-shadow:0 12px 28px rgba(0,0,0,.4);}
/* beat dark-mode.css's gray .card-body (#1f2125) → brand green plaque */
[data-bs-theme=dark] .card, [data-bs-theme=dark] .card-body, [data-bs-theme=dark] .bg-body{background-color:#173a26 !important;}
.card-header{background:transparent;border-bottom:2px solid #e7efe3;}
[data-bs-theme=dark] .card-header{border-bottom-color:#2c5740;}
.card-title,.card-header .card-title{font-weight:800;color:#14532d;}
[data-bs-theme=dark] .card-title{color:#bbf7d0;}

/* ── Buttons → chunky bevel game-buttons ─────────────────────────────────── */
.btn{font-weight:700;border-radius:10px;transition:transform .12s,box-shadow .12s,background .15s,filter .15s;}
.btn-primary,.btn-success{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 4px 0 #0f7a3c;}
.btn-primary:hover,.btn-success:hover{background:#1cb255;border-color:#1cb255;color:#fff;}
.btn-primary:active,.btn-success:active{transform:translateY(3px);box-shadow:0 1px 0 #0f7a3c;}
.btn-warning{background:linear-gradient(180deg,#fcd34d,#f59e0b);border-color:#f59e0b;color:#4a2f05;box-shadow:0 4px 0 #b45309;}
.btn-warning:hover{filter:brightness(1.05);color:#4a2f05;}
.btn-danger{box-shadow:0 4px 0 #b91c1c;}
.btn-outline-primary{border:2px solid #16a34a;color:#16a34a;}
.btn-outline-primary:hover{background:#16a34a;color:#fff;}
.btn-link{color:var(--tblr-link-color);}

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-control,.form-select,.input-group-text{border:2px solid #d9e7da;border-radius:10px;}
.form-control:focus,.form-select:focus{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);}
[data-bs-theme=dark] .form-control,[data-bs-theme=dark] .form-select,[data-bs-theme=dark] .input-group-text{
  background:#0e2818;border-color:#3a6a48;color:#eafff1;}
.form-check-input:checked{background-color:#16a34a;border-color:#16a34a;}

/* ── Tables / lists ──────────────────────────────────────────────────────── */
.table thead th{color:#15803d;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;}
[data-bs-theme=dark] .table thead th{color:#86efac;}
.table-hover>tbody>tr:hover>*{background:rgba(34,197,94,.07);}

/* ── Alerts / badges / progress ──────────────────────────────────────────── */
.alert{border-width:2px;border-radius:12px;}
.badge{font-weight:800;}
.progress-bar{background-color:#16a34a;}

/* ── Header navbar — canopy green with gold edge ─────────────────────────── */
.navbar{background:#18382a !important;border-bottom:2px solid rgba(245,158,11,.3) !important;}
.navbar .nav-link,.navbar .navbar-nav .nav-link{color:#d9f7e5;font-weight:700;letter-spacing:.04em;}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#fcd34d;}
.navbar .dropdown-menu{border:2px solid #3a6a48;border-radius:12px;}
[data-bs-theme=dark] .navbar .dropdown-menu{background:#173a26;}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer{background:#18382a !important;color:#d9f7e5;border-top:2px solid rgba(22,163,74,.45);box-shadow:inset 0 2px 0 rgba(245,158,11,.3);}
.footer a{color:#9fc7bb;}
.footer a:hover{color:#fcd34d;}
.footer .social-icons a{transition:color .2s,transform .2s;}
.footer .social-icons a:hover{transform:translateY(-2px);}

/* ── Modals / dropdowns surfaces ─────────────────────────────────────────── */
.modal-content{border:2px solid #d9e7da;border-radius:16px;}
[data-bs-theme=dark] .modal-content{background:#173a26;border-color:#3a6a48;}
.dropdown-menu{border-radius:12px;}

/* ── Links ───────────────────────────────────────────────────────────────── */
a{color:var(--tblr-link-color);}
a:hover{color:var(--tblr-link-hover-color);}

/* ── Empty states / avatars / accents ───────────────────────────────────── */
.avatar{border-radius:10px;}
.text-primary{color:#16a34a !important;}
[data-bs-theme=dark] .text-primary{color:#22c55e !important;}

/* ── Shared header-tw / footer-tw on Tabler pages ─────────────────────────────
   These partials are Tailwind components, but on layouts/main Tabler's utility
   classes win by !important — e.g. Tabler's `.bg-white{...!important}` overrode the
   Tailwind `dark:bg-canopy` on the user dropdown + mobile drawer, so they rendered
   as a white box with near-invisible light text. Restore the exact dark look. */
[data-bs-theme="dark"] #siteHeader .bg-white,
[data-bs-theme="dark"] #mobileMenu.bg-white,
[data-bs-theme="dark"] #mobileMenu .bg-white{
  background-color:#18382a !important;                 /* canopy */
  border-color:rgba(255,255,255,.1) !important;        /* dark:border-white/10 */
}
/* (icon colours are handled at the root in dark-mode.css, which now excludes
   #siteHeader / footer / #mobileMenu from its global `i{color:#e2e2e3}` rule.) */

/* ══ Tabler vs Tailwind utility collision guard ═══════════════════════════════
   layouts/main loads Tabler, which ships its OWN utility classes using the same
   names as Tailwind's — and marks them !important, so Tabler wins. The shared
   header-tw / footer-tw are Tailwind components, so on Tabler pages they came
   out with the wrong spacing, icon sizes and letter-spacing (e.g. .tracking-wide
   .05em instead of .025em, .px-6 3rem instead of 1.5rem).
   Re-assert Tailwind's values, scoped to the shared chrome only so Tabler's own
   utilities keep working everywhere else. Generated from tw.css. ══════════ */
#siteHeader .bg-gray-900, #siteHeader.bg-gray-900, footer .bg-gray-900, footer.bg-gray-900, #mobileMenu .bg-gray-900, #mobileMenu.bg-gray-900{--tw-bg-opacity:1 !important;background-color:rgb(17 24 39/var(--tw-bg-opacity,1)) !important;}
#siteHeader .bg-primary, #siteHeader.bg-primary, footer .bg-primary, footer.bg-primary, #mobileMenu .bg-primary, #mobileMenu.bg-primary{--tw-bg-opacity:1 !important;background-color:rgb(22 163 74/var(--tw-bg-opacity,1)) !important;}
#siteHeader .bg-white, #siteHeader.bg-white, footer .bg-white, footer.bg-white, #mobileMenu .bg-white, #mobileMenu.bg-white{--tw-bg-opacity:1 !important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1)) !important;}
#siteHeader .border, #siteHeader.border, footer .border, footer.border, #mobileMenu .border, #mobileMenu.border{border-width:1px !important;}
#siteHeader .bottom-0, #siteHeader.bottom-0, footer .bottom-0, footer.bottom-0, #mobileMenu .bottom-0, #mobileMenu.bottom-0{bottom:0 !important;}
#siteHeader .flex-shrink-0, #siteHeader.flex-shrink-0, footer .flex-shrink-0, footer.flex-shrink-0, #mobileMenu .flex-shrink-0, #mobileMenu.flex-shrink-0{flex-shrink:0 !important;}
#siteHeader .flex-wrap, #siteHeader.flex-wrap, footer .flex-wrap, footer.flex-wrap, #mobileMenu .flex-wrap, #mobileMenu.flex-wrap{flex-wrap:wrap !important;}
#siteHeader .gap-1, #siteHeader.gap-1, footer .gap-1, footer.gap-1, #mobileMenu .gap-1, #mobileMenu.gap-1{gap:.25rem !important;}
#siteHeader .gap-2, #siteHeader.gap-2, footer .gap-2, footer.gap-2, #mobileMenu .gap-2, #mobileMenu.gap-2{gap:.5rem !important;}
#siteHeader .gap-3, #siteHeader.gap-3, footer .gap-3, footer.gap-3, #mobileMenu .gap-3, #mobileMenu.gap-3{gap:.75rem !important;}
#siteHeader .gap-4, #siteHeader.gap-4, footer .gap-4, footer.gap-4, #mobileMenu .gap-4, #mobileMenu.gap-4{gap:1rem !important;}
#siteHeader .gap-5, #siteHeader.gap-5, footer .gap-5, footer.gap-5, #mobileMenu .gap-5, #mobileMenu.gap-5{gap:1.25rem !important;}
#siteHeader .gap-6, #siteHeader.gap-6, footer .gap-6, footer.gap-6, #mobileMenu .gap-6, #mobileMenu.gap-6{gap:1.5rem !important;}
#siteHeader .h-2, #siteHeader.h-2, footer .h-2, footer.h-2, #mobileMenu .h-2, #mobileMenu.h-2{height:.5rem !important;}
#siteHeader .h-4, #siteHeader.h-4, footer .h-4, footer.h-4, #mobileMenu .h-4, #mobileMenu.h-4{height:1rem !important;}
#siteHeader .h-full, #siteHeader.h-full, footer .h-full, footer.h-full, #mobileMenu .h-full, #mobileMenu.h-full{height:100% !important;}
#siteHeader .mb-5, #siteHeader.mb-5, footer .mb-5, footer.mb-5, #mobileMenu .mb-5, #mobileMenu.mb-5{margin-bottom:1.25rem !important;}
#siteHeader .mt-3, #siteHeader.mt-3, footer .mt-3, footer.mt-3, #mobileMenu .mt-3, #mobileMenu.mt-3{margin-top:.75rem !important;}
#siteHeader .mt-6, #siteHeader.mt-6, footer .mt-6, footer.mt-6, #mobileMenu .mt-6, #mobileMenu.mt-6{margin-top:1.5rem !important;}
#siteHeader .mt-auto, #siteHeader.mt-auto, footer .mt-auto, footer.mt-auto, #mobileMenu .mt-auto, #mobileMenu.mt-auto{margin-top:auto !important;}
#siteHeader .my-1, #siteHeader.my-1, footer .my-1, footer.my-1, #mobileMenu .my-1, #mobileMenu.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important;}
#siteHeader .opacity-0, #siteHeader.opacity-0, footer .opacity-0, footer.opacity-0, #mobileMenu .opacity-0, #mobileMenu.opacity-0{opacity:0 !important;}
#siteHeader .opacity-90, #siteHeader.opacity-90, footer .opacity-90, footer.opacity-90, #mobileMenu .opacity-90, #mobileMenu.opacity-90{opacity:.9 !important;}
#siteHeader .overflow-hidden, #siteHeader.overflow-hidden, footer .overflow-hidden, footer.overflow-hidden, #mobileMenu .overflow-hidden, #mobileMenu.overflow-hidden{overflow:hidden !important;}
#siteHeader .p-2, #siteHeader.p-2, footer .p-2, footer.p-2, #mobileMenu .p-2, #mobileMenu.p-2{padding:.5rem !important;}
#siteHeader .p-7, #siteHeader.p-7, footer .p-7, footer.p-7, #mobileMenu .p-7, #mobileMenu.p-7{padding:1.75rem !important;}
#siteHeader .pt-6, #siteHeader.pt-6, footer .pt-6, footer.pt-6, #mobileMenu .pt-6, #mobileMenu.pt-6{padding-top:1.5rem !important;}
#siteHeader .px-3, #siteHeader.px-3, footer .px-3, footer.px-3, #mobileMenu .px-3, #mobileMenu.px-3{padding-left:.75rem !important;padding-right:.75rem !important;}
#siteHeader .px-4, #siteHeader.px-4, footer .px-4, footer.px-4, #mobileMenu .px-4, #mobileMenu.px-4{padding-left:1rem !important;padding-right:1rem !important;}
#siteHeader .px-5, #siteHeader.px-5, footer .px-5, footer.px-5, #mobileMenu .px-5, #mobileMenu.px-5{padding-left:1.25rem !important;padding-right:1.25rem !important;}
#siteHeader .px-6, #siteHeader.px-6, footer .px-6, footer.px-6, #mobileMenu .px-6, #mobileMenu.px-6{padding-left:1.5rem !important;padding-right:1.5rem !important;}
#siteHeader .py-1, #siteHeader.py-1, footer .py-1, footer.py-1, #mobileMenu .py-1, #mobileMenu.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important;}
#siteHeader .py-2, #siteHeader.py-2, footer .py-2, footer.py-2, #mobileMenu .py-2, #mobileMenu.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important;}
#siteHeader .py-3, #siteHeader.py-3, footer .py-3, footer.py-3, #mobileMenu .py-3, #mobileMenu.py-3{padding-top:.75rem !important;padding-bottom:.75rem !important;}
#siteHeader .py-4, #siteHeader.py-4, footer .py-4, footer.py-4, #mobileMenu .py-4, #mobileMenu.py-4{padding-top:1rem !important;padding-bottom:1rem !important;}
#siteHeader .text-white, #siteHeader.text-white, footer .text-white, footer.text-white, #mobileMenu .text-white, #mobileMenu.text-white{--tw-text-opacity:1 !important;color:rgb(255 255 255/var(--tw-text-opacity,1)) !important;}
#siteHeader .top-0, #siteHeader.top-0, footer .top-0, footer.top-0, #mobileMenu .top-0, #mobileMenu.top-0{top:0 !important;}
#siteHeader .tracking-wide, #siteHeader.tracking-wide, footer .tracking-wide, footer.tracking-wide, #mobileMenu .tracking-wide, #mobileMenu.tracking-wide{letter-spacing:.025em !important;}
#siteHeader .w-2, #siteHeader.w-2, footer .w-2, footer.w-2, #mobileMenu .w-2, #mobileMenu.w-2{width:.5rem !important;}
#siteHeader .w-4, #siteHeader.w-4, footer .w-4, footer.w-4, #mobileMenu .w-4, #mobileMenu.w-4{width:1rem !important;}
#siteHeader .w-auto, #siteHeader.w-auto, footer .w-auto, footer.w-auto, #mobileMenu .w-auto, #mobileMenu.w-auto{width:auto !important;}
#siteHeader .w-full, #siteHeader.w-full, footer .w-full, footer.w-full, #mobileMenu .w-full, #mobileMenu.w-full{width:100% !important;}

/* The shared chrome must also use Tailwind's font stack, not imp-skin's body
   override (both start at Inter, but keep the fallbacks identical too).
   Set on the containers only, so explicit .font-display text is untouched. */
#siteHeader, footer, #mobileMenu{font-family:Inter, sans-serif;}
/* Tabler leaves the icon font on a 1.5 line-height inside the shared chrome,
   making dropdown icons 24px tall instead of 16px. Match the tailwind pages. */
#siteHeader .ti, footer .ti, #mobileMenu .ti{line-height:1;}
/* Tabler's .ti sets its own font-size (20px), which ties with Tailwind's
   .text-* utilities and wins by load order — icons came out oversized. Give the
   explicit size classes higher specificity inside the shared chrome. */
#siteHeader .text-xs, footer .text-xs, #mobileMenu .text-xs{font-size:.75rem;}
#siteHeader .text-sm, footer .text-sm, #mobileMenu .text-sm{font-size:.875rem;}
#siteHeader .text-base, footer .text-base, #mobileMenu .text-base{font-size:1rem;}
#siteHeader .text-lg, footer .text-lg, #mobileMenu .text-lg{font-size:1.125rem;}
#siteHeader .text-xl, footer .text-xl, #mobileMenu .text-xl{font-size:1.25rem;}
#siteHeader .text-2xl, footer .text-2xl, #mobileMenu .text-2xl{font-size:1.5rem;}