/* medest-tema.css — rupa website ikut app QMS Lapangan (reka bentuk W3, 30/9/2026). Dimuat SELEPAS medest.css. Cuma tetapkan semula pemboleh ubah warna lama + gaya komponen; tiada logik. Tema: (disimpan ikut user). */ html[data-theme="gelap"]{ --t-bg:#0F1413;--t-sf:#182020;--t-sf2:#1F2928;--t-sf3:#26312F;--t-ink:#ECF2F0;--t-ink2:#C3CFCC;--t-mu:#9FAEAA; --t-ln:#2A3533;--t-ln2:#3A4744;--t-ac:#63C7B8;--t-aci:#06201C;--t-acs:#163532; --t-wa:#F0B45C;--t-was:#3A2A12;--t-ok:#6FD69A;--t-oks:#15321F;--t-bad:#FF8A7A;--t-bads:#3D1A15; --t-pu:#B9A5F5;--t-pus:#2A2342;--t-cy:#6CCBE0;--t-cys:#15303A;--t-doc:#1C2740;--t-docf:#AFC3F0; --t-bayang:0 8px 28px rgba(0,0,0,.45);--t-kaca:rgba(15,20,19,.86);--t-on:#0B1413; color-scheme:dark; } html[data-theme="cerah"]{ --t-bg:#F5F2EC;--t-sf:#FFFFFF;--t-sf2:#EAE6DE;--t-sf3:#E1DCD2;--t-ink:#15201E;--t-ink2:#3A4744;--t-mu:#56625F; --t-ln:#DDD8CE;--t-ln2:#C9C3B7;--t-ac:#0B645D;--t-aci:#FFFFFF;--t-acs:#DCEBE7; --t-wa:#8A5200;--t-was:#F6E7CC;--t-ok:#1D6A3C;--t-oks:#DDEFE3;--t-bad:#A3261B;--t-bads:#F7E0DC; --t-pu:#5B3FA8;--t-pus:#ECE6F8;--t-cy:#0E6A80;--t-cys:#DDF0F4;--t-doc:#E3EAF4;--t-docf:#1E3A63; --t-bayang:0 6px 22px rgba(21,32,30,.10);--t-kaca:rgba(245,242,236,.88);--t-on:#FFFFFF; color-scheme:light; } /* Pemboleh ubah lama → token baru (semua halaman lama ikut sendiri) */ html[data-theme]{ --bg-base:var(--t-bg);--bg-surface:var(--t-sf);--bg-card:var(--t-sf);--bg-elevated:var(--t-sf2);--bg-hover:var(--t-sf3); --bg-darker:var(--t-bg);--text:var(--t-ink); --border:var(--t-ln);--border-light:var(--t-ln2); --blue:var(--t-ac);--blue-dim:var(--t-acs);--blue-glow:var(--t-acs); --primary:var(--t-ac);--primary-dim:var(--t-acs); --emerald:var(--t-ok);--emerald-dim:var(--t-oks);--green:var(--t-ok);--green-dim:var(--t-oks); --amber:var(--t-wa);--amber-dim:var(--t-was);--orange:var(--t-wa);--orange-dim:var(--t-was); --red:var(--t-bad);--red-dim:var(--t-bads); --purple:var(--t-pu);--purple-dim:var(--t-pus);--cyan:var(--t-cy);--cyan-dim:var(--t-cys); --text-primary:var(--t-ink);--text-secondary:var(--t-ink2);--text-muted:var(--t-mu); --radius:14px;--radius-sm:10px;--radius-lg:18px;--radius-xl:24px; --shadow:var(--t-bayang);--shadow-lg:var(--t-bayang); --nav-h:68px; --f-badan:'Figtree',system-ui,-apple-system,sans-serif;--f-serif:'Newsreader',Georgia,serif;--f-mono:'IBM Plex Mono',ui-monospace,monospace; } html[data-theme]{font-family:var(--f-badan);font-size:15px} html[data-theme] body{background:var(--t-bg);color:var(--t-ink)} html[data-theme] a{color:var(--t-ac)} html[data-theme] .mono,html[data-theme] .be-status,html[data-theme] .be-copy,html[data-theme] .qs-be,html[data-theme] .dup-be{font-family:var(--f-mono)} html[data-theme] ::-webkit-scrollbar-thumb{background:var(--t-ln2)} html[data-theme] :focus-visible{outline:2px solid var(--t-ac);outline-offset:2px} /* ── Komponen lama: warna teks atas aksen, kad, borang, modal ── */ html[data-theme] .btn{border-radius:12px;font-weight:600} html[data-theme] .btn-primary,html[data-theme] .btn-primary:hover{background:var(--t-ac);color:var(--t-aci);border-color:var(--t-ac)} html[data-theme] .btn-primary:hover{filter:brightness(1.06)} html[data-theme] .btn-ghost{background:var(--t-sf);border:1px solid var(--t-ln);color:var(--t-ink)} html[data-theme] .btn-ghost:hover{background:var(--t-sf2)} html[data-theme] .btn-danger{background:var(--t-bads);color:var(--t-bad);border:1px solid transparent} html[data-theme] .filter-btn.active,html[data-theme] .view-btn.active{background:var(--t-ac);color:var(--t-aci);border-color:var(--t-ac)} html[data-theme] .card,html[data-theme] .kpi,html[data-theme] .clinic-group,html[data-theme] .asset-item,html[data-theme] .facility-mini,html[data-theme] .tool-item{border-color:var(--t-ln);box-shadow:none} html[data-theme] .card:hover{border-color:var(--t-ln2)} html[data-theme] .section-title{color:var(--t-mu);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:1.2px} html[data-theme] .page-inner > div > h2,html[data-theme] .modal-header h3,html[data-theme] .greeting h2{font-family:var(--f-serif);font-weight:600;letter-spacing:0} html[data-theme] .form-row input,html[data-theme] .form-row textarea,html[data-theme] .form-row select,html[data-theme] .search-box,html[data-theme] input[type="text"],html[data-theme] input[type="search"],html[data-theme] input[type="date"],html[data-theme] input[type="number"],html[data-theme] select,html[data-theme] textarea{background:var(--t-sf);color:var(--t-ink);border-color:var(--t-ln)} html[data-theme] .search-box:focus-within,html[data-theme] .form-row input:focus,html[data-theme] .form-row textarea:focus,html[data-theme] .form-row select:focus{border-color:var(--t-ac);box-shadow:0 0 0 3px var(--t-acs)} html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--t-mu)} html[data-theme] .modal-overlay{background:rgba(0,0,0,.55)} html[data-theme] .modal-sheet,html[data-theme] .detail-overlay,html[data-theme] .photo-fullpage{background:var(--t-bg);color:var(--t-ink)} html[data-theme] .modal-sheet{border:1px solid var(--t-ln)} html[data-theme] .badge-pill{border-radius:8px;font-weight:700} html[data-theme] .badge-blue{background:var(--t-acs);color:var(--t-ac)} /* Teks atas latar warna penuh: gelap = teks gelap (warna aksen cerah), cerah = putih */ html[data-theme] .topnav-tabs .badge,html[data-theme] .bottomnav .badge,html[data-theme] .cal-day.selected .dow,html[data-theme] .cal-day.selected .dom,html[data-theme] .month-day.selected, html[data-theme] .btn-toggle-ppm:hover,html[data-theme] .btn-toggle-ppm.done:hover,html[data-theme] .btn-danger:hover,html[data-theme] .import-step.active .step-num,html[data-theme] .import-step.done .step-num, html[data-theme] .import-type-option .option-check,html[data-theme] .photo-compact-thumb .photo-del-edit,html[data-theme] .be-copy:hover,html[data-theme] .be-copy.copied,html[data-theme] .kewpa-icon:hover, html[data-theme] .kewpa-icon.copied,html[data-theme] .be-status:hover,html[data-theme] .be-status.incomplete:hover,html[data-theme] .be-status.complete:hover,html[data-theme] .be-status.copied{color:var(--t-on)} html[data-theme] .glass{background:var(--t-kaca)} html[data-theme] .kpi-blue,html[data-theme] .kpi-amber,html[data-theme] .kpi-red,html[data-theme] .kpi-green,html[data-theme] .kpi-purple{background:var(--t-sf)} html[data-theme] .kpi .kpi-value{font-family:var(--f-serif);font-weight:600;letter-spacing:0} html[data-theme] .import-step.active .step-num{box-shadow:0 0 0 4px var(--t-acs)} html[data-theme] .bottomnav{background:var(--t-kaca);border-top-color:var(--t-ln)} html[data-theme] .bottomnav button.active{color:var(--t-ac)} html[data-theme] .bottomnav button.active::before{background:var(--t-ac)} html[data-theme] .toast-msg{white-space:pre-line;max-width:min(560px,90vw);border:1px solid var(--t-ln);font-weight:600} html[data-theme] .empty-state{color:var(--t-mu)} html[data-theme] .detail-top,html[data-theme] .photo-fullpage-header{background:var(--t-kaca);border-bottom:1px solid var(--t-ln)} html[data-theme] .detail-body h2{font-family:var(--f-serif);font-weight:600} /* ── Login ── */ html[data-theme] .login-header .logo{font-size:0;width:52px;height:52px;margin:0 auto .9rem;border-radius:16px;background:var(--t-ac);display:flex;align-items:center;justify-content:center} html[data-theme] .login-header .logo::before{content:'M';font-size:24px;font-weight:700;color:var(--t-aci);font-family:var(--f-badan)} /* ── Bar atas W3 ── */ html[data-theme] .topnav{background:var(--t-kaca);border-bottom:1px solid var(--t-ln);padding:0 24px;gap:14px;justify-content:flex-start} .w3-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t-ink)!important;cursor:pointer;background:none;border:none;padding:0;font:inherit} .w3-logo i{width:32px;height:32px;border-radius:10px;background:var(--t-ac);color:var(--t-aci);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:15px} .w3-logo b{font-weight:700;letter-spacing:.6px;font-size:16px} html[data-theme] .topnav-brand{gap:12px} html[data-theme] .topnav-brand .tag{background:transparent;color:var(--t-mu);letter-spacing:1.4px;font-size:.68rem;font-weight:700;padding:0} html[data-theme] .topnav-tabs{margin-left:10px} html[data-theme] .topnav-tabs button{color:var(--t-mu);font-weight:600;font-size:.9rem;border-radius:10px} html[data-theme] .topnav-tabs button:hover{color:var(--t-ink);background:var(--t-sf2)} html[data-theme] .topnav-tabs button.active{color:var(--t-ac);background:var(--t-acs)} html[data-theme] .topnav-meta{margin-left:auto;gap:8px;position:relative;font-size:.8rem} .w3-ib{width:40px;height:40px;border-radius:20px;border:1px solid var(--t-ln);background:var(--t-sf);color:var(--t-ink);display:inline-flex;align-items:center;justify-content:center;position:relative;padding:0;flex-shrink:0;cursor:pointer} .w3-ib:hover{background:var(--t-sf2)} .w3-ib svg{width:18px;height:18px} .w3-ib .w3-nb{position:absolute;top:-5px;right:-5px;background:var(--t-wa);color:#1B1203;font-size:11px;font-weight:700;border-radius:9px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center} html[data-theme="cerah"] .w3-ib .w3-nb{color:#fff} .w3-chipnav{height:38px;padding:0 14px;border-radius:12px;border:none;background:var(--t-sf2);color:var(--t-ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit} .w3-chipnav svg{width:16px;height:16px} .w3-avatar{width:38px;height:38px;border-radius:19px;background:var(--t-acs);color:var(--t-ac);display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;border:none;font-size:15px;font-family:inherit} .w3-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:250px;background:var(--t-sf);border:1px solid var(--t-ln);border-radius:16px;box-shadow:var(--t-bayang);padding:6px;z-index:300;display:none} .w3-menu.buka{display:block} .w3-menu button,.w3-menu a{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--t-ink);cursor:pointer} .w3-menu button:hover,.w3-menu a:hover,.w3-menu button:focus-visible,.w3-menu a:focus-visible{background:var(--t-sf2)} .w3-menu .w3-mlbl{font-size:11px;letter-spacing:1.2px;font-weight:700;color:var(--t-mu);padding:10px 12px 4px;text-transform:uppercase} .w3-menu hr{border:none;border-top:1px solid var(--t-ln);margin:6px 4px} .w3-menu .bahaya{color:var(--t-bad)} .w3-menu .w3-siapa{padding:10px 12px 8px;font-size:13px;color:var(--t-mu)} .w3-menu .w3-siapa b{display:block;color:var(--t-ink);font-size:14px} @media(max-width:768px){ html[data-theme] .topnav{padding:0 12px;gap:8px} .w3-logo b{display:none} .w3-chipnav span{display:none} } /* ── Home W3 ── */ .w3-home{max-width:1180px;margin:0 auto;padding:22px 24px 40px} .w3-hero{display:flex;flex-direction:column;gap:16px;padding:8px 0 22px} .w3-hero h1{font-family:var(--f-serif);font-weight:600;font-size:52px;line-height:1;margin:0;color:var(--t-ink)} .w3-hero .w3-sapa{color:var(--t-mu);font-size:14px;margin-bottom:-6px} .w3-cari{position:relative} .w3-cari label{display:flex;align-items:center;gap:12px;height:60px;border-radius:18px;border:1.5px solid var(--t-ac);background:var(--t-sf);padding:0 18px;color:var(--t-mu)} .w3-cari label svg{width:22px;height:22px;flex-shrink:0} html[data-theme] .w3-cari input{flex:1;border:none!important;background:transparent!important;font-family:var(--f-mono);font-size:18px;color:var(--t-ink);outline:none;box-shadow:none!important;padding:0;min-width:0} html[data-theme] .w3-cari .quick-search-results{top:66px;border-radius:16px;border:1px solid var(--t-ln);background:var(--t-sf);box-shadow:var(--t-bayang)} .w3-pintas{display:flex;gap:10px;flex-wrap:wrap} .w3-pintas button{height:42px;padding:0 16px;border-radius:21px;border:1px solid var(--t-ln);background:var(--t-sf);color:var(--t-ink);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit} .w3-pintas button:hover{border-color:var(--t-ac)} .w3-pintas svg{width:16px;height:16px} .w3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start} .w3-lajur{display:flex;flex-direction:column;gap:16px;min-width:0} @media(max-width:1000px){.w3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.w3-grid{grid-template-columns:minmax(0,1fr)}.w3-hero h1{font-size:38px}.w3-home{padding:14px 14px 30px}} .w3-kad{background:var(--t-sf);border:1px solid var(--t-ln);border-radius:18px;overflow:hidden} .w3-kad-k{padding:16px 18px 10px} .w3-kad-t{display:flex;align-items:center;gap:8px} .w3-lbl{font-size:11.5px;letter-spacing:1.3px;font-weight:700;color:var(--t-mu);text-transform:uppercase} .w3-n{display:flex;align-items:baseline;gap:10px;margin-top:4px} .w3-n b{font-family:var(--f-serif);font-size:34px;font-weight:600;line-height:1.1} .w3-n span{font-weight:600;font-size:15px} .w3-sub{color:var(--t-mu);font-size:13px;margin-top:2px} .w3-baris{display:flex;align-items:center;gap:12px;padding:9px 18px;border:none;border-top:1px solid var(--t-ln);cursor:pointer;background:none;width:100%;text-align:left;font:inherit;color:inherit} button.w3-baris:hover{background:var(--t-sf2)} div.w3-baris{cursor:default} .w3-baris .d{width:7px;height:7px;border-radius:4px;flex-shrink:0} .w3-baris .t{flex:1;min-width:0} .w3-baris .a,.w3-baris .b{display:block} .w3-baris .a{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w3-baris .a.m{font-family:var(--f-mono)} .w3-baris .b{color:var(--t-mu);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w3-baris .c{color:var(--t-mu);font-size:12.5px;max-width:40%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .w3-baris .nn{min-width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;padding:0 8px} .w3-cincin{display:flex;align-items:center;gap:16px;margin:8px 0 4px} .w3-jalur{height:8px;border-radius:4px;background:var(--t-sf2);overflow:hidden;margin-top:10px} .w3-jalur i{display:block;height:100%;border-radius:4px;background:var(--t-ac)} .w3-mg{display:flex;gap:8px;align-items:flex-end;height:84px;margin-top:10px} .w3-mg div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:12px;color:var(--t-mu)} .w3-mg div i{width:100%;border-radius:6px;background:var(--t-acs);display:block} .w3-mg div.kini i{background:var(--t-ac)} .w3-mg div.kini{color:var(--t-ink);font-weight:700} .w3-muat{padding:4px 18px 16px;color:var(--t-mu);font-size:13px} .w3-ralat{padding:4px 18px 16px;color:var(--t-mu);font-size:13px;display:flex;align-items:center;gap:8px} .w3-ralat button{margin-left:auto;background:none;border:1px solid var(--t-ln);border-radius:10px;color:var(--t-ac);font-weight:600;padding:6px 10px;cursor:pointer;font-family:inherit} .w3-lagi{display:block;padding:10px 18px 14px;border-top:1px solid var(--t-ln);font-size:13px;font-weight:600;color:var(--t-mu)} .w3-pautan{display:flex;gap:14px;align-items:center;padding:16px 18px;cursor:pointer;background:var(--t-sf);border:1px solid var(--t-ln);border-radius:18px;width:100%;text-align:left;font:inherit;color:var(--t-ink)} .w3-pautan:hover{border-color:var(--t-ac)} .w3-pautan svg{width:22px;height:22px;flex-shrink:0} .w3-pautan b{display:block;font-size:15px} .w3-pautan small{display:block;color:var(--t-mu);font-size:13px} .w3-kaki{text-align:center;color:var(--t-mu);font-size:13px;padding:20px 0 0} /* ── Susun aset (baru) ── */ .w3-susun{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:.25rem 0 1rem} .w3-susun label{font-size:12px;letter-spacing:1.1px;font-weight:700;color:var(--t-mu);text-transform:uppercase} html[data-theme] .w3-susun select{height:38px;border-radius:10px;border:1px solid var(--t-ln);padding:0 10px;font:inherit;font-size:14px;font-weight:600}