/* Neelakurinji Guesthouse Manager — PHP edition
   Styling adapted from the original React app's design tokens. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --background: 43 36% 94%;
  --foreground: 224 47% 16%;
  --border: 40 26% 83%;
  --input: 40 26% 79%;
  --ring: 263 52% 53%;
  --card: 43 40% 98%;
  --card-foreground: 224 47% 16%;
  --card-border: 40 26% 86%;
  --popover: 43 40% 98%;
  --popover-foreground: 224 47% 16%;
  --primary: 224 64% 22%;
  --primary-foreground: 43 40% 98%;
  --secondary: 264 45% 91%;
  --secondary-foreground: 264 49% 29%;
  --muted: 43 22% 89%;
  --muted-foreground: 222 17% 43%;
  --accent: 264 54% 54%;
  --accent-foreground: 43 40% 98%;
  --destructive: 4 62% 48%;
  --destructive-foreground: 43 40% 98%;
  --sidebar: 224 64% 22%;
  --sidebar-foreground: 43 35% 91%;
  --sidebar-border: 224 43% 31%;
  --sidebar-primary: 42 90% 61%;
  --sidebar-primary-foreground: 224 64% 18%;
  --sidebar-accent: 224 48% 29%;
  --sidebar-accent-foreground: 43 40% 98%;
  --sidebar-ring: 42 90% 61%;
  --chart-1: 264 54% 54%;
  --chart-2: 42 90% 61%;
  --chart-3: 160 35% 43%;
  --chart-4: 224 64% 22%;
  --chart-5: 12 72% 62%;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Fraunces', Georgia, serif;
  --app-font-mono: 'Space Mono', monospace;
  --radius: 0.85rem;
  --shadow-sm: 0 2px 10px rgba(31, 39, 71, .06);
  --shadow-md: 0 12px 28px rgba(31, 39, 71, .10);
}

* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--app-font-sans);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.serif { font-family: var(--app-font-serif); }
.mono { font-family: var(--app-font-mono); }
.app-shell { min-height: 100dvh; display: flex; }
.sidebar { background: hsl(var(--sidebar)); color: hsl(var(--sidebar-foreground)); width: 254px; flex: 0 0 254px; padding: 22px 14px; display:flex; flex-direction:column; }
.brand-lockup { display:flex; align-items:center; gap:11px; padding: 0 10px 28px; }
.brand-lockup img { height: 46px; width:46px; object-fit:cover; border-radius:50%; border:2px solid hsl(var(--sidebar-primary)); }
.brand-name { font-family: var(--app-font-serif); color: hsl(var(--sidebar-primary)); letter-spacing:-.02em; font-size: 18px; line-height:1; }
.brand-sub { color: hsl(var(--sidebar-foreground) / .62); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-top:5px; }
.nav-label { color: hsl(var(--sidebar-foreground) / .42); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding: 0 12px 8px; }
.nav-icon { flex: 0 0 auto; opacity: .9; }
.nav-link { display:flex; align-items:center; gap:12px; padding: 10px 12px; border-radius: 10px; color: hsl(var(--sidebar-foreground) / .72); font-size:13px; font-weight:600; text-decoration:none; margin:2px 0; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-link:hover { background: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); transform:translateX(2px); }
.nav-link.active { background: hsl(var(--sidebar-primary)); color: hsl(var(--sidebar-primary-foreground)); box-shadow: 0 5px 15px rgba(0,0,0,.13); }
.sidebar-foot { margin-top:auto; border-top:1px solid hsl(var(--sidebar-border)); padding:18px 10px 0; }
.main-area { min-width:0; flex:1; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; border-bottom:1px solid hsl(var(--border)); background: hsl(var(--background) / .88); backdrop-filter: blur(10px); position:sticky; top:0; z-index:5; }
.crumb { color:hsl(var(--muted-foreground)); font-size:12px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.icon-button { height:36px; width:36px; display:grid; place-items:center; border:1px solid hsl(var(--border)); background:hsl(var(--card)); color:hsl(var(--muted-foreground)); border-radius:10px; transition:all .18s ease; }
.icon-button:hover { color:hsl(var(--primary)); border-color:hsl(var(--accent) / .45); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.user-chip { display:flex; align-items:center; gap:9px; padding-left:10px; border-left:1px solid hsl(var(--border)); }
.avatar { display:grid; place-items:center; border-radius:50%; background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); font-weight:700; font-size:11px; }
.user-chip .avatar { width:34px; height:34px; }
.page { padding:32px 34px 44px; max-width: 1500px; margin:auto; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; color:hsl(var(--accent)); font-weight:700; font-size:10px; }
.page-title { font-family:var(--app-font-serif); font-size:clamp(28px, 3vw, 42px); line-height:1.04; letter-spacing:-.035em; margin:7px 0 0; color:hsl(var(--primary)); }
.page-intro { color:hsl(var(--muted-foreground)); font-size:13px; margin:8px 0 0; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; }
.button-primary, .button-secondary, .button-quiet { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; padding:10px 15px; font-size:12px; font-weight:700; border:1px solid transparent; transition:all .18s ease; }
.button-primary { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); box-shadow:0 5px 12px hsl(var(--primary) / .17); }
.button-primary:hover { transform:translateY(-1px); box-shadow:0 8px 17px hsl(var(--primary) / .25); }
.button-secondary { background:hsl(var(--card)); border-color:hsl(var(--border)); color:hsl(var(--primary)); }
.button-secondary:hover, .button-quiet:hover { border-color:hsl(var(--accent) / .5); background:hsl(var(--secondary) / .55); }
.button-quiet { color:hsl(var(--muted-foreground)); padding:8px 10px; }
.card { background:hsl(var(--card)); border:1px solid hsl(var(--card-border)); border-radius:14px; box-shadow:var(--shadow-sm); }
.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.stat-card { padding:17px 18px; position:relative; overflow:hidden; }
.stat-card::after { content:''; width:70px; height:70px; border-radius:50%; position:absolute; right:-24px; bottom:-28px; background:hsl(var(--accent) / .09); }
.stat-top { display:flex; justify-content:space-between; align-items:center; color:hsl(var(--muted-foreground)); font-size:11px; font-weight:600; }
.stat-icon { color:hsl(var(--accent)); }
.stat-value { margin-top:13px; font-size:25px; font-weight:700; letter-spacing:-.04em; color:hsl(var(--primary)); }
.stat-note { font-size:11px; margin-top:5px; color:hsl(var(--muted-foreground)); }
.stat-note.good { color:hsl(160 35% 38%); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:16px; margin-top:16px; }
.panel { padding:20px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.panel-title { font-family:var(--app-font-serif); font-weight:600; color:hsl(var(--primary)); font-size:19px; }
.panel-kicker { font-size:11px; color:hsl(var(--muted-foreground)); margin-top:3px; }
.chart { height:218px; display:flex; align-items:stretch; gap:13px; padding:12px 4px 0; border-bottom:1px solid hsl(var(--border)); }
.chart-y { display:flex; flex-direction:column; justify-content:space-between; color:hsl(var(--muted-foreground)); font-size:9px; padding:0 0 10px; }
.chart-area { flex:1; display:flex; flex-direction:column; min-width:0; }
.bars { flex:1; display:flex; justify-content:space-around; align-items:flex-end; gap:5px; background:repeating-linear-gradient(to bottom, transparent 0, transparent 49px, hsl(var(--border) / .55) 50px); }
.bar-wrap { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; flex:1; }
.bar { width:min(28px, 65%); background:linear-gradient(to top, hsl(var(--primary)), hsl(var(--accent))); border-radius:6px 6px 2px 2px; min-height:9px; transition:height .35s ease, filter .18s ease; }
.bar:hover { filter:brightness(1.13); }
.bar-label { font-size:9px; color:hsl(var(--muted-foreground)); }
.legend { display:flex; gap:16px; margin-top:13px; color:hsl(var(--muted-foreground)); font-size:10px; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:7px; height:7px; border-radius:50%; background:hsl(var(--accent)); }
.legend i.gold { background:hsl(var(--sidebar-primary)); }
.occupancy { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:20px; }
.donut { width:130px; height:130px; border-radius:50%; background:conic-gradient(hsl(var(--accent)) 0 51%, hsl(var(--sidebar-primary)) 51% 70%, hsl(160 35% 43%) 70% 84%, hsl(var(--muted)) 84%); display:grid; place-items:center; }
.donut::after { content:''; width:90px; height:90px; border-radius:50%; background:hsl(var(--card)); position:absolute; }
.donut-center { position:relative; z-index:1; text-align:center; }
.donut-center strong { display:block; color:hsl(var(--primary)); font-size:24px; }
.donut-center span { color:hsl(var(--muted-foreground)); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.mini-list { display:grid; gap:11px; }
.mini-item { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; }
.mini-item label { display:flex; align-items:center; gap:8px; color:hsl(var(--muted-foreground)); }
.dot { height:8px; width:8px; border-radius:50%; background:hsl(var(--accent)); }
.dot.gold { background:hsl(var(--sidebar-primary)); } .dot.green { background:hsl(160 35% 43%); } .dot.pale { background:hsl(var(--muted-foreground) / .35); }
.wide-panel { margin-top:16px; }
.section-table { width:100%; border-collapse:collapse; font-size:12px; }
.section-table th { text-align:left; color:hsl(var(--muted-foreground)); font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding:0 10px 11px; border-bottom:1px solid hsl(var(--border)); }
.section-table td { padding:13px 10px; border-bottom:1px solid hsl(var(--border) / .72); color:hsl(var(--foreground)); }
.section-table tr:last-child td { border-bottom:0; }
.section-table tr:hover td { background:hsl(var(--secondary) / .28); }
.status { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; border-radius:20px; padding:5px 8px; white-space:nowrap; }
.status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status.available, .status.checked-in { color:hsl(160 35% 35%); background:hsl(160 35% 43% / .12); }
.status.reserved, .status.confirmed { color:hsl(264 49% 42%); background:hsl(264 45% 54% / .12); }
.status.cleaning, .status.pending { color:hsl(32 70% 39%); background:hsl(42 90% 61% / .2); }
.status.occupied { color:hsl(224 64% 27%); background:hsl(224 64% 22% / .11); }
.status.cancelled { color:hsl(var(--destructive)); background:hsl(var(--destructive) / .1); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.searchbox { display:flex; align-items:center; gap:9px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); border-radius:10px; padding:0 11px; height:38px; color:hsl(var(--muted-foreground)); min-width:240px; }
.searchbox input { border:0; outline:0; background:transparent; color:hsl(var(--foreground)); width:100%; font-size:12px; }
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.pill { border:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); background:transparent; border-radius:20px; padding:7px 10px; font-size:10px; font-weight:700; }
.pill.active { border-color:hsl(var(--accent)); color:hsl(var(--accent)); background:hsl(var(--accent) / .08); }
.room-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.room-card { padding:16px; transition:transform .18s ease, box-shadow .18s ease; }
.room-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.room-top { display:flex; justify-content:space-between; align-items:flex-start; }
.room-number { font-family:var(--app-font-mono); font-size:20px; font-weight:700; color:hsl(var(--primary)); }
.room-type { font-size:11px; color:hsl(var(--muted-foreground)); margin-top:3px; }
.room-meta { border-top:1px solid hsl(var(--border)); margin-top:15px; padding-top:13px; display:flex; justify-content:space-between; color:hsl(var(--muted-foreground)); font-size:11px; }
.room-meta strong { color:hsl(var(--foreground)); font-size:12px; }
.amenities { display:flex; flex-wrap:wrap; gap:4px; margin-top:12px; }
.amenity { padding:4px 7px; border-radius:5px; background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground)); font-size:9px; display:inline-flex; align-items:center; gap:4px; }
.amenity svg { flex:0 0 auto; opacity:.85; }
.room-actions { margin-top:14px; display:flex; justify-content:flex-end; }
.room-pick { border-radius:12px; transition: border-color .15s ease, box-shadow .15s ease; }
.room-pick:has(input:checked) { border-color: hsl(var(--sidebar-primary)); box-shadow: 0 0 0 2px hsl(var(--sidebar-primary) / .18); }
.room-pick:has(input:disabled) { cursor: not-allowed; }
.select-field, .text-field { height:38px; border:1px solid hsl(var(--input)); border-radius:8px; background:hsl(var(--card)); padding:0 10px; width:100%; color:hsl(var(--foreground)); font-size:12px; outline:none; }
.select-field:focus, .text-field:focus, .searchbox:focus-within { border-color:hsl(var(--accent)); box-shadow:0 0 0 3px hsl(var(--accent) / .1); }
.modal-backdrop { position:fixed; inset:0; background:rgba(27,32,58,.38); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; z-index:20; animation:fade-in .18s ease; }
.modal { width:min(520px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:16px; box-shadow:0 24px 70px rgba(27,32,58,.24); padding:24px; animation:lift-in .22s ease; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:grid; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:hsl(var(--muted-foreground)); font-weight:700; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; border-top:1px solid hsl(var(--border)); margin-top:22px; padding-top:16px; }
.empty-state { padding:48px 20px; text-align:center; color:hsl(var(--muted-foreground)); }
.empty-state svg { color:hsl(var(--accent)); margin:0 auto 10px; }
.skeleton { background:linear-gradient(90deg,hsl(var(--muted)),hsl(var(--card)),hsl(var(--muted))); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
.settings-grid { display:grid; grid-template-columns:220px minmax(0,600px); gap:25px; }
.settings-nav { display:grid; align-content:start; gap:4px; }
.settings-tab { border:0; background:transparent; text-align:left; padding:10px 12px; border-radius:8px; font-size:12px; color:hsl(var(--muted-foreground)); }
.settings-tab.active { color:hsl(var(--primary)); background:hsl(var(--secondary)); font-weight:700; }
.setting-card { padding:22px; margin-bottom:15px; }
.setting-card h3 { margin:0; font-family:var(--app-font-serif); font-size:19px; color:hsl(var(--primary)); }
.setting-card p { color:hsl(var(--muted-foreground)); font-size:11px; margin:5px 0 18px; }
.toggle-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-top:1px solid hsl(var(--border)); font-size:12px; }
.toggle { width:36px; height:21px; border-radius:20px; background:hsl(var(--muted)); padding:2px; border:0; transition:background .18s; }
.toggle.on { background:hsl(var(--accent)); }
.toggle span { display:block; width:17px; height:17px; background:hsl(var(--card)); border-radius:50%; transition:transform .18s; }
.toggle.on span { transform:translateX(15px); }
.notice { border-left:3px solid hsl(var(--sidebar-primary)); background:hsl(var(--sidebar-primary) / .13); padding:12px 14px; color:hsl(var(--primary)); font-size:11px; border-radius:0 8px 8px 0; }
.toast-note { position:fixed; right:22px; bottom:22px; z-index:40; background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); padding:13px 16px; border-radius:10px; box-shadow:var(--shadow-md); font-size:12px; animation:lift-in .2s ease; }
@keyframes shimmer { to { background-position:-200% 0; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes lift-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 980px) { .sidebar { width:80px; flex-basis:80px; padding:18px 8px; } .brand-lockup { padding:0 8px 25px; } .brand-lockup > div, .nav-link span, .nav-label, .sidebar-foot > div { display:none; } .nav-link { justify-content:center; padding:11px 8px; } .brand-lockup img { width:45px; } .room-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 720px) { .sidebar { display:none; } .topbar { padding:0 17px; height:62px; } .page { padding:24px 17px 35px; } .page-head { align-items:flex-start; flex-direction:column; } .stat-grid { grid-template-columns:repeat(2,1fr); } .dashboard-grid, .settings-grid { grid-template-columns:1fr; } .toolbar { align-items:stretch; flex-direction:column; } .searchbox { width:100%; min-width:0; } .room-grid { grid-template-columns:1fr; } .section-table { min-width:700px; } .card.table-card { overflow:auto; } .occupancy { grid-template-columns:120px 1fr; } }
/* --- PHP-app additions: modal show/hide, forms, flash, misc --- */
.modal-backdrop { display: none; }
.modal-backdrop.open { display: grid; }
form.inline { display: contents; }
.flash { max-width: 1500px; margin: 16px auto 0; padding: 12px 34px; }
.flash-box { border-radius: 10px; padding: 11px 16px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.flash-box.success { background: hsl(160 35% 43% / .12); color: hsl(160 35% 30%); border-color: hsl(160 35% 43% / .3); }
.flash-box.error { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .3); }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; background: hsl(var(--background)); padding: 20px; }
.login-card { width: min(380px, 100%); padding: 32px; text-align: center; }
.login-card img { height: 56px; width: 56px; object-fit: cover; border-radius: 50%; border: 2px solid hsl(var(--sidebar-primary)); margin-bottom: 12px; }
.link-plain { color: hsl(var(--accent)); text-decoration: none; font-weight: 700; }
select.select-field, input.text-field { appearance: none; }
.badge-count { font-size: 10px; background: hsl(var(--accent) / .12); color: hsl(var(--accent)); border-radius: 20px; padding: 2px 8px; margin-left: 6px; }
a.nav-link { cursor: pointer; }
.action-form { display: inline; }
.action-form button.link-btn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }