@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#15251f;--muted:#75817b;--line:#e6ece8;--paper:#f6f8f6;--green:#147d59;--green-dark:#0e6446;--green-soft:#e6f3ec;--orange:#c77921;--red:#b64444;--white:#fff;--shadow:0 16px 48px rgba(31,61,47,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand b{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.035em}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:#10281f;color:#e7f1eb;display:flex;flex-direction:column;padding:27px 18px 18px;z-index:2}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 36px}.brand b{display:block;font-size:15px;letter-spacing:.08em}.brand small{display:block;color:#91a99b;font-size:11px;margin-top:3px}.brand-mark{width:39px;height:39px;border-radius:13px;background:#2e9a6f;color:#fff;display:grid;place-items:center;font-weight:800;font-family:Manrope,sans-serif;letter-spacing:-.08em}.side-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:#8ca99a}.side-label{padding:0 10px 12px}.sidebar nav{display:grid;gap:5px}.nav-link{display:flex;align-items:center;gap:13px;padding:12px 11px;border-radius:9px;color:#b7c8bf;font-size:13px}.nav-link span{font-weight:500}.nav-link:hover,.nav-link.active{color:#fff;background:#204b38}.nav-link.active{box-shadow:inset 3px 0 #46c38d}.side-credit{margin-top:auto;color:#779183;font-size:10px;line-height:1.6;padding:15px 9px;border-top:1px solid #274237}.main-area{margin-left:248px;padding:30px 38px 20px;max-width:1800px}.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:26px}.topbar .eyebrow{color:#8a9890;margin:0 0 5px}.topbar h2{font-size:23px;margin:0}.profile{display:flex;align-items:center;gap:10px}.profile b,.profile small{display:block}.profile b{font-size:12px}.profile small{font-size:11px;color:var(--muted);margin-top:3px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);font-weight:700}.profile form{margin-left:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:10px 14px;font-weight:700;font-size:12px;transition:.15s ease}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--green);color:#fff}.btn.primary:hover{background:var(--green-dark)}.btn.secondary{background:#eef2ef;color:#41554a}.btn.danger{background:#fceded;color:var(--red)}.btn.text{background:transparent;color:#67766d;padding:8px}.btn.small{padding:7px 9px;font-size:11px;white-space:nowrap}.btn.wide{width:100%;padding:13px}.welcome{display:flex;align-items:center;justify-content:space-between;border-radius:14px;padding:25px 28px;margin-bottom:20px;background:linear-gradient(115deg,#e6f3eb,#f4f8f3 68%,#eaf4ec);border:1px solid #deebe1}.welcome .eyebrow{color:var(--green);margin-bottom:7px}.welcome h1{font-size:22px;margin-bottom:7px}.welcome p:last-child{color:#6c7b71;margin:0}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 12px rgba(36,64,49,.025)}.stat-card{padding:18px 19px}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card span{font-size:12px;font-weight:600}.stat-card strong{display:block;font:800 28px Manrope,sans-serif;letter-spacing:-.06em;margin:10px 0 6px}.stat-card small{font-size:10px}.orange{color:var(--orange)!important}.panel{margin-bottom:18px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:19px 20px;border-bottom:1px solid var(--line)}.panel-head h3{font-size:15px;margin:0 0 5px}.panel-head p{font-size:11px;color:var(--muted);margin:0}.link{color:var(--green);font-size:11px;font-weight:700}.table-wrap{overflow:auto;width:100%}table{border-collapse:collapse;width:100%;min-width:810px;text-align:left}th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#8a968f;background:#fafcfb;font-weight:700;white-space:nowrap}th,td{padding:12px 15px;border-bottom:1px solid #eff2f0;vertical-align:middle}td{font-size:11px;color:#526159}td b{font-size:12px;color:#24382e}td small{display:block;color:#98a29c;font-size:10px;margin-top:4px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfb}.badge{display:inline-flex;padding:5px 8px;border-radius:30px;font-size:10px;font-weight:700}.badge.neutral{background:#eef2ef;color:#5b6c62}.badge.masuk{background:#e6f3ec;color:#147d59}.badge.keluar{background:#fff1e5;color:#b16b1d}.actions{display:flex;gap:5px;align-items:center}.actions form{margin:0}.empty{text-align:center;padding:28px;color:#98a29c}.page-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.page-actions p{margin:0;font-size:12px}.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.form-grid{padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-stack{padding:20px;display:grid;gap:14px}.form-stack label,.form-grid label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#53645a}.form-stack input,.form-grid input,.form-grid select,.form-stack select,.form-grid textarea,.form-stack textarea{width:100%;border:1px solid #dfe7e2;background:#fff;border-radius:7px;padding:10px 11px;color:#24382e;outline:none;font-size:12px}.form-stack input:focus,.form-grid input:focus,.form-grid select:focus,.form-stack select:focus,.form-grid textarea:focus{border-color:#59a984;box-shadow:0 0 0 3px rgba(65,164,116,.1)}.span-2{grid-column:span 2}.hint{font-size:11px;color:var(--muted);padding:0 20px}.alert{border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:12px;line-height:1.5}.alert.success{background:#e7f5ec;color:#246947}.alert.error{background:#fff0ed;color:#9e3f39}.main-footer{padding:24px 0 8px;text-align:center;color:#9aa59e;font-size:10px}.modal{border:0;border-radius:13px;padding:0;width:min(620px,calc(100% - 28px));max-height:90vh;box-shadow:var(--shadow)}.modal::backdrop{background:rgba(12,33,24,.48);backdrop-filter:blur(2px)}.modal .form-stack{padding:0}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:21px 22px 0}.modal-head .eyebrow{color:var(--green);margin-bottom:5px}.modal-head h2{font-size:19px;margin:0}.close{border:0;background:#f0f3f1;width:28px;height:28px;border-radius:50%;font-size:19px;color:#526159}.modal .form-grid{padding-top:18px;padding-bottom:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 20px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 17% 15%,#e3f2e8,transparent 35%),radial-gradient(circle at 85% 85%,#e4efe7,transparent 33%),#f6f8f6}.login-card{width:min(420px,100%);padding:35px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.login-card .brand-mark{margin-bottom:22px}.login-card .eyebrow{color:var(--green);margin-bottom:8px}.login-card h1{font-size:24px;line-height:1.2;margin-bottom:9px}.muted{color:var(--muted)}.login-card>p.muted{font-size:12px;margin-bottom:24px}.login-card footer{text-align:center;color:#98a29c;font-size:10px;padding-top:22px}.login-card .alert{word-break:break-word}
@media(max-width:1050px){.sidebar{width:215px}.main-area{margin-left:215px;padding:25px 24px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}}
@media(max-width:700px){.sidebar{position:static;width:auto;padding:12px 15px}.brand{padding:0 5px 12px}.brand-mark{width:34px;height:34px}.side-label,.side-credit{display:none}.sidebar nav{display:flex;overflow:auto;gap:3px}.nav-link{padding:9px 10px;white-space:nowrap;font-size:11px}.nav-link span{display:inline}.main-area{margin:0;padding:18px 14px}.topbar{align-items:flex-start;gap:8px}.topbar h2{font-size:19px}.profile{gap:7px}.profile b{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile form{margin:0}.profile small{font-size:9px}.avatar{width:31px;height:31px}.welcome{align-items:flex-start;flex-direction:column;gap:16px;padding:20px}.welcome h1{font-size:19px}.stat-grid{gap:9px}.stat-card{padding:13px}.stat-card strong{font-size:23px}.stat-card span{font-size:10px}.stat-card small{font-size:9px}.panel-head{padding:15px}.page-actions{align-items:flex-start;flex-direction:column}.form-grid{padding:15px;gap:10px}.login-card{padding:27px 22px}}
.filter-actions{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.report-filter .form-grid{align-items:end}
.inline-review,.inline-return{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.inline-review input[name="review_note"],.inline-return input{width:120px;min-width:80px;padding:7px;border:1px solid var(--line);border-radius:6px;font-size:10px}.inline-return input[name="note"]{width:140px}.badge.diajukan,.badge.menunggu.persetujuan{background:#fff4df;color:#95630d}.badge.disetujui,.badge.dipinjam{background:#e6f3ec;color:#147d59}.badge.ditolak{background:#fceded;color:#b64444}.badge.dikembalikan{background:#edf0f4;color:#566270}
@media print{body{background:#fff;font-size:10px}.sidebar,.topbar,.filter-actions,.page-actions,.main-footer,.btn,.profile,form{display:none!important}.main-area{margin:0;padding:0;max-width:none}.panel{box-shadow:none;border:0;margin:0 0 12px}.panel-head{padding:8px 0}table{min-width:0;font-size:8px}th,td{padding:5px;border:1px solid #ccc}th{background:#eee!important;color:#111}.table-wrap{overflow:visible}.report-filter .form-grid{display:block;padding:0}.report-filter label{display:none}.report-filter{display:none}.badge{border:1px solid #aaa;background:#fff!important;color:#111!important}.topbar h2{font-size:18px}}
.map-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.map-intro .eyebrow{color:var(--green);margin-bottom:6px}.map-intro h1{font-size:22px;margin-bottom:6px}.map-intro p:last-child{margin:0;color:var(--muted);font-size:12px}.map-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}.map-card{position:relative;display:flex;flex-direction:column;min-height:174px;padding:17px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 12px rgba(36,64,49,.025);transition:.18s ease}.map-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b9d9c8}.map-card.selected{outline:2px solid var(--green);outline-offset:1px}.map-card-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:#e7f3ec;color:var(--green);font-size:18px;margin-bottom:12px}.map-card.department .map-card-icon{background:#edf0fc;color:#5765ac}.map-card.consumable .map-card-icon{background:#fff2df;color:#b7791f}.map-card-label{font-size:12px;font-weight:700;color:#617168}.map-card strong{font:800 26px Manrope,sans-serif;letter-spacing:-.06em;margin-top:5px}.map-card small{color:#8b9890;font-size:10px}.map-card-stock{color:var(--green);font-size:10px;font-weight:700;margin-top:auto;padding-top:12px}.map-card-arrow{position:absolute;right:16px;top:16px;color:#a2ada6;font-size:16px}.map-list{scroll-margin-top:20px}.map-search{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)}.map-search input{flex:1;min-width:140px;border:1px solid #dfe7e2;border-radius:7px;padding:10px 12px;font-size:12px;outline:none}.map-search input:focus{border-color:#59a984;box-shadow:0 0 0 3px rgba(65,164,116,.1)}
@media(max-width:1000px){.map-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.map-intro{align-items:flex-start;flex-direction:column}.map-intro h1{font-size:19px}.map-card-grid{gap:9px}.map-card{min-height:153px;padding:13px}.map-card strong{font-size:23px}.map-search{padding:12px;flex-wrap:wrap}.map-search input{flex-basis:100%}}
