/* Aset UrusOS — gaya aplikasi mudah alih: aksen oren (jenama), tema gelap dan cerah */
:root,:root[data-theme="dark"]{
  --bg:#1c1d23;--surface:#262831;--surface2:#30323d;--line:#3a3c48;--text:#f5f6f8;--muted:#9a9eae;
  --accent:var(--a,#f26a10);--accent-text:var(--at-dark,#fb923c);--on-accent:var(--on,#1c1d23);--ok:#38d489;--warn:#ffb340;--bad:#ff6475;
  --canvas:#20222a;--shadow:0 10px 40px #00000066;color-scheme:dark;
  --fp-own:#111318;--fp-own-bg:#eceef3;--fp-borrow:#fb923c;--fp-school:#60a5fa; /* Floor Plan: aset klinik (hitam pada label cerah supaya jelas pada tema gelap), aset pinjaman (oren), aset sekolah (biru); tetap bagi semua klinik */
}
:root[data-theme="light"]{
  --bg:#f5f5f9;--surface:#fff;--surface2:#eeeff4;--line:#e2e3ea;--text:#1c1d23;--muted:#6b6f80;
  --accent:var(--a,#f26a10);--accent-text:var(--at-light,#b43a09);--on-accent:var(--on,#1c1d23);--ok:#1c9a5d;--warn:#b86e00;--bad:#d6334a;
  --canvas:#fafafd;--shadow:0 10px 40px #1c1d2326;color-scheme:light;
  --fp-own:#111318;--fp-own-bg:#eceef3;--fp-borrow:#c2410c;--fp-school:#1d4ed8;
}
/* Warna aksen: --a (butang, teks putih), --at-dark (teks pada tema gelap), --at-light (teks pada tema cerah).
   Semua kombinasi disahkan WCAG AA (>= 4.5:1) oleh ujian. */
:root[data-accent="pink"]{--on:#fff;--a:#d8046f;--at-dark:#ff5fa9;--at-light:#c4006a}
:root[data-accent="oren"]{--a:#f26a10;--on:#1c1d23;--at-dark:#fb923c;--at-light:#b43a09} /* oren jenama: teks gelap pada butang kerana putih tidak cukup kontras */
:root[data-accent="emas"]{--on:#fff;--a:#a16207;--at-dark:#fbbf24;--at-light:#92570a}
:root[data-accent="hijau"]{--on:#fff;--a:#15803d;--at-dark:#4ade80;--at-light:#13732f}
:root[data-accent="teal"]{--on:#fff;--a:#0f766e;--at-dark:#2dd4bf;--at-light:#0d6b63}
:root[data-accent="laut"]{--on:#fff;--a:#0e7490;--at-dark:#22d3ee;--at-light:#0c6a84}
:root[data-accent="biru"]{--on:#fff;--a:#2563eb;--at-dark:#60a5fa;--at-light:#1d4ed8}
:root[data-accent="indigo"]{--on:#fff;--a:#4f46e5;--at-dark:#a5b4fc;--at-light:#4338ca}
:root[data-accent="ungu"]{--on:#fff;--a:#7e22ce;--at-dark:#c084fc;--at-light:#6b21a8}
:root[data-accent="grafit"]{--on:#fff;--a:#475569;--at-dark:#94a3b8;--at-light:#475569}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;transition:background .15s,transform .1s,opacity .15s}
button:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;letter-spacing:-.3px}
.muted{color:var(--muted);font-size:13px}
.hidden{display:none!important}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;pointer-events:none}

/* Susun atur */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:28px 16px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px;padding:0 10px 22px}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;--ink:#f5f6f8}
:root[data-theme="light"] .brand-mark{--ink:#28282a}
.brand-mark svg{width:100%;height:100%;display:block}
.wordmark{font-weight:800;letter-spacing:-.02em;line-height:1}
.wordmark b{color:#f26a10;font-weight:800}
.nav{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:14px;background:transparent;color:var(--muted);text-align:left;font-weight:500}
.nav:hover{background:var(--surface2);color:var(--text)}
.nav.active{background:var(--surface2);color:var(--accent-text);font-weight:600}
.main{min-width:0;padding:28px 36px 48px;max-width:1180px;width:100%}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.top h1{font-size:26px;font-weight:700}
.top-actions{display:flex;align-items:center;gap:8px}
.tabbar{display:none}

/* Butang, chip, tag */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--surface2);color:var(--text)}
.btn.ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent-text)}
.btn.danger{background:transparent;border:1.5px solid var(--bad);color:var(--bad)}
.btn.sm{min-height:36px;padding:0 16px;font-size:13px}
.btn.block{width:100%}
.iconbtn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface2);color:var(--text)}
.iconbtn:hover{color:var(--accent-text)}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;border:1.5px solid var(--accent);background:transparent;color:var(--accent-text);font-size:13px;font-weight:500}
.chip.on{background:var(--accent);color:var(--on-accent)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface2);color:var(--muted);white-space:nowrap}
.tag.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tag.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

/* Kad dan senarai */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:16px}
.section{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}
.section h2{font-size:17px}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.stat{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px}
.stat b{display:block;font-size:30px;line-height:1.2;margin-top:14px}
.stat span{display:block;padding-right:44px;color:var(--muted);font-size:13px;line-height:1.3}
.stat .ico{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)}
.list{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-align:left}
button.row:hover{border-color:var(--accent)}
.row .grow{flex:1;min-width:0}
.row .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface2);color:var(--accent-text);font-weight:700;flex-shrink:0}
.chev{color:var(--muted)}
.empty{padding:36px 12px;text-align:center;color:var(--muted)}
.search{display:flex;align-items:center;gap:10px;padding:0 16px;min-height:46px;border-radius:999px;background:var(--surface2);color:var(--muted);margin-bottom:14px}
.search input{flex:1;border:0;background:transparent;outline:0;min-height:44px;color:var(--text)}

/* Borang: medan bergaris bawah */
label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
input,select{width:100%;min-height:44px;padding:8px 0;border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;outline:0;color:var(--text)}
input:focus,select:focus{border-bottom-color:var(--accent)}
select option{background:var(--surface);color:var(--text)}
input:disabled,select:disabled{opacity:.6}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.fields>div{min-width:0}
.top select{width:auto;min-width:130px;max-width:190px;padding:0 36px 0 16px;min-height:44px;border:0;border-radius:999px;background:var(--surface2);font-weight:600;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.top select:disabled{opacity:1;background-image:none;padding-right:16px}
.error{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);padding:11px 14px;border-radius:12px;margin-bottom:14px;font-size:13px}

/* Suis permission */
.perm{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:14px;margin:0;cursor:pointer}
.perm input{appearance:none;width:46px;height:28px;min-height:28px;padding:0;border:0;border-radius:999px;background:var(--surface2);position:relative;flex-shrink:0;cursor:pointer;transition:background .15s}
.perm input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.perm input:checked{background:var(--accent)}
.perm input:checked::after{transform:translateX(18px);background:#fff}
.perm input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Modal / helaian bawah */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:#0009;backdrop-filter:blur(4px)}
.modal{width:min(560px,100%);max-height:92vh;overflow:auto;padding:24px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.modal-head h2{font-size:20px}
.modal .actions{margin-top:22px}
.modal .actions .btn:first-child{flex:1}
.seg{display:flex;gap:8px}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kv b{display:block;font-weight:600;overflow-wrap:anywhere}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:40;padding:12px 22px;border-radius:999px;font-weight:500;font-size:14px;box-shadow:var(--shadow);max-width:calc(100vw - 32px);background:var(--text);color:var(--bg)}
.toast.bad{background:var(--bad);color:#fff}

/* Log masuk */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:min(400px,100%)}
.login-card .brand{flex-direction:column;align-items:flex-start;padding:0 0 28px}
.login-card .brand-mark{width:72px;height:72px}
.login-card .wordmark{font-size:26px}
.login-card h1{font-size:28px;margin-bottom:24px}
.login-card .field{margin-bottom:18px}
.login-card .btn{margin-top:14px}
.login-theme{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:10px}
.lang-seg .chip{min-height:36px;padding:0 12px}

/* Loceng notifikasi */
.bell{position:relative}
.bell-badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.bell-badge[hidden]{display:none}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Baris dengan tindakan */
.row{flex-wrap:wrap}
.row .acts{display:flex;gap:8px;flex-wrap:wrap;flex-basis:100%;padding-left:58px}
.row.noav .acts{padding-left:0}
.btn.sm.danger{padding:0 14px}
.tabbar .tab{min-width:0}

/* Floor Plan */
.floor-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.floor-bar output{min-width:48px;text-align:center;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.floor-bar .sp{flex:1}
.split{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start}
.canvas{position:relative;height:min(64vh,600px);min-height:320px;overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--canvas);touch-action:none;overscroll-behavior:contain;cursor:grab}
.floor-space{position:relative}
.floor-world{position:absolute;left:0;top:0;width:1600px;height:1100px;transform-origin:0 0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;opacity:1}
.room{position:absolute;min-width:60px;min-height:40px;padding:6px;overflow:auto;touch-action:none;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--canvas))}
.room{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.room strong{display:block;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.room.openable{cursor:pointer;transition:background .15s,border-color .15s}
.room.openable:hover,.room.openable:focus-visible{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:var(--accent)}
.room-edit{display:block;width:100%;min-height:32px;margin-bottom:6px;padding:0;border:0;border-bottom:1px solid var(--accent);background:transparent;color:var(--accent-text);text-align:left;font-size:12px;font-weight:600}
.resize-handle{position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 55%,var(--accent) 56%);border-bottom-right-radius:12px;cursor:nwse-resize;touch-action:none}
.tray .item .t.own{color:var(--fp-own);background:var(--fp-own-bg);padding:1px 8px;border-radius:8px;display:inline-block}
.tray .item .t.borrow{color:var(--fp-borrow)}
.tray .item .t.school{color:var(--fp-school)}
.fp-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;font-size:12px;color:var(--muted)}
.fp-legend span{display:inline-flex;align-items:center;gap:6px}
.fp-legend i{width:10px;height:10px;border-radius:50%;background:currentColor}
.fp-legend .own{color:var(--fp-own)}.fp-legend .own i{box-shadow:0 0 0 2px var(--fp-own-bg)}.fp-legend .borrow{color:var(--fp-borrow)}.fp-legend .school{color:var(--fp-school)}
.fp-legend b{font-weight:500;color:var(--text)}
.tray{padding:16px;border:1.5px dashed color-mix(in srgb,var(--warn) 60%,transparent);border-radius:20px;background:var(--surface)}
.tray h3{font-size:14px;margin-bottom:12px}
.tray-items{display:flex;flex-direction:column;gap:10px}
.tray .item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--surface2)}
.tray .item .t{font-weight:600}
.tray .item .btn{margin-top:8px;width:100%}

@media(max-width:860px){
  .app{display:block}
  .side{display:none}
  .main{padding:18px 16px 110px}
  .top h1{font-size:22px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat:first-child{grid-column:1/-1}
  .stat{padding:14px}.stat b{font-size:26px;margin-top:8px}
  .split{grid-template-columns:minmax(0,1fr)}
  .hide-m{display:none}
  .fields{grid-template-columns:1fr}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;padding:4px 0;border:0;border-radius:14px;background:transparent;color:var(--muted);font-size:10px}
  .tab.active{color:var(--accent-text)}
  .tab .icon{width:22px;height:22px}
  .overlay{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:90vh;border-radius:26px 26px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
  .toast{bottom:92px}
  .top .theme-btn{display:none}
  .tray{order:-1;padding:12px}
  .tray.none{display:none}
  .tray h3{margin-bottom:10px}
  .tray-items{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none}
  .tray .item{flex:0 0 min(210px,70%);scroll-snap-align:start}
  .canvas{height:46vh;min-height:280px}
  .floor-bar{gap:6px}
  .floor-bar .iconbtn{width:38px;height:38px}
  .floor-bar .chip{min-height:34px;padding:0 12px}
  .floor-bar .btn .lbl{display:none}
  .floor-bar .btn.sm{padding:0 12px}
  .top select{min-width:110px;max-width:150px}
  .kv{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Tetapan: pemilih warna aksen */
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0;border:0;background:transparent;color:var(--muted);font-size:12px}
.swatch i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sw);color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px transparent;transition:box-shadow .15s}
.swatch.on{color:var(--text);font-weight:600}
.swatch.on i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sw)}
.swatch .icon{width:22px;height:22px;stroke-width:2.4}
.setting{margin-bottom:26px}
.setting h2{font-size:15px;margin-bottom:12px}

/* Foto aset dan lampiran */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Passport aset: foto besar, lencana status pada foto, butiran 2-3 lajur, kemudian tab */
.ph-hero{--tone:var(--muted);position:relative;margin-bottom:16px}
.ph-hero.ok{--tone:var(--ok)}.ph-hero.warn{--tone:var(--warn)}.ph-hero.bad{--tone:var(--bad)}
.ph-frame{position:relative}
.ph-main{position:relative;display:grid;place-items:center;align-content:center;gap:8px;width:100%;aspect-ratio:4/3;max-height:46vh;padding:0;overflow:hidden;border-radius:22px;border:1.5px solid color-mix(in srgb,var(--tone) 55%,var(--line));background:var(--surface2);color:var(--muted);font-size:13px;box-shadow:0 10px 34px -14px var(--tone)}
.ph-main .icon{width:34px;height:34px}
.ph-main.empty{border-style:dashed;color:var(--accent-text)}
.ph-main.has{display:block}
.ph-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-status{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:7px 14px 7px 11px;border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid color-mix(in srgb,var(--tone) 50%,transparent);font-size:13px;font-weight:600;color:var(--text)}
.ph-status small{font-weight:400;color:var(--muted);font-size:11px}
.ph-status .dot{width:9px;height:9px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 0 var(--tone);animation:ph-pulse 2.4s ease-out infinite}
@keyframes ph-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tone) 60%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
@media(prefers-reduced-motion:reduce){.ph-status .dot{animation:none}}
.ph-strip::before,.ph-strip::after{content:'';margin:auto}
.ph-strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.ph-strip:empty{display:none}
.ph-thumb{flex:0 0 58px;height:58px;padding:0;overflow:hidden;border-radius:14px;border:1.5px solid var(--line);background:var(--surface2);opacity:.7;display:grid;place-items:center}
.ph-thumb.on{opacity:1;border-color:var(--accent)}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-thumb.add{border-style:dashed;color:var(--accent-text);opacity:1}
.ph-note{margin:0;align-self:center}
.ph-name{font-size:20px;line-height:1.25;margin:0 0 14px;overflow-wrap:anywhere}
.ph-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ph-kv label{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.ph-kv b{display:block;font-weight:600;font-size:14px;overflow-wrap:anywhere}
@media(min-width:480px){.ph-kv{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ph-tabs{flex-wrap:nowrap;gap:6px;position:sticky;bottom:0;z-index:2;padding:12px 0 calc(6px + env(safe-area-inset-bottom));margin-top:4px;background:var(--surface)}
.ph-tabs .chip{flex:1 1 0;min-width:0;justify-content:center;min-height:32px;padding:0 4px;font-size:12px;white-space:nowrap}
.ph-body{margin-bottom:12px}
.ph-st{display:none;margin-left:10px;vertical-align:middle}
.ph-top.compact .ph-st{display:inline-block}
.ph-top.compact .ph-hero,.ph-top.compact .ph-kv{display:none}
.ph-top.compact .ph-name{margin-bottom:12px}
.ph-body:empty{display:none}
.viewer{display:block;max-width:100%;max-height:60vh;margin:0 auto 16px;border-radius:14px;background:var(--surface2)}
.file-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.file-row a{flex:1;min-width:0;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.file-row a:hover{color:var(--accent-text)}
.file-row .muted{flex-shrink:0}
input[type=file]{padding:10px 0;min-height:0;border:0;color:var(--muted)}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 16px;border:0;border-radius:999px;background:var(--surface2);color:var(--text);font:inherit;cursor:pointer}
@media(max-width:860px){.swatches{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 4px}.swatch i{width:40px;height:40px}.swatch{font-size:10px}}

/* Rangka pemuat */
.skeleton{display:flex;flex-direction:column;gap:10px}
.sk-row{height:64px;border-radius:18px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.sk-row{animation:none}}

/* Kategori aset */
.cat-chips{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cat-chips .chip{flex:0 0 auto;gap:8px;min-height:34px;padding:0 14px}
.cat-chips .n{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.linkbtn{margin-left:10px;padding:2px 0;border:0;background:none;color:var(--accent-text);font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.linkbtn.bad{color:var(--bad)}
.cat-row{display:flex;align-items:center;gap:6px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:500}
.cat-row .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.cat-add{display:flex;gap:8px;margin-top:14px}
.cat-add input{flex:1;min-width:0}

/* Kata laluan: papar/sembunyi; butang salin; pilihan peranan log masuk */
.pw{position:relative}
.pw input{padding-right:46px}
.pw-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted)}
.pw-toggle[aria-pressed=true]{color:var(--accent-text)}
.copybtn{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:6px;padding:0;vertical-align:middle;border:0;border-radius:50%;background:var(--surface2);color:var(--accent-text)}
.copybtn .icon{width:16px;height:16px}
.modal-head h2 .copybtn{margin-left:10px}
.role-seg{gap:6px}
.role-seg .chip{flex:1 1 0;justify-content:center;padding:0 6px}

.login-info{white-space:normal;overflow:visible;text-overflow:clip}
.login-info .bad{color:var(--bad)}

/* Halaman Klinik (Admin) */
.clinic-card{padding:16px;margin-bottom:14px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.cc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.clinic-card .list{margin-bottom:10px}
.clinic-card .actions .btn{flex:0 0 auto}

button.stat{transition:border-color .15s,transform .1s}
button.stat:hover{border-color:var(--accent)}
button.stat:active{transform:scale(.98)}
.filter-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 6px 6px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);font-size:13px;font-weight:500}
.filter-pill .icon{width:16px;height:16px}
.filter-pill button{width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:12px}
.logo-ink{fill:var(--ink);stroke:var(--ink)}
.logo-top{fill:#f26a10;stroke:#f26a10}

/* Pinjaman KEW.PA-9 */
.steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.steps li{display:grid;gap:2px;padding-left:26px;position:relative;color:var(--muted)}
.steps li::before{content:'';position:absolute;left:2px;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line)}
.steps li.done{color:var(--text)}
.steps li.done::before{background:var(--accent);border-color:var(--accent)}
.steps small{color:var(--muted)}
.loan-actions{flex-wrap:wrap}
.loan-actions .btn{flex:1 1 auto;text-decoration:none}
input[type=date]{min-height:44px}

/* Senarai aset dalam bilik (Floor Plan) */
.room-asset{cursor:default}
.asset-link{padding:2px 0;border:0;background:none;font:inherit;font-weight:600;text-align:left;text-decoration:underline;text-underline-offset:3px}
.asset-link.own{color:var(--fp-own);background:var(--fp-own-bg);padding:1px 8px;border-radius:8px}.asset-link.borrow{color:var(--fp-borrow)}.asset-link.school{color:var(--fp-school)}

.picker .search{margin-bottom:10px}
.pick-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.pick-bar .linkbtn{margin:0}
.pick-list{max-height:min(44vh,340px);overflow-y:auto;border-top:1px solid var(--line)}
.pick input{width:24px;height:24px;min-height:24px;border-radius:7px;border:2px solid var(--muted);background:transparent}
.pick input::after{display:none}
.pick input:checked{background:var(--accent);border-color:var(--accent)}
.pick input:checked::before{content:'';position:absolute;left:6px;top:1px;width:6px;height:12px;border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.doc-actions .btn{flex:1 1 140px;white-space:nowrap;padding:0 12px}
.doc-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-card{padding:12px 0;border-bottom:1px solid var(--line)}
.doc-card .t{font-weight:600}
.doc-files{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.doc-thumb{width:84px;height:84px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;font-size:11px;flex-direction:column;gap:4px}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-thumb.pdf span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[hidden]{display:none!important}
.approver-set{margin-bottom:14px}
.timeline{display:grid}
.tl-item{padding:14px 0;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:0}
.tl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.tray-note{margin:0 0 10px;font-size:12px}
.imp-list{margin:8px 0 0;padding-left:18px;font-size:12px;max-height:200px;overflow:auto}
.imp-list li{margin:2px 0}
details summary{cursor:pointer;color:var(--accent-text);font-size:13px}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);max-height:calc(100vh - 260px)}
.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs,14px)}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surface2);text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td,.tbl tbody tr:focus-visible td{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.tbl tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .c-name{min-width:180px;white-space:normal}.tbl .c-note{min-width:220px;white-space:normal}
.tbl .c-photo{width:1%;padding-right:0}
.tbl .c-no{font-weight:600}
.avatar.sm{width:32px;height:32px;border-radius:10px}.avatar.sm svg{width:16px;height:16px}
.fs-s{--fs:12px}.fs-m{--fs:14px}.fs-l{--fs:17px}.fs-xl{--fs:20px}
.plabel{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
.ph-danger{margin-top:14px}
@media(max-width:560px){.floor-bar .btn .lbl{display:none}.floor-bar .btn.sec{padding:0 14px}}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.filter-block{margin-bottom:10px}.loc-select{width:100%;max-width:360px;margin-bottom:6px}.asset-count{margin:0 0 8px;font-size:12px}.filter-block .plabel{margin:0 0 4px}
.modal-head.has-menu{position:relative}
.modal-head .kebab{position:relative;margin-left:auto}
.modal-head .ph-back{margin-left:auto}
.modal-head .ph-back[hidden]{display:none}
.modal-head .ph-back:not([hidden]) + .kebab{margin-left:0}
.kebab-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.35);z-index:30;display:grid;gap:2px}
.kebab-menu[hidden]{display:none}
.kebab-item{display:block;width:100%;text-align:left;padding:11px 14px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px}
.kebab-item:hover,.kebab-item:focus-visible{background:var(--surface2)}
.kebab-item.bad{color:var(--bad)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 0 12px;font-size:14px}
.crumbs .linkbtn{margin:0}.crumbs .sep{color:var(--muted)}
.guide-tools{display:flex;gap:12px;align-items:center;margin:0 0 10px}
.guide-tools .linkbtn{margin:0}
.guide-note{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--surface2)}
.room-list{max-height:340px;overflow:auto;margin-bottom:6px}.setting input[type=search]{width:100%;margin-bottom:8px}
.asset-select-note{font-size:12px;margin-top:4px}
.combo{position:relative}
.combo select{display:none}
.combo-list{position:absolute;left:0;right:0;top:46px;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.25);max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:4px}
.combo-list[hidden]{display:none}
.combo-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:14px;overflow-wrap:anywhere}
.combo-item small{display:block;color:var(--muted);font-size:12px}
.combo-item:hover,.combo-item.on{background:var(--surface2)}
.combo-list .empty{padding:12px}
.fields.one{grid-template-columns:1fr}
.asset-card{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.asset-card small{color:var(--muted)}
.jt-chips{flex-wrap:wrap}
textarea{width:100%;min-height:84px;padding:10px 0;border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;outline:0;color:var(--text);font:inherit;resize:vertical}
textarea:focus{border-bottom-color:var(--accent)}
.fold{margin-top:16px}
.fold summary{line-height:1.5}
.fold-sum{color:var(--muted)}
.meet-dot{display:inline-block;width:5px;height:5px;margin-left:5px;border-radius:50%;background:#e5334b;box-shadow:0 0 0 1px color-mix(in srgb,#e5334b 28%,transparent);vertical-align:middle;flex:none}
.asset-link .meet-dot{margin:0 4px 1px 0}
.chip .meet-dot{margin:0 6px 0 0}.chip.on .meet-dot{box-shadow:0 0 0 1px #fff}
.fp-legend .meet-dot{margin:0}
.meet-switch{display:inline-flex;min-height:0;padding:0;border:0;vertical-align:middle;margin-left:4px}
.ph-name .meet-dot{margin-left:7px}
.tab-actions{margin:0 0 10px}

/* Passport tanpa foto: bingkai rendah supaya butiran naik ke atas */
.ph-hero.nophoto .ph-main{aspect-ratio:auto;height:84px;grid-auto-flow:column;justify-content:end;gap:8px;padding:0 18px}
.ph-hero.nophoto .ph-main .icon{width:24px;height:24px}
.ph-hero.nophoto .ph-status{bottom:auto;top:50%;transform:translateY(-50%)}
/* Tetapan: kumpulan Peribadi dan Klinik */
.setting-group{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-top:4px}
.setting + .setting-group{margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
/* Pergerakan: bilangan dan suis paparan */
.list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;font-size:13px}
/* Aset: panel penapis dan ringkasan penapis aktif */
.filter-panel{padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:12px}
.filter-panel[hidden]{display:none}
.filter-panel .cat-chips{margin-bottom:10px}
.btn.sec.on{background:color-mix(in srgb,var(--accent) 16%,var(--surface2));color:var(--accent-text)}
.fbtn{position:relative}
.fbadge{position:absolute;top:-3px;right:-3px;display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700}
.fbadge[hidden]{display:none}
.active-filters{margin:0 0 8px}
.active-filters[hidden]{display:none}
.chip:disabled{opacity:.45;cursor:not-allowed}