/* Illustrated skins. Loaded after the shared seasonal palette.
 * Artwork is decorative; live content, navigation and permissions stay in HTML.
 * Nine-slice borders keep corners proportional on cards of different sizes. */
html:root[data-theme][data-season-theme="halloween"] {
  --festive-hero:url('/img/themes/halloween-scene.webp');
  --season-frame:url('/img/themes/halloween-frame.webp');
  --festive-bg:#09080e; --festive-panel:#110d16; --festive-panel-alt:#211321;
  --festive-line:#b95517; --festive-outline:#ad501b;
  --festive-accent:#ff850a; --festive-soft:#c9c3d3;
  --season-frame-slice:200 160 250 160;
  --season-frame-width:18px 18px 26px 18px;
}
html:root[data-theme][data-season-theme="christmas"] {
  --festive-hero:url('/img/themes/christmas-scene.webp');
  --season-frame:url('/img/themes/christmas-frame.webp');
  --festive-bg:#300405; --festive-panel:#390405; --festive-panel-alt:#032419;
  --festive-line:#c5a45d; --festive-outline:#c7a65f;
  --festive-accent:#ffcd58; --festive-soft:#e2d7d1;
  --season-frame-slice:230 180 250 180;
  --season-frame-width:20px 18px 26px 18px;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content {
  background:var(--festive-hero) center top / 100% max(941px,100vh) no-repeat,var(--festive-bg) !important;
}
/* The landscape already includes the header scene: don't draw it twice. */
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content > .zoryx-season-scene {display:none;}
html:root[data-theme][data-season-theme] body:has(.drawer) .navbar.bg-base-200 {
  background:rgba(8,5,12,.42) !important;
  backdrop-filter:none;
  box-shadow:none !important;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .navbar.bg-base-200 {
  background:rgba(55,3,3,.32) !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .navbar::after {content:none;}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content > main {
  padding-top:54px;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side > div.menu {
  background:linear-gradient(180deg,rgba(10,7,15,.12),rgba(10,7,15,.75) 23%,rgba(10,7,15,.65) 76%,rgba(10,7,15,.1)),
    var(--festive-hero) 8% top / auto 100% no-repeat,#0c0910 !important;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .drawer-side > div.menu {
  background:linear-gradient(180deg,rgba(0,25,14,.65),rgba(0,25,14,.96) 25%,rgba(0,25,14,.93) 80%,rgba(0,25,14,.55)),
    var(--festive-hero) left top / auto 100% no-repeat,#021b11 !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side > div.menu > :first-child::before {
  background:var(--festive-hero) left bottom / auto 240px no-repeat;
  mask-image:linear-gradient(90deg,#000,transparent 55%);opacity:.9;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side .menu a {min-height:46px;}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side .menu a.sidebar-brand {min-height:0;}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side > div.menu > .bg-base-300 {
  background:linear-gradient(180deg,rgba(15,5,9,.4),rgba(15,5,9,.68)),
    var(--festive-hero) center bottom / auto 230px no-repeat !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card {
  position:relative;
  border:1px solid var(--festive-outline) !important;
  border-radius:10px !important;
  background:linear-gradient(155deg,var(--festive-panel),var(--festive-panel-alt)) !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card::before {
  background:var(--festive-hero) center bottom / auto 380px no-repeat;
  opacity:.22 !important;
  mask-image:linear-gradient(180deg,transparent 35%,#000);
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card:not(.zoryx-no-season-snow)::after {
  content:"";position:absolute;inset:0;width:auto;height:auto;
  border:solid transparent;border-width:var(--season-frame-width);
  border-image-source:var(--season-frame);
  border-image-slice:var(--season-frame-slice);
  border-image-repeat:repeat;
  background:none;filter:none;border-radius:0;
  opacity:1 !important;z-index:2;pointer-events:none;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card .card-body {z-index:3;}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-stats .card:nth-child(even),
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-status .card:nth-child(2) {
  background:linear-gradient(140deg,#032619,#02180f) !important;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-stats .card:nth-child(odd),
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-status .card:nth-child(odd) {
  background:linear-gradient(140deg,#500506,#2b0205) !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card:not(.zoryx-no-season-snow)::after {
  border-width:19px 25px 26px;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card .card-body {
  min-height:110px;padding:22px 30px;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-status .card .card-body {
  padding:28px 28px 54px;
}
html:root[data-theme][data-season-theme] .zoryx-overview-status .card-title {font-size:21px;margin-bottom:8px;}
html:root[data-theme][data-season-theme] .zoryx-overview-stats .text-3xl {font-size:36px;line-height:1.15;}
html:root[data-theme][data-season-theme] .zoryx-overview-status #systemsList {font-size:15px;}
html:root[data-theme][data-season-theme] .zoryx-overview-status .badge {font-size:14px;}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-main > .divider {margin:28px 0;}
@media(min-width:1280px) {
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side > div.menu {width:330px;}
  html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-main {
    width:100%;max-width:1440px;padding-left:clamp(36px,4.5vw,76px);padding-right:clamp(36px,4.5vw,76px);
  }
  html:root[data-theme][data-season-theme] .zoryx-overview-main h1 {font-size:36px;}
  html:root[data-theme][data-season-theme] .zoryx-overview-stats {gap:18px;margin-bottom:40px;}
  html:root[data-theme][data-season-theme] .zoryx-overview-status {gap:18px;}
  html:root[data-theme][data-season-theme] .zoryx-overview-status .card {min-height:396px;}
}
@media(max-width:767px) {
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content {
    background-size:auto 700px !important;background-position:65% top !important;
  }
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content > main {padding-top:30px;}
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card:not(.zoryx-no-season-snow)::after {
    border-width:28px 26px 38px;
  }
  html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card .card-body {
    min-height:94px;padding:18px 24px;
  }
  html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-status .card .card-body {
    padding:28px 24px 44px;
  }
  html:root[data-theme][data-season-theme] .zoryx-overview-status .card-title {font-size:18px;}
}
@media print {
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content {background:none !important;}
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card::after {display:none !important;}
}

/* Preserve semantic status/icon colors inside the illustrated panels. */
html:root[data-theme][data-season-theme] .zoryx-overview-status .text-cyan-400 {color:#00d4ed !important;}
html:root[data-theme][data-season-theme] .zoryx-overview-status .text-indigo-400 {color:#b879ff !important;}
html:root[data-theme][data-season-theme] #systemsList .badge-success {background:#07512a !important;border-color:#38c76d !important;color:#f4fff6 !important;}
html:root[data-theme][data-season-theme] #systemsList .badge-error {background:#770c16 !important;border-color:#fa4a55 !important;color:#fff5f5 !important;}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side .menu .menu-title {color:var(--festive-accent-light);}
html:root[data-theme][data-season-theme] .zoryx-overview-main > .flex:first-child {text-shadow:0 2px 8px #000;}
@media(max-width:767px) {
 html:root[data-theme][data-season-theme] .zoryx-overview-main > .flex:first-child {background:rgba(10,5,10,.65);padding:12px;border-radius:10px;}
}

/* Individual ornaments keep each panel distinct from the surrounding scene. */
html:root[data-theme][data-season-theme="christmas"] {--season-detail:url('/img/themes/christmas-gifts.webp');}
html:root[data-theme][data-season-theme="halloween"] {--season-detail:url('/img/themes/halloween-graveyard.webp');}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-side > div.menu > :first-child::before {
  background:var(--season-detail) left bottom / 120px auto no-repeat;mask-image:none;opacity:.85;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-status .card:not(.zoryx-no-season-snow)::after {border-width:32px 12px 10px;}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card:not(.zoryx-no-season-snow)::after {border-width:18px 10px 5px;}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-status .card::before {
  background:var(--season-detail) right bottom / 230px auto no-repeat;mask-image:none;opacity:.85 !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-status .card:first-child::before {background:none;}
html:root[data-theme][data-season-theme="halloween"] body:has(.drawer) .zoryx-overview-status .card:nth-child(3)::before {
  background-image:url('/img/themes/halloween-lantern-corner.webp');background-size:160px auto;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-status .card:nth-child(2)::before {transform:scaleX(-1);}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card::before {
  background:var(--season-detail) right bottom / 150px auto no-repeat;mask-image:none;opacity:.35 !important;
}
html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-stats .card:nth-child(even)::before {transform:scaleX(-1);opacity:.18 !important;}
html:root[data-theme][data-season-theme="christmas"] :is(.sidebar-brand,.site-header .brand,.dashboard-topbar .brand-link) {position:relative;}
html:root[data-theme][data-season-theme="christmas"] :is(.sidebar-brand,.site-header .brand,.dashboard-topbar .brand-link)::after {
  content:"";position:absolute;top:-23px;left:-17px;width:58px;height:58px;
  background:url('/img/themes/christmas-hat.webp') center / contain no-repeat;pointer-events:none;z-index:4;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-main > .divider {
  height:44px;background:url('/img/themes/christmas-garland.webp') center / 100% 150px no-repeat;
}
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-main > .divider::before,
html:root[data-theme][data-season-theme="christmas"] body:has(.drawer) .zoryx-overview-main > .divider::after {display:none;}
@media(min-width:1280px) {
  html:root[data-theme][data-season-theme] body:has(.drawer) .navbar.bg-base-200 {min-height:70px;}
  html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content > main {padding-top:51px;}
  html:root[data-theme][data-season-theme] body:has(.drawer) .zoryx-overview-main {padding-right:clamp(36px,6.2vw,104px);}
  html:root[data-theme][data-season-theme] .zoryx-overview-stats {margin-bottom:44px;}
  html:root[data-theme][data-season-theme] .zoryx-overview-status {position:relative;}
  html:root[data-theme][data-season-theme="christmas"] .zoryx-overview-status::before {
    content:"";position:absolute;left:-64px;bottom:-12px;width:130px;height:205px;
    background:url('/img/themes/christmas-tree-corner.webp') left bottom / contain no-repeat;z-index:4;pointer-events:none;
  }
}
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card::before {
  display:block !important;width:auto;height:auto;inset:0;pointer-events:none;
}

/* The frame is the only artwork layer inside dashboard cards. Repeating
   edge slices preserves their scale on wide/short panels. */
html:root[data-theme][data-season-theme] body:has(.drawer) .drawer-content main .card::before {
  content:none !important;display:none !important;background:none !important;
}