/* Hallmark · genre: modern-minimal · macrostructure: Operations Workbench
 * theme: Phed Chaloen clean neutral dashboard · studied: yes · DNA-source: url
 * source-url: https://adminuiux.com/adminuiux/digiclinic-uiux/clinic-dashboard.html
 * Neutral surfaces with bronze reserved for small brand accents.
 */
:root{--paper:oklch(96.5% .012 78);--workspace:oklch(95.7% .014 82);--surface:oklch(99.4% .006 83);--soft:oklch(96.8% .018 78);--active:oklch(88.5% .055 76);--ink:oklch(27% .025 62);--muted:oklch(48% .025 65);--rule:oklch(89% .018 75);--accent:oklch(54% .09 70);--accent-deep:oklch(41% .07 65);--on-accent:oklch(99% .006 80);--focus:oklch(55% .15 248);--danger:oklch(53% .15 30);--success:oklch(50% .085 145);--blue-soft:oklch(92% .035 235);--blue:oklch(47% .085 240);--green-soft:oklch(92% .04 140);--green:oklch(46% .075 145);--rose-soft:oklch(93% .038 20);--rose:oklch(49% .11 25);--gold-soft:oklch(92% .052 88);--gold:oklch(48% .095 78);--shadow:0 .55rem 1.65rem oklch(28% .025 62/.06);--shadow-float:0 1rem 2.8rem oklch(28% .025 62/.11);--r-sm:.6rem;--r-md:.9rem;--r-lg:1.15rem;--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem}
*{box-sizing:border-box}html,body{min-width:20rem;overflow-x:clip}body{margin:0;background:var(--workspace);color:var(--ink);font:1rem/1.55 var(--font-body);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{outline-offset:.2rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:.18rem solid var(--focus)}
button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:.65rem .95rem;border:.0625rem solid var(--rule);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;white-space:nowrap}button:active{transform:translateY(.0625rem)}button:disabled{opacity:.55;cursor:not-allowed;background:var(--soft)}button.active,.primary{border-color:var(--accent-deep);background:var(--accent-deep);color:var(--on-accent)}.icon{width:1.2rem;height:1.2rem;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.layout{min-height:100svh}.sidebar{position:relative;z-index:3;display:flex;flex-direction:column;padding:var(--s4);background:var(--paper);border-bottom:.0625rem solid var(--rule)}.brand{display:flex;align-items:center;gap:var(--s3);min-width:0}.brand img{width:2.75rem;height:2.75rem;flex:none;object-fit:contain;mix-blend-mode:multiply}.brand strong{display:block;font-size:.92rem;line-height:1.3}.brand small{display:block;margin-top:.15rem;color:var(--accent);font-size:.68rem;letter-spacing:.13em}.side-label{display:none}.sidebar nav{display:flex;gap:var(--s2);margin-top:var(--s4);overflow-x:auto;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.sidebar nav button{justify-content:flex-start;flex:none;border-color:transparent;background:transparent;color:var(--muted)}.sidebar nav button.active{border-color:var(--active);background:var(--active);color:var(--accent-deep)}.sidebar footer{display:none}
.workspace{min-width:0}.topbar{min-height:4.25rem;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:.0625rem solid var(--rule);background:var(--surface)}.topbar .controls{display:flex;align-items:end;gap:var(--s3)}.preview{display:flex;align-items:center;gap:var(--s2);padding:.6rem var(--s4);background:var(--gold-soft);color:var(--gold);font-size:.82rem}.content{max-width:92rem;margin-inline:auto;padding:var(--s6) var(--s4) var(--s10)}
h1,h2,h3,p{margin:0}h1,h2,h3{min-width:0;overflow-wrap:anywhere;font-style:normal}h1{font-size:clamp(1.65rem,5vw,2.25rem);line-height:1.25;letter-spacing:-.035em}h2{font-size:1.08rem;line-height:1.4}h3{font-size:.95rem}.eyebrow,.side-label{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.muted{color:var(--muted);font-size:.84rem}.heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6)}.heading .eyebrow{margin-bottom:var(--s1)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s8)}.stat{position:relative;min-height:7.8rem;display:block;overflow:hidden;padding:var(--s4);text-align:left;border-color:transparent;border-radius:var(--r-md);box-shadow:var(--shadow)}.stat::after{content:'';position:absolute;right:-.8rem;bottom:.4rem;width:5rem;height:2.8rem;opacity:.58;background:repeating-linear-gradient(90deg,transparent 0 .35rem,currentColor .35rem .58rem);clip-path:polygon(0 100%,0 75%,12% 75%,12% 45%,25% 45%,25% 70%,38% 70%,38% 20%,51% 20%,51% 55%,64% 55%,64% 5%,77% 5%,77% 35%,90% 35%,90% 0,100% 0,100% 100%)}.stat:nth-child(1){color:var(--green)}.stat:nth-child(2){color:var(--blue)}.stat:nth-child(3){color:var(--gold)}.stat:nth-child(4){color:var(--rose)}.stat .stat-label{display:flex;align-items:center;gap:var(--s2);max-width:calc(100% - 3.5rem);color:var(--muted);font-size:.78rem}.stat .stat-label .icon{width:2.2rem;height:2.2rem;padding:.5rem;border-radius:var(--r-sm);background:currentColor;stroke:var(--surface)}.stat strong{display:block;margin-top:var(--s3);color:var(--ink);font-size:1.75rem;line-height:1}.stat.active{background:var(--accent-deep);color:var(--on-accent)}.stat.active .stat-label,.stat.active strong{color:var(--on-accent)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0 var(--s4)}.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4);padding:var(--s4);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow)}.filters label:first-child{grid-column:1/-1}label{display:grid;gap:.35rem;min-width:0;color:var(--muted);font-size:.78rem;font-weight:500}input,select,textarea{width:100%;min-width:0;min-height:2.75rem;padding:.62rem .75rem;border:.0625rem solid var(--rule);border-radius:var(--r-sm);background:var(--surface)}textarea{resize:vertical}.filters input,.filters select{background:var(--soft)}
.table-wrap{overflow:auto;border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{padding:.9rem 1.1rem;background:var(--soft);color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.02em}td{padding:1rem 1.1rem;border-top:.0625rem solid var(--rule);font-size:.84rem}td strong,td small{display:block}td small{margin-top:.18rem;color:var(--muted);font-size:.72rem}.record{display:block;min-height:1.7rem;padding:0;border:0;background:none;color:var(--accent);font-weight:700;text-align:left}
.badge{display:inline-flex;align-items:center;gap:var(--s2);padding:.25rem .65rem;border-radius:99rem;background:var(--soft);color:var(--muted);font-size:.76rem}.badge::before{content:'';width:.42rem;height:.42rem;border-radius:50%;background:currentColor}.badge.new{background:var(--gold-soft);color:var(--gold)}.badge.contacting{background:var(--blue-soft);color:var(--blue)}.badge.referred,.badge.waiting{background:var(--rose-soft);color:var(--rose)}.badge.closed{background:var(--green-soft);color:var(--green)}.overdue{color:var(--danger)}
.empty{padding:var(--s10) var(--s5);text-align:center}.empty h2{margin-bottom:var(--s2)}.detail-grid{display:grid;gap:var(--s5)}.stack{display:grid;align-content:start;gap:var(--s5)}.panel{min-width:0;padding:var(--s5);border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}.panel h2{margin-bottom:var(--s5)}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}.facts dt{color:var(--muted);font-size:.78rem}.facts dd{margin:.2rem 0 0;overflow-wrap:anywhere}.product{display:flex;align-items:center;gap:var(--s4)}.product img{width:6.5rem;height:6.5rem;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md)}.message{margin-top:var(--s5);padding:var(--s4);border-radius:var(--r-sm);background:var(--soft)}.inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}.tabs button{min-height:2.4rem;padding:.45rem .75rem;font-size:.78rem}.form-stack{display:grid;gap:var(--s4)}.timeline{margin:0;padding:0;list-style:none}.timeline li{position:relative;padding:0 0 var(--s5) var(--s5);border-left:.125rem solid var(--rule)}.timeline li::before{content:'';position:absolute;top:.45rem;left:-.35rem;width:.55rem;height:.55rem;border:.125rem solid var(--surface);border-radius:50%;background:var(--accent)}.timeline p{overflow-wrap:anywhere}.error{color:var(--danger);font-size:.82rem}
#notice:not(:empty){position:fixed;z-index:6;bottom:var(--s6);left:50%;max-width:calc(100% - 2rem);padding:.75rem 1.25rem;transform:translateX(-50%);border-radius:var(--r-sm);background:var(--ink);box-shadow:var(--shadow-float);color:var(--surface);white-space:nowrap}.consent{padding:var(--s3) 0;border-bottom:.0625rem solid var(--rule)}.roadmap{display:grid;gap:var(--s4)}.roadmap article{padding:var(--s5);border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow)}.roadmap strong,a{color:var(--accent)}
@media(hover:hover) and (pointer:fine){button:hover{border-color:var(--active);background:var(--active)}.sidebar nav button:hover{background:var(--active);color:var(--accent-deep)}.record:hover{color:var(--accent-deep);background:transparent}}
@media(pointer:coarse){button,input,select{min-height:3rem}}
@media(min-width:40rem){.content{padding:var(--s8)}.topbar,.preview{padding-inline:var(--s8)}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.filters{grid-template-columns:repeat(4,minmax(0,1fr))}.filters label:first-child{grid-column:1/-1}}
@media(min-width:60rem){.layout{display:grid;grid-template-columns:16rem minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100svh;padding:var(--s6) var(--s4);border-right:.0625rem solid var(--rule);border-bottom:0}.brand{padding-inline:var(--s2)}.brand img{width:3.1rem;height:3.1rem}.side-label{display:block;margin:var(--s10) var(--s3) var(--s2)}.sidebar nav{display:grid;margin-top:0;overflow:visible}.sidebar nav button{width:100%}.sidebar footer{display:block;margin-top:auto;padding:var(--s5) var(--s3) 0;border-top:.0625rem solid var(--rule);color:var(--muted);font-size:.75rem}.sidebar footer p{margin-top:var(--s2)}.content{padding:var(--s8) var(--s10) 4rem}.filters{grid-template-columns:minmax(14rem,2fr) repeat(4,minmax(8rem,1fr));align-items:end}.filters label:first-child{grid-column:auto}.detail-grid{grid-template-columns:minmax(0,1.35fr) minmax(19rem,.8fr)}}
@media(min-width:90rem){.layout{grid-template-columns:17.5rem minmax(0,1fr)}.content{padding-inline:3.5rem}.stat{min-height:8.5rem;padding:var(--s5)}}

/* Clean surface refinement: white cards, cool neutral canvas, restrained accents. */
:root {
  --paper: #ffffff;
  --workspace: #f5f7fa;
  --surface: #ffffff;
  --soft: #f8f9fb;
  --active: #edf1f5;
  --ink: #252d3a;
  --muted: #606a78;
  --rule: #e5e9ef;
  --accent: #806b4f;
  --accent-deep: #354357;
  --on-accent: #ffffff;
  --blue-soft: #edf4fa;
  --blue: #3f6487;
  --green-soft: #edf5f0;
  --green: #416b55;
  --rose-soft: #faf0f0;
  --rose: #955052;
  --gold-soft: #f7f4ed;
  --gold: #79633d;
  --shadow: 0 2px 8px rgb(31 45 66 / 3%);
  --shadow-float: 0 8px 28px rgb(31 45 66 / 10%);
}
.preview { background: var(--soft); color: var(--muted); border-bottom: 1px solid var(--rule); }
.eyebrow, .side-label { color: var(--muted); }
.stat, .panel, .filters, .table-wrap, .roadmap article { border: 1px solid var(--rule); }
.stat::after { content: none; }
.stat .stat-label { max-width: 100%; font-size: .875rem; }
.stat .stat-label .icon { background: var(--soft); stroke: currentColor; }
.stat:nth-child(1) .icon { color: var(--green); background: var(--green-soft); }
.stat:nth-child(2) .icon { color: var(--blue); background: var(--blue-soft); }
.stat:nth-child(3) .icon { color: var(--gold); background: var(--gold-soft); }
.stat:nth-child(4) .icon { color: var(--rose); background: var(--rose-soft); }
.stat.active { border-color: var(--accent-deep); background: var(--active); }
.stat.active .stat-label, .stat.active strong { color: var(--ink); }
.filters input, .filters select { background: var(--surface); }
.record { color: var(--accent-deep); }
.sidebar nav button.active { border-color: transparent; }
.error { min-height: 1.55em; }
@media (hover:hover) and (pointer:fine) {
  .primary:hover, .tabs button.active:hover { background: var(--ink); color: var(--on-accent); }
}
@media (max-width:39.99rem) {
  .topbar > .eyebrow { display: none; }
  .topbar .controls { width: 100%; justify-content: space-between; }
  .heading { flex-wrap: wrap; }
  .stat .stat-label { font-size: .8rem; }
}
@media (prefers-reduced-motion:reduce) { button:active { transform: none; } }

.mockup-banner{position:relative;z-index:8;display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s2) var(--s4);background:var(--gold-soft);border-bottom:1px solid var(--rule);color:var(--gold);font-size:.78rem}.mockup-banner strong{color:var(--ink)}.mockup-banner button{min-height:2.25rem;padding:.35rem .65rem;background:var(--surface);font-size:.76rem}@media(max-width:48rem){.mockup-banner{align-items:flex-start;flex-wrap:wrap;justify-content:flex-start}.mockup-banner span{flex-basis:100%}}