/* ============================================================
   AMBER PMS — Premium UI System
   Shared Light / Dark theme for every page
   ============================================================ */

:root{
  color-scheme:light;
  --amber-font-display:"Fraunces",Georgia,serif;
  --amber-font-sans:"IBM Plex Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --amber-font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --bg:#F4F2EE;
  --panel:#FFFFFF;
  --panel-2:#F8F6F2;
  --panel-3:#F1EEE8;
  --sidebar:#FBFAF7;
  --line:#E5E0D7;
  --line-soft:#EFEAE2;
  --text:#171A20;
  --muted:#687180;
  --muted-2:#8A919D;

  --amber:#B88B37;
  --amber-soft:rgba(184,139,55,.12);
  --blue:#53759B;
  --blue-soft:rgba(83,117,155,.11);
  --green:#3F8C78;
  --green-soft:rgba(63,140,120,.12);
  --red:#B85D6C;
  --red-soft:rgba(184,93,108,.11);
  --violet:#7266A0;
  --purple:#7266A0;

  --premium-shadow:0 1px 2px rgba(20,25,34,.03),0 12px 35px rgba(20,25,34,.06);
  --premium-shadow-hover:0 2px 4px rgba(20,25,34,.04),0 18px 42px rgba(20,25,34,.09);
  --premium-radius:14px;
  --input:#FFFFFF;
  --hover:rgba(21,28,39,.035);

  --chart-text:#17223b;
  --chart-muted:#7a8498;
  --chart-grid:#e8ecf2;
  --chart-bar:#53759B;
  --chart-today:#B88B37;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1319;
  --panel:#171D26;
  --panel-2:#1B222C;
  --panel-3:#202833;
  --sidebar:#12161D;
  --line:rgba(255,255,255,.075);
  --line-soft:rgba(255,255,255,.045);
  --text:#EFEAE0;
  --muted:#929AA8;
  --muted-2:#626C7A;

  --amber:#C9A24B;
  --amber-soft:rgba(201,162,75,.14);
  --blue:#7C8AA6;
  --blue-soft:rgba(124,138,166,.14);
  --green:#4FA89D;
  --green-soft:rgba(79,168,157,.14);
  --red:#C97C88;
  --red-soft:rgba(201,124,136,.14);
  --violet:#9381CB;
  --purple:#9381CB;

  --premium-shadow:none;
  --premium-shadow-hover:0 16px 42px rgba(0,0,0,.22);
  --input:#1B222C;
  --hover:rgba(255,255,255,.035);

  --chart-text:#EFEAE0;
  --chart-muted:#8A93A2;
  --chart-grid:rgba(255,255,255,.08);
  --chart-bar:#7C8AA6;
  --chart-today:#C9A24B;
}

*{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--muted) 55%,transparent) transparent;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted) 35%,transparent);
  border:3px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}

html.theme-ready body,
html.theme-ready .sidebar,
html.theme-ready .panel,
html.theme-ready .section,
html.theme-ready .toolbar,
html.theme-ready input,
html.theme-ready select,
html.theme-ready textarea,
html.theme-ready .amber-theme-control{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

body{
  font-family:var(--amber-font-sans)!important;
  background:
    radial-gradient(circle at 86% -10%,color-mix(in srgb,var(--amber) 7%,transparent),transparent 28%),
    var(--bg)!important;
  color:var(--text)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input,select,textarea{font-family:var(--amber-font-sans)!important}
input,select,textarea{
  background:var(--input)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)!important}
option{background:var(--panel)!important;color:var(--text)!important}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(.85)}

:focus-visible{
  outline:2px solid color-mix(in srgb,var(--amber) 80%,white 20%)!important;
  outline-offset:2px!important;
}

/* ===== App shell / sidebar ===== */
.app{grid-template-columns:232px minmax(0,1fr)!important}
.sidebar{
  width:auto!important;
  background:var(--sidebar)!important;
  border-right:1px solid var(--line)!important;
  padding:24px 16px!important;
  box-shadow:none!important;
}
.sidebar .brand{
  position:relative;
  min-height:58px;
  padding:0 7px 24px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid var(--line-soft)!important;
  color:var(--text)!important;
  font-family:var(--amber-font-display)!important;
  font-weight:600!important;
  letter-spacing:.1px;
}
.sidebar .brand::after{
  content:"Amber Inn · Pratunam";
  position:absolute;
  left:58px;
  bottom:9px;
  color:var(--muted-2);
  font-family:var(--amber-font-sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1px;
  white-space:nowrap;
}
.sidebar .logo,
.sidebar .brand-logo{
  background:linear-gradient(155deg,var(--amber),color-mix(in srgb,var(--amber) 68%,#5A4218))!important;
  color:#15120A!important;
  border:none!important;
  box-shadow:0 5px 16px color-mix(in srgb,var(--amber) 20%,transparent)!important;
}
.sidebar nav{gap:3px!important}
.sidebar .nav,
.sidebar .nav-item{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-height:40px!important;
  padding:9px 11px!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--muted)!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.15;
  transition:background .15s ease,color .15s ease,transform .15s ease!important;
}
.sidebar .nav:hover,
.sidebar .nav-item:hover{
  background:var(--panel-2)!important;
  color:var(--text)!important;
  transform:translateX(1px);
}
.sidebar .nav.active,
.sidebar .nav-item.active{
  background:var(--amber-soft)!important;
  color:var(--amber)!important;
  font-weight:700!important;
}
.amber-nav-icon{
  width:17px;height:17px;flex:0 0 17px;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.user-mini,.sidebar-footer,.supabase-box{
  background:var(--panel-2)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}
.logout,.signout{color:var(--red)!important}

/* ===== Main content ===== */
.app > main{
  padding:66px 34px 64px!important;
  min-width:0;
}
.page-head h1,.top h1,.room-heading h1,
body > .shell .brand{
  font-family:var(--amber-font-display)!important;
  letter-spacing:-.25px!important;
}
.page-head h1,.top h1{font-weight:600!important}
.page-head p,.top p,.muted,.sub,.chart-sub,.rev-caption{
  color:var(--muted)!important;
}

/* ===== Premium surfaces ===== */
.toolbar,.section,.panel,.users-card,.system-card,.chart-card,.quick,
.summary-card,.kpi,.box,.report,.calendar-shell,.daily-summary,
.movement-box,.mini-card,.datebar,.booking-card,.summary,.modal-card,
.modal-backdrop .modal,.user-mini,.security-note{
  border-color:var(--line)!important;
  box-shadow:var(--premium-shadow)!important;
}
.toolbar,.section,.panel,.users-card,.system-card,.chart-card,.quick,
.summary-card,.kpi,.box,.calendar-shell,.daily-summary,
.movement-box,.mini-card,.datebar,.booking-card,.summary,.modal-card,
.modal-backdrop .modal{
  background:var(--panel)!important;
}
.section,.panel,.users-card,.chart-card,.toolbar,.calendar-shell,.daily-summary,.booking-card{
  border-radius:var(--premium-radius)!important;
}
.section-head,.panel-head,.modal-head,.daily-summary-head{
  border-color:var(--line)!important;
}
.quick:hover,.booking-card:hover{
  box-shadow:var(--premium-shadow-hover)!important;
}

/* ===== Buttons ===== */
.btn,.print-btn,.edit-btn,.side-btn,.detail-btn,.add-user-btn,
.add-guest-btn,.room-edit-btn{
  border-radius:9px!important;
  border:1px solid var(--line)!important;
  background:var(--panel-2)!important;
  color:var(--text)!important;
  font-weight:700!important;
  box-shadow:none!important;
}
.btn:hover,.print-btn:hover,.edit-btn:hover,.side-btn:hover,.detail-btn:hover,.add-guest-btn:hover{
  border-color:color-mix(in srgb,var(--amber) 45%,var(--line))!important;
  transform:translateY(-1px);
}
.btn.primary,.add-user-btn,.btn.amber{
  background:var(--amber)!important;
  border-color:var(--amber)!important;
  color:#171208!important;
}
.btn.green{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.btn.danger,.danger{border-color:color-mix(in srgb,var(--red) 45%,var(--line))!important;color:var(--red)!important}
.pill,.badge,.admin-badge,.role-badge,.role-tag{
  border-color:color-mix(in srgb,var(--amber) 35%,var(--line))!important;
}

/* ===== Tables ===== */
table{color:var(--text)!important;font-variant-numeric:tabular-nums}
table:not(.inventory) th{
  background:var(--panel-2)!important;
  color:var(--muted)!important;
  border-color:var(--line)!important;
}
table:not(.inventory) td{border-color:var(--line)!important}
table:not(.inventory) tbody tr:hover td{background:var(--hover)}
.table-wrap{border-color:var(--line)!important}

/* ===== Modals ===== */
.modal-bg,.modal-backdrop{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-head{background:var(--panel)!important;color:var(--text)!important}
.modal-body{background:var(--panel)!important;color:var(--text)!important}
.modal-actions{border-color:var(--line)!important}

/* ===== Admin dashboard semantic cards ===== */
html[data-theme="dark"] .metric.arrival{background:#132A25!important;border-color:#22483F!important}
html[data-theme="dark"] .metric.departure{background:#2D1D24!important;border-color:#50303A!important}
html[data-theme="dark"] .metric.free-card{background:#14272B!important;border-color:#27464C!important}
html[data-theme="dark"] .metric.today-revenue{background:#211E31!important;border-color:#3A3355!important}
html[data-theme="dark"] .metric.week-revenue{background:#2A2519!important;border-color:#4B4025!important}
html[data-theme="dark"] .metric-list{border-color:var(--line)!important}
html[data-theme="dark"] .progress-line{background:rgba(255,255,255,.045)!important;color:#E6A7B2!important}
html[data-theme="dark"] .roomtype-chip{background:#202A33!important;border:1px solid var(--line)!important;color:#CBD2DA!important}
html[data-theme="dark"] .legend-row{background:var(--panel-2)!important;border-color:var(--line)!important}
html[data-theme="dark"] .chart-total-inner{background:rgba(23,29,38,.91)!important;color:var(--text)!important}
html[data-theme="dark"] .bar-chart-card{background:var(--panel-2)!important;border-color:var(--line)!important}

/* ===== Room Setup: retain status semantics, darken appropriately ===== */
html[data-theme="dark"] .floor-card.floor-tone-0{background:#122131!important;border-color:#26384A!important}
html[data-theme="dark"] .floor-card.floor-tone-1{background:#13251F!important;border-color:#294239!important}
html[data-theme="dark"] .floor-card.floor-tone-2{background:#292117!important;border-color:#4B3B24!important}
html[data-theme="dark"] .floor-card.floor-tone-3{background:#211C2E!important;border-color:#3D3154!important}
html[data-theme="dark"] .floor-card.floor-tone-4{background:#2B1C22!important;border-color:#4E3039!important}
html[data-theme="dark"] .floor-card.floor-tone-5{background:#142527!important;border-color:#294346!important}
html[data-theme="dark"] .floor-card.floor-tone-6{background:#242719!important;border-color:#41452A!important}
html[data-theme="dark"] .floor-card.floor-tone-7{background:#25211E!important;border-color:#413833!important}
html[data-theme="dark"] .floor-tone-0 .floor-head{background:#182B40!important}
html[data-theme="dark"] .floor-tone-1 .floor-head{background:#193128!important}
html[data-theme="dark"] .floor-tone-2 .floor-head{background:#33291C!important}
html[data-theme="dark"] .floor-tone-3 .floor-head{background:#2B243C!important}
html[data-theme="dark"] .floor-tone-4 .floor-head{background:#37242B!important}
html[data-theme="dark"] .floor-tone-5 .floor-head{background:#1A3133!important}
html[data-theme="dark"] .floor-tone-6 .floor-head{background:#30331F!important}
html[data-theme="dark"] .floor-tone-7 .floor-head{background:#302A25!important}
html[data-theme="dark"] .room-card.available{background:#242A32!important;border-color:#323B47!important}
html[data-theme="dark"] .room-card.booking-pending{background:#303640!important;border-color:#404956!important}
html[data-theme="dark"] .room-card.booking-checkedin{background:#315F91!important;border-color:#4377AE!important}
html[data-theme="dark"] .room-card.booking-checkedout{background:#713B45!important;border-color:#8B4B56!important}
html[data-theme="dark"] .add-room-card{background:#171D26!important;border-color:#455161!important;color:var(--muted)!important}
html[data-theme="dark"] .room-book-btn,
html[data-theme="dark"] .room-check-btn{background:#F2F0EB!important;color:#1D2633!important}

/* ===== Calendar ===== */
html[data-theme="dark"] .calendar-shell,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .movement-item,
html[data-theme="dark"] .mini-card{
  background:var(--panel)!important;border-color:var(--line)!important
}
html[data-theme="dark"] .room-label,
html[data-theme="dark"] .status-cell,
html[data-theme="dark"] .date-cell,
html[data-theme="dark"] .day-slot,
html[data-theme="dark"] .cal-cell,
html[data-theme="dark"] .sticky-room,
html[data-theme="dark"] .sticky-status{
  background:#171D26!important;color:var(--text)!important;border-color:var(--line)!important
}
html[data-theme="dark"] .weekend{background:#191F28!important}
html[data-theme="dark"] .floor-divider{background:#11161D!important;color:var(--muted)!important}
html[data-theme="dark"] .occupancy{background:#27251F!important;color:#E9DDBD!important}
html[data-theme="dark"] .today-column{background:#3A321A!important}
html[data-theme="dark"] .mini-day{background:var(--panel-2)!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-theme="dark"] .mini-day.selected,
html[data-theme="dark"] .mini-day.today{background:var(--amber-soft)!important;color:var(--amber)!important}

/* ===== Inventory ===== */
html[data-theme="dark"] table.inventory thead th{background:#232A34!important;color:var(--text)!important}
html[data-theme="dark"] table.inventory th,
html[data-theme="dark"] table.inventory td{border-color:#414B58!important}
html[data-theme="dark"] .row-S .type-cell,
html[data-theme="dark"] .row-S .inv-cell:not(.zero){background:#5B4126!important;color:#F3E7D1!important}
html[data-theme="dark"] .row-Mminus .type-cell,
html[data-theme="dark"] .row-Mminus .inv-cell:not(.zero){background:#493C60!important;color:#EEE8F8!important}
html[data-theme="dark"] .row-M .type-cell,
html[data-theme="dark"] .row-M .inv-cell:not(.zero){background:#24565A!important;color:#DDF4F5!important}
html[data-theme="dark"] .row-L .type-cell,
html[data-theme="dark"] .row-L .inv-cell:not(.zero){background:#40583B!important;color:#E6F1E2!important}
html[data-theme="dark"] .row-XL .type-cell,
html[data-theme="dark"] .row-XL .inv-cell:not(.zero){background:#62445D!important;color:#F4E7F2!important}
html[data-theme="dark"] .row-XLplus .type-cell,
html[data-theme="dark"] .row-XLplus .inv-cell:not(.zero){background:#3C526B!important;color:#E2ECF5!important}
html[data-theme="dark"] .row-XXLplus .type-cell,
html[data-theme="dark"] .row-XXLplus .inv-cell:not(.zero){background:#394D65!important;color:#E2ECF5!important}
html[data-theme="dark"] .row-XXL .type-cell,
html[data-theme="dark"] .row-XXL .inv-cell:not(.zero){background:#2E593B!important;color:#E0F1E5!important}
html[data-theme="dark"] .total-row td{background:#313842!important}
html[data-theme="dark"] .occ-row td{background:#1C232C!important;color:var(--text)!important}

/* ===== Daily Summary colored information bars ===== */
html[data-theme="dark"] .head-checkin{background:#15372D!important;color:#7CCFB3!important;border-color:#275345!important}
html[data-theme="dark"] .head-checkout{background:#182D47!important;color:#8DB9ED!important;border-color:#29466A!important}
html[data-theme="dark"] .head-noshow{background:#3A1D27!important;color:#E69AAA!important;border-color:#5B2E3B!important}
html[data-theme="dark"] .head-inhouse{background:#182D42!important;color:#95BCE0!important;border-color:#29445F!important}
html[data-theme="dark"] .head-cleaning{background:#352B18!important;color:#E7C16B!important;border-color:#5A4722!important}
html[data-theme="dark"] .head-payment{background:#17322D!important;color:#79C9B8!important;border-color:#285047!important}
html[data-theme="dark"] .head-ota{background:#27213A!important;color:#B6A6E2!important;border-color:#40355E!important}
html[data-theme="dark"] .head-deposit{background:#38271B!important;color:#E3AC75!important;border-color:#59402B!important}
html[data-theme="dark"] .head-free{background:#173034!important;color:#79C5CB!important;border-color:#284E53!important}
html[data-theme="dark"] .color-title{border-color:var(--line)!important}
html[data-theme="dark"] .arrivals-title{background:#1C2938!important;color:#9EB8D7!important}
html[data-theme="dark"] .noshow-title{background:#382029!important;color:#E5A0AE!important}
html[data-theme="dark"] .house-title{background:#1B2B3B!important;color:#9ABAD7!important}

/* ===== Immigration / Sales / Activity Log ===== */
html[data-theme="dark"] .notice{background:#2C2718!important;border-color:#554924!important;color:#E4C879!important}
html[data-theme="dark"] .basis{background:#1B2738!important;border-color:#2C425E!important;color:#BAC7D8!important}
html[data-theme="dark"] .basis-net{background:#342A18!important;color:#E2BC66!important}
html[data-theme="dark"] .basis-gross{background:#17332A!important;color:#7ACBB1!important}
html[data-theme="dark"] .company{border-color:var(--line)!important}
html[data-theme="dark"] pre{background:var(--panel-2)!important;border-color:var(--line)!important;color:#D8DEE7!important}

/* ===== Login ===== */
body > .shell{
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(15,19,25,.14)!important;
}
body > .shell .left{background:linear-gradient(150deg,#171D26,#242B35)!important;color:#EFEAE0!important}
body > .shell .right{background:var(--panel)!important;color:var(--text)!important}
body > .shell .sub,.copy{color:var(--muted)!important}

/* ===== Theme switch ===== */
.amber-theme-control{
  position:fixed;
  top:14px;
  right:18px;
  z-index:10050;
  display:flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:5px 8px 5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  color:var(--text);
  box-shadow:0 8px 28px rgba(15,19,25,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  user-select:none;
}
.amber-theme-control:hover{box-shadow:0 11px 34px rgba(15,19,25,.16)}
.amber-theme-option{
  font-size:11px;
  font-weight:700;
  color:var(--muted-2);
  transition:color .18s ease;
}
html[data-theme="light"] .amber-theme-option.light,
html[data-theme="dark"] .amber-theme-option.dark{color:var(--amber)}
.amber-theme-track{
  position:relative;
  width:40px;height:22px;
  border-radius:999px;
  background:var(--panel-3);
  border:1px solid var(--line);
}
.amber-theme-knob{
  position:absolute;
  width:16px;height:16px;
  top:2px;left:3px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 2px 5px rgba(0,0,0,.18);
  transition:transform .2s ease;
}
html[data-theme="dark"] .amber-theme-knob{transform:translateX(17px)}
.amber-theme-icon{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Small premium details */
.num,.value,.v,[id*="Revenue"],[id*="Count"],[id*="Total"]{font-variant-numeric:tabular-nums}
hr{border-color:var(--line)!important}
::selection{background:color-mix(in srgb,var(--amber) 35%,transparent);color:var(--text)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .app{grid-template-columns:1fr!important}
  .app > main{padding:66px 14px 40px!important}
  .amber-theme-control{right:10px;top:10px}
}
@media(max-width:560px){
  .amber-theme-option{display:none}
  .amber-theme-control{padding:6px}
}

/* ===== Print always stays clean/light ===== */
@media print{
  .amber-theme-control{display:none!important}
  html,html[data-theme="dark"]{color-scheme:light!important}
  html[data-theme="dark"] body{background:#fff!important;color:#111!important}
  html[data-theme="dark"] .report,
  html[data-theme="dark"] .box,
  html[data-theme="dark"] .panel,
  html[data-theme="dark"] table,
  html[data-theme="dark"] th,
  html[data-theme="dark"] td{
    background:#fff!important;
    color:#111!important;
    border-color:#777!important;
  }
}


/* Staff policy UI */
.amber-theme-control.amber-theme-forced{
  opacity:.82;
  cursor:not-allowed;
}
.amber-staff-signout{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--red);
  border-radius:9px;
  padding:10px 12px;
  font:700 14px var(--amber-font-sans);
  cursor:pointer;
}
.amber-staff-signout:hover{
  border-color:color-mix(in srgb,var(--red) 40%,var(--line));
  background:var(--red-soft);
}
.login-window-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--amber-soft);
  color:var(--amber);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.login-window-badge.open{
  background:var(--green-soft);
  color:var(--green);
}
.login-window-badge.admin{
  background:var(--blue-soft);
  color:var(--blue);
}
.staff-access-editor{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:240px;
}
.staff-access-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:800;
}
.staff-access-times{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:6px;
  align-items:end;
}
.staff-access-times label{
  display:block;
  font-size:9px;
  color:var(--muted);
  font-weight:800;
  margin-bottom:3px;
}
.staff-access-times input[type="time"]{
  min-width:96px;
  padding:7px 8px!important;
  font-size:12px;
}
.staff-access-note{
  font-size:10px;
  color:var(--muted);
  line-height:1.35;
}