/* M-Tech Connect — Smoke & Frost themes
 * Load AFTER theme.css / dashboard.css. Each theme is a complete SOLID palette;
 * the frosted panels are layered on only under html[data-glass] (js/glass.js
 * decides — it leaves the attribute off on slow or blur-less devices, which is
 * the solid fallback). Token names match theme.css + dashboard.css.
 */

/* ═══════ SMOKE — dark, neutral, smoked glass ═══════ */
body.smoke{
  --sLand:#131b21;--sGrass:#16261e;--sForest:#12211a;--sPaved:#1a232b;--sParking:#182029;--sSand:#2b2a24;--sPool:#123a55;
  --sBuilding:#27323c;--sBuildingEdge:#465664;--sShadow:rgba(0,0,0,0.55);--sRoad:#232e38;--sRoadCase:#0b1014;--sTree:#1f3d2d;
  --sCoast:#5a6c7b;--sPier:#4a5a68;--sPierEdge:#5f7080;
  --bg:#0a1016;--water1:#0b2437;--water2:#123a55;--water3:#081a28;
  --accent:#7cc4ff;--accent2:#a9d8ff;--accentDim:rgba(124,196,255,0.12);
  --walk:#4a5a68;--walkS:#5f7080;--fing:#3e4d5a;--fingS:#566674;
  --gang:rgba(74,90,104,0.5);--gangS:#5f7080;
  --land:#141c22;--landS:#22303a;
  --text:#eef2f5;--textDim:rgba(238,242,245,0.3);--textMid:rgba(238,242,245,0.6);
  --card:rgba(255,255,255,0.04);--cardB:rgba(255,255,255,0.1);
  --sidebarBg:rgba(14,19,25,0.97);--hdrBg:rgba(14,19,25,0.97);
  --ttBg:rgba(14,19,25,0.97);--ttB:rgba(255,255,255,0.12);
  --ripple:rgba(124,196,255,1);--rA1:0.03;--rA2:0.02;--rA3:0.012;
  --caustic:rgba(160,200,255,1);--causticA:0.015;
  --red:#ff6b6b;--amber:#fbbf24;--green:#4ade80;--purple:#b69cff;
  --normal:#4ade80;--warning:#fbbf24;--critical:#ff6b6b;--offline:#5b6670;--nodata:#1e2a34;
  --modalBg:rgba(6,10,14,0.72);--modalCard:rgba(16,21,27,0.98);--modalB:rgba(255,255,255,0.1);
  /* glass layer */
  --glassFill:rgba(12,16,22,0.5);--glassEdge:rgba(255,255,255,0.1);--glassHi:rgba(255,255,255,0.14);
  --glassShadow:rgba(0,0,0,0.55);--glassBlur:20px;
}

/* ═══════ FROST — light, white frosted glass ═══════ */
body.frost{
  --sLand:#eef3ec;--sGrass:#d0e6c5;--sForest:#b7d7ab;--sPaved:#f3f3ef;--sParking:#e7e8e2;--sSand:#f4ebd1;--sPool:#a8d8f2;
  --sBuilding:#ffffff;--sBuildingEdge:#d0d9e0;--sShadow:rgba(20,60,90,0.16);--sRoad:#ffffff;--sRoadCase:#d6dde3;--sTree:#9acb8b;
  --sCoast:#a9bccb;--sPier:#eef3f6;--sPierEdge:#c2cfd9;
  --bg:#e6f1f8;--water1:#8cc7e8;--water2:#c4e5f5;--water3:#74b8e0;
  --accent:#0a6fb0;--accent2:#1a86cc;--accentDim:rgba(10,111,176,0.1);
  --walk:#f4f7f9;--walkS:#c9d5de;--fing:#eef3f6;--fingS:#c2cfd9;
  --gang:rgba(230,238,244,0.6);--gangS:#c2cfd9;
  --land:#d9e7cf;--landS:#b9cfae;
  --text:#0e1b26;--textDim:rgba(14,27,38,0.35);--textMid:rgba(14,27,38,0.65);
  --card:rgba(255,255,255,0.6);--cardB:rgba(14,27,38,0.1);
  --sidebarBg:rgba(248,251,253,0.97);--hdrBg:rgba(248,251,253,0.97);
  --ttBg:rgba(255,255,255,0.97);--ttB:rgba(14,27,38,0.12);
  --ripple:rgba(255,255,255,1);--rA1:0.07;--rA2:0.045;--rA3:0.03;
  --caustic:rgba(255,255,255,1);--causticA:0.06;
  --red:#c3202e;--amber:#b25e00;--green:#12804a;--purple:#6d3fd6;
  --normal:#12804a;--warning:#b25e00;--critical:#c3202e;--offline:#5d6b76;--nodata:#cfdbe4;
  --modalBg:rgba(220,234,244,0.7);--modalCard:rgba(255,255,255,0.98);--modalB:rgba(14,27,38,0.1);
  --glassFill:rgba(255,255,255,0.55);--glassEdge:rgba(255,255,255,0.75);--glassHi:rgba(255,255,255,0.9);
  --glassShadow:rgba(20,60,90,0.28);--glassBlur:18px;
}

/* Pages without a map (bookings, customers…) get a soft water wash so the
   glass has something to show through. The dashboard's canvas covers it. */
body.smoke{background:radial-gradient(120% 80% at 10% 0%,#15334a 0%,transparent 60%),radial-gradient(90% 70% at 100% 100%,#0e2b3c 0%,transparent 55%),var(--bg);background-attachment:fixed}
body.frost{background:radial-gradient(120% 80% at 10% 0%,#cfe8f7 0%,transparent 60%),radial-gradient(90% 70% at 100% 100%,#bfe3f4 0%,transparent 55%),var(--bg);background-attachment:fixed}

/* Frost is a light theme: it takes the same element fixes Harbour does */
body.frost .tt{background:rgba(255,255,255,0.6);border-color:rgba(0,0,0,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.12)}
body.frost #sldOverlay .modal-hdr{background:var(--accent)}
body.frost #sldBody{background:#eef5fa}
body.frost .modal-overlay{background:rgba(0,0,0,0.25)}
body.frost .modal{background:var(--modalCard);border-color:var(--modalB)}
body.frost .modal-hdr,body.frost .modal-foot{border-color:var(--modalB)}
body.frost .modal-body{color:var(--text)}
body.frost .skt-row{background:rgba(0,0,0,0.04)}
body.frost .hdr{background:var(--hdrBg)}
body.frost input,body.frost select,body.frost textarea{background:rgba(255,255,255,0.7) !important;border-color:var(--cardB) !important;color:var(--text) !important}
body.frost .login-box{background:rgba(255,255,255,0.75);border-color:var(--cardB)}
body.frost .stat{background:rgba(255,255,255,0.6);border-color:var(--cardB)}
body.frost .tbl-wrap{border-color:var(--cardB)}
body.frost thead th{background:rgba(245,249,252,0.95)}
body.frost tbody tr:hover{background:rgba(0,0,0,0.03)}
body.frost .toast{box-shadow:0 4px 12px rgba(0,0,0,0.15)}
body.frost .tab{color:var(--textMid)}
body.frost .tab.active{color:var(--accent)}
body.frost .badge-confirmed{background:rgba(10,111,176,0.1);color:var(--accent)}
body.frost .badge-checkedin{background:rgba(18,128,74,0.1);color:var(--green)}
body.frost .badge-pending{background:rgba(178,94,0,0.1);color:var(--amber)}
body.frost .badge-cancelled{background:rgba(195,32,46,0.1);color:var(--red)}
body.smoke .tt{background:rgba(14,19,25,0.7);border-color:rgba(255,255,255,0.1)}

/* ═══════ GLASS LAYER — only with html[data-glass] ═══════ */
html[data-glass] body.smoke,html[data-glass] body.frost{
  --sidebarBg:var(--glassFill);--hdrBg:var(--glassFill);--ttBg:var(--glassFill);--modalCard:var(--glassFill);
}
html[data-glass] :is(body.smoke,body.frost) :is(.hdr,.side,.side-toggle,.tt,.ped-popup,.modal,.login-box,.stat,.tbl-wrap,.toast,.theme-pill,.hdr-stat,.modal-stat){
  background:var(--glassFill);
  border-color:var(--glassEdge);
  -webkit-backdrop-filter:blur(var(--glassBlur)) saturate(1.5);
  backdrop-filter:blur(var(--glassBlur)) saturate(1.5);
}
html[data-glass] :is(body.smoke,body.frost) :is(.side,.tt,.ped-popup,.modal,.login-box,.stat,.tbl-wrap,.toast){
  box-shadow:inset 0 1px 0 var(--glassHi),0 10px 30px -12px var(--glassShadow);
}
html[data-glass] :is(body.smoke,body.frost) :is(.hdr){box-shadow:inset 0 -1px 0 var(--glassEdge)}
/* a glass modal over a glass page: the scrim blurs, the card does the rest */
html[data-glass] :is(body.smoke,body.frost) .modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* frost modals hold charts and tables: at the 55% glass fill the map read
   through them, so they stay frosted but near-solid */
html[data-glass] body.frost .modal{background:rgba(255,255,255,0.88)}
/* rows inside glass stay clear — a card on glass on glass turns to mud */
html[data-glass] :is(body.smoke,body.frost) :is(.berth-row:nth-child(even),.skt-row){background:transparent}
html[data-glass] body.frost thead th{background:rgba(255,255,255,0.35)}
html[data-glass] body.smoke thead th{background:rgba(255,255,255,0.03)}

@media (prefers-reduced-transparency: reduce){
  html[data-glass] :is(body.smoke,body.frost) *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
}