/* ============================================================================
   theme.css — Green theme (matches the logo / image 2), hidden scrollbars,
   image logo support, page-reader speak button, visible text selection,
   audit layout (2×2 KPIs + aligned filter row), TTS advice toast, creator
   box style presets, Live View recolor.
   The Owner's saved colors from Settings → Appearance are injected as an
   inline <style id='fss-theme'> (see fss_theme_style() in partials/layout.php)
   and override the --th-* defaults below for the WHOLE system.
   ============================================================================ */

:root{
  /* base colors (editable in Settings → Appearance) */
  --th-primary:#567d35;   /* leaf green */
  --th-accent:#a9c53f;    /* light leaf */
  --th-side1:#24330f;     /* sidebar top */
  --th-side2:#16210a;     /* sidebar bottom */
  --th-bg:#edf2e3;        /* page background */
  /* derived automatically from the base colors */
  --th-primary-d:color-mix(in srgb,var(--th-primary) 70%,#000);
  --th-ink:color-mix(in srgb,var(--th-primary) 40%,#000);
  --th-soft:color-mix(in srgb,var(--th-accent) 20%,#fff);
  --th-line:color-mix(in srgb,var(--th-accent) 38%,#fff);
  --th-gold:color-mix(in srgb,var(--th-accent) 45%,#fff);
  --th-bg2:color-mix(in srgb,var(--th-bg) 55%,#cfdde4);
  --cream-2:color-mix(in srgb,var(--th-accent) 14%,#fff);
  /* remap ADMIN tokens (app.css / app2.css) */
  --amber:var(--th-primary);
  --amber-2:var(--th-primary-d);
  --amber-soft:var(--th-soft);
  --amber-line:var(--th-line);
  --wood-950:var(--th-side1);
  --wood-900:var(--th-ink);
  --wood-800:color-mix(in srgb,var(--th-ink) 82%,#fff);
  --wood-700:color-mix(in srgb,var(--th-ink) 66%,#fff);
  --cream:var(--th-bg);
  /* remap LIVE VIEW tokens (live.css) */
  --lv-amber:var(--th-primary);
  --lv-amber2:var(--th-primary-d);
  --lv-ink:var(--th-ink);
  --lv-cream:var(--th-bg);
  --lv-line:var(--th-line);
  --lv-bar:color-mix(in srgb,var(--th-side2) 93%,transparent);
  --lv-gold:var(--th-gold);
}

/* ----------------------------------------------------------------------------
   Hide ALL scrollbars everywhere — mouse wheel / touch / keyboard scrolling
   keeps working normally, only the visual scrollbar is removed.
   ---------------------------------------------------------------------------- */
*{scrollbar-width:none !important;-ms-overflow-style:none !important}
*::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important;background:transparent !important}

/* ----------------------------------------------------------------------------
   Text selection is VISIBLE everywhere (Select All shows a highlight color) —
   in page content, HTML editor textareas, inputs … every section.
   ---------------------------------------------------------------------------- */
::selection{background:color-mix(in srgb,var(--th-accent) 50%,#fff) !important;color:var(--th-side2) !important}
input::selection,textarea::selection{background:color-mix(in srgb,var(--th-primary) 28%,#fff) !important;color:var(--th-side2) !important}
input,textarea{-webkit-user-select:text;user-select:text}

/* ---- Image logo (uploaded in Settings → Appearance) ---- */
.brand .logo,.sb-brand .logo,.login-head .logo{overflow:hidden;padding:0}
.brand .logo img,.sb-brand .logo img,.login-head .logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ---- Admin chrome recolor (image 2 palette) ---- */
body{background:linear-gradient(155deg,var(--th-bg),var(--th-bg2)) fixed}
.sidebar{background:linear-gradient(180deg,var(--th-side1),var(--th-side2))}
.brand .logo{background:linear-gradient(135deg,var(--th-primary),var(--th-accent));color:#fff}
.avatar{background:linear-gradient(135deg,var(--th-primary),var(--th-accent))}
.sidebar .nav a{color:#dbe7c9}
.sidebar .nav a:hover{background:color-mix(in srgb,var(--th-accent) 16%,transparent);color:#fff}
.sidebar .nav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--th-primary) 55%,transparent),color-mix(in srgb,var(--th-accent) 25%,transparent));color:#fff}
.nav-group{color:color-mix(in srgb,var(--th-accent) 55%,#fff)}
.side-foot{border-top:1px solid color-mix(in srgb,#fff 12%,transparent)}
.topbar{background:color-mix(in srgb,#fff 55%,var(--th-bg));border-bottom:1px solid var(--th-line)}
.in:focus{border-color:var(--th-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--th-primary) 18%,transparent)}

/* ---- Audit page: KPI cards in a 2×2 grid (image 1) ---- */
.aud-kpi{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
@media (max-width:640px){.aud-kpi{grid-template-columns:1fr !important}}

/* ---- Audit page: filter row — Search / Close / records / Export CSV sit on
        one row, equal height, aligned with the Detail input (image 2) ---- */
.aud-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.aud-filter .field{margin:0;flex:1 1 150px;min-width:140px}
.aud-filter .in{height:40px}
.aud-filter .btn{height:40px;padding:0 16px;font-size:13px;border-radius:10px}
.aud-filter .chip{height:40px;padding:0 14px;border-radius:10px;font-size:12.5px}
.aud-filter .sp{flex:1 1 auto}

/* ---- Speak button (page reader — Khmer/English) ---- */
.spk{width:36px;height:36px;border-radius:50%;border:1px solid var(--th-line);background:#fff;color:var(--th-primary-d);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;flex:0 0 auto}
.spk:hover{border-color:var(--th-primary);color:var(--th-primary);transform:translateY(-1px)}
.spk.on{background:linear-gradient(135deg,var(--th-primary),var(--th-accent));color:#fff;border-color:var(--th-primary-d);animation:spkPulse 1.4s ease-in-out infinite}
@keyframes spkPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--th-primary) 45%,transparent)}50%{box-shadow:0 0 0 8px transparent}}

/* ---- Toast for TTS advice (e.g. "no Khmer voice — use Microsoft Edge") ---- */
.fss-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);max-width:min(92vw,560px);background:linear-gradient(135deg,var(--th-side1),var(--th-side2));color:#f2f7e6;border:1px solid color-mix(in srgb,var(--th-accent) 45%,transparent);border-radius:14px;padding:12px 18px;font-size:13px;line-height:1.75;box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;transition:all .35s ease;z-index:99999;pointer-events:none}
.fss-toast.show{opacity:1;transform:translate(-50%,0)}

/* ----------------------------------------------------------------------------
   Creator box on the Login page — content AND style are set in
   Settings → Creator info: 4 presets (soft / banner / outline / dark) and an
   optional accent color (--mk; defaults to the theme primary color).
   ---------------------------------------------------------------------------- */
.maker-box{--mk:var(--th-primary);margin-top:14px;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.85}
.maker-box b{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:2px}
.maker-box small{display:block}
.maker-box.mk-soft{border:1px solid color-mix(in srgb,var(--mk) 32%,#fff);background:linear-gradient(135deg,color-mix(in srgb,var(--mk) 12%,#fff),#fff);color:var(--th-ink)}
.maker-box.mk-soft b{color:color-mix(in srgb,var(--mk) 78%,#000)}
.maker-box.mk-soft small{color:color-mix(in srgb,var(--th-ink) 80%,#fff)}
.maker-box.mk-banner{border:none;background:linear-gradient(135deg,var(--mk),color-mix(in srgb,var(--mk) 45%,var(--th-accent)));color:#fff}
.maker-box.mk-banner b{color:#fff}
.maker-box.mk-banner small{color:color-mix(in srgb,#fff 88%,var(--mk))}
.maker-box.mk-outline{border:1.5px dashed color-mix(in srgb,var(--mk) 62%,#fff);background:transparent;color:var(--th-ink)}
.maker-box.mk-outline b{color:color-mix(in srgb,var(--mk) 80%,#000)}
.maker-box.mk-outline small{color:color-mix(in srgb,var(--th-ink) 82%,#fff)}
.maker-box.mk-dark{border:1px solid color-mix(in srgb,var(--mk) 40%,transparent);background:linear-gradient(135deg,var(--th-side1),var(--th-side2));color:#eef4dd}
.maker-box.mk-dark b{color:color-mix(in srgb,var(--mk) 55%,#fff)}
.maker-box.mk-dark small{color:color-mix(in srgb,#fff 75%,var(--th-side2))}

/* ---- Live View recolor (image 2 palette) ---- */
body.live-body{background:linear-gradient(155deg,var(--th-bg),var(--th-bg2)) fixed}
.lv-side{background:linear-gradient(180deg,var(--th-side1),var(--th-side2))}
.sb-brand .logo{background:linear-gradient(135deg,var(--th-primary),var(--th-accent))}
.sb-group{color:color-mix(in srgb,var(--th-accent) 55%,#fff)}
.sb-menu .item{color:#dbe7c9}
.sb-menu .item:hover{background:color-mix(in srgb,var(--th-accent) 14%,transparent)}
.sb-menu .item.on{background:linear-gradient(90deg,color-mix(in srgb,var(--th-primary) 55%,transparent),color-mix(in srgb,var(--th-accent) 22%,transparent));color:#fff}
.sb-foot{border-top:1px solid color-mix(in srgb,#fff 12%,transparent)}
.sb-foot .av{background:linear-gradient(135deg,var(--th-primary),var(--th-accent))}
.cbtn.nar{background:linear-gradient(135deg,var(--th-primary),var(--th-primary-d))}
@keyframes narPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--th-primary) 45%,transparent)}50%{box-shadow:0 0 0 9px transparent}}

/* ---- Live top bar buttons: icon + label spacing ---- */
.lv-btn{gap:6px}
.lv-btn svg{flex:0 0 auto}

/* ---- Creator box: text alignment + font weight (Settings → Creator info) ---- */
.maker-box.mk-al-center{text-align:center}
.maker-box.mk-al-center b{justify-content:center}
.maker-box.mk-al-right{text-align:right}
.maker-box.mk-al-right b{justify-content:flex-end}
.maker-box.mk-tn b{font-weight:500}
.maker-box.mk-bb small{font-weight:700}

/* ---- Admin footer — restyled to match the login-card look ---- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 22px;margin:26px 26px 22px;padding:13px 20px;background:#fffdf8;border:1px solid var(--amber-line);border-radius:16px;box-shadow:var(--shadow);font-size:12px;color:var(--muted);text-align:center}
.foot span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.foot span:first-child{color:var(--amber-2);font-weight:700}
.foot span:last-child{color:var(--wood-700);font-weight:600}
.foot span+span{position:relative;padding-left:22px}
.foot span+span::before{content:'•';position:absolute;left:6px;color:var(--amber)}

/* ---- Mobile polish: admin panel + login + live view ---- */
@media (max-width:760px){
  .sidebar{width:274px;max-width:84vw;box-shadow:14px 0 44px rgba(0,0,0,.4);z-index:90}
  body.side-open::after{content:'';position:fixed;inset:0;background:rgba(20,12,4,.5);z-index:80}
  .topbar{gap:8px;padding:9px 12px}
  .topbar .section-title b{font-size:14px;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lang-sw a{padding:4px 10px;font-size:12px}
  .content{padding:14px 12px 44px}
  .card{padding:14px;overflow-x:auto}
  .kpi b{font-size:17px}
  .kpi .ic{width:38px;height:38px;flex-basis:38px}
  .toolbar{gap:8px}
  .searchbox{flex:1;min-width:0}
  .searchbox input{width:100%;min-width:0}
  .pager{flex-wrap:wrap;justify-content:center}
  .inv-sheet{padding:20px 14px}
  .pay-methods{grid-template-columns:repeat(2,1fr)}
  .doc-nav{gap:7px}
  .foot{margin:18px 12px;flex-direction:column;gap:6px}
  .foot span{justify-content:center;text-align:center;white-space:normal}
  .foot span+span{padding-left:0}
  .foot span+span::before{content:none}
  .login-card{width:100%;max-width:430px}
  .login-head{padding:22px 18px 16px}
  .login-body{padding:20px 18px 22px}
}
@media (max-width:480px){
  .cur-tt b{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .lv-btn.lang span{display:none}
  .lv-top .lv-btn{min-width:30px;height:30px;padding:0 7px}
  .lv-ctl{max-width:96vw;overflow-x:auto}
  .doc-nav a{padding:5px 12px;font-size:12px}
  .tbl{font-size:12.5px}
  .tbl th{padding:7px 8px}
  .tbl td{padding:8px}
}