:root{--nav:#073643;--nav2:#052c37;--teal:#048c99;--turq:#09a4ac;--ink:#112e3e;--muted:#718596;--line:#dfebef;--bg:#f3f8fa;--card:#fff;--orange:#ff8b36;--green:#0ca67e;--blue:#2787ce;--shadow:0 4px 24px rgba(7,58,76,.055)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:242px;overflow:auto;background:linear-gradient(160deg,var(--nav),var(--nav2));color:#dbf7fa;z-index:20;scrollbar-width:thin}aside .logo{height:72px;padding:20px 18px;display:flex;gap:9px;align-items:center;color:white}.logo .symbol{font-size:30px;color:#4fe2e4}.logo b{font-size:19px;letter-spacing:-.8px}.logo small{display:block;font-size:10px;color:#96c5ce;letter-spacing:.6px}.section-head{padding:21px 17px 7px;font-size:10px;color:#77b8c1;letter-spacing:1.15px;font-weight:800}.menu{display:flex;align-items:center;gap:10px;width:calc(100% - 18px);border:0;border-radius:8px;text-align:left;background:transparent;color:#c9e9eb;margin:2px 9px;padding:10px 12px;font-size:12px}.menu:hover,.menu.active{background:#0b8291;color:white}.menu span.ico{width:18px;font-size:16px;text-align:center}.menu small{margin-left:auto;opacity:.55}main{margin-left:242px;min-height:100vh}.topbar{height:66px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:15}.topbar .search{flex:1;max-width:550px;position:relative}.search input{width:100%;background:#f2f6f8;border:1px solid #edf2f5;border-radius:26px;padding:12px 18px;outline:0}.pill,.chip{border-radius:30px;padding:6px 11px;font-size:11px;font-weight:700;display:inline-block}.pill{background:#e6f3f5;color:#078390}.chip.green{background:#e2f9ef;color:#058f61}.chip.orange{background:#fff1df;color:#bc691e}.chip.blue{background:#e6f2ff;color:#2474b7}.chip.gray{background:#eef2f4;color:#657988}.chip.red{background:#fde8e8;color:#c64d55}.content{padding:25px 28px 60px;max-width:1600px;margin:auto}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.header h1{margin:0;font-size:24px;letter-spacing:-.65px}.header p{color:var(--muted);margin:8px 0 0}.btn{border:0;border-radius:8px;background:var(--teal);color:#fff;padding:10px 14px;font-weight:700;font-size:12px}.btn:hover{filter:brightness(.94)}.btn.alt{color:#356172;background:#edf4f6}.btn.outline{color:var(--teal);background:#fff;border:1px solid #c6e2e5}.btn.danger{background:#f9e7e7;color:#c44147}.btn.sm{padding:7px 10px;font-size:11px}.actions{display:flex;gap:8px;flex-wrap:wrap}.grid{display:grid;gap:16px}.cols5{grid-template-columns:repeat(5,minmax(0,1fr))}.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:18px;min-width:0}.card h3{margin:0 0 14px;font-size:14px}.metric{display:flex;align-items:center;gap:13px}.metric .micon{font-size:23px;border-radius:11px;background:#e8f6f8;width:44px;height:44px;display:grid;place-items:center}.metric label{color:#617a89;font-size:11px}.metric strong{font-size:22px;display:block;margin:3px 0}.metric small{color:#91a4ad}.bar{width:100%;height:7px;border-radius:10px;background:#ecf2f5;margin-top:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--teal);border-radius:10px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}table{width:100%;border-collapse:collapse;min-width:680px;background:white}th{background:#f3f7f9;text-align:left;font-size:11px;color:#61788a;white-space:nowrap}th,td{padding:11px 13px;border-bottom:1px solid #edf2f4}td{font-size:12px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafdfd}.tabs{display:flex;gap:7px;margin-bottom:15px;flex-wrap:wrap}.tab{border:1px solid #e1ecef;color:#5c7a89;padding:9px 14px;background:#f3f7f8;border-radius:8px;font-size:11px;font-weight:700}.tab.sel{background:var(--teal);color:white;border-color:var(--teal)}.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{min-width:0}.field label{display:block;color:#527180;font-weight:700;font-size:11px;margin-bottom:6px}.field input,.field select,.field textarea{display:block;width:100%;border:1px solid #d9e6ea;background:white;border-radius:8px;padding:10px 11px;outline:0;color:#203d4b;min-height:37px}.field textarea{resize:vertical;min-height:80px}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--turq);box-shadow:0 0 0 3px #c8f3f1}.field.wide{grid-column:1/-1}.help{font-size:11px;color:var(--muted);margin:8px 0}.info{background:#e7f7f5;border:1px solid #bfece4;border-radius:9px;color:#176d63;padding:12px 15px}.warn{background:#fff7e7;border:1px solid #f7e2ba;border-radius:9px;color:#986225;padding:12px 15px}.slim{font-size:11px}.legend{display:flex;flex-wrap:wrap;gap:7px}.legend i{height:11px;width:11px;border-radius:3px;display:inline-block;margin-right:5px}.toothrow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}.tooth{width:39px;height:63px;border-radius:20px 20px 16px 16px;border:1px solid #d8e4e7;background:linear-gradient(#fff,#f1f4f6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#5a7c89}.tooth .shape{font-size:22px;line-height:23px}.tooth small{font-size:10px;font-weight:800}.tooth.selected{outline:3px solid #20c0c5}.tooth.karies{background:#fff0db;border-color:#ffb85b}.tooth.tambalan{background:#e1f2fe;border-color:#68b9e5}.tooth.hilang{background:#e8e9ec;color:#9a9a9f}.tooth.psa{background:#ffe1e5;border-color:#f18a91}.mini-list{display:flex;flex-direction:column;gap:9px}.mini-item{border:1px solid #e9f1f3;padding:11px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}.num{font-size:13px;font-weight:900;color:#0b5a70}.steps{display:flex;gap:7px;flex-wrap:wrap}.step{flex:1;min-width:150px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px}.step b{display:block;margin:5px 0}.step .dot{width:28px;height:28px;border-radius:50%;background:#daf4f5;color:var(--teal);display:grid;place-items:center;font-weight:bold}.chart{height:170px;display:flex;align-items:end;gap:12px;border-bottom:1px solid #e1e9ec;padding:5px 8px}.chart .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:5px;height:100%}.chart .c b{display:block;background:linear-gradient(#21b0bd,#0a889c);width:100%;max-width:47px;border-radius:5px 5px 0 0}.chart .c small{font-size:10px;color:var(--muted)}.right{margin-left:auto}.muted{color:var(--muted)}.note{border-left:4px solid var(--teal);padding:11px 15px;background:#f1f9f9;border-radius:4px;margin-bottom:15px}.modal-back{position:fixed;inset:0;background:rgba(5,29,43,.55);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}.modal-back.show{display:flex}.modal{max-width:620px;width:100%;background:#fff;border-radius:16px;padding:24px;max-height:90vh;overflow:auto;box-shadow:0 20px 80px #1235}.modal h2{margin:0 0 18px}.toast{position:fixed;right:24px;bottom:24px;background:#084251;color:#fff;border-radius:9px;padding:13px 20px;z-index:80;box-shadow:var(--shadow);display:none;max-width:340px}.toast.show{display:block}footer{color:#8aa0aa;font-size:11px;padding:22px 28px;text-align:center}.hide{display:none!important}@media(max-width:1300px){.cols5{grid-template-columns:repeat(3,1fr)}}@media(max-width:1050px){aside{width:210px}main{margin-left:210px}.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}.content{padding:20px}}@media(max-width:760px){aside{position:relative;width:100%;height:auto;max-height:230px;display:block}aside .logo{height:52px}aside .navs{display:flex;gap:2px;overflow:auto}aside .section-head{display:none}aside .menu{white-space:nowrap;width:auto}main{margin:0}.topbar{padding:0 12px}.content{padding:16px}.grid,.cols5,.cols3,.cols2{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}.header{display:block}.header .actions{margin-top:14px}.topbar .pill{display:none}}@media print{aside,.topbar,.header .actions,.btn,.tabs{display:none!important}main{margin:0}.content{padding:0}.card{box-shadow:none}body{background:white}}

/*
 * Master skala antarmuka DentalFlow (global)
 * 80% seperti browser zoom, mencakup sidebar, header, tabel, formulir dan modal.
 * Ubah nilai di sini jika seluruh skala perlu disesuaikan kembali.
 * Pengaturan khusus cetak tetap 100% agar dokumen tidak ikut mengecil.
 */
@media screen {
  html { zoom: 80%; }
}