/* ==========================================================================
   Back office — "Luxury Enterprise" theme
   Ink navy + champagne gold, serif display headings, hairline structure.
   Loaded after Tailwind on every admin page; overrides legacy utility colours.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Serif+Thai:wght@500;600&display=swap");

:root {
  --lx-ink: #0b1220;
  --lx-ink-2: #121b2e;
  --lx-ink-3: #1b2740;
  --lx-canvas: #f6f4ef;
  --lx-panel: #ffffff;
  --lx-line: #e7e2d7;
  --lx-line-2: #d9d2c3;
  --lx-text: #1a2233;
  --lx-muted: #6b7280;
  --lx-gold: #b8924e;
  --lx-gold-deep: #8b6a2e;
  --lx-gold-soft: #f4ecdb;
  --lx-focus: rgba(184,146,78,.28);
  --lx-success: #1d6b4f;
  --lx-danger: #a33a2b;
  --lx-radius: 12px;
  --lx-shadow: 0 1px 2px rgba(11,18,32,.04), 0 10px 30px rgba(11,18,32,.06);
  --lx-sidebar: 256px;
  --lx-display: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
  --lx-sans: Inter, "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
}

html { background: var(--lx-canvas); }
body {
  color: var(--lx-text) !important;
  background: var(--lx-canvas) !important;
  font-family: var(--lx-sans) !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.003em;
}

/* ---------- Sidebar ---------- */
.lx-sidebar {
  width: var(--lx-sidebar);
  background: linear-gradient(180deg, var(--lx-ink) 0%, #0e1628 100%);
  color: #cfd5e1;
  display: flex; flex-direction: column;
  padding: 18px 14px 14px;
  z-index: 60;
  border-right: 1px solid rgba(255,255,255,.04);
}
.admin-sidebar-fixed { position: fixed; inset: 0 auto 0 0; height: 100vh; overflow-y: auto; }
.admin-sidebar-viewport { position: relative; flex: 0 0 var(--lx-sidebar); height: 100%; overflow-y: auto; }
.lx-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; }
.lx-brand-mark {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  font: 600 17px/1 var(--lx-display); letter-spacing: .02em; color: #e9d3a6;
  background: linear-gradient(145deg, rgba(233,211,166,.16), rgba(233,211,166,.04));
  border: 1px solid rgba(233,211,166,.32);
}
.lx-brand-logo { background: #fff; border-color: transparent; overflow: hidden; }
.lx-brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.lx-brand-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.lx-brand-text b { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-brand-text small { color: #c9a86a; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; }
.lx-nav { flex: 1; display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.lx-nav-label { padding: 0 10px 6px; color: #6f7a90; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.lx-nav-link {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; margin: 1px 0;
  border-radius: 9px; color: #c3cad8; font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.lx-nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.lx-nav-link.is-active { color: #fff; background: linear-gradient(90deg, rgba(201,168,106,.16), rgba(201,168,106,.04)); }
.lx-nav-link.is-active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: #c9a86a; }
.lx-nav-link.is-active .lx-icon { color: #e3c68f; }
.lx-icon { flex: 0 0 18px; width: 18px; height: 18px; color: #8792a8; transition: color .16s ease; }
.lx-nav-link:hover .lx-icon { color: #d9dee8; }
.lx-sidebar-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.lx-powered { padding: 12px 10px 2px; color: #5c667b; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.lx-scrim { display: none; }

/* Content offset for the fixed sidebar (legacy pages use .ml-[60px]) */
.ml-\[60px\] { margin-left: var(--lx-sidebar) !important; }

/* ---------- Top bar ---------- */
.lx-topbar {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 0 28px;
  background: rgba(255,255,255,.88) !important; backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--lx-line) !important; z-index: 40;
}
.admin-topbar-fixed { position: sticky; top: 0; }
.admin-topbar-viewport { flex: 0 0 64px; }
.lx-crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; color: var(--lx-muted); white-space: nowrap; overflow: hidden; }
.lx-crumbs i { font-style: normal; color: #c9c2b3; }
.lx-crumbs b { color: var(--lx-ink); font-weight: 600; }
.lx-top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lx-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--lx-gold-deep); background: var(--lx-gold-soft); border: 1px solid #eadcbd; }
.lx-badge-demo::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #c9a86a; box-shadow: 0 0 0 3px rgba(201,168,106,.22); }
.lx-user { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--lx-text); }
.lx-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 600; font-size: 13px; background: linear-gradient(145deg, var(--lx-ink-3), var(--lx-ink)); box-shadow: inset 0 0 0 1px rgba(201,168,106,.45); }
.lx-menu { display: none; width: 38px; height: 38px; place-items: center; border-radius: 9px; border: 1px solid var(--lx-line); background: #fff; color: var(--lx-ink); }
.lx-menu .lx-icon { color: var(--lx-ink); }
.lx-demo-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 28px 0; padding: 10px 14px;
  border: 1px solid #eadcbd; border-radius: 10px; background: linear-gradient(90deg, #fbf6ea, #fffdf8);
  color: #6d5424; font-size: 12.5px;
}
.lx-demo-note b { color: var(--lx-gold-deep); font-weight: 700; letter-spacing: .04em; }
.lx-demo-en { color: #9a855a; }

/* Old horizontal nav is replaced by the sidebar */
.admin-unified-topnav, .admin-property { display: none !important; }

/* ---------- Canvas & typography ---------- */
body[class*="bg-[#eef0f1]"], .bg-\[\#eef0f1\], .bg-\[\#f4f5f7\], main[class*="bg-[#f4f5f7]"] { background-color: var(--lx-canvas) !important; }
main { color: var(--lx-text); }
main h1, main h2.text-xl, main h2.text-2xl { font-family: var(--lx-display) !important; font-weight: 600 !important; letter-spacing: -.005em; color: var(--lx-ink) !important; }
main h1 { font-size: 31px !important; line-height: 1.15 !important; }
main h2.text-xl, main h2.text-2xl { font-size: 26px !important; line-height: 1.2 !important; }
/* KPI figures: clean sans, lining tabular numerals */
main .text-2xl.font-bold:not(h1):not(h2), main .text-3xl.font-bold:not(h1):not(h2), main .text-xl.font-bold:not(h1):not(h2) {
  font-family: var(--lx-sans) !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--lx-ink) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
main td, .tabular { font-variant-numeric: lining-nums tabular-nums; }
main h2.text-lg, main .text-lg.font-bold { font-weight: 600 !important; color: var(--lx-ink) !important; }
/* Section eyebrows (were orange) */
.text-orange-500, .text-orange-600, .text-\[\#e7650c\] { color: var(--lx-gold-deep) !important; }
.text-orange-500.uppercase, .text-xs.font-bold.text-orange-500 { letter-spacing: .18em !important; font-weight: 600 !important; font-size: 10.5px !important; }
.text-gray-400 { color: #8a90a0 !important; }
.text-gray-500 { color: var(--lx-muted) !important; }
.text-gray-800, .text-gray-900 { color: var(--lx-text) !important; }
.text-blue-600, .text-blue-700 { color: #1f4f9a !important; }
label.block.text-\[10px\], .text-\[10px\].uppercase, .text-\[11px\].uppercase { letter-spacing: .14em !important; color: #7a7f8c !important; }

/* ---------- Panels ---------- */
main .bg-white, main section.bg-white, .bg-white.border, .bg-white.rounded-xl, .bg-white.rounded-2xl {
  border-color: var(--lx-line) !important;
  box-shadow: var(--lx-shadow) !important;
}
main .rounded-2xl, main .rounded-xl { border-radius: 14px !important; }
main .bg-gray-50, main .bg-\[\#f9fafb\] { background-color: #faf8f3 !important; }
.border-gray-100, .border-gray-200, .border-gray-300, .border { border-color: var(--lx-line) !important; }
.divide-y > * + * { border-color: #eeeae1 !important; }

/* ---------- Tables ---------- */
table { border-collapse: separate !important; border-spacing: 0; }
thead tr, thead, tr[class*="bg-[#4a4a4a]"], thead[class*="bg-"] { background: var(--lx-ink) !important; }
thead th, thead td { color: #d7dbe4 !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase; border: 0 !important; }
thead tr th:first-child { border-top-left-radius: 10px; }
thead tr th:last-child { border-top-right-radius: 10px; }
thead tr.bg-gray-50, thead.bg-gray-50 { background: var(--lx-ink) !important; }
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background-color: #fbf8f1 !important; }
tbody td { border-color: #eeeae1 !important; }

/* ---------- Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  border-color: var(--lx-line-2) !important; border-radius: 9px !important; background-color: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
input:hover, select:hover, textarea:hover { border-color: #c5bca9 !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px var(--lx-focus) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--lx-ink); }

/* ---------- Buttons ---------- */
button, a[class*="bg-"] { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease !important; }
button:active { transform: scale(.985); }
/* primary: dark greens / black / slate → ink */
button[class*="bg-black"], a[class*="bg-black"], [class*="bg-[#173c34]"], [class*="bg-[#596168]"], [class*="bg-[#245247]"],
button[class*="bg-emerald-7"], a[class*="bg-emerald-7"], button[class*="bg-green-7"], button[class*="bg-gray-900"], a[class*="bg-gray-900"], button[class*="bg-gray-800"] {
  background: linear-gradient(180deg, var(--lx-ink-3), var(--lx-ink)) !important; color: #fff !important; border-color: var(--lx-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(11,18,32,.16) !important;
}
button[class*="bg-black"]:hover, a[class*="bg-black"]:hover, [class*="bg-[#173c34]"]:hover, [class*="bg-[#596168]"]:hover, button[class*="bg-emerald-7"]:hover, button[class*="bg-gray-900"]:hover, a[class*="bg-gray-900"]:hover {
  box-shadow: 0 0 0 1px rgba(201,168,106,.6), 0 10px 22px rgba(11,18,32,.2) !important;
}
button[class*="bg-blue-6"], a[class*="bg-blue-6"] { background: var(--lx-ink) !important; }
/* outlined success/danger actions keep meaning, refined */
[class*="border-emerald-700"][class*="bg-emerald-50"] { color: var(--lx-success) !important; border-color: #b9d8c9 !important; background: #f2f8f5 !important; }
[class*="border-red-700"][class*="bg-red-50"] { color: var(--lx-danger) !important; border-color: #e7c3bc !important; background: #fcf4f2 !important; }
/* accent / orange buttons → gold */
button[class*="bg-orange"], a[class*="bg-orange"], button[class*="bg-amber-5"], a[class*="bg-amber-5"] { background: linear-gradient(180deg, #c9a86a, var(--lx-gold)) !important; color: #1c1406 !important; border-color: var(--lx-gold) !important; }

/* Dark feature panels (legacy greens) → ink, with readable headings */
main [class*="bg-[#173c34]"]:not(button):not(a), main [class*="bg-[#18332e]"], main [class*="bg-[#142d29]"], main [class*="bg-[#17302a]"], main [class*="bg-gradient-to"][class*="from-[#1"] {
  background: radial-gradient(600px 240px at 100% 0%, rgba(201,168,106,.16), transparent 60%), linear-gradient(160deg, var(--lx-ink-3), var(--lx-ink)) !important;
  border-color: rgba(201,168,106,.25) !important;
}
main [class*="text-white"] h1, main [class*="text-white"] h2, main [class*="text-white"] h3, main h2.text-white, main [class*="bg-[#173c34]"] h2 { color: #fff !important; }
main .serif { font-family: var(--lx-display) !important; }
/* Prices were red → ink */
main td .font-bold.text-red-600, main div.font-bold.text-red-600 { color: var(--lx-ink) !important; }
main input.text-red-600 { color: var(--lx-ink) !important; }
/* Today column / orange actions → gold */
main th.bg-orange-500, main .bg-orange-500:not(button) { background: linear-gradient(180deg, #c9a86a, var(--lx-gold)) !important; color: #1c1406 !important; }
button.bg-orange-600, button[class*="bg-orange-6"] { background: linear-gradient(180deg, var(--lx-ink-3), var(--lx-ink)) !important; color: #fff !important; }
.text-\[\#d8bd75\] { color: #d6b77a !important; }
/* Positive / selected states: green → ink & gold hairline */
main .border-green-600, main .border-emerald-600, main [class*="ring-emerald-7"] { border-color: var(--lx-ink) !important; --tw-ring-color: var(--lx-ink) !important; }
main .bg-green-50:not(.rounded-full), main .bg-emerald-50:not(.rounded-full):not([class*="border-emerald-700"]) { background-color: #f6f3ea !important; }
main .text-green-800, main .text-emerald-800, main .text-green-700, main .text-emerald-700 { color: var(--lx-success) !important; }

/* Selected option cards (were orange) */
main .border-orange-400, main .border-orange-300, main .border-orange-500 { border-color: var(--lx-gold) !important; }
main .bg-orange-50, main .bg-orange-100 { background-color: #fbf6ea !important; }
main .text-orange-700, main .text-orange-800 { color: var(--lx-gold-deep) !important; }

/* ---------- Status pills ---------- */
.rounded-full.uppercase, span.rounded-full[class*="text-[10px]"] { letter-spacing: .08em !important; font-weight: 600 !important; }

/* ---------- Feedback / helpers ---------- */
.ui-ripple { display: none; }
.ui-dirty { background: #fffaf0 !important; border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px var(--lx-focus) !important; }
.ui-submitting { opacity: .85; }
.ui-page-ready main { animation: lx-enter .28s ease-out both; }
@keyframes lx-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
::selection { background: #efe2c6; }

/* ---------- Login ---------- */
body.antialiased.flex.items-center.justify-center {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(201,168,106,.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(44,125,240,.10), transparent 60%),
    linear-gradient(160deg, #0b1220, #121b2e 60%, #0e1628) !important;
}
body.antialiased.flex.items-center.justify-center > div {
  border-radius: 18px !important; border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
}
body.antialiased.flex.items-center.justify-center h1, body.antialiased.flex.items-center.justify-center h2 { font-family: var(--lx-display) !important; font-weight: 600 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  :root { --lx-sidebar: 272px; }
  .lx-sidebar { position: fixed !important; inset: 0 auto 0 0; height: 100vh; transform: translateX(-100%); transition: transform .24s ease; box-shadow: 30px 0 60px rgba(0,0,0,.25); }
  body.lx-nav-open .lx-sidebar { transform: none; }
  body.lx-nav-open .lx-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11,18,32,.45); backdrop-filter: blur(2px); }
  .admin-sidebar-viewport { flex: 0 0 0; }
  .ml-\[60px\] { margin-left: 0 !important; }
  .lx-menu { display: grid; }
  .lx-topbar { padding: 0 16px; }
  .lx-demo-note { margin: 12px 16px 0; }
  .lx-user-name { display: none; }
}
@media (max-width: 640px) {
  .lx-crumbs span, .lx-crumbs i { display: none; }
  .lx-demo-en { display: none; }
  main { padding: 16px !important; }
  main h1, main .text-2xl.font-bold { font-size: 25px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Thai labels: no wide tracking */
:lang(th) *:not(#lx-x) { letter-spacing: normal !important; }