/* ============================================================
   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: linear-gradient(178deg, #FFF6E3 0%, #FBEFD7 60%, #F0D9A8 100%); /* JS mood override via body.style.background */
  --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;
  background-attachment: fixed !important;
  transition: background 2s ease !important;
}

/* ---- SKY MOODS ---- */
body[data-mood="dawn"]{
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(255,180,100,0.65) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(238,120,100,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 90%, rgba(255,210,160,0.50) 0%, transparent 65%),
    linear-gradient(170deg, #F9C8A0 0%, #F5A882 30%, #EE8B7A 60%, #E8C4A0 100%) !important;
}
body[data-mood="morning"]{
  background:
    radial-gradient(ellipse 75% 50% at 15% 15%, rgba(255,220,100,0.65) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 25%, rgba(240,160,60,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 45% 85%, rgba(255,235,150,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 8% 65%, rgba(220,140,50,0.45) 0%, transparent 50%),
    linear-gradient(175deg, #FFF0C8 0%, #FFD97A 35%, #F5BC5A 70%, #FDEAC0 100%) !important;
}
body[data-mood="noon"]{
  background:
    radial-gradient(ellipse 90% 40% at 50% 5%, rgba(255,240,120,0.60) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 85% 60%, rgba(255,200,60,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 10% 70%, rgba(255,220,80,0.40) 0%, transparent 55%),
    linear-gradient(180deg, #FFFBE8 0%, #FFF0B0 40%, #FFE580 75%, #FFF5C0 100%) !important;
}
body[data-mood="afternoon"]{
  background:
    radial-gradient(ellipse 70% 55% at 25% 20%, rgba(255,180,60,0.65) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 78% 45%, rgba(220,110,30,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 95%, rgba(255,200,100,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 5% 50%, rgba(240,140,40,0.45) 0%, transparent 50%),
    linear-gradient(170deg, #FFE4A0 0%, #FFB84D 35%, #F59030 65%, #FFCF80 100%) !important;
}
body[data-mood="sunset"]{
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(255,160,60,0.70) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 80% 35%, rgba(200,60,100,0.60) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 50% 80%, rgba(140,60,160,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 70%, rgba(230,100,50,0.50) 0%, transparent 50%),
    linear-gradient(168deg, #F9C06A 0%, #F07040 28%, #D84E6E 56%, #8B4590 80%, #4A2878 100%) !important;
}
body[data-mood="night"]{
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(100,60,160,0.50) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 40%, rgba(60,30,100,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 90%, rgba(80,40,120,0.40) 0%, transparent 65%),
    linear-gradient(175deg, #1E1228 0%, #2C1A3A 30%, #3A2440 60%, #281C30 100%) !important;
}
.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: transparent !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 *{}

/* ============================================================
   KONTRAST-GUARD — ERIC 2026-06-25 13:35 GMT+7
   Endgueltiger Fix: kein heller Text auf hellem Grund mehr.
   Laedt als LETZTE Regelgruppe der letzten gemeinsamen CSS-Datei
   der Cockpit-Seiten (chat/guests/room/staff/organisation/howto).
   Hohe Spezifitaet, damit vsos-theme.css (weiss-auf-dunkel) verliert.
   ============================================================ */

/* 0) WCAG-sichere Token: Khmer-Gold abdunkeln (war #B07A2E ~3.5:1 -> jetzt ~5.6:1) */
:root{ --vo-km:#8A5E1E !important; --faint:#7A6A52 !important; --txt-faint:#7A6A52 !important; }

/* 1) FORMULAR-LABELS (Walk-in anlegen / Nachricht verfassen): immer dunkel,
   schlaegt theme .fld label / .fld .lbl (weiss 0.82) per gleicher+hoeherer Spezifitaet. */
.fld label,.fld .lbl,label.fld .lbl,
.card .fld label,.card label,.card .fld .lbl,
form label,.field label,.frow label{
  color:var(--vo-txt-muted) !important;
  -webkit-text-fill-color:var(--vo-txt-muted) !important;
}

/* 2) FILTER-BUTTONS (chat: Alle/WhatsApp/Telegram...) + Toggles: inaktiv = dunkler Text auf hellem Grund */
.filt,.filters .filt,.tgl,.toggles .tgl,.seg,.segtab,.chip-filter{
  background:var(--vo-surface) !important;
  color:var(--vo-txt) !important;
  -webkit-text-fill-color:var(--vo-txt) !important;
  border:1px solid var(--vo-line) !important;
}
.filt svg,.tgl svg,.seg svg{color:var(--vo-txt-muted) !important;}
/* aktiver Zustand: weiss auf Gold-Gradient (Kontrast hoch genug) */
.filt.on,.filters .filt.on,.tgl.on,.toggles .tgl.on,.seg.on,.segtab.on{
  background:var(--vo-grad) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:transparent !important;
}
.filt.on svg,.tgl.on svg{color:#fff !important;}

/* 3) MUTED / NEBENTEXT: nie heller als --vo-txt-muted (4.9:1) auf hellen Flaechen */
.countbar,.countbar *,.foot,.hint,.note,.bnote,.meta,.sub,.cap,.faint,.sp,
.rtime,.hid,.empty,.empty-line,.loading,.ts,.gss,.km{
  color:var(--vo-txt-muted) !important;
  -webkit-text-fill-color:var(--vo-txt-muted) !important;
}
/* Khmer-Subtitel duerfen ihren Gold-Ton behalten, aber abgedunkelt */
.km,.km *{ color:var(--vo-km) !important; -webkit-text-fill-color:var(--vo-km) !important; }

/* 4) AKZENTZAHLEN (z.B. countbar <b> 43) lesbar: dunkleres Gold statt hellem Amber */
.countbar b,.count b,b.accent,.num-accent{ color:#B86A1C !important; -webkit-text-fill-color:#B86A1C !important; }

/* 5) SICHERHEITSNETZ: jedes Element, das vom Dunkel-Theme reines Weiss bekommt
   ABER auf einer hellen Karte/Flaeche sitzt, wird dunkel.
   Ausgenommen: Elemente mit Gradient-/Akzent-Hintergrund (Buttons/Pills/aktive Tabs),
   die ihr weisses Label behalten sollen. */
.card p,.card span,.card label,.card li,.card td,.card .lbl,.card .val,.card small,
.box p,.box span,.panel p,.panel span,.sec-card p,.sec-card span{
  color:var(--vo-txt) !important;
  -webkit-text-fill-color:var(--vo-txt) !important;
}
/* explizit NICHT abdunkeln: Inhalte auf farbigen Flaechen */
.btn,.btn *,.send,.send *,.badge,.badge *,.rbadge,.walkin,.pill.on,.tab.on,.tab.active,
.msg.staff,.msg.staff *,.filt.on,.filt.on *,.tgl.on,.tgl.on *,
.tabbar .tab.on,.count,.cc{ -webkit-text-fill-color:initial; }
.btn,.send,.badge,.rbadge,.walkin{ color:#fff !important; }

/* 6) NACHZUG 13:40 — bare <span> in muted-Containern (Header-Sub/Cap/Foot) erbten Theme-Weiss */
.sub,.sub span,.cap,.cap span,.foot,.foot span,
.brand .sub,.brand .sub span,.sec .cap,.sec .cap span,
footer .foot,footer .foot span,.htitle p,.mod-desc{
  color:var(--vo-txt-muted) !important;
  -webkit-text-fill-color:var(--vo-txt-muted) !important;
}
/* Akzentzahl noch etwas dunkler fuer AA bei kleiner Schrift */
.countbar b,.count b,b.accent,.num-accent{ color:#9C5212 !important; -webkit-text-fill-color:#9C5212 !important; }

/* 7) NACHZUG 13:42 — Status-Pills (guests: frei/belegt/offen/bezahlt) bekamen vom Dunkel-Theme
   weisse Schrift (color:#fff) auf hellem Tint -> unsichtbar. Zurueck auf farbige Schrift,
   abgedunkelt fuer AA auf hellem Pastell. */
.occ.free,.paid.y,.pay.y,.stat.ok .v{ color:#1A6E45 !important; -webkit-text-fill-color:#1A6E45 !important; background:rgba(62,158,110,.16) !important; }
.occ.full,.paid.n,.pay.n,.stat.warn .v{ color:#B23E1A !important; -webkit-text-fill-color:#B23E1A !important; background:rgba(232,101,79,.16) !important; }
.occ.limited{ color:#9C5212 !important; -webkit-text-fill-color:#9C5212 !important; background:rgba(239,169,78,.20) !important; }
.occ.blocked{ color:#2E2419 !important; -webkit-text-fill-color:#2E2419 !important; background:#EFE2C8 !important; }
/* generische Status-Pills, die das Theme pauschal weiss gefaerbt hat, auf Glas/hell wieder dunkel */
.stat-pill,.count,.mod-num,.occ,.paid,.pay{ -webkit-text-fill-color:initial; }

/* 8) NACHZUG 13:46 — Rest-Hints + Status-Badges (room.html) auf AA */
.hint,.edit-body .hint,p.hint,.subhint,.fieldnote{ color:var(--vo-txt-muted) !important; -webkit-text-fill-color:var(--vo-txt-muted) !important; }
.statusbadge.sb-free,.statusbadge.sb-ok{ color:#1A6E45 !important; -webkit-text-fill-color:#1A6E45 !important; }
.statusbadge.sb-occ,.statusbadge.sb-full{ color:#B23E1A !important; -webkit-text-fill-color:#B23E1A !important; }
.statusbadge{ color:var(--vo-txt) !important; }