/* Workspace theme and responsive layout, layered over shared controls. */
:root { --ink:#26382f; --muted:#70786e; --line:#e1e5dc; --bg:#f5f4ef; --card:#fffefa; --navy:#234b3a; --navy-2:#32634d; --accent:#997132; --ok:#32634d; --danger:#b44739; --free:#eaf3e9; --taken:#f8f0df; }
[hidden] { display:none !important; }
html, body { font-size:14px; line-height:1.6; }
button { transition:background .15s, box-shadow .15s; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible { outline:3px solid #b89a55; outline-offset:3px; }
input:focus, select:focus { outline:2px solid #98b7a2; outline-offset:1px; }
input, select { color:var(--ink); accent-color:var(--navy); }
.login-wrap { min-height:100vh; grid-template-columns:1fr 420px; align-items:center; gap:80px; padding:72px max(6vw, calc((100vw - 1120px)/2)); background:radial-gradient(ellipse at 0 100%, #385b43 0, transparent 60%), #173c2e; }
.login-intro { color:#f4f1e6; justify-self:start; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid #88a38b; border-radius:14px 14px 14px 3px; font-family:serif; font-size:24px; margin-bottom:24px; }
.login-intro .kicker { color:#c4c9ae; margin-top:44px; }
.login-intro h1 { font-family:"STSong","SimSun",serif; font-weight:500; font-size:clamp(36px,4vw,56px); line-height:1.5; letter-spacing:.05em; margin:20px 0; }
.login-intro > p:not(.kicker) { color:#c6d2c5; line-height:2; font-size:16px; }
.intro-note { border-top:1px solid #4b6956; margin-top:56px; padding-top:22px; color:#becdbd; font-size:12px; letter-spacing:.15em; }
.login-card { width:100%; padding:42px 36px; border-radius:22px; box-shadow:0 24px 64px #092a2333; }
.login-card h2 { margin:12px 0 8px; font-size:25px; }
.login-card .sub { margin:0 0 32px; font-size:13px; }
.login-card label { margin-bottom:18px; color:var(--ink); }
.login-card input { margin-top:8px; padding:12px 14px; border-radius:9px; }
.login-card button { padding:12px; border-radius:9px; }
.login-card .hint { margin:22px 0 0; line-height:1.8; }
.app:not([hidden]) { grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
aside { position:sticky; top:0; height:100vh; background:#193e2f; padding:32px 18px 22px; }
.brand { padding:0 16px 34px; }
.brand .brand-mark { margin-bottom:18px; }
.brand strong { font-size:20px; letter-spacing:.08em; }
.brand span { color:#aebfaa; font-size:11px; }
aside nav { gap:8px; flex:0; }
aside nav button, .logout { color:#c4d2c5; padding:12px 16px; border-radius:9px; }
aside nav button.active, aside nav button.active:hover { background:#e7eedc; color:#234b3a; font-weight:600; }
aside nav button:not(.active):hover, .logout:hover { background:#ffffff12; color:#fff; }
.sidebar-note { margin:auto 16px 24px; padding-top:40px; font-size:12px; line-height:1.9; color:#a9bca9; }
.logout { border-top:1px solid #ffffff18; border-radius:0; font-size:12px; }
main { min-width:0; max-width:1600px; width:100%; margin:0 auto; align-self:start; }
.top { gap:20px; align-items:center; padding:34px 40px 0; }
.eyebrow { color:var(--muted); margin:0 0 8px; font-size:11px; letter-spacing:.12em; }
.top h2 { font-size:27px; font-weight:650; }
#who { color:var(--navy); font-size:12px; background:#e9eee3; border:1px solid #dce4d5; padding:8px 14px; border-radius:24px; }
.page-description { margin:8px 40px 0; color:var(--muted); font-size:13px; }
#page { padding:26px 40px 48px; }
.welcome { background:#e7ecde; border:1px solid #d8e0ce; border-radius:16px; padding:30px; margin-bottom:24px; }
.welcome h3 { margin:8px 0; font-size:24px; font-weight:550; }
.welcome p { margin:0; color:#62725f; }
.welcome .eyebrow { color:#58724f; }
.cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.card { border-radius:14px; padding:26px; }
.card .n { font-size:46px; font-weight:500; line-height:1.3; font-variant-numeric:tabular-nums; margin:14px 0 0; }
.card .n small { font-size:13px; color:var(--muted); margin-left:10px; }
.section-heading { font-size:16px; margin:28px 0 14px; }
.shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.shortcut { background:var(--card); text-align:left; padding:22px; border-radius:12px; border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.shortcut:hover { border-color:#9cb197; background:#f0f4e9; }
.shortcut strong { display:block; font-size:15px; margin-bottom:6px; }
.shortcut span { font-size:12px; color:var(--muted); }
.toolbar { gap:12px; margin-bottom:18px; }
.toolbar label, .form-grid label { gap:7px; }
.week-range { color:var(--muted); font-size:11px; line-height:1.3; white-space:nowrap; }
.toolbar input, .toolbar select, .form-grid input:not([type=checkbox]), .form-grid select { padding:10px 12px; border-radius:8px; max-width:100%; min-height:42px; }
.btn { min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:8px; }
.btn:hover:not(:disabled), .login-card button:hover:not(:disabled) { background:var(--navy-2); }
.btn.ghost { background:var(--card); }
.btn.ghost:hover:not(:disabled) { background:#e8eee1; }
.btn.danger { background:#f9e9e5; color:var(--danger); }
.btn.danger:hover:not(:disabled) { background:#f0d5cf; }
.btn.ok { background:#e6efdf; color:var(--navy); }
.btn.ok:hover:not(:disabled) { background:#d4e4c9; }
.table-scroll, #slot-table, #appt-table { overflow-x:auto; border-radius:12px; }
table { border-collapse:separate; border-spacing:0; border-radius:12px; }
th, td { padding:16px; font-size:13px; white-space:nowrap; }
th { background:#eceee6; color:#66705f; font-weight:500; font-size:12px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom:0; }
tbody tr:hover td { background:#f5f6ef; }
td .btn { min-height:32px; padding:4px 10px; font-size:12px; }
.ok-text, .warn, .badge { display:inline-block; border-radius:30px; padding:3px 10px; font-size:12px; background:#eaf0e3; color:var(--ok); }
.warn, .badge-2 { color:#856525; background:#f5edda; }
.badge-3 { color:#68716a; background:#edf0eb; }
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:24px; border-radius:14px; margin-bottom:24px; }
.form-grid h3 { margin:0; font-size:16px; }
.checks { gap:10px; margin-top:10px; }
.chk { font-size:12px; gap:8px; background:#f5f6ef; border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.chk:has(input:checked) { border-color:#a7bba0; background:#edf3e5; }
.form-grid .chk input { min-width:0; width:16px; height:16px; margin:0; }
.pager { margin-top:18px; gap:14px; justify-content:flex-end; font-size:12px; color:var(--muted); }
.timetable th, .timetable td { height:96px; }
.timetable thead th { height:64px; }
.timetable th:first-child, .timetable td:first-child { min-width:128px; }
.timetable .st-0 { color:#37673f; }
.timetable .st-1 { color:#88651e; }
.timetable .btn { min-height:30px; padding:3px 10px; font-size:11px; }
.legend { display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:12px; margin:0 0 14px; }
.legend span::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:#a9baa1; }
.legend span:nth-child(2)::before { background:#d8bb78; }
.legend span:nth-child(3)::before { background:#c4c8bf; }
.empty-state { padding:48px 24px; text-align:center; color:var(--muted); white-space:normal; }
.empty-state strong { display:block; color:var(--ink); margin-bottom:8px; font-weight:500; }
.loading-state { color:var(--muted); padding:56px 0; text-align:center; }
.notice { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); padding:12px 22px; border-radius:10px; background:#263d31; color:#fff; box-shadow:0 8px 28px #193e2f30; z-index:20; max-width:calc(100vw - 32px); }
@media(max-width:1100px) { .top { padding:26px 24px 0; } .page-description { margin-left:24px; margin-right:24px; } #page { padding:24px; } .shortcuts { grid-template-columns:1fr; } .login-wrap { gap:40px; padding:48px; } }
@media(max-width:760px) {
  .app:not([hidden]) { display:block; } aside { position:static; width:100%; height:auto; padding:16px; }
  .brand { padding:0 4px 12px; display:flex; align-items:center; gap:12px; } .brand .brand-mark { width:32px; height:32px; font-size:19px; margin:0; } .brand strong { font-size:17px; } .brand span, .sidebar-note { display:none; }
  aside nav { flex-direction:row; overflow-x:auto; gap:4px; } aside nav button { white-space:nowrap; padding:10px 12px; font-size:12px; } .logout { padding:8px 4px 0; border:0; align-self:flex-end; }
  .top { padding:22px 18px 0; gap:8px; } .top h2 { font-size:23px; } #who { font-size:11px; padding:5px 10px; } .eyebrow { font-size:10px; }
  .page-description { margin-left:18px; margin-right:18px; } #page { padding:20px 18px 36px; }
  .welcome { padding:22px; } .welcome h3 { font-size:21px; } .cards { gap:12px; } .card { padding:18px; } .card .n { font-size:36px; }
  .form-grid { grid-template-columns:1fr; padding:20px; gap:16px; } .toolbar label { flex:1 1 140px; } .pager { justify-content:center; }
  .login-wrap { grid-template-columns:minmax(0,420px); justify-content:center; padding:32px 20px; gap:28px; } .login-intro { justify-self:stretch; } .login-intro .brand-mark, .login-intro > p, .intro-note { display:none; } .login-intro h1 { font-size:30px; margin:0; } .login-card { padding:30px 24px; }
}