/* ============================================================
   VSOS One — COCKPIT OVERRIDE LAYER  (Phase 4B)
   Loaded LAST on the OS-Cockpit admin pages
   (index/guests/room/chat/organisation/staff) to align them with
   the light "Sun & Sand" vsos-one.css look WITHOUT touching their
   markup / IDs / JS. It re-maps the old creme/gold + dark/glass
   tokens to the One palette and re-skins the shared component
   classes (header, card, button, pill, lang switch, sections).
   Principle: HELL/warm/premium · no dark · no glass · soft shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Khmer:wght@400;500;600;700&display=swap');

/* ---- One palette (mirror of vsos-one.css :root) ---- */
:root{
  --vo-bg:#FBF6EC; --vo-surface:#FFFFFF; --vo-surface-2:#FFF9EF; --vo-line:#ECE0CB;
  --vo-sun-400:#F6C667; --vo-sun-500:#EFA94E; --vo-sun-600:#E08A3C;
  --vo-grad:linear-gradient(135deg,#F6C667,#E08A3C);
  --vo-txt:#2E2419; --vo-txt-muted:#7A6A52; --vo-km:#B07A2E;
  --vo-leaf:#3E9E6E; --vo-coral:#E8654F; --vo-sky:#4E8FC0; --vo-grape:#8A6FB0;
  --vo-shadow-sm:0 1px 2px rgba(46,36,25,.06),0 2px 6px rgba(46,36,25,.05);
  --vo-shadow:0 4px 12px rgba(46,36,25,.08),0 10px 28px rgba(46,36,25,.07);
  --vo-shadow-lg:0 18px 40px rgba(46,36,25,.14);

  /* ---- Re-map legacy creme/gold tokens used by guests/room/chat/organisation/staff ---- */
  --gold:#E08A3C !important; --amber:#EFA94E !important; --terra:#E08A3C !important;
  --due:#E8654F !important; --ok:#3E9E6E !important;
  --ink:#2E2419 !important; --soft:#7A6A52 !important; --faint:#9A8A70 !important;
  --line:#ECE0CB !important; --card:#FFFFFF !important;
  --shadow:0 4px 12px rgba(46,36,25,.08),0 10px 28px rgba(46,36,25,.07) !important;

  /* ---- Re-map legacy dark/glass tokens used by index (vsos-mockup.css) ---- */
  --txt:#2E2419 !important; --txt-soft:#7A6A52 !important; --txt-faint:#9A8A70 !important;
  --orange:#E08A3C !important; --red:#E8654F !important;
  --ocean:#4E8FC0 !important; --sage:#3E9E6E !important;
  --glass:#FFFFFF !important; --glass-strong:#FFFFFF !important;
  --glass-border:#ECE0CB !important;
  --inset:none !important;
}

/* ---- BODY GUARD: force light everywhere ---- */
html,body{
  background:var(--vo-bg) !important;
  color:var(--vo-txt) !important;
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
.km,.km *{font-family:'Noto Sans Khmer','Inter',sans-serif !important;}
.disp{font-family:'Playfair Display',Georgia,serif !important;letter-spacing:-.01em;}

/* Kill the dark photo backdrop + glass blur from vsos-mockup.css (index) */
.bg,.bgimg,[class*="bg-dash"]{display:none !important;}
body::before,body::after{background-image:none !important;}
#app{
  background-image:none !important;
  background:var(--vo-bg) !important;
}
.glass,.kpi,.datechip,.langs,.sec .arrows button,.card,
[class*="glass"]{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* ============================================================
   SURFACES / CARDS
   ============================================================ */
.app{background:transparent !important;}
.card,.glass,.kpi,.sec-card,.box,.panel{
  background:var(--vo-surface) !important;
  border:1px solid var(--vo-line) !important;
  border-radius:18px !important;
  box-shadow:var(--vo-shadow) !important;
  color:var(--vo-txt) !important;
}
.kpi{box-shadow:var(--vo-shadow-sm) !important;}

/* ============================================================
   ONE HEADER PATTERN  (Home · Back · Title+KM · Actions)
   We re-skin whatever header wrappers the pages use.
   ============================================================ */
.topbar,.appbar,.head,.header,.hbar,.approw{
  background:transparent !important;
}
.brand h1,.htitle h1,.hero .rname,.brand .disp,.disp{
  color:var(--vo-txt) !important;
}
.brand .sub,.brand .subt,.htitle p,.subt,.sub{
  color:var(--vo-txt-muted) !important;
}

/* Round icon / nav buttons in the header */
.homebtn,.backbtn,.back,.iconbtn,.hbtn,.avatar,.sec .arrows button,
.head button:not(.lang-btn):not(.tab),.appbar button:not(.lang-btn){
  background:var(--vo-surface) !important;
  border:1px solid var(--vo-line) !important;
  color:var(--vo-txt) !important;
  box-shadow:var(--vo-shadow-sm) !important;
}
.homebtn,.avatar{
  background:var(--vo-grad) !important;
  color:#fff !important;
  border:0 !important;
}
.homebtn svg,.homebtn i,.avatar svg,.avatar i{color:#fff !important;}
.back svg,.back i,.backbtn svg,.backbtn i{color:var(--vo-txt) !important;}

/* Soften the dark "geblockt/blocked" status pill to a light neutral chip */
.occ.blocked,.occ.full,.occ.free,.occ.limited{box-shadow:none !important;}
.occ.blocked{background:#F1E7D4 !important;color:#7A6A52 !important;}

/* ============================================================
   LANGUAGE SWITCH  (3-lang for cockpit)
   ============================================================ */
.langs{
  background:var(--vo-surface) !important;
  border:1px solid var(--vo-line) !important;
  box-shadow:var(--vo-shadow-sm) !important;
}
.lang-btn{color:var(--vo-txt-muted) !important;background:transparent !important;}
.lang-btn.on,.lang-btn.active{
  background:var(--vo-grad) !important;
  color:#fff !important;
}

/* ============================================================
   PILLS / CHIPS / BADGES / COUNTERS
   ============================================================ */
.datechip,.chip,.pill,.tag,.badge{
  background:var(--vo-surface-2) !important;
  border:1px solid var(--vo-line) !important;
  color:var(--vo-txt) !important;
  box-shadow:none !important;
}
.datechip svg,.datechip i,.chip svg,.chip i{color:var(--vo-sun-600) !important;}
.count,.card-ico,.tile-ico,.row-ico{
  /* keep accent fills but normalize to sun ramp when grey/dark */
}
/* counters that had inline grey/dark backgrounds — let them keep accents,
   but ensure text contrast */
.count{color:#fff !important;}

/* ============================================================
   BUTTONS  (primary gradient pill / ghost)
   ============================================================ */
.btn,.button,.cta,.book-btn,.save-btn,.primary{
  background:var(--vo-grad) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:var(--vo-shadow-sm) !important;
}
.btn.ghost,.btn-ghost,.btn.secondary,.ghost{
  background:var(--vo-surface) !important;
  color:var(--vo-txt) !important;
  border:1px solid var(--vo-line) !important;
}
.btn.danger,.btn-danger,.danger{background:var(--vo-coral,#E8654F) !important;color:#fff !important;}

/* ============================================================
   SECTIONS / HEADINGS
   ============================================================ */
.sec h2,.section h2,h2,h3{color:var(--vo-txt) !important;}
.sec .cap,.sec .sp,.sec .meta,.cap,.faint{color:var(--vo-txt-muted) !important;}

/* ============================================================
   FORM CONTROLS  (selects/inputs in room.html etc.)
   ============================================================ */
input,select,textarea,.fld input,.fld select,.fld textarea{
  background:var(--vo-surface) !important;
  color:var(--vo-txt) !important;
  border:1px solid var(--vo-line) !important;
  border-radius:12px !important;
}
input::placeholder,textarea::placeholder{color:#A99B82 !important;}
.fld .lbl,.lbl,label{color:var(--vo-txt-muted) !important;}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--vo-sun-500) !important;
  box-shadow:0 0 0 3px rgba(239,169,78,.18) !important;
}
.tab,.pill-tab,.segtab{color:var(--vo-txt-muted) !important;}
.tab.active,.tab.on,.pill-tab.active{
  background:var(--vo-grad) !important;color:#fff !important;border:0 !important;
}

/* ============================================================
   BOTTOM NAV / TABBAR (cockpit pages that have one)
   ============================================================ */
#vsosTabbar,.tabbar,.bottomnav{
  background:var(--vo-surface) !important;
  border-top:1px solid var(--vo-line) !important;
  box-shadow:0 -6px 20px rgba(46,36,25,.06) !important;
}
#vsosTabbar a,.tabbar a{color:var(--vo-txt-muted) !important;}
#vsosTabbar a.active,.tabbar a.active{color:var(--vo-sun-600) !important;}

/* ============================================================
   MODALS / OVERLAYS  (organisation PIN-gate, editors)
   ============================================================ */
.modal,.sheet,.overlay-card,.dialog,.pin-card,.editor{
  background:var(--vo-surface) !important;
  color:var(--vo-txt) !important;
  border:1px solid var(--vo-line) !important;
  box-shadow:var(--vo-shadow-lg) !important;
}
.modal-backdrop,.overlay,.scrim{background:rgba(46,36,25,.34) !important;}

/* ============================================================
   ORGANISATION.HTML — convert dark-glass group cards to light
   (overrides the page's intentional dark group system).
   ============================================================ */
.grp{
  background:var(--vo-surface) !important;
  border:1px solid var(--vo-line) !important;
  box-shadow:var(--vo-shadow) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.ghead{background:transparent !important;}
.ghead .gtt{color:var(--vo-txt) !important;}
.ghead .gss{color:var(--vo-txt-muted) !important;}
.ghead .gchev{background:var(--vo-surface-2) !important;color:var(--vo-txt-muted) !important;}
.ghead .gchev svg{color:var(--vo-txt-muted) !important;}
.gbody{border-top:1px solid var(--vo-line) !important;}
.gbody .cgroup>.gh{color:var(--vo-sun-600) !important;}
.gbody .citem .il{color:var(--vo-txt) !important;}
.gbody .cfield .fl{color:var(--vo-txt) !important;}
.gbody .cfield .pv .pt{color:var(--vo-txt) !important;}
.gbody .cfield .pv .pl{color:var(--vo-sun-600) !important;}
.gbody .note,.gbody .note *{color:var(--vo-txt-muted) !important;}
.gbody .note b{color:var(--vo-txt) !important;}
.gbody p[data-i18n="pin_note"]{color:var(--vo-txt-muted) !important;}
.gbody .editbadge,.gbody .editbadge *{color:var(--vo-txt) !important;}
.gbody{border-top-color:var(--vo-line) !important;}
/* keep colored group icons (overview/content/team) as accents — they stay */

/* PIN-gate card → light */
.gcard{
  background:var(--vo-surface) !important;
  border:1px solid var(--vo-line) !important;
  box-shadow:var(--vo-shadow-lg) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
.gcard input{
  background:var(--vo-surface-2) !important;color:var(--vo-txt) !important;
  border:1.5px solid var(--vo-line) !important;
}

/* Generic text-color safety: anything that was white text on dark becomes dark */
.app *{}