/* ════════════════════════════════════════════════════════════════════
   PREMIUM DAY MODE — v3: flat, clean, no wallpaper
   ════════════════════════════════════════════════════════════════════
   Direction changed per your reference sample (Enlite Prime): dropped
   the frosted-glass/blur look entirely. This is now a flat, solid,
   professional admin-dashboard style — white/near-white cards with
   soft neutral shadows, bold crisp dark headings, a clean colored
   accent (kept LOT4's existing green rather than switching to blue,
   to stay on-brand), and the photographic wallpaper is turned OFF for
   Day Mode on these two pages.

   Scope, same as before: loaded AFTER _shared.css and after each
   page's own wallpaper <style> block, so it wins the cascade for
   body.light-mode only. Dark Mode is completely untouched. Only these
   2 pages link this file. Remove the <link> tag at any time to fall
   back to exactly how the page looked before any of this.

   Design discipline: still visual-properties-only (background, border,
   box-shadow, border-radius, color, font, transform, transition) — the
   nav "track" container and its small icon spacing are the only
   deliberate, narrow exceptions (display/gap/padding on a container
   that already used that display mode), called out inline below.
   ════════════════════════════════════════════════════════════════════ */

body.light-mode{
  /* --surface was never defined for Day Mode in _shared.css, so nav
     pills / table headers were silently falling back to the Dark Mode
     value. Fixing that here, flat version. */
  --surface: #eef1f8;

  /* Flat design tokens used throughout this file. */
  --flat-bg:    #f3f5fa;   /* page background, replaces the wallpaper */
  --flat-card:  #ffffff;   /* card / panel surface */
  --flat-chip:  #eef1f8;   /* light neutral chip / track background */
  --flat-border:#e6e9f2;
  --flat-ink:   #11182a;   /* headings / big numbers — crisp near-black */
  --flat-ink-soft:#4b5566; /* secondary text */
  --shadow-sm: 0 1px 2px rgba(17,24,39,.05);
  --shadow-md: 0 1px 3px rgba(17,24,39,.06), 0 8px 20px -10px rgba(17,24,39,.12);
  --shadow-lg: 0 4px 10px -2px rgba(17,24,39,.08), 0 20px 40px -16px rgba(17,24,39,.18);
}

/* ── Turn the wallpaper off and give the page a clean flat background ── */
body.light-mode{
  background-image: none !important;
  background-color: var(--flat-bg) !important;
}
body.light-mode .pg{ background: transparent !important; }

/* ── Hero banner: no more "transparent over wallpaper" — a clean, soft
   brand-tinted panel with a bottom border, so it still reads as a
   header rather than just disappearing into the page. ───────────────── */
body.light-mode .hero{
  background: linear-gradient(135deg,#eefcf5,#eef5ff) !important;
  border-bottom: 1px solid var(--flat-border);
}

/* ── Typography: crisper display face + darker, higher-contrast ink for
   headings, card titles and big numbers. Body copy/table cells keep
   your existing font and color, unchanged. ──────────────────────────── */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode .kv,
body.light-mode .ct,
body.light-mode .mod-card h3,
body.light-mode .modal-title,
body.light-mode #pageTitle{
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif !important;
  color: var(--flat-ink) !important;
  letter-spacing:-.01em;
}
body.light-mode h1,
body.light-mode #pageTitle{ font-weight:800 !important; }
body.light-mode .kv{ font-weight:800 !important; letter-spacing:-.02em; font-size:1.15em; }
body.light-mode .ct,
body.light-mode .mod-card h3{ font-weight:700 !important; }

/* KPI labels ("TOTAL ASSETS" etc.) — bold, uppercase, brand-green, with
   letter-spacing, the same device your reference sample uses (it just
   uses blue; this keeps LOT4's own green so the app stays on-brand). */
body.light-mode .kl{
  font-family:'Plus Jakarta Sans','DM Sans',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  color: var(--green) !important;
  opacity:1 !important;
}

/* ── Floating panels → flat solid cards with a soft neutral shadow
   (no blur, no translucency). Header counted too. ───────────────────── */
body.light-mode .hdr,
body.light-mode .card,
body.light-mode .kpi,
body.light-mode .mod-card,
body.light-mode .ch,
body.light-mode .detail-section{
  background: var(--flat-card) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.light-mode .hdr{ border-radius:0 !important; border-bottom:1px solid var(--flat-border) !important; box-shadow: var(--shadow-sm); }
body.light-mode .card:hover,
body.light-mode .mod-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
body.light-mode .cbar{ border-bottom-color: var(--flat-border) !important; }
body.light-mode .card-top{ border-top: 3px solid var(--green) !important; }

/* ── Buttons: flat solid fills, clean shadow, gentle hover lift ──────── */
body.light-mode .btn{
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.light-mode .btn-g{ background: var(--green); }
body.light-mode .btn-b{ background: var(--blue); }
body.light-mode .btn-a{ background: var(--amber); }
body.light-mode .btn-r{ background: var(--red); }
body.light-mode .btn-o{
  background: #ffffff;
  color: var(--flat-ink-soft);
  border-color: var(--flat-border);
}
body.light-mode .btn-o:hover{ background: var(--flat-chip) !important; }
body.light-mode .btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--shadow-md); }
body.light-mode .btn:active{ transform: translateY(0); filter: brightness(.96); box-shadow: var(--shadow-sm); }

/* ── Inputs: clean flat fields, simple focus ring ────────────────────── */
body.light-mode .fi,
body.light-mode .fld input,
body.light-mode .fld select,
body.light-mode .fld textarea,
body.light-mode .loc-input-row input{
  background: #ffffff !important;
  border: 1.5px solid var(--flat-border) !important;
  box-shadow: none;
}
body.light-mode .fi:focus,
body.light-mode .fld input:focus,
body.light-mode .fld select:focus,
body.light-mode .fld textarea:focus,
body.light-mode .loc-input-row input:focus{
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(9,155,94,.14);
}
body.light-mode .asset-photo-box{
  background: var(--flat-chip);
  border-color: var(--flat-border);
}

/* ── Tables: bold flat header row, soft green hover tint ─────────────── */
body.light-mode thead tr{
  background: var(--flat-chip) !important;
}
body.light-mode th{
  color: var(--flat-ink-soft) !important;
  font-weight:700 !important;
  letter-spacing:.03em;
}
body.light-mode tbody tr:hover{ background: rgba(9,155,94,.06) !important; }

/* ── Pagination, tabs ─────────────────────────────────────────────────── */
body.light-mode .pgb{ background:#fff; border-color: var(--flat-border); }
body.light-mode .pgb:hover{ background: var(--flat-chip); }
body.light-mode .pgb.on{ box-shadow: 0 2px 8px rgba(9,155,94,.35); }
body.light-mode .tabs{ border-bottom-color: var(--flat-border); }
body.light-mode .tab .tc{ background: var(--flat-chip); }

/* ── Modals: solid flat panel, soft dim backdrop (no blur) ───────────── */
body.light-mode .modal-bg{ background: rgba(17,24,39,.45); }
body.light-mode .modal{
  background: #ffffff !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg);
}
body.light-mode .modal-hdr,
body.light-mode .modal-ft{ border-color: var(--flat-border) !important; }
body.light-mode .modal-x{ background: var(--flat-chip); border-color: var(--flat-border); }

/* ── Footer ───────────────────────────────────────────────────────────── */
body.light-mode footer{
  background: #ffffff;
  border-top: 1px solid var(--flat-border);
}

/* ── Nav pattern A: header > nav > a (icon + label already in markup,
   e.g. asset_detail.html). Flat segmented track, no blur. ───────────── */
body.light-mode header.hdr nav{
  display:flex;
  align-items:center;
  gap:2px;
  background: var(--flat-chip);
  border: 1px solid var(--flat-border);
  border-radius: 999px;
  padding: 4px;
}
body.light-mode header.hdr nav a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 13px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color: var(--flat-ink-soft);
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.light-mode header.hdr nav a i{ font-size:11px; opacity:.8; }
body.light-mode header.hdr nav a:hover{
  background:#ffffff !important;
  color: var(--green) !important;
  box-shadow: var(--shadow-sm);
}
body.light-mode header.hdr nav a.on{
  background: var(--green) !important;
  color:#fff !important;
  box-shadow: 0 2px 8px rgba(9,155,94,.3);
}
body.light-mode header.hdr nav a.on i{ opacity:1; }

/* ── Nav pattern B: .menu-nav > .nav-item > .nav-trigger + .nav-dropdown
   (index.html). Same flat segmented track. ──────────────────────────── */
body.light-mode nav.menu-nav{
  display:flex;
  align-items:center;
  gap:2px;
  background: var(--flat-chip);
  border: 1px solid var(--flat-border);
  border-radius: 999px;
  padding: 4px;
}
body.light-mode .nav-trigger{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 14px !important;
  border-radius:999px;
  font-size:12.5px;
  color: var(--flat-ink-soft);
  border-bottom:none !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.light-mode .nav-trigger i{ font-size:11px; opacity:.75; }
body.light-mode .nav-trigger:hover{
  background:#ffffff;
  box-shadow: var(--shadow-sm);
}
body.light-mode .nav-trigger.on{
  background: var(--green) !important;
  color:#fff !important;
  box-shadow: 0 2px 8px rgba(9,155,94,.3);
}
body.light-mode .nav-trigger.on i{ color:#fff; opacity:1; }
body.light-mode .nav-dropdown{
  background: #ffffff !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  overflow:hidden;
}
body.light-mode .nav-dropdown a{
  border-radius:0;
  transition: background .15s ease, color .15s ease;
}
body.light-mode .nav-dropdown a:hover{
  background: rgba(9,155,94,.08) !important;
}

/* ── Respect reduced-motion preference ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  body.light-mode .card,
  body.light-mode .mod-card,
  body.light-mode .btn{ transition: none !important; }
}