:root{
  --green:#056420; --dark:#043d14; --darker:#032d0f;
  --line:#e2e8e1; --ink:#1a2b1f; --soft:#5a6b5e; --bg:#f4f6f3;
  --gold:#f2b705;
  --avail:#e4f4e9; --avail-ink:#056420;
  --reserved:#fdf3d6; --reserved-ink:#8a6d00;
  --occupied:#fbe4e4; --occupied-ink:#b23b3b;
  --maint:#e7edf6; --maint-ink:#3a5b8a;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ max-width:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
}
a{ color:var(--green); }

/* Top bar shared by portal/admin/auth pages */
.topbar{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.topbar .inner{ max-width:1200px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px; }
.topbar .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--dark); }
.topbar .brand img{ width:40px; height:auto; }
.topbar .brand b{ font-size:16px; line-height:1.1; }
.topbar .brand small{ display:block; font-weight:600; color:var(--soft); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.topbar .spacer{ flex:1; }
.topbar nav{ display:flex; align-items:center; gap:8px; }
.topbar nav a{ text-decoration:none; color:var(--soft); font-weight:600; font-size:14px; padding:8px 12px; border-radius:8px; }
.topbar nav a:hover{ background:var(--bg); color:var(--dark); }
.topbar nav a.active{ color:var(--dark); background:#eef6ef; }
.badge-role{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:3px 8px; border-radius:999px; background:#eef6ef; color:var(--green); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .12s, background .12s; }
.btn:hover{ transform:translateY(-1px); }
.btn-p{ background:var(--green); color:#fff; }
.btn-o{ background:#fff; color:var(--dark); border-color:var(--line); }
.btn-danger{ background:#fbe4e4; color:#b23b3b; }
.btn-sm{ padding:7px 12px; font-size:13px; border-radius:8px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* Cards & layout */
.page{ max-width:1200px; margin:0 auto; padding:28px 24px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 6px 24px rgba(4,61,20,.05); }
.card + .card{ margin-top:20px; }
.grid{ display:grid; gap:20px; }
h1.page-title{ font-size:26px; color:var(--dark); letter-spacing:-.5px; margin-bottom:4px; }
p.page-sub{ color:var(--soft); margin-bottom:20px; }

/* Auth pages */
.auth-wrap{ min-height:calc(100vh - 66px); display:grid; place-items:center; padding:32px 20px; }
.auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:32px; box-shadow:0 24px 60px rgba(4,61,20,.10); }
.auth-card h1{ font-size:24px; color:var(--dark); margin-bottom:6px; }
.auth-card p.lead{ color:var(--soft); margin-bottom:22px; font-size:15px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:13px; color:#34453a; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green); }
.auth-card .btn{ width:100%; }
.auth-alt{ text-align:center; margin-top:18px; font-size:14px; color:var(--soft); }
.form-error{ background:#fbe4e4; color:#b23b3b; border:1px solid #f2c9c9; border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:16px; display:none; }
.form-error.show{ display:block; }
.form-ok{ background:#e4f4e9; color:#056420; border:1px solid #b9e2c6; border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:16px; }

/* Tables */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.data th{ color:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
table.data tr:hover td{ background:#fafcfa; }

/* Status pills */
.pill{ display:inline-block; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; text-transform:capitalize; }
.pill.available{ background:var(--avail); color:var(--avail-ink); }
.pill.reserved{ background:var(--reserved); color:var(--reserved-ink); }
.pill.occupied{ background:var(--occupied); color:var(--occupied-ink); }
.pill.maintenance{ background:var(--maint); color:var(--maint-ink); }

/* Stat tiles */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin-bottom:20px; }
.stat-tile{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; }
.stat-tile b{ display:block; font-size:28px; color:var(--dark); }
.stat-tile span{ font-size:13px; color:var(--soft); }

@media(max-width:560px){
  .topbar .inner{ padding:10px 14px; }
  .topbar .brand small{ display:none; }
  .page{ padding:20px 14px; }
}