:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  --green: #00876c;
  --green-dark: #006b56;
  --green-light: #e7f4f1;
  --blue: #4664aa;
  --red: #a22223;
  --text: #404040;
  --muted: #707070;
  --border: #dce5e2;
  --surface: #ffffff;
  --shadow: 0 12px 34px #17473b12;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f5faf8 0, #fff 24rem); color: var(--text); }
body::before { content: ""; display: block; height: 7px; background: var(--green); }
header { position: sticky; top: 0; z-index: 10; min-height: 78px; padding: .8rem max(1rem, calc((100vw - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; background: #ffffffed; border-bottom: 1px solid var(--border); box-shadow: 0 5px 20px #17473b0d; backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: .75rem; color: #202020; text-decoration: none; font-size: 1.18rem; font-weight: 700; }
.brand small { display: block; margin-top: .15rem; color: #666; font-size: .68rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .7rem; background: linear-gradient(145deg, var(--green), var(--green-dark)); color: white; font-size: 1.2rem; font-weight: 700; box-shadow: 0 7px 16px #00876c30; }
nav { display: flex; gap: .35rem; align-items: center; }
nav a { padding: .72rem .82rem; color: #303030; text-decoration: none; border-bottom: 3px solid transparent; }
nav a:hover { color: var(--green-dark); border-bottom-color: var(--green); }
nav form { margin: 0; }
.user-chip { padding: .42rem .7rem; border-left: 1px solid var(--border); color: #606060; font-size: .85rem; }
main { max-width: 1180px; margin: 2.3rem auto 5rem; padding: 0 1rem; }
h1 { margin: .2rem 0; color: #303030; font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 500; letter-spacing: -.025em; }
h1::after { content: ""; display: block; width: 72px; height: 4px; margin-top: .65rem; background: var(--green); }
h2 { margin: 2.2rem 0 .8rem; color: #333; font-size: 1.35rem; font-weight: 600; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.card { margin-bottom: 1rem; padding: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--green); border-radius: .8rem; box-shadow: var(--shadow); }
.compact { padding: 1rem 1.2rem; }
.login { max-width: 430px; margin: 5rem auto; }
.settings-card { padding: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
label { display: block; margin-bottom: .9rem; color: #444; font-size: .9rem; font-weight: 600; }
label small { display: block; margin-top: .38rem; color: var(--muted); font-weight: 400; }
input, select, button { width: 100%; margin-top: .35rem; padding: .78rem .88rem; border: 1px solid #b8c8c4; border-radius: .5rem; background: white; color: #303030; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px #00876c22; }
button { width: auto; border: 1px solid var(--green); background: var(--green); color: white; font-weight: 600; cursor: pointer; }
button:hover { border-color: var(--green-dark); background: var(--green-dark); transform: translateY(-1px); }
.ghost { margin: 0; border-color: #aaa; background: white; color: #404040; }
.ghost:hover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.danger { margin-top: 1rem; border-color: var(--red); background: var(--red); }
.location-picker { display: block; max-width: 48rem; margin-bottom: 1.2rem; }
.location-picker select { min-height: 3.7rem; padding: 1rem 3rem 1rem 1rem; border: 2px solid var(--green); background: #fff; color: #303030; font-size: 1.04rem; font-weight: 600; cursor: pointer; }
.desk-picker { display: block; max-width: 32rem; }
.desk-picker select { min-height: 3.3rem; border-color: #999; color: #303030; font-size: 1rem; font-weight: 600; background: #fff; }
.booking-list { display: grid; gap: .75rem; margin: 1.25rem 0; }
.booking-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: .65rem; background: #fff; box-shadow: 0 5px 18px #17473b0a; }
.booking-disclosure[open] { border-color: var(--green); }
.booking-disclosure summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem; cursor: pointer; list-style: none; color: #404040; background: #f5f5f5; }
.booking-disclosure summary::-webkit-details-marker { display: none; }
.booking-disclosure summary::after { content: "+"; margin-left: auto; color: var(--green); font-size: 1.4rem; font-weight: 400; }
.booking-disclosure[open] summary { background: var(--green-light); }
.booking-disclosure[open] summary::after { content: "-"; }
.booking-disclosure summary span:first-child { display: flex; flex-direction: column; }
.booking-disclosure summary small { margin-top: .1rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
.booking-summary { color: #666; font-size: .88rem; font-weight: 600; }
.booking-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; margin: 0; padding: 1rem; border: 0; border-top: 1px solid var(--border); background: white; }
.booking-row label { margin: 0; }
.account-section { margin-top: 3rem; }
.account-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: .8rem; background: #fff; box-shadow: var(--shadow); }
.account-disclosure[open] { border-color: var(--green); }
.account-disclosure summary { display: flex; align-items: center; padding: 1.15rem 1.25rem; cursor: pointer; list-style: none; background: #f7faf9; }
.account-disclosure summary::-webkit-details-marker { display: none; }
.account-disclosure summary::after { content: "+"; margin-left: auto; color: var(--green); font-size: 1.4rem; }
.account-disclosure[open] summary::after { content: "-"; }
.account-disclosure summary span { display: flex; flex-direction: column; gap: .2rem; }
.account-disclosure summary small { font-weight: 400; }
.account-disclosure-content { padding: 1.25rem; border-top: 1px solid var(--border); }
.time-input { min-height: 3.25rem; color-scheme: light; cursor: pointer; font-size: 1.05rem; font-weight: 650; }
.time-arrow { padding-bottom: .8rem; color: var(--muted); font-size: .8rem; }
.switch-row { display: flex; align-items: center; gap: .9rem; margin: 1.2rem 0; padding: 1rem; border: 1px solid #b8c9c5; background: #f5faf8; cursor: pointer; }
.switch-row input { appearance: none; position: relative; width: 3.2rem; height: 1.8rem; flex: 0 0 auto; margin: 0; border: 1px solid #999; border-radius: 999px; background: #aaa; }
.switch-row input::after { content: ""; position: absolute; width: 1.3rem; height: 1.3rem; top: .2rem; left: .22rem; border-radius: 50%; background: white; box-shadow: 0 1px 4px #0004; transition: transform .18s; }
.switch-row input:checked { border-color: var(--green); background: var(--green); }
.switch-row input:checked::after { transform: translateX(1.35rem); }
.switch-row span { display: flex; flex-direction: column; }
.switch-row small { margin-top: .15rem; font-weight: 400; }
.status { white-space: nowrap; padding: .52rem .72rem; border-left: 4px solid; background: #f5f5f5; font-size: .82rem; font-weight: 600; }
.status.success { border-color: var(--green); color: var(--green-dark); }
.status.warning { border-color: var(--blue); background: #eef3fb; color: #334d89; }
.toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; display: flex; align-items: flex-start; gap: 1rem; width: min(28rem, calc(100vw - 2rem)); padding: 1rem 1rem 1rem 1.1rem; border: 1px solid var(--border); border-left: 5px solid var(--blue); border-radius: .7rem; background: #fff; color: var(--text); box-shadow: 0 18px 50px #173f3524; animation: toast-in .22s ease-out; }
.toast-info { border-left-color: var(--blue); }
.toast-error { border-left-color: var(--red); }
.toast span { flex: 1; line-height: 1.45; }
.toast button { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; margin: -.25rem -.25rem 0 0; padding: 0; border: 0; background: transparent; color: #68736f; font-size: 1.35rem; line-height: 1; }
.toast button:hover { border: 0; background: #f3f6f5; color: var(--text); transform: none; }
.toast-hiding { opacity: 0; transform: translateY(.6rem); transition: opacity .2s, transform .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: translateY(0); } }
.muted, small { color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: white; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .78rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }
th { background: #ededed; color: #404040; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
tr:nth-child(even) td { background: #fafafa; }
tr:last-child td { border-bottom: 0; }
.run-debug { margin-top: .55rem; }
.run-debug summary { cursor: pointer; color: var(--green-dark); font-size: .82rem; font-weight: 700; }
.run-debug pre { max-width: 46rem; max-height: 12rem; overflow: auto; margin: .55rem 0; padding: .75rem; border: 1px solid var(--border); border-radius: .45rem; background: #f7faf9; color: #39433f; font: .76rem/1.45 Consolas, monospace; white-space: pre-wrap; }
.debug-link { color: var(--blue); font-size: .82rem; font-weight: 700; }
.admin-run-debug { margin-top: .8rem; }
.admin-run-debug pre { max-width: 30rem; }
.admin-table { min-width: 1050px; font-size: .88rem; }
.create-user h2 { margin-top: 0; }
.user-row { transition: background .15s; }
.user-row:hover td { background: #f0f8f6; }
.user-toggle { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .25rem 0; border: 0; background: transparent; color: var(--green-dark); text-align: left; }
.user-toggle:hover { border: 0; background: transparent; color: var(--green); transform: none; }
.button-link { display: inline-block; padding: .5rem .75rem; border-radius: .45rem; background: var(--green); color: white; font-size: .85rem; font-weight: 600; text-decoration: none; }
.button-link:hover { background: var(--green-dark); }
.button-link.secondary { background: #eef6f4; color: var(--green-dark); }
.button-link.secondary:hover { background: #dcefeb; }
.user-management-row td { padding: 0; background: #f0f8f6 !important; }
.user-management-panel { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(340px, 1.6fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-left: 4px solid var(--green); }
.user-management-panel > div { display: flex; flex-direction: column; gap: .2rem; }
.user-management-panel form { margin: 0; }
.password-reset-form { display: flex; gap: .55rem; align-items: center; }
.password-reset-form input, .password-reset-form button { margin: 0; }
.user-management-panel .danger { margin: 0; white-space: nowrap; }

@media (max-width: 760px) {
  header, .page-heading { position: static; flex-direction: column; align-items: flex-start; gap: .8rem; }
  nav { width: 100%; flex-wrap: wrap; }
  .page-heading { flex-direction: column; }
  .form-grid, .booking-row { grid-template-columns: 1fr; }
  .user-management-panel { grid-template-columns: 1fr; }
  .password-reset-form { align-items: stretch; flex-direction: column; }
  .time-arrow { display: none; }
}