:root {
  --green: #173d32;
  --green2: #245443;
  --green-light: #eaf1ec;
  --gold: #c6a66b;
  --ivory: #f7f6f1;
  --white: #fff;
  --text: #26352e;
  --muted: #849089;
  --border: #e9ece7;
  --shadow: 0 12px 35px rgba(25,49,39,.06);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background:var(--ivory); }
button,input { font:inherit; }
.hidden { display:none!important; }
.muted { color:var(--muted); line-height:1.6; }
.eyebrow { color:var(--gold); font-size:10px; letter-spacing:2px; font-weight:800; }
.brand-mark { width:48px;height:48px;display:grid;place-items:center;background:var(--green);color:#e8d5a5;font-family:Georgia,serif;font-size:30px;border-radius:13px; }
.brand-mark.small { width:39px;height:39px;font-size:24px;border-radius:10px; }
.brand-name { font-family:Georgia,serif;font-size:22px;letter-spacing:3px;color:var(--green);font-weight:bold; }
.brand-sub { font-size:8px;letter-spacing:1.8px;color:var(--muted);margin-top:4px; }

/* Login */
.login-page { min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 20px;background:radial-gradient(circle at 15% 15%,#e9eee6,transparent 35%),var(--ivory); }
.login-brand { display:flex;align-items:center;gap:13px;margin-bottom:35px; }
.login-card { width:100%;max-width:430px;background:white;border:1px solid var(--border);border-radius:18px;padding:38px;box-shadow:var(--shadow); }
.login-card h1 { font-family:Georgia,serif;font-weight:500;font-size:34px;margin:12px 0 5px;color:var(--green); }
.login-card form { margin-top:28px; }
.login-card label { display:block;font-size:12px;font-weight:700;margin:18px 0 8px; }
.login-card input { width:100%;padding:14px 15px;border:1px solid var(--border);border-radius:9px;outline:none;background:#fcfcfa; }
.login-card input:focus { border-color:var(--gold);box-shadow:0 0 0 3px #c6a66b20; }
.primary-button { width:100%;margin-top:25px;border:0;border-radius:9px;padding:15px;background:var(--green);color:white;font-weight:700;letter-spacing:1px;cursor:pointer;display:flex;justify-content:center;gap:12px; }
.primary-button:hover { background:var(--green2); }
.primary-button:disabled { opacity:.6;cursor:wait; }
.error-message { color:#b43b36;font-size:12px;margin-top:12px;min-height:16px; }
.login-footer { text-align:center;color:var(--muted);font-size:10px;margin-top:26px;letter-spacing:1px; }
.login-copyright { margin-top:30px;color:var(--muted);font-size:10px; }

/* Main application */
.app-layout { min-height:100vh; }
.sidebar { position:fixed;inset:0 auto 0 0;width:250px;background:#173d32;color:#fff;padding:27px 18px;display:flex;flex-direction:column;z-index:10; }
.sidebar-brand { display:flex;align-items:center;gap:11px;padding:0 9px 35px; }
.sidebar .brand-name { color:#fff;font-size:19px; }
.sidebar .brand-sub { color:#b8c8be; }
.menu-caption { font-size:9px;letter-spacing:1.7px;color:#91a99b;padding:0 12px;margin:0 0 12px; }
.nav-menu { display:grid;gap:5px; }
.nav-link { display:flex;align-items:center;gap:13px;color:#d2ded6;text-decoration:none;font-size:12px;padding:12px;border-radius:8px;transition:.2s; }
.nav-link span { width:18px;text-align:center;font-size:17px;color:#d1b77f; }
.nav-link:hover,.nav-link.active { background:#2a5344;color:white; }
.management-caption { margin-top:31px; }
.sidebar-bottom { margin-top:auto;padding:18px 10px 0;border-top:1px solid #ffffff20; }
.secure-label { color:#c8d8ca;font-size:10px;letter-spacing:1px; }
.sidebar-version { color:#81988b;font-size:8px;margin-top:12px;letter-spacing:1px; }
.main-area { margin-left:250px;min-height:100vh; }
.topbar { height:76px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 38px; }
.breadcrumb { color:var(--muted);font-size:11px;letter-spacing:1px; }
.breadcrumb span { margin:0 10px;color:var(--gold); }
.breadcrumb b { color:var(--green); }
.top-user { display:flex;align-items:center;gap:11px; }
.avatar { width:36px;height:36px;border-radius:50%;background:var(--green-light);color:var(--green);display:grid;place-items:center;font-weight:700; }
.user-meta { display:grid;gap:3px; }
.user-meta strong { font-size:11px; }
.user-meta small { color:var(--muted);font-size:10px;text-transform:capitalize; }
.logout-button { border:0;background:none;color:#9b655b;font-size:11px;cursor:pointer;margin-left:12px; }
.menu-toggle { display:none; }
.content { padding:37px 38px;max-width:1500px;margin:auto; }
.page-heading { display:flex;align-items:end;justify-content:space-between;margin-bottom:27px; }
.page-heading h1 { color:var(--green);font-family:Georgia,serif;font-weight:500;font-size:31px;margin:9px 0; }
.page-heading p { color:var(--muted);font-size:12px;margin:0; }
.date-label { color:var(--muted);font-size:11px; }
.stats-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px; }
.stat-card,.panel { background:white;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow); }
.stat-card { padding:21px; }
.stat-top { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px; }
.stat-icon { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--green-light);color:var(--green);font-size:17px; }
.stat-value { color:var(--green);font-family:Georgia,serif;font-size:34px;margin:15px 0 5px; }
.stat-note { color:#9aa39c;font-size:10px; }
.dashboard-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px; }
.panel { padding:23px; }
.panel-heading { display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--border); }
.panel-heading h2 { color:var(--green);font-family:Georgia,serif;font-weight:500;font-size:19px;margin:0 0 5px; }
.panel-heading p { color:var(--muted);font-size:10px;margin:0; }
.panel-heading a { color:var(--green2);font-size:10px;text-decoration:none; }
.availability-list { padding-top:10px; }
.availability-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f1f2ee;font-size:11px; }
.availability-row strong { color:var(--green);font-size:14px; }
.dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px; }
.dot.available { background:#579777; }.dot.reserved { background:#c6a66b; }.dot.booked { background:#6c8bb1; }.dot.sold { background:#9b7770; }
.booking-highlight { display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--border); }
.booking-highlight.confirmed { border:0; }
.booking-number { font-family:Georgia,serif;font-size:33px;color:var(--gold);min-width:45px; }
.booking-highlight.confirmed .booking-number { color:var(--green); }
.booking-highlight strong { font-size:12px; }
.booking-highlight p { color:var(--muted);font-size:10px;margin:5px 0 0; }
.info-message { color:var(--muted);font-size:10px;margin-top:18px; }
.module-placeholder { min-height:280px;display:grid;place-content:center;text-align:center; }
.placeholder-icon { color:var(--gold);font-size:34px; }
.module-placeholder h2 { font-family:Georgia,serif;color:var(--green);font-weight:500; }
.module-placeholder p { color:var(--muted);font-size:12px; }
@media(max-width:1050px) {
  .sidebar { width:220px; }.main-area { margin-left:220px; }
  .content { padding:28px 22px; }.topbar { padding:0 22px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  .sidebar { transform:translateX(-100%);transition:.25s;width:250px; }
  .sidebar.open { transform:translateX(0); }
  .main-area { margin-left:0; }
  .topbar { height:65px;padding:0 15px;gap:10px; }
  .menu-toggle { display:block;border:0;background:none;color:var(--green);font-size:20px; }
  .breadcrumb { margin-right:auto;font-size:9px; }
  .user-meta { display:none; }
  .logout-button { margin-left:0; }
  .content { padding:25px 15px; }
  .page-heading { align-items:start;gap:12px; }
  .page-heading h1 { font-size:26px; }
  .date-label { font-size:9px;text-align:right; }
  .stats-grid { gap:10px; }
  .stat-card { padding:15px; }
  .stat-value { font-size:28px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .login-card { padding:27px 23px; }
}