/* admin.html (the clinic's dashboard) */
.admin .top .wrap { gap: 14px; }
.updated { margin: 0 0 0 auto; font: 500 12px/1.3 var(--f-mono); color: var(--ink-2); text-align: right; }
.adm { padding: 32px 0 80px; }
.login { display: grid; place-items: center; min-height: 60vh; }
.login-card { width: min(420px, 100%); padding: 32px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card h1 { font-size: 40px; line-height: 1.05; margin: 10px 0 22px; }
.login-card .msg { color: var(--warn); }
.login-card .fine { margin: 16px 0 0; }

.adm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.adm-title { min-width: 0; }
.adm-title h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; margin: 8px 0 0; }
.d-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn.icon { width: 42px; padding: 0; font-size: 22px; }
.d-pick { min-height: 42px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); font: 500 14px var(--f-mono); min-width: 0; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.tile span { font: 500 12px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tile b { font: 500 32px/1.1 var(--f-display); font-variation-settings: "SOFT" 100, "opsz" 72; }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 24px; }
.wk { display: grid; justify-items: center; gap: 2px; padding: 10px 2px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; min-width: 0; }
.wk .wd { font: 500 11px/1.2 var(--f-mono); text-transform: uppercase; color: var(--ink-2); }
.wk .dn { font: 600 18px/1.15 var(--f-body); }
.wk .ct { font: 500 12px/1.2 var(--f-mono); color: var(--teal); }
.wk .ct.zero { color: var(--ink-2); opacity: .6; }
.wk[aria-pressed="true"] { border-color: var(--teal); background: var(--mint); }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.col { min-width: 0; }
.col h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.col h2 small { font: 500 13px var(--f-mono); color: var(--ink-2); letter-spacing: 0; }
.empty { padding: 22px; border-radius: 18px; border: 1.5px dashed var(--line); color: var(--ink-2); margin: 0; }

.appt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; padding: 16px; margin-bottom: 10px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--teal); }
.appt.s-done { border-left-color: #3BA37A; }
.appt.s-no_show { border-left-color: var(--warn); }
.appt.s-held { border-left-color: var(--smile); border-style: dashed; border-left-style: solid; }
.appt.s-cancelled { opacity: .6; border-left-color: var(--line); }
.appt.s-blocked { background: repeating-linear-gradient(135deg, var(--paper), var(--paper) 10px, var(--canvas) 10px, var(--canvas) 20px); border-left-color: var(--ink-2); }
.a-time { font: 500 16px/1.25 var(--f-mono); }
.a-time span { display: block; font-size: 13px; color: var(--ink-2); }
.a-main { min-width: 0; }
.a-main p { margin: 0; }
.a-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.a-svc { color: var(--ink-2); font-size: 15px; }
.a-note { margin-top: 6px !important; padding: 8px 10px; border-radius: 10px; background: var(--canvas); font-size: 14.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
.a-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px !important; font-size: 15px; }
.a-contact a { font-weight: 600; text-decoration: none; }
.a-contact .ph { font: 500 14px var(--f-mono); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.chip { display: inline-flex; padding: 3px 10px; border-radius: 999px; font: 500 12px/1.5 var(--f-mono); background: var(--mint); color: var(--teal); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.ok { background: var(--ok-bg); color: #1F6B48; }
.chip.peach { background: var(--peach); color: #8A4A33; }
.chip.grey { background: var(--canvas); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.a-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.a-actions .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.a-actions .btn.confirm { background: var(--warn); color: #fff; box-shadow: none; }

.block-box { margin-top: 26px; padding: 0 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.block-box summary { padding: 18px 0; cursor: pointer; font-weight: 600; }
.block-box summary span { font-weight: 400; color: var(--ink-2); }
.block-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr) auto; gap: 12px; align-items: end; padding-bottom: 6px; }
.block-form .field { margin: 0; }
.block-form .btn { min-height: 50px; }
.block-box .msg { color: var(--warn); padding-bottom: 14px; }
.block-box .msg.ok { color: #1F6B48; }
@media (max-width: 860px) { .block-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .block-form .grow { grid-column: 1 / -1; } .block-form .btn { grid-column: 1 / -1; } }
@media (max-width: 480px) { .block-form { grid-template-columns: minmax(0, 1fr); } }