:root{--blue:#1457d9;--blue2:#2f73f5;--navy:#102c70;--ink:#13264b;--muted:#6d7b98;--line:#e7ebf4;--soft:#f4f7fd;--white:#fff;--green:#0fbf92;--orange:#ff9d2e;--purple:#a844eb;--red:#e94d5f;--cyan:#14a9d8;--shadow:0 18px 50px rgba(18,47,105,.10);--radius:22px;--sidebar:262px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;color:var(--ink);background:#eef3fb;font-size:14px}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.muted{color:var(--muted)}.eyebrow{margin:0 0 4px;color:var(--blue);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.brand-mark{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 12px 25px rgba(20,87,217,.25);font-size:1.25rem;flex:0 0 auto}
.btn{min-height:42px;border:0;border-radius:13px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:800;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 10px 22px rgba(20,87,217,.20)}.btn.secondary{background:#edf3ff;color:var(--blue)}.btn.success{background:#e5fbf4;color:#078569}.btn.danger{background:#ffedf0;color:#c62e45}.btn.warning{background:#fff3dc;color:#ad6500}.btn.outline{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.small{min-height:36px;padding:0 13px;font-size:.82rem}.btn.wide{width:100%}.icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:1.1rem}
.alert{display:flex;align-items:center;gap:10px;border-radius:15px;padding:13px 15px;margin-bottom:16px;font-weight:650;border:1px solid transparent}.alert button{margin-left:auto;border:0;background:transparent;font-size:1.2rem}.alert.success{background:#e9fbf5;color:#08785f;border-color:#c5f2e5}.alert.danger{background:#fff0f2;color:#b82d42;border-color:#ffd0d7}.alert.warning{background:#fff7e4;color:#976009;border-color:#ffe2a2}.alert.info{background:#edf5ff;color:#1759ac;border-color:#cee2ff}
/* Application shell */
.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,#0e3f9c,#0b2f79);color:#fff;padding:22px 17px 18px;z-index:100;display:flex;flex-direction:column;box-shadow:12px 0 36px rgba(8,38,94,.12)}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;text-decoration:none}.sidebar-brand .brand-mark{background:#fff;color:var(--blue);box-shadow:none}.sidebar-brand strong{display:block;font-size:1.35rem;letter-spacing:-.04em}.sidebar-brand small{display:block;color:#bdd1ff;margin-top:2px;font-size:.72rem}.side-nav{display:flex;flex-direction:column;gap:5px;overflow:auto}.side-link{min-height:48px;border-radius:14px;padding:0 14px;display:flex;align-items:center;gap:12px;text-decoration:none;color:#d7e4ff;font-weight:750;transition:.16s}.side-link i{width:24px;font-size:1.05rem}.side-link:hover{background:rgba(255,255,255,.09);color:#fff}.side-link.active{background:#fff;color:var(--blue);box-shadow:0 12px 25px rgba(0,0,0,.12)}.sidebar-user{margin-top:auto;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:11px;display:flex;align-items:center;gap:10px}.sidebar-user .avatar{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--blue);display:grid;place-items:center;font-weight:900}.sidebar-user div{min-width:0;flex:1}.sidebar-user strong,.sidebar-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{color:#bdd1ff;font-size:.7rem;margin-top:2px}.sidebar-user>a{font-size:1.1rem}.app-main{min-height:1000vh;margin-left:var(--sidebar);display:flex;flex-direction:column}.topbar{height:88px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60}.topbar-left{display:flex;align-items:center;gap:14px}.topbar h1{font-size:1.5rem;line-height:1;margin:0;letter-spacing:-.035em;color:var(--navy)}.menu-toggle{display:none}.topbar-date{display:flex;align-items:center;gap:8px;text-decoration:none;background:#f3f7ff;padding:10px 14px;border-radius:13px;font-weight:750;color:var(--navy)}.content-area{width:100%;max-width:1600px;margin:0 auto;padding:25px 28px 36px;flex:1}.app-footer{padding:15px 28px 24px;display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}.sidebar-backdrop{display:none}.mobile-nav{display:none}
/* Cards */
.panel{background:#fff;border:1px solid rgba(18,47,105,.07);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.panel+.panel{margin-top:20px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.panel-title h2,.panel-title h3{margin:0;color:var(--navy);font-size:1.08rem;letter-spacing:-.02em}.panel-title p{margin:4px 0 0;color:var(--muted);font-size:.8rem}.panel-actions{display:flex;gap:8px;flex-wrap:wrap}.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:20px}.metric-card{background:#fff;border:1px solid rgba(18,47,105,.07);border-radius:20px;padding:17px;display:flex;gap:13px;align-items:center;box-shadow:0 14px 35px rgba(18,47,105,.07);min-width:0}.metric-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:1.35rem;color:#fff;flex:0 0 auto}.metric-icon.blue{background:linear-gradient(145deg,#2f73f5,#1457d9)}.metric-icon.green{background:linear-gradient(145deg,#22d7a8,#0cad83)}.metric-icon.orange{background:linear-gradient(145deg,#ffb24d,#ff8b1f)}.metric-icon.purple{background:linear-gradient(145deg,#bc5af3,#9133db)}.metric-icon.red{background:linear-gradient(145deg,#ff6979,#d9364b)}.metric-card span{display:block;color:var(--muted);font-size:.73rem;font-weight:750}.metric-card strong{display:block;margin-top:4px;font-size:1.42rem;color:var(--navy);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:20px}.chart-card{min-height:310px}.stock-bars{display:flex;flex-direction:column;gap:13px}.stock-row{display:grid;grid-template-columns:90px 1fr 58px;align-items:center;gap:12px}.stock-row label{font-weight:800;color:var(--navy)}.stock-track{height:12px;background:#edf1f8;border-radius:999px;overflow:hidden}.stock-progress{display:block;width:100%;height:12px;border:0;border-radius:999px;background:#edf1f8;overflow:hidden;appearance:none}.stock-progress::-webkit-progress-bar{background:#edf1f8;border-radius:999px}.stock-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:999px}.stock-progress::-moz-progress-bar{background:linear-gradient(90deg,var(--blue2),var(--cyan));border-radius:999px}.stock-row strong{text-align:right}.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.quick-action{min-height:105px;border:1px solid var(--line);border-radius:17px;padding:14px;text-decoration:none;background:linear-gradient(145deg,#fff,#f7f9fd);display:flex;flex-direction:column;justify-content:space-between;transition:.18s}.quick-action:hover{transform:translateY(-2px);border-color:#cbdcff}.quick-action i{font-size:1.3rem;color:var(--blue)}.quick-action strong{font-size:.88rem;color:var(--navy)}
/* Tables and filters */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.filter-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.search-field{position:relative;min-width:260px}.search-field i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8a96ad}.search-field input{padding-left:39px}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:.73rem;font-weight:800;color:#54627e}.field input,.field select,.field textarea,.search-field input{height:43px;border:1px solid #dfe5f0;border-radius:13px;background:#fff;color:var(--ink);padding:0 13px;outline:none;min-width:0}.field textarea{height:auto;min-height:95px;padding:12px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.search-field input:focus{border-color:#7ca5f6;box-shadow:0 0 0 3px rgba(47,115,245,.10)}.field.full{grid-column:1/-1}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:16px}.data-table{width:100%;border-collapse:collapse;min-width:820px}.data-table th{background:#f4f7fd;color:#5a6884;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:12px 13px;white-space:nowrap}.data-table td{padding:13px;border-top:1px solid #edf0f6;vertical-align:middle}.data-table tbody tr:hover{background:#fafcff}.cell-title{font-weight:800;color:var(--navy)}.cell-sub{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}.numeric{text-align:right}.actions{display:flex;gap:6px;white-space:nowrap}.action-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;display:inline-grid;place-items:center;text-decoration:none;color:var(--navy)}.action-btn:hover{background:#edf4ff;color:var(--blue)}.status-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:.68rem;font-weight:850;white-space:nowrap}.status-badge.success{background:#e5fbf4;color:#078569}.status-badge.warning{background:#fff3dc;color:#a76200}.status-badge.danger{background:#ffedf0;color:#c62e45}.status-badge.info{background:#e7f7fd;color:#087a9c}.status-badge.muted{background:#eef1f5;color:#6c778c}.table-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:15px}.page-size{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.75rem;font-weight:750}.page-size select{height:36px;border:1px solid var(--line);border-radius:10px;padding:0 9px;background:#fff}.page-info{text-align:center;color:var(--muted);font-size:.75rem;font-weight:750}.pagination-nav{display:flex;justify-content:flex-end;gap:5px}.page-btn{width:35px;height:35px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center;text-decoration:none;font-weight:800;color:var(--navy)}.page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}.page-btn.disabled{opacity:.4;pointer-events:none}.page-ellipsis{padding:8px 3px;color:var(--muted)}.empty-state{text-align:center;padding:44px 20px;color:var(--muted)}.empty-state i{display:block;font-size:2.3rem;color:#b6c5df;margin-bottom:10px}.empty-state strong{display:block;color:var(--navy);font-size:1rem;margin-bottom:5px}
/* Details, tabs, forms */
.tabs{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;padding:8px;background:#eef3fb;border:1px solid #e2e8f3;border-radius:20px;margin-bottom:18px;scrollbar-width:thin;scroll-snap-type:x proximity}.tabs::-webkit-scrollbar{height:7px}.tabs::-webkit-scrollbar-thumb{background:#d4dded;border-radius:999px}.tab-link{flex:0 0 auto;border:0;background:transparent;border-radius:14px;padding:12px 18px;color:#64718a;font-weight:800;white-space:nowrap;scroll-snap-align:start}.tab-link.active{background:#fff;color:var(--blue);box-shadow:0 10px 24px rgba(20,87,217,.10)}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.detail-item{padding:13px;background:#f7f9fd;border-radius:14px}.detail-item span{display:block;color:var(--muted);font-size:.7rem;font-weight:750}.detail-item strong{display:block;margin-top:5px;color:var(--navy)}.transaction-items{display:flex;flex-direction:column;gap:10px}.transaction-row{display:grid;grid-template-columns:minmax(220px,1fr) 110px 1.2fr 42px;gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:15px;background:#fafcff}.transaction-row .remove-row{height:42px;border:0;border-radius:11px;background:#ffedf0;color:#c62e45}.approval-box{display:flex;gap:10px;align-items:end;padding:14px;background:#f7f9fd;border-radius:15px}.approval-box .field{flex:1}.stock-number{font-size:1.1rem;font-weight:900;color:var(--navy)}.low-stock{color:var(--red)!important}.stock-ok{color:var(--green)!important}
/* Auth and public */
.auth-page{min-height:100vh;background:radial-gradient(circle at 10% 10%,#d9e8ff,transparent 34%),radial-gradient(circle at 90% 15%,#dffbf4,transparent 30%),#eef3fb;display:grid;place-items:center;padding:24px}.auth-shell{width:min(980px,100%)}.auth-card{background:#fff;border-radius:30px;box-shadow:0 30px 80px rgba(16,44,112,.15);padding:30px;max-width:500px;margin:auto;border:1px solid rgba(18,47,105,.07)}.install-card{max-width:720px}.brand-block{display:flex;align-items:center;gap:12px;margin-bottom:28px}.brand-block strong{display:block;font-size:1.35rem;color:var(--navy)}.brand-block small{display:block;color:var(--muted);margin-top:2px}.auth-card h1{margin:0 0 7px;color:var(--navy);font-size:1.7rem;letter-spacing:-.04em}.auth-card>p{margin:0 0 22px}.password-wrap{position:relative}.password-wrap input{width:100%;padding-right:45px}.password-toggle{position:absolute;right:5px;bottom:5px;width:34px;height:34px;border:0;background:transparent;color:var(--muted)}.auth-links{display:flex;justify-content:space-between;margin-top:16px;font-size:.78rem}.install-meta{display:flex;justify-content:space-between;margin-top:20px;color:var(--muted);font-size:.72rem}.public-page{background:#fff}.public-nav{height:82px;max-width:1220px;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.public-brand{display:flex;align-items:center;gap:11px;text-decoration:none}.public-brand strong,.public-brand small{display:block}.public-brand strong{color:var(--navy);font-size:1.25rem}.public-brand small{font-size:.7rem;color:var(--muted)}.public-nav nav{display:flex;align-items:center;gap:22px}.public-nav nav>a:not(.btn){text-decoration:none;font-weight:750;color:#52617c}.hero{min-height:620px;background:linear-gradient(135deg,#0b43ad 0%,#176be0 60%,#22a6d8 100%);color:#fff;display:grid;place-items:center;overflow:hidden;position:relative}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)}.hero:before{width:520px;height:520px;right:-120px;top:-110px}.hero:after{width:330px;height:330px;left:-80px;bottom:-120px}.hero-inner{width:min(1180px,calc(100% - 44px));display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}.hero-copy h1{font-size:clamp(2.5rem,6vw,5.1rem);letter-spacing:-.065em;line-height:.95;margin:0 0 22px}.hero-copy p{font-size:1.05rem;line-height:1.75;color:#dce9ff;max-width:630px}.hero-actions{display:flex;gap:11px;margin-top:28px}.hero-actions .btn.outline{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)}.hero-dashboard{background:rgba(255,255,255,.97);color:var(--ink);border-radius:28px;padding:20px;box-shadow:0 35px 80px rgba(0,0,0,.20);transform:rotate(1.2deg)}.hero-dashboard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.hero-dashboard-head strong{color:var(--navy)}.mock-dots{display:flex;gap:5px}.mock-dots i{width:7px;height:7px;background:#cbd5e8;border-radius:50%}.mock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.mock-card{padding:15px;border-radius:17px;background:#f4f7fd}.mock-card span{font-size:.7rem;color:var(--muted);font-weight:750}.mock-card strong{display:block;font-size:1.45rem;color:var(--navy);margin-top:7px}.mock-card.highlight{background:linear-gradient(135deg,#e7f1ff,#e9fff8)}.feature-section,.flow-section{padding:85px 22px}.section-head{text-align:center;max-width:700px;margin:0 auto 35px}.section-head h2{font-size:2rem;color:var(--navy);margin:0 0 10px;letter-spacing:-.045em}.section-head p{color:var(--muted);line-height:1.65}.feature-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{border:1px solid var(--line);border-radius:21px;padding:22px;background:#fff;box-shadow:0 13px 35px rgba(18,47,105,.06)}.feature-card i{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;background:#eaf2ff;color:var(--blue);font-size:1.2rem}.feature-card h3{color:var(--navy);margin:17px 0 8px}.feature-card p{color:var(--muted);line-height:1.6;margin:0;font-size:.82rem}.flow-section{background:#f5f8fd}.flow-grid{max-width:980px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.flow-step{text-align:center;position:relative}.flow-step b{width:52px;height:52px;border-radius:17px;background:var(--blue);color:#fff;display:grid;place-items:center;margin:0 auto 13px;font-size:1.1rem}.flow-step strong{display:block;color:var(--navy)}.flow-step span{display:block;color:var(--muted);font-size:.76rem;margin-top:5px}.public-footer{background:#0d2f73;color:#fff;padding:35px max(22px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;align-items:center}.public-footer p{margin:5px 0 0;color:#bcd0fb;font-size:.78rem}.error-page{min-height:100vh;display:grid;place-items:center;background:#eef3fb}.error-card{text-align:center;background:#fff;padding:40px;border-radius:25px;box-shadow:var(--shadow)}.error-card>strong{font-size:4rem;color:var(--blue)}.error-card h1{color:var(--navy)}
/* Print */
.print-only{display:none}@media print{.sidebar,.topbar,.mobile-nav,.app-footer,.panel-actions,.toolbar,.table-pagination,.no-print{display:none!important}.app-main{margin:0}.content-area{padding:0}.panel{box-shadow:none;border:0;padding:0}.print-only{display:block}.data-table{min-width:0;font-size:10px}body{background:#fff}}
/* Responsive */
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(3,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){:root{--sidebar:250px}.sidebar{transform:translateX(-105%);transition:.2s}.app-shell.sidebar-open .sidebar{transform:translateX(0)}.app-main{margin-left:0}.menu-toggle{display:grid}.sidebar-backdrop{display:block;position:fixed;inset:0;border:0;background:rgba(8,28,68,.45);z-index:90;opacity:0;visibility:hidden;transition:.2s}.app-shell.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}.dashboard-grid{grid-template-columns:1fr}.topbar{padding:0 20px}.content-area{padding:22px 20px 90px}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:0 18px 45px rgba(18,47,105,.18);z-index:80;padding:7px}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;text-decoration:none;color:#7b879e;font-size:.62rem;font-weight:800;border-radius:12px}.mobile-nav a i{font-size:1.05rem}.mobile-nav a.active{background:#eaf2ff;color:var(--blue)}.app-footer{display:none}.hero-inner{grid-template-columns:1fr;padding:60px 0}.hero-dashboard{max-width:600px}.hero{min-height:auto}.flow-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){body{font-size:13px}.topbar{height:76px}.topbar h1{font-size:1.18rem}.topbar-date span{display:none}.content-area{padding:16px 13px 88px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-card{padding:13px;gap:10px}.metric-icon{width:43px;height:43px;border-radius:14px}.metric-card strong{font-size:1.13rem}.panel{padding:15px;border-radius:18px}.panel-header,.toolbar{align-items:stretch;flex-direction:column}.panel-actions,.filter-form{width:100%}.filter-form>*{flex:1;min-width:145px}.search-field{min-width:100%;width:100%}.form-grid{grid-template-columns:1fr}.transaction-row{grid-template-columns:1fr 90px 42px}.transaction-row .note-field{grid-column:1/-1;grid-row:2}.table-pagination{grid-template-columns:1fr}.page-size,.page-info,.pagination-nav{justify-content:center;text-align:center}.pagination-nav{flex-wrap:wrap}.detail-grid{grid-template-columns:1fr 1fr}.public-nav nav>a:not(.btn){display:none}.hero-inner{width:calc(100% - 28px);gap:35px}.hero-copy h1{font-size:2.8rem}.hero-copy p{font-size:.92rem}.hero-actions{flex-direction:column}.feature-grid{grid-template-columns:1fr}.feature-section,.flow-section{padding:55px 16px}.public-footer{flex-direction:column;align-items:flex-start;gap:20px}.auth-card{padding:23px;border-radius:23px}.install-meta{flex-direction:column;gap:5px}}
@media(max-width:430px){.metric-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.flow-grid{grid-template-columns:1fr}.mock-grid{grid-template-columns:1fr}.topbar .eyebrow{display:none}}
/* MisterBongkar */
.role-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#eaf2ff;color:#1457d9;font-weight:850;font-size:.73rem}.summary-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.summary-category-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:19px;box-shadow:0 13px 35px rgba(18,47,105,.07);display:flex;align-items:center;gap:13px}.summary-category-card i{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#e7f1ff,#e9fff8);color:var(--blue);font-size:1.25rem}.summary-category-card span{display:block;color:var(--muted);font-size:.72rem;font-weight:800}.summary-category-card strong{display:block;color:var(--navy);font-size:1.45rem;margin-top:4px}.public-stock-section{padding:70px 22px;background:#f5f8fd}.public-stock-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}.public-stock-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 15px 35px rgba(18,47,105,.07)}.public-stock-card .stock-icon{width:50px;height:50px;border-radius:17px;background:#eaf2ff;color:var(--blue);display:grid;place-items:center;font-size:1.3rem}.public-stock-card h3{color:var(--navy);margin:16px 0 5px}.public-stock-card strong{font-size:1.9rem;color:var(--navy)}.public-stock-card small{display:block;color:var(--muted);margin-top:5px}.document-sheet{background:#fff;color:#111;max-width:900px;margin:auto;padding:42px 48px;border:1px solid #d9deea;box-shadow:0 18px 50px rgba(18,47,105,.10)}.document-head{text-align:center;border-bottom:3px;padding-bottom:14px;margin-bottom:24px}.document-head h1{font-size:1.25rem;margin:0 0 5px;text-transform:uppercase}.document-head p{margin:2px 0;font-size:.82rem}.document-meta{display:grid;grid-template-columns:150px 12px 1fr;gap:6px;margin-bottom:20px}.document-table{width:100%;border-collapse:collapse;margin:18px 0}.document-table th,.document-table td{border:1px solid #333;padding:8px;font-size:.78rem}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:48px;text-align:center}.signature-box{min-height:120px}.signature-name{margin-top:75px;border-bottom:1px solid #111;display:inline-block;min-width:190px;font-weight:800}.photo-thumb{width:90px;height:68px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.item-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.item-check{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fafcff}.status-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.status-flow span{padding:7px 10px;border-radius:999px;background:#eef3fb;color:#64748b;font-size:.69rem;font-weight:850}.status-flow span.done{background:#e7faf3;color:#087a55}.status-flow i{color:#a9b3c5}.action-stack{display:flex;gap:8px;flex-wrap:wrap}.upload-note{font-size:.72rem;color:var(--muted);margin-top:5px}.muted-box{padding:14px;border-radius:14px;background:#f5f8fd;color:var(--muted)}
@media(max-width:1100px){.summary-category-grid,.public-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.summary-category-grid,.public-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item-check-grid{grid-template-columns:1fr}.document-sheet{padding:24px 18px}.signature-grid{gap:25px}.role-pill{display:none}}@media(max-width:430px){.summary-category-grid,.public-stock-grid{grid-template-columns:1fr}.document-meta{grid-template-columns:110px 8px 1fr}}
@media print{.document-sheet{max-width:none;border:0;box-shadow:none;padding:0}.print-hide{display:none!important}}

.print-tools{text-align:right;margin-bottom:15px}.witness-box{text-align:center;margin-top:35px}
.check-line{display:flex;align-items:center;gap:9px;min-height:43px;padding:0 4px;color:var(--navy);font-weight:800}.check-line input{width:18px;height:18px;accent-color:var(--blue)}.tab-buttons{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;margin:0 0 18px;padding:8px;background:#eef3fb;border:1px solid var(--line);border-radius:20px;scrollbar-width:thin;scroll-snap-type:x proximity}.tab-buttons::-webkit-scrollbar{height:7px}.tab-buttons::-webkit-scrollbar-thumb{background:#d4dded;border-radius:999px}.tab-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;text-decoration:none;color:var(--muted);font-weight:850;background:transparent;border:1px solid transparent;white-space:nowrap;scroll-snap-align:start}.tab-btn:hover{color:var(--blue);background:#f7f9ff}.tab-btn.active{background:#fff;color:var(--blue);box-shadow:0 10px 24px rgba(20,87,217,.12)}


/* =========================================================
   MisterBongkar visual system — Roboto Condensed
========================================================= */
html,body,button,input,select,textarea{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif}
.public-page{background:#f8f9fc;color:#162a56;overflow-x:hidden}
.public-page .public-nav{position:absolute;z-index:30;top:18px;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 48px));max-width:none;height:76px;margin:0;padding:0 22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.74);border-radius:24px;box-shadow:0 14px 35px rgba(45,69,120,.08);backdrop-filter:blur(16px)}
.public-page .public-brand{gap:12px}
.public-page .public-brand .brand-mark{width:45px;height:45px;border-radius:15px;background:#fff;color:#1b55cd;box-shadow:0 10px 25px rgba(45,82,170,.12)}
.public-page .public-brand strong{font-size:1.34rem;font-weight:900;letter-spacing:-.035em;color:#17346e}
.public-page .public-brand small{font-size:.68rem;font-weight:600;color:#6f7d9d}
.public-page .public-nav nav{gap:20px}
.public-page .public-nav-links{display:flex;align-items:center;gap:28px}
.public-page .public-nav-links a{text-decoration:none;color:#536381;font-weight:700;font-size:.9rem;transition:.18s ease}
.public-page .public-nav-links a:hover{color:#1f5ed8}
.public-page .public-login-btn{min-height:42px;padding:0 17px;border-radius:13px;background:#182d5c;color:#fff;box-shadow:0 10px 24px rgba(18,42,91,.18)}
.public-page .public-login-btn:hover{background:#0d214e}

.public-page .cs-hero{min-height:720px;margin:12px;border-radius:42px;background:linear-gradient(125deg,#eaf0ff 0%,#dce8ff 46%,#e4f6f4 100%);color:#183261;overflow:hidden;isolation:isolate;padding-top:104px}
.public-page .cs-hero:before{width:520px;height:520px;right:-170px;top:-190px;border:86px solid rgba(255,255,255,.28);background:transparent}
.public-page .cs-hero:after{width:370px;height:370px;left:-145px;bottom:-165px;border:70px solid rgba(255,255,255,.34);background:transparent}
.cs-orbit{position:absolute;display:block;border-radius:50%;border:1px solid rgba(37,86,181,.13);z-index:-1}
.cs-orbit-one{width:250px;height:250px;top:100px;right:33%}
.cs-orbit-two{width:150px;height:150px;bottom:70px;left:43%}
.cs-dot-grid{position:absolute;left:6%;bottom:13%;width:110px;height:88px;opacity:.25;background-image:radial-gradient(#315fae 1.6px,transparent 1.6px);background-size:15px 15px;z-index:-1}
.public-page .cs-hero-inner{width:min(1180px,calc(100% - 48px));grid-template-columns:1.02fr .98fr;gap:72px;padding:56px 0 72px}
.cs-kicker,.cs-section-kicker{display:inline-flex;align-items:center;gap:8px;color:#245cc7;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.cs-kicker{padding:8px 12px;background:rgba(255,255,255,.60);border:1px solid rgba(255,255,255,.78);border-radius:999px}
.public-page .cs-hero-copy h1{max-width:620px;margin:20px 0 22px;color:#17346e;font-size:clamp(3rem,5.6vw,5.6rem);font-weight:900;line-height:.94;letter-spacing:-.065em}
.public-page .cs-hero-copy h1 em{font-style:normal;color:#ffb326;position:relative;white-space:nowrap}
.public-page .cs-hero-copy h1 em:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:7px;border-radius:50%;background:#ffcf5c;opacity:.65;transform:rotate(-1.5deg)}
.public-page .cs-hero-copy>p{max-width:610px;margin:0;color:#5d6f92;font-size:1.04rem;font-weight:500;line-height:1.65}
.public-page .cs-hero-actions{margin-top:30px;gap:12px}
.public-page .cs-primary-cta{min-height:50px;padding:0 22px;border-radius:15px;background:#ffc32d;color:#172446;box-shadow:0 13px 28px rgba(230,163,0,.24)}
.public-page .cs-primary-cta:hover{background:#ffb815;color:#172446}
.public-page .cs-secondary-cta{min-height:50px;padding:0 20px;border-radius:15px;background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.86);color:#17346e}
.cs-hero-proof{display:flex;flex-wrap:wrap;gap:17px;margin-top:23px;color:#526687;font-size:.77rem;font-weight:700}
.cs-hero-proof span{display:inline-flex;align-items:center;gap:6px}
.cs-hero-proof i{color:#1b9f7e}

.cs-hero-visual{position:relative;min-height:475px;display:grid;place-items:center}
.cs-visual-card{position:relative;z-index:3;width:min(520px,100%);padding:22px;border:1px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,255,255,.90);box-shadow:0 35px 80px rgba(61,84,137,.18);backdrop-filter:blur(18px);transform:rotate(1deg)}
.cs-visual-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.cs-visual-head small,.cs-visual-head strong{display:block}.cs-visual-head small{color:#8390aa;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.cs-visual-head strong{margin-top:3px;color:#17346e;font-size:1.12rem;font-weight:900}
.cs-live-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#e9fbf5;color:#08775d;font-size:.7rem;font-weight:800}.cs-live-badge i{width:7px;height:7px;border-radius:50%;background:#15b98d;box-shadow:0 0 0 4px rgba(21,185,141,.12)}
.cs-visual-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:17px}
.cs-visual-metrics article{padding:14px;border:1px solid #edf0f7;border-radius:17px;background:#f8faff}.cs-visual-metrics span,.cs-visual-metrics small{display:block;color:#7b88a3;font-size:.66rem;font-weight:700}.cs-visual-metrics strong{display:block;margin:6px 0 3px;color:#17346e;font-size:1.45rem;font-weight:900}
.cs-visual-list{display:grid;gap:10px}
.cs-visual-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #edf0f7;border-radius:15px;background:#fff}
.cs-row-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:#edf4ff;color:#2b66d5;font-size:1rem;flex:0 0 auto}
.cs-row-copy{min-width:0;flex:1}.cs-row-copy>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.cs-row-copy strong{color:#263c69;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cs-row-copy b{color:#17346e;font-size:.8rem}
.cs-row-copy progress,.cs-stock-card progress{width:100%;height:6px;border:0;border-radius:99px;overflow:hidden;background:#edf1f8}.cs-row-copy progress::-webkit-progress-bar,.cs-stock-card progress::-webkit-progress-bar{background:#edf1f8;border-radius:99px}.cs-row-copy progress::-webkit-progress-value,.cs-stock-card progress::-webkit-progress-value{background:#3f76e2;border-radius:99px}.cs-row-copy progress::-moz-progress-bar,.cs-stock-card progress::-moz-progress-bar{background:#3f76e2;border-radius:99px}
.cs-visual-empty{display:flex;align-items:center;gap:10px;padding:20px;border-radius:17px;background:#f7f9fd;color:#71809d;font-weight:700}.cs-visual-empty i{font-size:1.4rem;color:#4277df}
.cs-floating-card{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.9);border-radius:17px;background:rgba(255,255,255,.94);box-shadow:0 18px 38px rgba(50,76,133,.15);backdrop-filter:blur(12px)}
.cs-floating-card>i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#e9fbf5;color:#0e9d78;font-size:1.08rem}.cs-floating-card strong,.cs-floating-card small{display:block}.cs-floating-card strong{color:#203866;font-size:.78rem}.cs-floating-card small{margin-top:2px;color:#8490a8;font-size:.62rem}.cs-floating-one{left:-16px;top:72px;transform:rotate(-3deg)}.cs-floating-two{right:-12px;bottom:61px;transform:rotate(3deg)}
.cs-package-illustration{position:absolute;right:-18px;top:17px;z-index:1}.cs-package-main,.cs-package-small{display:grid;place-items:center;color:#fff;box-shadow:0 18px 35px rgba(37,91,196,.18)}.cs-package-main{width:78px;height:78px;border-radius:24px;background:linear-gradient(145deg,#5b8df2,#336bdc);font-size:2rem;transform:rotate(10deg)}.cs-package-small{position:absolute;right:62px;top:-19px;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#ffc948,#ffad19);font-size:1.05rem;transform:rotate(-11deg)}

.cs-stock-section{position:relative;padding:82px 24px 92px;background:#fff}
.cs-section-heading{max-width:1180px;margin:0 auto 30px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.cs-section-heading h2{margin:7px 0 6px;color:#17346e;font-size:2.35rem;font-weight:900;letter-spacing:-.045em}.cs-section-heading p{margin:0;color:#76839c;font-size:.92rem}.cs-stock-total{min-width:190px;padding:15px 18px;border-radius:18px;background:#f1f5ff;text-align:right}.cs-stock-total span,.cs-stock-total small{display:block;color:#74819b;font-size:.68rem;font-weight:700}.cs-stock-total strong{display:block;margin:3px 0;color:#17346e;font-size:1.65rem;font-weight:900}
.public-page .cs-stock-grid{max-width:1180px;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px}
.public-page .cs-stock-card{position:relative;min-width:0;padding:18px;border:1px solid #edf0f7;border-radius:23px;background:#fff;box-shadow:0 15px 42px rgba(37,59,108,.07);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.public-page .cs-stock-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:#3f76e2}.public-page .cs-stock-card:hover{transform:translateY(-5px);box-shadow:0 23px 55px rgba(37,59,108,.12)}
.cs-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.public-page .cs-stock-card .stock-icon{width:49px;height:49px;border-radius:16px;background:#eaf1ff;color:#326bd8}.cs-card-status{display:inline-flex;padding:6px 8px;border-radius:999px;background:#eef4ff;color:#4770c3;font-size:.62rem;font-weight:800;white-space:nowrap}.cs-card-body{margin:17px 0 12px}.public-page .cs-stock-card h3{margin:0 0 6px;color:#344667;font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.public-page .cs-stock-card strong{font-size:2.1rem;font-weight:900;line-height:1;color:#17346e}.cs-unit-label{margin-left:5px;color:#8a96aa;font-size:.66rem;font-weight:700}.cs-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;color:#7d899f;font-size:.68rem;font-weight:700}.cs-card-foot span{display:inline-flex;align-items:center;gap:5px}.cs-card-foot a{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#f0f4fb;color:#365fba;text-decoration:none}
.public-page .tone-2:before{background:#18b98c}.public-page .tone-3:before{background:#ffad28}.public-page .tone-4:before{background:#9d4fe6}.public-page .tone-5:before{background:#ed5668}.public-page .tone-2 .stock-icon,.tone-2 .cs-row-icon{background:#e8faf4;color:#0b9a73}.public-page .tone-3 .stock-icon,.tone-3 .cs-row-icon{background:#fff4df;color:#dd8500}.public-page .tone-4 .stock-icon,.tone-4 .cs-row-icon{background:#f4eaff;color:#9340d9}.public-page .tone-5 .stock-icon,.tone-5 .cs-row-icon{background:#ffebee;color:#db4154}.public-page .tone-2 .cs-card-status{background:#e8faf4;color:#0c8a69}.public-page .tone-3 .cs-card-status{background:#fff4df;color:#b66e00}.public-page .tone-4 .cs-card-status{background:#f4eaff;color:#8335c3}.public-page .tone-5 .cs-card-status{background:#ffebee;color:#c5384a}

.public-page .cs-feature-section{padding:90px 24px 100px;background:#f7f9fd}.public-page .cs-feature-heading{max-width:760px;margin-bottom:38px}.public-page .cs-feature-heading h2{font-size:2.5rem;font-weight:900}.public-page .cs-feature-grid{max-width:1180px;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.public-page .cs-feature-card{position:relative;min-height:220px;padding:23px;border-radius:24px;border:1px solid #e9edf5;background:#fff;box-shadow:0 14px 40px rgba(39,60,104,.06);overflow:hidden}.public-page .cs-feature-card>i{width:52px;height:52px;border-radius:17px;background:#edf3ff;color:#306bd9;font-size:1.25rem}.public-page .cs-feature-card>span{position:absolute;right:18px;top:16px;color:#dce3f0;font-size:2rem;font-weight:900}.public-page .cs-feature-card h3{margin-top:23px;font-size:1.12rem;font-weight:900}.public-page .cs-feature-card p{font-size:.82rem;line-height:1.65}.public-page .cs-feature-card.tone-2>i{background:#e8faf4;color:#0b9a73}.public-page .cs-feature-card.tone-3>i{background:#fff4df;color:#dd8500}.public-page .cs-feature-card.tone-4>i{background:#f4eaff;color:#9340d9}

.public-page .public-footer{margin:0;background:#142d62;padding:42px max(24px,calc((100% - 1180px)/2));border-top:1px solid rgba(255,255,255,.08)}
.public-page .public-footer strong{font-size:1.15rem;font-weight:900}.public-page .public-footer p{font-size:.78rem}

@media(max-width:1180px){.public-page .cs-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.public-page .cs-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-floating-one{left:0}.cs-floating-two{right:0}}
@media(max-width:980px){.public-page .public-nav{width:calc(100% - 32px);top:12px}.public-page .public-nav-links{display:none}.public-page .cs-hero{margin:8px;border-radius:32px;padding-top:92px}.public-page .cs-hero-inner{grid-template-columns:1fr;gap:35px;padding:45px 0 70px}.public-page .cs-hero-copy{text-align:center}.public-page .cs-hero-copy h1,.public-page .cs-hero-copy>p{margin-left:auto;margin-right:auto}.public-page .cs-hero-actions,.cs-hero-proof{justify-content:center}.cs-hero-visual{width:min(620px,100%);margin:auto}.cs-visual-card{transform:none}.cs-floating-one{left:0;top:60px}.cs-floating-two{right:0;bottom:40px}}
@media(max-width:700px){.public-page .public-nav{height:68px;padding:0 13px;border-radius:19px}.public-page .public-brand strong{font-size:1.12rem}.public-page .public-brand small{display:none}.public-page .public-brand .brand-mark{width:40px;height:40px;border-radius:13px}.public-page .public-login-btn{min-height:38px;padding:0 13px}.public-page .cs-hero{min-height:auto;margin:5px;border-radius:27px;padding-top:83px}.public-page .cs-hero-inner{width:calc(100% - 28px);padding:35px 0 58px}.public-page .cs-hero-copy h1{font-size:3rem;line-height:.98}.public-page .cs-hero-copy>p{font-size:.91rem}.public-page .cs-hero-actions{flex-direction:column}.public-page .cs-hero-actions .btn{width:100%}.cs-hero-proof{gap:10px 14px}.cs-hero-visual{min-height:430px}.cs-visual-card{padding:15px;border-radius:23px}.cs-visual-metrics{grid-template-columns:1fr 1fr}.cs-visual-metrics article:last-child{grid-column:1/-1}.cs-floating-card{padding:9px 10px}.cs-floating-card>i{width:32px;height:32px}.cs-floating-one{left:-2px;top:auto;bottom:24px}.cs-floating-two{right:-2px;bottom:-15px}.cs-package-illustration{display:none}.cs-section-heading{align-items:stretch;flex-direction:column}.cs-stock-total{text-align:left}.public-page .cs-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-page .cs-feature-grid{grid-template-columns:1fr}.public-page .cs-feature-section,.cs-stock-section{padding:62px 14px}.public-page .cs-feature-heading h2,.cs-section-heading h2{font-size:2rem}}
@media(max-width:450px){.public-page .public-nav{width:calc(100% - 20px)}.public-page .public-brand small{display:none}.public-page .cs-hero-copy h1{font-size:2.55rem}.public-page .cs-stock-grid{grid-template-columns:1fr}.cs-visual-list{gap:7px}.cs-floating-card{display:none}}


/* =========================================================
   Reference landing — matched to the supplied travel layout
========================================================= */
html,body,button,input,select,textarea{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif}
.reference-public-page{background:#fff;color:#7d8492;overflow-x:hidden}
.reference-public-page .reference-nav{position:absolute;z-index:40;top:0;left:0;width:100%;max-width:none;height:66px;margin:0;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;box-shadow:none}
.reference-brand{gap:8px;text-decoration:none}.reference-brand strong{font-size:1.22rem;font-weight:800;color:#4db6f4;letter-spacing:-.02em}.reference-logo-mark{position:relative;width:16px;height:16px;display:block}.reference-logo-mark:before,.reference-logo-mark:after{content:"";position:absolute;left:0;width:13px;height:7px;background:#ff6b77;clip-path:polygon(0 0,100% 50%,0 100%,25% 50%)}.reference-logo-mark:before{top:1px}.reference-logo-mark:after{top:8px;opacity:.55}
.reference-nav-links{display:flex;align-items:center;gap:34px;padding-right:4vw}.reference-nav-links a{position:relative;text-decoration:none;color:#fff;font-size:.72rem;font-weight:500;letter-spacing:.01em;padding:6px 0}.reference-nav-links a:after{content:"";position:absolute;left:50%;bottom:-3px;width:3px;height:3px;border-radius:50%;background:#fff;transform:translateX(-50%) scale(0);transition:.18s}.reference-nav-links a:hover:after,.reference-nav-links a.active:after{transform:translateX(-50%) scale(1)}
.reference-hero{position:relative;min-height:610px;background:#fff;overflow:hidden}.reference-hero-inner{min-height:610px;display:grid;grid-template-columns:41% 59%;align-items:stretch}.reference-copy{position:relative;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:68px 3% 38px 5.2%;max-width:510px}.reference-copy h1{margin:0;color:#4db6f4;font-size:clamp(3.1rem,5.3vw,5.45rem);font-weight:800;letter-spacing:-.045em;line-height:.86}.reference-dots{display:flex;gap:9px;margin:24px 0 20px}.reference-dots span{width:6px;height:6px;border-radius:50%;background:#c8ccd4}.reference-dots span:first-child{background:#4db6f4}.reference-copy>p{max-width:420px;margin:0;color:#b0b4bd;font-size:.92rem;line-height:1.45;font-weight:400}.reference-actions{display:flex;gap:10px;margin-top:27px}.reference-btn{min-width:86px;min-height:34px;padding:0 18px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-size:.72rem;font-weight:600;box-shadow:0 7px 18px rgba(36,88,154,.09);transition:.18s}.reference-btn:hover{transform:translateY(-1px);filter:brightness(.98)}.reference-btn-blue{background:#4db6f4}.reference-btn-pink{background:#fb5aa8}.reference-meta{position:absolute;left:5.2vw;bottom:27px;display:flex;flex-wrap:wrap;gap:18px;color:#9ca1ab;font-size:.58rem;font-weight:500;letter-spacing:.02em}.reference-meta span{display:inline-flex;align-items:center;gap:4px}.reference-meta i{font-size:.58rem;color:#808792}
.reference-visual{position:relative;min-height:610px;overflow:hidden}.reference-visual>img{position:absolute;inset:0 0 0 auto;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.reference-stock-float,.reference-low-float{position:absolute;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:0 18px 38px rgba(58,52,113,.16);border:1px solid rgba(255,255,255,.86)}.reference-stock-float{right:7%;bottom:17%;min-width:128px;padding:12px 15px;border-radius:13px}.reference-stock-float span,.reference-stock-float small{display:block;color:#8b90a1;font-size:.61rem;font-weight:600}.reference-stock-float strong{display:block;margin:3px 0;color:#38416c;font-size:1.45rem;line-height:1;font-weight:900}.reference-low-float{left:20%;top:41%;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px}.reference-low-float>i{width:29px;height:29px;border-radius:9px;background:#fff2db;color:#dc8b00;display:grid;place-items:center}.reference-low-float strong,.reference-low-float small{display:block}.reference-low-float strong{color:#38416c;font-size:.86rem}.reference-low-float small{color:#8b90a1;font-size:.56rem}
.reference-stock-section{padding:78px 5.2% 88px;background:#fff}.reference-section-head{max-width:1180px;margin:0 auto 30px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.reference-section-head>div>span{display:block;color:#fb5aa8;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.reference-section-head h2{margin:5px 0 6px;color:#4db6f4;font-size:2.45rem;line-height:1;font-weight:800;letter-spacing:-.04em}.reference-section-head p{margin:0;color:#a0a6b0;font-size:.83rem}.reference-stock-summary{text-align:right}.reference-stock-summary strong,.reference-stock-summary span{display:block}.reference-stock-summary strong{color:#38416c;font-size:2rem;line-height:1;font-weight:900}.reference-stock-summary span{margin-top:4px;color:#a0a6b0;font-size:.7rem}.reference-stock-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.reference-stock-card{position:relative;min-width:0;min-height:215px;padding:18px;border:1px solid #f0f1f5;border-radius:12px;background:#fff;box-shadow:0 13px 32px rgba(72,82,117,.07);overflow:hidden;transition:.18s}.reference-stock-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:#4db6f4}.reference-stock-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(72,82,117,.11)}.reference-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.reference-card-icon{width:42px;height:42px;border-radius:11px;background:#edf8ff;color:#4db6f4;display:grid;place-items:center;font-size:1.15rem}.reference-card-top>span{padding:5px 7px;border-radius:999px;background:#eef8ff;color:#4aa9df;font-size:.58rem;font-weight:700;white-space:nowrap}.reference-card-copy{margin:18px 0 13px}.reference-card-copy h3{margin:0 0 7px;color:#4d5873;font-size:.94rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reference-card-copy strong{color:#38416c;font-size:2rem;line-height:1;font-weight:900}.reference-card-copy>span{margin-left:4px;color:#a5aab3;font-size:.62rem}.reference-stock-card>small{display:block;color:#a5aab3;font-size:.68rem;line-height:1.45}.reference-stock-card progress{width:100%;height:5px;border:0;border-radius:99px;overflow:hidden;background:#f0f2f6}.reference-stock-card progress::-webkit-progress-bar{background:#f0f2f6}.reference-stock-card progress::-webkit-progress-value{background:#4db6f4}.reference-stock-card progress::-moz-progress-bar{background:#4db6f4}.reference-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;color:#939aa7;font-size:.62rem;font-weight:600}.reference-card-foot span{display:flex;gap:4px}.reference-card-foot a{width:28px;height:28px;border-radius:7px;background:#f4f9fd;color:#4db6f4;display:grid;place-items:center;text-decoration:none}.reference-stock-card.tone-2:before{background:#34c6a6}.reference-stock-card.tone-3:before{background:#ffb642}.reference-stock-card.tone-4:before{background:#9b57e8}.reference-stock-card.tone-5:before{background:#fb5aa8}.reference-stock-card.tone-2 .reference-card-icon{background:#eafaf6;color:#22ae8f}.reference-stock-card.tone-3 .reference-card-icon{background:#fff7e6;color:#e49a17}.reference-stock-card.tone-4 .reference-card-icon{background:#f5edff;color:#9350da}.reference-stock-card.tone-5 .reference-card-icon{background:#fff0f6;color:#e44f96}
.reference-feature-section{padding:78px 5.2% 92px;background:#fafbfe}.reference-section-head.compact{align-items:flex-start}.reference-feature-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.reference-feature-grid article{min-height:180px;padding:22px;border-radius:12px;background:#fff;border:1px solid #f0f1f5;box-shadow:0 13px 32px rgba(72,82,117,.05)}.reference-feature-grid i{width:44px;height:44px;border-radius:11px;background:#edf8ff;color:#4db6f4;display:grid;place-items:center;font-size:1.15rem}.reference-feature-grid h3{margin:18px 0 8px;color:#4d5873;font-size:1rem}.reference-feature-grid p{margin:0;color:#a0a6b0;font-size:.76rem;line-height:1.55}.reference-footer{background:#fff!important;color:#9ca1ab!important;border-top:1px solid #f0f1f5!important;padding:30px 5.2%!important}.reference-footer strong{color:#4db6f4}.reference-footer p{color:#a5aab3!important}
@media(max-width:1120px){.reference-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.reference-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-nav-links{gap:22px;padding-right:1vw}.reference-hero-inner{grid-template-columns:45% 55%}.reference-copy{padding-left:6%}.reference-meta{left:6vw}}
@media(max-width:820px){.reference-public-page .reference-nav{height:64px;padding:0 22px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(62,74,112,.06)}.reference-nav-links a{color:#6d6a8f}.reference-nav-links a:after{background:#fb5aa8}.reference-hero-inner{grid-template-columns:1fr;min-height:auto}.reference-copy{max-width:none;min-height:525px;padding:105px 26px 75px;align-items:center;text-align:center}.reference-copy>p{max-width:540px}.reference-actions{justify-content:center}.reference-meta{position:static;justify-content:center;margin-top:38px}.reference-visual{min-height:520px}.reference-visual>img{object-fit:cover}.reference-low-float{left:8%}.reference-stock-float{right:7%}.reference-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-section-head{align-items:flex-start;flex-direction:column}.reference-stock-summary{text-align:left}.reference-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.reference-nav-links a:not(:first-child){display:none}.reference-nav-links{padding-right:0}.reference-copy{min-height:470px;padding:95px 18px 55px}.reference-copy h1{font-size:3rem}.reference-copy>p{font-size:.84rem}.reference-actions{width:100%;flex-direction:column}.reference-btn{width:100%;min-height:38px}.reference-meta{gap:10px 14px}.reference-visual{min-height:390px}.reference-stock-float,.reference-low-float{display:none}.reference-stock-section,.reference-feature-section{padding:58px 15px 68px}.reference-stock-grid,.reference-feature-grid{grid-template-columns:1fr}.reference-section-head h2{font-size:2rem}.reference-footer{flex-direction:column;align-items:flex-start!important;gap:10px}}

/* =========================================================
   MisterBongkar visual system 2026
   Selaras dengan landing, login, dan dashboard referensi.
========================================================= */
:root{
  --sidebar:246px;
  --cs-blue:#0648e8;
  --cs-blue-dark:#0437bd;
  --cs-navy:#112552;
  --cs-text:#1d2a49;
  --cs-muted:#65728b;
  --cs-bg:#f6f8fd;
  --cs-line:#e5eaf4;
  --cs-card:#fff;
  --cs-shadow:0 8px 26px rgba(42,65,118,.065);
}
html,body,button,input,select,textarea{font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif}
body.app-body{background:var(--cs-bg);color:var(--cs-text);font-size:14px}
.campus-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.campus-brand-symbol{position:relative;width:36px;height:36px;flex:0 0 36px;display:block}
.campus-brand-symbol i{position:absolute;left:2px;width:29px;height:13px;border-radius:999px 999px 999px 4px;transform:rotate(28deg)}
.campus-brand-symbol i:first-child{top:4px;background:linear-gradient(90deg,#ff8a55,#ff4b79)}
.campus-brand-symbol i:last-child{bottom:4px;background:linear-gradient(90deg,#ff2587,#ec4bcd);transform:rotate(-28deg)}
.campus-brand-copy strong,.campus-brand-copy small{display:block}
.campus-brand-copy strong{color:var(--cs-blue);font-size:1.86rem;font-weight:900;line-height:1;letter-spacing:-.045em}
.campus-brand-copy small{color:#6d7890;font-size:.69rem;margin-top:4px;letter-spacing:.01em}

/* Shell and sidebar */
.app-shell{min-height:100vh;background:var(--cs-bg)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:0 14px 18px;background:linear-gradient(180deg,#073fbd 0%,#063bcc 48%,#0649df 100%);color:#fff;box-shadow:none;z-index:100;display:flex;flex-direction:column}
.sidebar-brand{height:82px;min-height:82px;margin:0 -14px 10px;padding:0 20px;background:#fff;border-right:1px solid #e7ebf4;gap:10px}
.sidebar-brand .campus-brand-symbol{width:34px;height:34px;flex-basis:34px}
.sidebar-brand .campus-brand-copy strong{font-size:1.72rem}
.sidebar-brand .campus-brand-copy small{font-size:.65rem}
.side-nav{display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden;padding:5px 0 18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent}
.side-group-label{display:block;margin:13px 8px 5px;color:#91b4ff;font-size:.62rem;font-weight:500;letter-spacing:.025em}
.side-link{min-height:29px;border-radius:6px;padding:0 11px;display:flex;align-items:center;gap:10px;color:#fff;font-size:.76rem;font-weight:500;text-decoration:none;transition:.16s ease}
.side-link i{width:22px;font-size:.93rem;text-align:center}
.side-link:hover{background:rgba(255,255,255,.11);color:#fff}
.side-link.active{min-height:35px;background:linear-gradient(90deg,rgba(122,164,247,.66),rgba(99,149,241,.54));color:#fff;box-shadow:0 5px 12px rgba(0,23,98,.12);font-weight:600}
.side-link.active i{color:#fff}
.app-main{min-height:100vh;margin-left:var(--sidebar);display:flex;flex-direction:column;background:var(--cs-bg)}
.topbar{height:68px;min-height:68px;padding:0 30px;background:#fff;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:70;box-shadow:none}
.topbar-left,.topbar-actions{display:flex;align-items:center}
.topbar-left{gap:25px;min-width:0}
.topbar-menu{width:30px;height:38px;border:0;background:transparent;color:var(--cs-blue);display:grid;place-items:center;font-size:1.55rem;padding:0}
.topbar-search{position:relative;width:280px}
.topbar-search>i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#71809e;font-size:.83rem}
.topbar-search input{width:100%;height:35px;padding:0 15px 0 41px;border:0;border-radius:10px;outline:0;background:linear-gradient(90deg,#f3f5fc,#f1f2fb);color:#34415d;font-size:.74rem}
.topbar-search input:focus{box-shadow:0 0 0 3px rgba(6,72,232,.09)}
.topbar-mobile-title{display:none;color:var(--cs-navy);font-weight:800;font-size:1.08rem}
.topbar-actions{gap:24px}
.topbar-notification{position:relative;width:31px;height:38px;display:grid;place-items:center;color:#18366f;text-decoration:none;font-size:1.25rem}
.topbar-notification span{position:absolute;right:-1px;top:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#f34759;color:#fff;border:2px solid #fff;font-size:.53rem;font-weight:800}
.topbar-user{display:flex;align-items:center;gap:10px;color:var(--cs-navy);text-decoration:none;min-width:150px}
.topbar-user img,.topbar-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 42px;background:#e8efff;color:var(--cs-blue);display:grid;place-items:center;font-weight:900}
.topbar-user-copy{min-width:0;flex:1}
.topbar-user-copy strong,.topbar-user-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user-copy strong{font-size:.78rem;font-weight:800;line-height:1.1}
.topbar-user-copy small{color:#6b7894;font-size:.66rem;margin-top:4px}
.topbar-user>i{font-size:.68rem;color:#0d3da3}
.content-area{width:100%;max-width:none;margin:0;padding:0 24px 18px;flex:1;background:var(--cs-bg)}
.app-footer{padding:10px 0 14px;color:#65728d;font-size:.67rem;display:flex;justify-content:space-between}
.sidebar-backdrop{display:none}.mobile-nav{display:none}

/* Generic internal pages */
.panel{background:#fff;border:1px solid #e8ecf4;border-radius:12px;box-shadow:var(--cs-shadow);padding:20px}
.panel+.panel{margin-top:18px}.panel-header{margin-bottom:16px}.panel-title h2,.panel-title h3{color:var(--cs-navy)}
.btn{border-radius:9px}.field input,.field select,.field textarea,.search-field input{border-radius:9px}
.table-wrap{border-radius:10px}.data-table th{background:#f6f8fc}
.alert{margin-top:16px;border-radius:10px}

/* Dashboard */
.dashboard-page{width:100%}
.dashboard-hero-card{position:relative;height:213px;margin:0 -24px;overflow:hidden;background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 25%,rgba(255,255,255,.52) 48%,rgba(255,255,255,0) 64%),url('../images/dashboard-hero.webp');background-position:left center,right center;background-size:100% 100%,auto 100%;background-repeat:no-repeat}
.dashboard-hero-copy{position:relative;z-index:2;padding:52px 48px}
.dashboard-hero-copy h1{margin:0;color:#142753;font-size:2rem;font-weight:900;line-height:1;letter-spacing:-.035em}
.dashboard-hero-copy p{margin:16px 0 0;color:#253654;font-size:.82rem}
.dashboard-metrics{position:relative;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:-1px}
.dashboard-metric{height:126px;padding:18px 16px;background:#fff;border:1px solid #e9edf5;border-radius:13px;box-shadow:var(--cs-shadow);display:flex;align-items:center;gap:15px;min-width:0}
.dashboard-metric-icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;flex:0 0 66px;font-size:1.7rem}
.dashboard-metric-icon.blue{background:linear-gradient(145deg,#dce8ff,#5b88f5);color:#fff}
.dashboard-metric-icon.green{background:linear-gradient(145deg,#d6f5eb,#b8e9dc);color:#009e7b}
.dashboard-metric-icon.purple{background:linear-gradient(145deg,#eee5ff,#d6bff9);color:#7122e5}
.dashboard-metric-icon.orange{background:linear-gradient(145deg,#ffecd9,#ffd29b);color:#ff881b}
.dashboard-metric-icon.blue-soft{background:linear-gradient(145deg,#e1eaff,#bcd0ff);color:#0648e8}
.dashboard-metric>div{min-width:0}.dashboard-metric>div>span{display:block;color:#1d2d4c;font-size:.76rem}
.dashboard-metric p{display:flex;align-items:baseline;gap:7px;margin:8px 0 7px;white-space:nowrap}
.dashboard-metric p strong{color:#142753;font-size:1.76rem;line-height:.92;font-weight:900;letter-spacing:-.04em}
.dashboard-metric p small{color:#64708b;font-size:.66rem}
.dashboard-metric em{display:block;color:#6a7590;font-style:normal;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.26fr) minmax(400px,1fr);gap:18px;margin-top:21px}
.dashboard-bottom-grid{display:grid;grid-template-columns:1.12fr 1.04fr 1fr;gap:18px;margin-top:18px}
.dashboard-card{background:#fff;border:1px solid #e8ecf4;border-radius:12px;box-shadow:var(--cs-shadow);min-width:0}
.dashboard-card>header{height:49px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.dashboard-card h2{margin:0;color:#15264d;font-size:.86rem;font-weight:800}
.dashboard-range{height:27px;padding:0 10px;border:1px solid #dfe5f0;border-radius:7px;display:inline-flex;align-items:center;gap:8px;color:#1d315d;font-size:.66rem}
.dashboard-stock-summary{min-height:272px}.dashboard-stock-columns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:0 14px 12px}
.dashboard-stock-item{min-width:0;min-height:200px;padding:0 8px;text-align:center;border-left:1px solid #e7ebf3;display:flex;flex-direction:column;align-items:center}
.dashboard-stock-item:first-child{border-left:0}
.dashboard-stock-item h3{width:100%;margin:0 0 13px;color:#14213d;font-size:.69rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-stock-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#e7efff;color:#0648e8;font-size:1.75rem}
.dashboard-stock-item strong{margin-top:11px;color:#0648e8;font-size:1.45rem;font-weight:900;line-height:1}
.dashboard-stock-item>small{margin-top:5px;color:#66728c;font-size:.64rem}
.dashboard-stock-item progress{width:100%;height:7px;margin-top:14px;border:0;border-radius:99px;appearance:none;background:#e7ebf2;overflow:hidden}
.dashboard-stock-item progress::-webkit-progress-bar{background:#e7ebf2}.dashboard-stock-item progress::-webkit-progress-value{background:#0648e8;border-radius:99px}.dashboard-stock-item progress::-moz-progress-bar{background:#0648e8;border-radius:99px}
.dashboard-stock-item em{margin-top:9px;color:#008a71;font-size:.67rem;font-style:normal;font-weight:700}.dashboard-stock-item em span{display:block;margin-top:3px;color:#66728c;font-weight:400}
.dashboard-stock-item.tone-green .dashboard-stock-icon{background:#dcf7ef;color:#00a17f}.dashboard-stock-item.tone-green strong{color:#0648e8}.dashboard-stock-item.tone-green progress::-webkit-progress-value{background:#00aa86}.dashboard-stock-item.tone-green progress::-moz-progress-bar{background:#00aa86}
.dashboard-stock-item.tone-purple .dashboard-stock-icon{background:#efe3ff;color:#7526df}.dashboard-stock-item.tone-purple progress::-webkit-progress-value{background:#8b2deb}.dashboard-stock-item.tone-purple progress::-moz-progress-bar{background:#8b2deb}
.dashboard-stock-item.tone-orange .dashboard-stock-icon{background:#ffebd8;color:#f27b08}.dashboard-stock-item.tone-orange progress::-webkit-progress-value{background:#ff9021}.dashboard-stock-item.tone-orange progress::-moz-progress-bar{background:#ff9021}.dashboard-stock-item.tone-orange em{color:#b66c00}
.dashboard-stock-item.tone-gray .dashboard-stock-icon{background:#edeff3;color:#858da2}.dashboard-stock-item.tone-gray strong{color:#59637a}.dashboard-stock-item.tone-gray progress::-webkit-progress-value{background:#ef2d7f}.dashboard-stock-item.tone-gray progress::-moz-progress-bar{background:#ef2d7f}.dashboard-stock-item.tone-gray em{color:#e42164}
.dashboard-chart-card{min-height:272px}.dashboard-chart-legend{height:25px;display:flex;align-items:center;justify-content:center;gap:25px;color:#64708c;font-size:.63rem}.dashboard-chart-legend span{display:flex;align-items:center;gap:7px}.dashboard-chart-legend i{width:17px;height:2px}.dashboard-chart-legend i.in{background:#0648e8}.dashboard-chart-legend i.out{background:#ff2a80}
.dashboard-chart-wrap{height:190px;padding:0 10px 8px}.dashboard-chart-wrap svg{width:100%;height:100%;overflow:visible}.chart-grid-line{stroke:#e7ebf2;stroke-width:1}.chart-y-label,.chart-x-label{fill:#53617c;font-size:12px;font-family:"Roboto Condensed",sans-serif}.chart-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.chart-line-in{stroke:#0648e8}.chart-line-out{stroke:#ff2a80}.chart-dot-in{fill:#0648e8}.chart-dot-out{fill:#ff2a80}
.dashboard-list-card{min-height:246px;padding-bottom:5px}.dashboard-list{padding:0 16px}.dashboard-list-row{min-height:55px;display:flex;align-items:center;gap:11px;border-bottom:1px solid #e9edf3;min-width:0}.dashboard-list-row:last-child{border-bottom:0}
.dashboard-list-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;flex:0 0 35px;font-size:.93rem}.dashboard-list-icon.blue{background:#e5ecff;color:#0648e8}.dashboard-list-icon.pink{background:#ffe8f2;color:#ff2a80}.dashboard-list-icon.green{background:#e0f7ef;color:#00a17f}.dashboard-list-icon.orange{background:#fff0df;color:#f27b08}.dashboard-list-icon.purple{background:#f0e5ff;color:#7526df}
.dashboard-list-row>div{min-width:0;flex:1}.dashboard-list-row strong,.dashboard-list-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-list-row strong{color:#243456;font-size:.67rem;font-weight:700}.dashboard-list-row small{margin-top:4px;color:#68748d;font-size:.62rem}
.dashboard-list-row>em{min-width:52px;height:27px;padding:0 9px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:.63rem}.dashboard-list-row>em.blue{background:#e8efff;color:#0648e8}.dashboard-list-row>em.pink{background:#ffe8f2;color:#ff2a80}.dashboard-list-row>em.green{background:#dff7ef;color:#008b70}.dashboard-list-row>em.orange{background:#fff1df;color:#ef8415}
.minimum-label{margin-left:auto;color:#68748d;font-size:.61rem;white-space:nowrap}.low-row>em{margin-left:4px}.approval-icon{width:35px;height:35px;display:grid;place-items:center;color:#6d7892;font-size:1rem;flex:0 0 35px}
.dashboard-card-link{height:39px;padding:0 20px;display:flex;align-items:center;gap:12px;color:#0648e8;text-decoration:none;font-size:.66rem;font-weight:700}.dashboard-empty{min-height:145px;display:flex;align-items:center;justify-content:center;gap:10px;color:#78849d;font-size:.72rem}.dashboard-empty i{font-size:1.2rem}

/* Login */
body.campus-login-page{min-height:100vh;margin:0;background:#fff;color:var(--cs-text);font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif}
.campus-login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(480px,1.08fr) minmax(420px,.92fr)}
.campus-login-visual{position:relative;min-height:100vh;padding:34px 48px;overflow:hidden;background:#fff url('../images/campusstock-unej-hero-1600.webp') center bottom/cover no-repeat}
.campus-login-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 38%,rgba(255,255,255,.16) 72%,rgba(255,255,255,0) 100%)}
.campus-login-brand,.campus-login-message{position:relative;z-index:2}.campus-login-brand{width:max-content}
.campus-login-message{max-width:485px;margin-top:18vh}.campus-login-message>span{display:inline-flex;padding:7px 12px;border-radius:999px;background:#edf3ff;color:var(--cs-blue);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.campus-login-message h1{margin:16px 0 14px;color:var(--cs-blue);font-size:clamp(2.8rem,4.3vw,4.7rem);line-height:.98;font-weight:900;letter-spacing:-.05em}.campus-login-message p{max-width:470px;margin:0;color:#4f5e78;font-size:1rem;line-height:1.65}
.campus-login-benefits{display:flex;gap:13px;margin-top:31px}.campus-login-benefits>div{min-width:130px;padding:13px;border:1px solid rgba(6,72,232,.1);border-radius:13px;background:rgba(255,255,255,.88);display:flex;align-items:center;gap:9px;box-shadow:0 9px 24px rgba(23,57,115,.06)}.campus-login-benefits i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e6efff;color:var(--cs-blue);font-size:.95rem}.campus-login-benefits strong,.campus-login-benefits small{display:block}.campus-login-benefits strong{font-size:.73rem;color:#1f3158}.campus-login-benefits small{margin-top:3px;color:#6c7891;font-size:.59rem}
.campus-login-form-side{display:grid;place-items:center;padding:36px;background:linear-gradient(145deg,#f7f9ff,#fff)}
.campus-login-card{width:min(430px,100%);padding:38px 40px;border:1px solid #e6ebf4;border-radius:24px;background:#fff;box-shadow:0 28px 70px rgba(27,56,111,.12)}
.campus-login-mobile-brand{display:none;margin-bottom:28px}.campus-login-kicker{color:var(--cs-blue);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.campus-login-card h2{margin:8px 0 8px;color:#142753;font-size:2rem;font-weight:900;letter-spacing:-.04em}.campus-login-card>p{margin:0 0 25px;color:#68748e;font-size:.84rem}.campus-login-alert{margin:0 0 18px}
.campus-login-form{display:flex;flex-direction:column;gap:17px}.campus-login-field{display:flex;flex-direction:column;gap:7px}.campus-login-field>span{color:#35425e;font-size:.72rem;font-weight:700}.campus-login-field>div{position:relative}.campus-login-field>div>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#71809d}.campus-login-field input{width:100%;height:48px;padding:0 45px 0 42px;border:1px solid #dfe5ef;border-radius:11px;outline:0;background:#fff;color:#263652;font-size:.78rem}.campus-login-field input:focus{border-color:#7da2f4;box-shadow:0 0 0 3px rgba(6,72,232,.09)}.campus-login-field button{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:transparent;color:#75819a}
.campus-login-options{display:flex;align-items:center;justify-content:space-between;color:#63708a;font-size:.69rem}.campus-login-options label{display:flex;align-items:center;gap:7px}.campus-login-options input{accent-color:var(--cs-blue)}.campus-login-options a{color:var(--cs-blue);text-decoration:none;font-weight:700}.campus-login-submit{height:50px;border:0;border-radius:11px;background:var(--cs-blue);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:.88rem;font-weight:800;box-shadow:0 13px 27px rgba(6,72,232,.22);transition:.18s}.campus-login-submit:hover{background:var(--cs-blue-dark);transform:translateY(-1px)}.campus-install-link{display:block;margin-top:16px;text-align:center;color:var(--cs-blue);font-size:.72rem}.campus-login-security{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:23px;color:#78839a;font-size:.64rem}.campus-login-security i{color:#00a17f}

@media(max-width:1250px){
  .dashboard-metric{gap:10px;padding:15px 12px}.dashboard-metric-icon{width:55px;height:55px;flex-basis:55px;font-size:1.45rem}.dashboard-metric p strong{font-size:1.5rem}
  .dashboard-stock-columns{padding-left:7px;padding-right:7px}.dashboard-stock-item{padding:0 5px}
  .campus-login-shell{grid-template-columns:1fr 450px}.campus-login-benefits{flex-wrap:wrap}
}
@media(max-width:1080px){
  .dashboard-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-main-grid{grid-template-columns:1fr}.dashboard-bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-bottom-grid>article:last-child{grid-column:1/-1}
  .campus-login-shell{grid-template-columns:1fr}.campus-login-visual{min-height:430px;padding:26px 30px}.campus-login-message{margin-top:70px}.campus-login-form-side{padding:45px 20px}.campus-login-card{margin-top:-90px;position:relative;z-index:4}.campus-login-visual:after{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.4))}
}
@media(max-width:900px){
  .sidebar{transform:translateX(-105%);transition:transform .22s ease}.app-main{margin-left:0}.app-shell.sidebar-open .sidebar{transform:translateX(0)}.sidebar-backdrop{display:block;position:fixed;inset:0;border:0;background:rgba(8,24,60,.42);opacity:0;visibility:hidden;z-index:90;transition:.2s}.app-shell.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}.topbar{padding:0 18px}.topbar-search{width:min(320px,48vw)}
  .content-area{padding-bottom:86px}.mobile-nav{position:fixed;z-index:80;left:10px;right:10px;bottom:8px;height:64px;padding:6px 8px;border:1px solid #e4e9f3;border-radius:17px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);box-shadow:0 15px 35px rgba(22,48,102,.16);display:flex;align-items:center;justify-content:space-around}.mobile-nav a{min-width:52px;height:50px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#6a7590;text-decoration:none;font-size:.58rem}.mobile-nav a i{font-size:1.12rem}.mobile-nav a.active{background:#eaf1ff;color:var(--cs-blue)}
}
@media(max-width:700px){
  .topbar{height:62px;min-height:62px;padding:0 12px}.topbar-left{gap:9px}.topbar-search{display:none}.topbar-mobile-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.topbar-actions{gap:8px}.topbar-user{min-width:0}.topbar-user-copy,.topbar-user>i{display:none}.topbar-user img,.topbar-avatar{width:36px;height:36px;flex-basis:36px}.topbar-notification{font-size:1.1rem}
  .content-area{padding-left:12px;padding-right:12px}.dashboard-hero-card{height:190px;margin:0 -12px;background-position:left center,65% center}.dashboard-hero-copy{padding:35px 20px;max-width:72%}.dashboard-hero-copy h1{font-size:1.65rem;line-height:1.08}.dashboard-hero-copy p{font-size:.74rem;line-height:1.45}
  .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:-12px}.dashboard-metric{height:105px;padding:12px}.dashboard-metric-icon{width:48px;height:48px;flex-basis:48px;font-size:1.25rem}.dashboard-metric p{margin:5px 0}.dashboard-metric p strong{font-size:1.25rem}.dashboard-metric p small,.dashboard-metric em{font-size:.58rem}
  .dashboard-main-grid,.dashboard-bottom-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.dashboard-bottom-grid>article:last-child{grid-column:auto}.dashboard-stock-columns{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.dashboard-stock-item:nth-child(4){border-left:0}.dashboard-chart-wrap{overflow-x:auto}.dashboard-chart-wrap svg{min-width:600px}.dashboard-list-card{min-height:auto}.minimum-label{display:none}
  .app-footer{padding-bottom:73px;flex-direction:column;gap:4px}
  .campus-login-visual{min-height:350px;padding:21px 18px}.campus-login-brand{display:none}.campus-login-message{margin-top:22px;max-width:95%}.campus-login-message h1{font-size:2.5rem}.campus-login-message p{font-size:.85rem}.campus-login-benefits{display:none}.campus-login-form-side{padding:0 14px 35px}.campus-login-card{margin-top:-35px;padding:27px 22px;border-radius:20px}.campus-login-mobile-brand{display:flex}.campus-login-card h2{font-size:1.7rem}
}
@media(max-width:430px){
  .dashboard-hero-copy{max-width:82%}.dashboard-hero-copy h1{font-size:1.42rem}.dashboard-metrics{grid-template-columns:1fr}.dashboard-metric{height:94px}.dashboard-stock-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-stock-item:nth-child(3),.dashboard-stock-item:nth-child(5){border-left:0}.dashboard-stock-item:nth-child(4){border-left:1px solid #e7ebf3}.dashboard-list-row strong{max-width:190px}.campus-login-message h1{font-size:2.15rem}.campus-login-message p{display:none}.campus-login-visual{min-height:285px}.campus-login-options{align-items:flex-start;gap:12px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.campus-login-options>span{display:flex;align-items:center;gap:7px}.campus-login-options>span i{color:var(--cs-blue)}

/* =========================================================
   Interactive navigation: collapse, accordion, user menu
========================================================= */
.sidebar,.app-main{transition:width .22s ease,margin-left .22s ease,transform .22s ease}
.side-link-root{margin-bottom:3px}
.side-accordion-group{display:flex;flex-direction:column;min-width:0}
.side-group-toggle{width:100%;min-height:31px;margin-top:7px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:#9fc0ff;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font:inherit;text-align:left;transition:background .16s ease,color .16s ease}
.side-group-toggle:hover,.side-accordion-group.has-active>.side-group-toggle{background:rgba(255,255,255,.075);color:#fff}
.side-group-title{min-width:0;display:flex;align-items:center;gap:10px}
.side-group-title>i{width:22px;flex:0 0 22px;text-align:center;font-size:.88rem}
.side-group-title>span{font-size:.62rem;font-weight:600;letter-spacing:.035em;white-space:nowrap}
.side-group-chevron{font-size:.62rem;transition:transform .18s ease}
.side-group-toggle[aria-expanded="false"] .side-group-chevron{transform:rotate(-90deg)}
.side-group-items{display:flex;flex-direction:column;gap:1px;padding-top:2px}
.side-group-items[hidden]{display:none}
.side-group-items .side-link{padding-left:12px}

.app-shell.sidebar-collapsed .sidebar{width:78px;padding-left:10px;padding-right:10px}
.app-shell.sidebar-collapsed .app-main{margin-left:78px}
.app-shell.sidebar-collapsed .sidebar-brand{margin-left:-10px;margin-right:-10px;padding:0;justify-content:center}
.app-shell.sidebar-collapsed .sidebar-brand .campus-brand-copy{display:none}
.app-shell.sidebar-collapsed .side-nav{align-items:stretch}
.app-shell.sidebar-collapsed .side-link{width:48px;min-height:42px;margin-left:auto;margin-right:auto;padding:0;justify-content:center;border-radius:10px}
.app-shell.sidebar-collapsed .side-link span{display:none}
.app-shell.sidebar-collapsed .side-link i{width:auto;font-size:1.08rem}
.app-shell.sidebar-collapsed .side-link.active{min-height:42px}
.app-shell.sidebar-collapsed .side-group-toggle{display:none}
.app-shell.sidebar-collapsed .side-group-items,.app-shell.sidebar-collapsed .side-group-items[hidden]{display:flex!important;padding-top:5px}
.app-shell.sidebar-collapsed .side-accordion-group{padding-top:3px;border-top:1px solid rgba(255,255,255,.10)}
.app-shell.sidebar-collapsed .side-accordion-group:first-of-type{border-top:0}

.topbar-user-menu{position:relative}
.topbar-user{border:0;background:transparent;padding:0;cursor:pointer;font-family:inherit;text-align:left}
.topbar-user-chevron{transition:transform .18s ease}
.topbar-user-menu.is-open .topbar-user-chevron{transform:rotate(180deg)}
.topbar-user-dropdown{position:absolute;right:0;top:calc(100% + 12px);z-index:120;width:220px;padding:8px;border:1px solid #e3e8f1;border-radius:13px;background:#fff;box-shadow:0 18px 45px rgba(24,47,98,.16)}
.topbar-user-dropdown[hidden]{display:none}
.topbar-user-dropdown:before{content:"";position:absolute;right:18px;top:-6px;width:11px;height:11px;background:#fff;border-left:1px solid #e3e8f1;border-top:1px solid #e3e8f1;transform:rotate(45deg)}
.topbar-user-dropdown-head{padding:9px 10px 11px}
.topbar-user-dropdown-head strong,.topbar-user-dropdown-head small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-user-dropdown-head strong{color:var(--cs-navy);font-size:.82rem}
.topbar-user-dropdown-head small{margin-top:4px;color:#768199;font-size:.68rem}
.topbar-user-dropdown-separator{height:1px;margin:4px 3px;background:#edf0f5}
.topbar-user-dropdown form{margin:0}
.topbar-user-dropdown-item{width:100%;min-height:39px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#263758;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:inherit;font-size:.74rem;font-weight:600;cursor:pointer;text-align:left}
.topbar-user-dropdown-item i{width:20px;color:#31599f;text-align:center;font-size:.95rem}
.topbar-user-dropdown-item:hover{background:#f1f5ff;color:var(--cs-blue)}
.topbar-user-dropdown-item.danger{color:#c63c4e}
.topbar-user-dropdown-item.danger i{color:#e34458}
.topbar-user-dropdown-item.danger:hover{background:#fff0f2;color:#bc263a}

.dashboard-card h2{display:flex;align-items:center;gap:8px}
.dashboard-card-title-icon{width:27px;height:27px;border-radius:8px;display:inline-grid;place-items:center;flex:0 0 27px;font-size:.78rem}
.dashboard-card-title-icon.blue{background:#e7efff;color:#0648e8}
.dashboard-card-title-icon.pink{background:#ffe9f3;color:#f12a7c}
.dashboard-card-title-icon.orange{background:#fff0df;color:#ef8215}
.dashboard-card-title-icon.purple{background:#efe6ff;color:#7625df}
.dashboard-card-title-icon.green{background:#e0f7ef;color:#008f71}

@media(max-width:900px){
  .app-shell.sidebar-collapsed .sidebar{width:var(--sidebar);padding-left:14px;padding-right:14px}
  .app-shell.sidebar-collapsed .app-main{margin-left:0}
  .app-shell.sidebar-collapsed .sidebar-brand{margin-left:-14px;margin-right:-14px;padding:0 20px;justify-content:flex-start}
  .app-shell.sidebar-collapsed .sidebar-brand .campus-brand-copy{display:block}
  .app-shell.sidebar-collapsed .side-link{width:auto;min-height:29px;margin-left:0;margin-right:0;padding:0 11px;justify-content:flex-start;border-radius:6px}
  .app-shell.sidebar-collapsed .side-link span{display:inline}
  .app-shell.sidebar-collapsed .side-link i{width:22px;font-size:.93rem}
  .app-shell.sidebar-collapsed .side-link.active{min-height:35px}
  .app-shell.sidebar-collapsed .side-group-toggle{display:flex}
  .app-shell.sidebar-collapsed .side-group-items[hidden]{display:none!important}
  .app-shell.sidebar-collapsed .side-accordion-group{padding-top:0;border-top:0}
}

@media(max-width:700px){
  .topbar-user-dropdown{right:-2px;top:calc(100% + 10px);width:min(220px,calc(100vw - 24px))}
  .side-group-toggle{min-height:35px}
  .side-group-title>span{font-size:.66rem}
}


/* Login simulation accounts */
.campus-demo-accounts{margin-top:15px;border:1px solid #e4e9f4;border-radius:12px;background:#f8faff;overflow:hidden}
.campus-demo-accounts summary{min-height:43px;padding:0 14px;display:flex;align-items:center;gap:9px;color:#18366f;font-size:.75rem;font-weight:700;cursor:pointer;list-style:none;user-select:none}
.campus-demo-accounts summary::-webkit-details-marker{display:none}
.campus-demo-accounts summary>i:first-child{color:var(--cs-blue);font-size:.95rem}
.campus-demo-accounts summary>span{flex:1}
.campus-demo-accounts summary>i:last-child{font-size:.7rem;transition:transform .18s ease}
.campus-demo-accounts[open] summary>i:last-child{transform:rotate(180deg)}
.campus-demo-accounts-body{padding:0 12px 12px;border-top:1px solid #e8ecf5}
.campus-demo-accounts-body>p{margin:10px 2px;color:#6b7894;font-size:.68rem}
.campus-demo-accounts-body>p strong{color:#18366f;user-select:all}
.campus-demo-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.campus-demo-account-grid button{min-width:0;min-height:47px;padding:7px 9px;border:1px solid #e4e9f4;border-radius:9px;background:#fff;color:#243758;display:flex;align-items:center;gap:8px;font-family:inherit;text-align:left;cursor:pointer;transition:.15s ease}
.campus-demo-account-grid button:hover{border-color:#b9caff;background:#f0f5ff;transform:translateY(-1px)}
.campus-demo-account-grid button>i:first-child{width:27px;height:27px;border-radius:8px;background:#e8efff;color:var(--cs-blue);display:grid;place-items:center;flex:0 0 27px}
.campus-demo-account-grid button>span{min-width:0;flex:1}
.campus-demo-account-grid button strong,.campus-demo-account-grid button small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.campus-demo-account-grid button strong{font-size:.67rem}
.campus-demo-account-grid button small{margin-top:2px;color:#78839a;font-size:.6rem}
.campus-demo-account-grid button>i:last-child{color:#8a96ae;font-size:.66rem}
@media(max-width:520px){.campus-demo-account-grid{grid-template-columns:1fr}.campus-demo-accounts summary{font-size:.72rem}}


/* Admin demo seeder */
.demo-seed-metrics{margin:18px 0}.demo-seed-metrics .dashboard-metric{min-width:0}
.demo-seed-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.demo-seed-card{padding:20px;border:1px solid #e4e9f3;border-radius:14px;background:#fff;box-shadow:0 8px 25px rgba(32,57,109,.05)}
.demo-seed-card h3{margin:0 0 13px;display:flex;align-items:center;gap:9px;color:#152a55;font-size:1rem}.demo-seed-card h3 i{color:var(--cs-blue)}
.demo-seed-card ul{margin:0;padding-left:19px;color:#5c6880;font-size:.8rem;line-height:1.65}.demo-seed-card p{margin:12px 0 0;color:#5c6880;font-size:.78rem}
.demo-seed-card code{padding:2px 6px;border-radius:6px;background:#eef3ff;color:#0648e8;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;user-select:all}
.demo-credential-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.demo-credential-list>div{padding:8px 9px;border:1px solid #e8ecf4;border-radius:9px;background:#fafbfe}.demo-credential-list span,.demo-credential-list code{display:block}.demo-credential-list span{margin-bottom:5px;color:#778198;font-size:.67rem}
@media(max-width:900px){.demo-seed-grid{grid-template-columns:1fr}.demo-seed-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.demo-seed-metrics{grid-template-columns:1fr}.demo-credential-list{grid-template-columns:1fr}}

/* =========================================================
   Budget period, dashboard insight tabs, size & faculty data
========================================================= */
.budget-filter-bar{margin:-14px 0 16px;padding:12px 14px;border:1px solid #e6ebf5;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(24,54,112,.07);display:grid;grid-template-columns:minmax(230px,1fr) minmax(140px,.38fr) minmax(140px,.38fr) minmax(190px,.55fr) auto auto;align-items:end;gap:10px;position:relative;z-index:6}
.budget-filter-title{display:flex;align-items:center;gap:11px;min-width:0;align-self:center}.budget-filter-title>span{width:43px;height:43px;border-radius:13px;background:#e8efff;color:#0648e8;display:grid;place-items:center;font-size:1.18rem;flex:0 0 43px}.budget-filter-title strong,.budget-filter-title small{display:block}.budget-filter-title strong{color:#172a50;font-size:.82rem}.budget-filter-title small{margin-top:2px;color:#6e7b94;font-size:.67rem}.budget-filter-bar label{display:flex;flex-direction:column;gap:5px}.budget-filter-bar label span{font-size:.65rem;font-weight:800;color:#5c6982}.budget-filter-bar input,.budget-filter-bar select{height:41px;min-width:0;border:1px solid #dfe5f0;border-radius:11px;padding:0 11px;color:#233452;background:#fff;font:inherit;font-size:.75rem;outline:none}.budget-filter-bar select{padding-right:30px;text-overflow:ellipsis}.budget-filter-bar input:focus,.budget-filter-bar select:focus{border-color:#7ca5f6;box-shadow:0 0 0 3px rgba(47,115,245,.1)}
.dashboard-tab-shell{margin-top:14px;border:1px solid #e6ebf5;border-radius:17px;background:#f3f6fc;overflow:hidden;box-shadow:0 12px 30px rgba(28,57,111,.06)}
.insight-tabs{min-height:74px;padding:10px;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:stretch;gap:12px;border:1px solid #e3e8f3;border-radius:24px;background:#eef3fd;scrollbar-width:thin;scroll-snap-type:x proximity}.insight-tabs::-webkit-scrollbar{height:7px}.insight-tabs::-webkit-scrollbar-thumb{background:#d4dded;border-radius:999px}
.insight-tab{flex:0 0 220px;height:58px;padding:0 18px;border:0;border-radius:17px;background:transparent;color:#68779a;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:.73rem;font-weight:800;cursor:pointer;transition:.18s ease;white-space:nowrap;scroll-snap-align:start}.insight-tab i{width:32px;height:32px;border-radius:10px;background:#e4ebfb;color:#7584a8;display:grid;place-items:center;font-size:1rem}.insight-tab.active{background:#fff;color:#102957;box-shadow:0 10px 24px rgba(20,55,120,.08)}.insight-tab.active i{background:linear-gradient(145deg,#3778ff,#1458e3);color:#fff;box-shadow:0 7px 15px rgba(20,88,227,.24)}
.dashboard-tab-shell>[data-tab-panel]{padding:13px}.dashboard-tab-card{margin:0;min-height:268px;box-shadow:none}.dashboard-tab-card>header{min-height:49px}
.dashboard-chart-large{height:250px;padding:0 18px 12px}.dashboard-chart-large svg{height:230px}
.size-stock-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:3px 15px 18px}.size-stock-group{border:1px solid #e7ebf3;border-radius:15px;background:#fbfcff;padding:14px;min-width:0}.size-stock-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.size-category-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.2rem}.size-category-icon.blue{background:#e7efff;color:#0648e8}.size-category-icon.green{background:#def7ef;color:#00967a}.size-stock-heading h3{margin:0;color:#1c2d50;font-size:.85rem}.size-stock-heading small{display:block;margin-top:3px;color:#74809a;font-size:.66rem}.size-stock-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.size-stock-grid article{min-height:72px;padding:9px 5px;border:1px solid #e8ecf4;border-radius:11px;background:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center}.size-stock-grid span{color:#6c7993;font-size:.62rem;font-weight:800}.size-stock-grid strong{margin-top:4px;color:#0648e8;font-size:1.08rem;line-height:1}.size-stock-grid small{margin-top:3px;color:#8a95aa;font-size:.57rem}
.faculty-ranking-list{padding:4px 17px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}.faculty-ranking-row{min-height:71px;padding:9px 12px;border:1px solid #e7ebf3;border-radius:13px;background:#fbfcff;display:flex;align-items:center;gap:10px;min-width:0}.faculty-rank{width:28px;height:28px;border-radius:9px;background:#e8efff;color:#0648e8;display:grid;place-items:center;font-weight:900;font-size:.72rem;flex:0 0 28px}.faculty-rank.rank-1{background:#fff1c9;color:#a26a00}.faculty-rank.rank-2{background:#edf0f5;color:#6b7486}.faculty-rank.rank-3{background:#ffe7d2;color:#a95b16}.faculty-ranking-icon{width:36px;height:36px;border-radius:11px;background:#e9efff;color:#164fd0;display:grid;place-items:center;flex:0 0 36px}.faculty-ranking-row>div{min-width:0;flex:1}.faculty-ranking-row strong,.faculty-ranking-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.faculty-ranking-row strong{color:#223354;font-size:.72rem}.faculty-ranking-row small{margin-top:3px;color:#74809a;font-size:.61rem}.faculty-ranking-row progress{width:100%;height:5px;margin-top:7px;border:0;border-radius:999px;overflow:hidden;background:#e8edf5;appearance:none}.faculty-ranking-row progress::-webkit-progress-bar{background:#e8edf5}.faculty-ranking-row progress::-webkit-progress-value{background:linear-gradient(90deg,#0648e8,#7aa2ff);border-radius:999px}.faculty-ranking-row progress::-moz-progress-bar{background:linear-gradient(90deg,#0648e8,#7aa2ff);border-radius:999px}.faculty-ranking-row>em{font-style:normal;font-size:.9rem;font-weight:900;color:#0648e8}
.faculty-cell{display:flex;align-items:center;gap:8px;min-width:160px}.faculty-cell>i{width:31px;height:31px;border-radius:10px;background:#e9efff;color:#164fd0;display:grid;place-items:center;flex:0 0 31px}.faculty-cell strong,.faculty-cell small{display:block}.faculty-cell strong{font-size:.72rem;color:#1c2f55}.faculty-cell small{max-width:170px;margin-top:2px;color:#77839b;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-table{min-width:1120px}.transaction-filter .search-field{min-width:220px}.transaction-detail-head{margin-top:20px}.transaction-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.transaction-detail-grid>div{padding:13px;background:#f7f9fd;border-radius:14px}.transaction-detail-grid>div span{display:block;color:#74809a;font-size:.68rem}.transaction-detail-grid>div strong{display:block;margin-top:5px;color:#203255;font-size:.79rem}

@media(max-width:1100px){.budget-filter-bar{grid-template-columns:minmax(220px,1fr) repeat(3,minmax(140px,.55fr));}.budget-filter-bar .btn{min-height:40px}.budget-filter-bar>.btn{grid-row:2}.budget-filter-bar>.btn.primary{grid-column:3}.budget-filter-bar>.btn.outline{grid-column:4}.size-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.budget-filter-bar{margin-top:-8px;grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}.budget-filter-title{grid-column:1/-1}.budget-filter-bar label:nth-of-type(3){grid-column:1/-1}.budget-filter-bar>.btn.primary,.budget-filter-bar>.btn.outline{grid-column:auto;grid-row:auto}.insight-tabs{padding:8px;min-height:66px}.insight-tab{flex-basis:170px;min-width:170px;height:52px;border-radius:14px}.insight-tab.active{box-shadow:0 8px 18px rgba(20,55,120,.08)}.dashboard-tab-shell>[data-tab-panel]{padding:8px}.size-stock-groups,.faculty-ranking-list{grid-template-columns:1fr;padding:2px 8px 12px}.size-stock-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-chart-large{overflow-x:auto;height:235px}.dashboard-chart-large svg{min-width:650px}.transaction-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.budget-filter-bar{grid-template-columns:1fr}.budget-filter-bar label,.budget-filter-bar>.btn{grid-column:1}.insight-tab{min-width:132px}.size-stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.transaction-detail-grid{grid-template-columns:1fr}}

/* =========================================================
   Normal display scale
   - Desktop, laptop, tablet, and mobile remain at 100%.
   - No root zoom is applied, so responsive breakpoints use
     the actual viewport width on every device.
========================================================= */
html{
  zoom:1;
}

@media print{
  html{
    zoom:1!important;
  }
}


/* Dokumen penerimaan dan peringatan stok < 1.000 */
@keyframes stockAlertPulse{0%,100%{opacity:1;filter:none}50%{opacity:.48;filter:saturate(1.25)}}
.stock-alert-blink{animation:stockAlertPulse 1.15s ease-in-out infinite}
.stock-alert-row{background:linear-gradient(90deg,rgba(255,61,113,.075),transparent 72%)}
.stock-quantity{display:inline-flex;align-items:center;font-weight:800;border-radius:9px;padding:.28rem .55rem}
.stock-alert-card{border-color:rgba(255,61,113,.42)!important;background:linear-gradient(145deg,#fff,#fff4f7)!important;box-shadow:0 8px 22px rgba(255,61,113,.12)!important}
.document-receipt-section{margin-top:1.25rem;padding-top:.35rem;border-top:1px solid #e7ecf8}
.document-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1rem 0}
.document-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:.9rem;align-items:stretch;padding:.8rem;border:1px solid #e5eaf5;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(33,64,145,.07)}
.document-preview{min-height:96px;border-radius:14px;overflow:hidden;background:#edf3ff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;color:#1255e8}
.document-preview img{width:100%;height:100%;min-height:96px;object-fit:cover;display:block}
.document-preview.pdf{background:linear-gradient(145deg,#fff0f2,#ffe3e8);color:#dc3545}.document-preview.pdf i{font-size:2.2rem}.document-preview.pdf span{font-weight:800;font-size:.74rem}
.document-card-body{min-width:0;display:flex;flex-direction:column;gap:.18rem}.document-card-body>span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#6b7899}.document-card-body strong{color:#142553}.document-card-body small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#63708f}.document-card-body em{font-size:.75rem;color:#8490ac;font-style:normal}.document-card-body p{margin:.3rem 0 0;font-size:.8rem;color:#52617e}
.document-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;border:1px dashed #cfd8ed;border-radius:18px;background:#f8faff;color:#6b7899}.document-empty i{font-size:2rem;color:#2d63ff}.document-empty strong{margin-top:.35rem;color:#26375f}.document-empty small{margin-top:.2rem}
.document-upload-form{margin-top:1rem;padding:1rem;border:1px solid #dfe6f5;border-radius:18px;background:linear-gradient(145deg,#fbfcff,#f5f8ff)}
.document-upload-heading{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}.document-upload-heading>div{display:flex;flex-direction:column}.document-upload-heading strong{color:#162755}.document-upload-heading small{color:#6f7b98}
@media(max-width:680px){.document-card{grid-template-columns:72px minmax(0,1fr)}.document-preview,.document-preview img{min-height:82px}.document-upload-form{padding:.8rem}}
@media(prefers-reduced-motion:reduce){.stock-alert-blink{animation:none!important}.stock-alert-card{outline:2px solid rgba(255,61,113,.36)}}

/* Auto BAST, foto penerimaan, dan stok real-time fakultas */
.auto-bast-card{margin:1rem 0;padding:1rem;border:1px solid #dfe6f5;border-radius:18px;background:linear-gradient(145deg,#f7f9ff,#fff);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:.8rem;box-shadow:0 10px 26px rgba(30,65,145,.07)}
.auto-bast-card>div{min-width:0}.auto-bast-card strong,.auto-bast-card small{display:block}.auto-bast-card strong{color:#172957;font-size:.86rem}.auto-bast-card small{margin-top:.18rem;color:#6f7b98;font-size:.72rem;line-height:1.4}
.bast-confirm-form{margin-top:1rem;padding:1rem;border:1px solid #d9e3f7;border-radius:16px;background:#f7faff;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.bast-confirm-form small{color:#7a86a1}
.faculty-stock-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1rem 0}.faculty-stock-summary-grid article{min-height:104px;padding:1rem;border:1px solid #e3e9f5;border-radius:18px;background:#fff;display:flex;align-items:center;gap:.85rem;box-shadow:0 8px 24px rgba(30,63,135,.06)}.faculty-stock-summary-grid article>div{min-width:0}.faculty-stock-summary-grid small,.faculty-stock-summary-grid strong,.faculty-stock-summary-grid em{display:block}.faculty-stock-summary-grid small{color:#71809d;font-size:.72rem;font-weight:700}.faculty-stock-summary-grid strong{margin-top:.15rem;color:#142855;font-size:1.65rem;line-height:1}.faculty-stock-summary-grid em{margin-top:.25rem;color:#8792aa;font-size:.68rem;font-style:normal}
.bast-status-line{margin-top:1.4rem;padding:.65rem .8rem;border:1px solid #dfe5ef;background:#f7f9fc;font-size:.85rem}.bast-photo-appendix{margin-top:1.5rem;break-before:page}.bast-photo-appendix h2{text-align:center;font-size:1.05rem;text-transform:uppercase}.bast-photo-print-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bast-photo-print-grid figure{margin:0;border:1px solid #d8dee9;padding:7px;break-inside:avoid}.bast-photo-print-grid img{width:100%;height:220px;object-fit:cover;display:block}.bast-photo-print-grid figcaption{padding-top:5px;text-align:center;font-size:.75rem}
.table-actions{display:inline-flex;align-items:center;gap:.35rem}
@media(max-width:1100px){.faculty-stock-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auto-bast-card{grid-template-columns:auto minmax(0,1fr) auto}.auto-bast-card .btn{grid-row:2}.auto-bast-card .btn.secondary{grid-column:2}.auto-bast-card .btn.outline{grid-column:3}}
@media(max-width:700px){.faculty-stock-summary-grid{grid-template-columns:1fr 1fr;gap:.65rem}.faculty-stock-summary-grid article{min-height:92px;padding:.75rem}.faculty-stock-summary-grid strong{font-size:1.35rem}.auto-bast-card{grid-template-columns:auto minmax(0,1fr)}.auto-bast-card>.status-badge,.auto-bast-card .btn{grid-column:1/-1;width:100%;justify-content:center}.bast-photo-print-grid{grid-template-columns:1fr}}
@media(max-width:430px){.faculty-stock-summary-grid{grid-template-columns:1fr}}
@media print{.bast-photo-print-grid img{height:190px}.bast-auto-document{max-width:none}.bast-status-line{background:#fff}}

body .app-footer {
    display: block !important;
    text-align: center !important;
}

body .app-footer > span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Role-aware notification center */
.topbar-notification-menu{position:relative}
.topbar-notification{border:0;background:transparent;cursor:pointer;font-family:inherit}
.topbar-notification-menu.is-open .topbar-notification{color:var(--cs-blue)}
.notification-dropdown{position:absolute;right:-74px;top:calc(100% + 12px);z-index:125;width:390px;max-height:min(620px,calc(100vh - 92px));overflow:hidden;border:1px solid #e1e7f0;border-radius:15px;background:#fff;box-shadow:0 20px 55px rgba(24,47,98,.19)}
.notification-dropdown[hidden]{display:none}
.notification-dropdown:before{content:"";position:absolute;right:84px;top:-6px;width:11px;height:11px;background:#fff;border-left:1px solid #e1e7f0;border-top:1px solid #e1e7f0;transform:rotate(45deg)}
.notification-dropdown-head{min-height:68px;padding:13px 15px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;gap:12px}
.notification-dropdown-head strong,.notification-dropdown-head small{display:block}
.notification-dropdown-head strong{color:var(--cs-navy);font-size:.9rem}
.notification-dropdown-head small{margin-top:3px;color:#78849a;font-size:.68rem}
.notification-dropdown-head form{margin:0}
.notification-dropdown-head button{border:0;background:transparent;color:var(--cs-blue);font-family:inherit;font-size:.68rem;font-weight:700;cursor:pointer;white-space:nowrap}
.notification-dropdown-list{max-height:450px;overflow-y:auto}
.notification-item{position:relative;min-height:92px;padding:13px 16px;display:grid;grid-template-columns:42px minmax(0,1fr) 8px;gap:11px;align-items:start;border-bottom:1px solid #eff2f7;color:inherit;text-decoration:none;transition:.16s ease}
.notification-item:hover{background:#f7f9fe}
.notification-item.is-unread{background:#f1f6ff}
.notification-item.is-unread:hover{background:#eaf2ff}
.notification-item-icon,.notification-page-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.04rem}
.notification-item-icon.success,.notification-page-icon.success{background:#e3f7ef;color:#009873}
.notification-item-icon.warning,.notification-page-icon.warning{background:#fff3d8;color:#dd8b08}
.notification-item-icon.danger,.notification-page-icon.danger{background:#ffe7eb;color:#da3e54}
.notification-item-icon.info,.notification-page-icon.info{background:#e5efff;color:#1761d5}
.notification-item-copy{min-width:0}
.notification-item-copy strong,.notification-item-copy small,.notification-item-copy time{display:block}
.notification-item-copy strong{color:#1c2f58;font-size:.76rem;line-height:1.2}
.notification-item-copy small{margin-top:5px;color:#586783;font-size:.68rem;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-item-copy time{margin-top:6px;color:#8490a5;font-size:.62rem}
.notification-item-copy time i{margin-right:3px}
.notification-unread-dot{align-self:center;width:7px;height:7px;border-radius:50%;background:#1764e8}
.notification-empty{min-height:210px;padding:34px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#79869d}
.notification-empty>i{font-size:2rem;color:#b2bdd0}
.notification-empty strong{margin-top:12px;color:#354564;font-size:.8rem}
.notification-empty small{margin-top:5px;max-width:270px;font-size:.68rem;line-height:1.45}
.notification-dropdown-footer{min-height:48px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--cs-blue);font-size:.72rem;font-weight:800;text-decoration:none;background:#fbfcff}
.notification-dropdown-footer:hover{background:#f1f5ff}

.notification-page{margin-top:18px}
.notification-page-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.notification-page-head h2{display:flex;align-items:center;gap:9px}
.notification-page-head h2 i{color:var(--cs-blue)}
.notification-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.notification-summary>div{min-height:76px;padding:14px 16px;border:1px solid #e8edf5;border-radius:11px;background:#f9fbff;display:flex;flex-direction:column;justify-content:center}
.notification-summary span{color:#77849b;font-size:.68rem}
.notification-summary strong{margin-top:4px;color:#1d315b;font-size:1.08rem}
.notification-filter{margin:0 0 17px;padding:14px;border:1px solid #e7ecf4;border-radius:11px;background:#fbfcff;display:flex;align-items:end;gap:10px}
.notification-filter .field{min-width:180px;margin:0}
.notification-page-list{border:1px solid #e6ebf3;border-radius:12px;overflow:hidden}
.notification-page-item{min-height:112px;padding:17px 18px;display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:14px;align-items:start;border-bottom:1px solid #edf1f6;color:inherit;text-decoration:none;transition:.16s ease}
.notification-page-item:last-child{border-bottom:0}
.notification-page-item:hover{background:#f8faff}
.notification-page-item.is-unread{background:linear-gradient(90deg,#eef5ff,#fbfdff)}
.notification-page-item.is-unread:hover{background:#eaf2ff}
.notification-page-icon{width:46px;height:46px;border-radius:13px;font-size:1.12rem}
.notification-page-copy{min-width:0;display:flex;flex-direction:column}
.notification-page-meta{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.notification-page-meta .status-badge{font-size:.58rem}
.notification-page-meta em{padding:2px 7px;border-radius:999px;background:#1764e8;color:#fff;font-size:.56rem;font-style:normal;font-weight:800}
.notification-page-copy>strong{color:#1c2f58;font-size:.88rem}
.notification-page-copy>span{margin-top:5px;color:#586783;font-size:.75rem;line-height:1.45}
.notification-page-copy>small{margin-top:9px;color:#8490a5;font-size:.66rem}
.notification-page-copy>small b{margin:0 5px;color:#b7bfcc}
.notification-page-arrow{align-self:center;color:#9aa6b9;font-size:.78rem}
.notification-page-empty{min-height:280px}
.notification-page-empty>i{font-size:2.4rem;color:#b6c0d1}
.notification-page-empty>span{margin-top:7px;color:#7d899f;font-size:.73rem}

@media(max-width:700px){
  .notification-dropdown{position:fixed;left:12px;right:12px;top:66px;width:auto;max-height:calc(100vh - 82px)}
  .notification-dropdown:before{display:none}
  .notification-dropdown-list{max-height:calc(100vh - 190px)}
  .notification-page{margin-top:12px;padding:15px}
  .notification-page-head{align-items:flex-start;flex-direction:column}
  .notification-page-head form,.notification-page-head .btn{width:100%}
  .notification-summary{grid-template-columns:1fr 1fr}
  .notification-summary>div:last-child{grid-column:1/-1}
  .notification-filter{align-items:stretch;flex-direction:column}
  .notification-filter .field,.notification-filter .btn{width:100%;min-width:0}
  .notification-page-item{padding:14px 12px;grid-template-columns:42px minmax(0,1fr) 12px;gap:10px}
  .notification-page-icon{width:40px;height:40px}
  .notification-page-copy>small{line-height:1.5}
}


/* Notification bulk delete */
.notification-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.notification-page-actions form{margin:0}
.notification-bulk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:10px 13px;border:1px solid #e1e7f0;border-radius:10px;background:#f8faff}
.notification-select-all{display:inline-flex;align-items:center;gap:9px;color:#33466d;font-size:.74rem;font-weight:800;cursor:pointer}
.notification-select-all input,.notification-page-select input{width:17px;height:17px;margin:0;accent-color:var(--cs-blue);cursor:pointer}
.notification-selected-info{color:#75829a;font-size:.69rem}
.notification-selected-info strong{color:#1c4f9f;font-size:.78rem}
.notification-page-item{padding:0;display:grid;grid-template-columns:48px minmax(0,1fr);gap:0;align-items:stretch}
.notification-page-select{display:grid;place-items:center;border-right:1px solid #edf1f6;cursor:pointer;background:rgba(255,255,255,.5)}
.notification-page-link{min-width:0;padding:17px 18px;display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:14px;align-items:start;color:inherit;text-decoration:none}
.notification-page-item:hover{background:#f8faff}
.notification-page-item.is-unread{background:linear-gradient(90deg,#eef5ff,#fbfdff)}
.notification-page-item.is-unread:hover{background:#eaf2ff}
.notification-page-item:has(.notification-page-select input:checked){box-shadow:inset 3px 0 0 var(--cs-blue);background:#edf4ff}
.notification-page-item:has(.notification-page-select input:checked) .notification-page-select{background:#e2edff}
.btn[data-notification-bulk-delete]:disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.2)}

@media (max-width:767.98px){
  .notification-page-actions{width:100%;display:grid;grid-template-columns:1fr}
  .notification-page-actions form,.notification-page-actions .btn{width:100%}
  .notification-bulk-toolbar{align-items:flex-start;flex-direction:column;gap:7px}
  .notification-page-item{grid-template-columns:38px minmax(0,1fr)}
  .notification-page-link{padding:14px 10px;grid-template-columns:42px minmax(0,1fr) 12px;gap:9px}
  .notification-page-select input{width:16px;height:16px}
}

/* Universal table bulk delete */
.record-bulk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px solid #e1e7f0;border-radius:12px;background:#f8faff}
.record-select-all,.table-select-check{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:800;color:#46536c;cursor:pointer}
.record-select-all input,.table-select-check input{width:17px;height:17px;accent-color:var(--blue)}
.record-selected-info{margin-left:auto;color:var(--muted);font-size:.76rem;font-weight:800}
.bulk-delete-locked{display:inline-grid;place-items:center;width:28px;height:28px;color:#a6afbf}
.action-btn.danger{color:#c62e45;border-color:#ffd2d9}.action-btn.danger:hover{background:#ffedf0;color:#ad1830}.action-btn.is-disabled{opacity:.45;cursor:not-allowed}
.btn.danger{background:#d9304f;color:#fff;border-color:#d9304f}.btn.danger:hover{background:#b91f3b}.btn.danger:disabled{opacity:.48;cursor:not-allowed}
.data-table .select-column{width:42px;text-align:center;padding-left:10px;padding-right:10px}
.filter-reset{white-space:nowrap}
.approval-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}.approval-summary-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:15px;background:#fff}.approval-summary-card i{font-size:1.35rem}.approval-summary-card strong{display:block;font-size:1.25rem}.approval-summary-card span{display:block;color:var(--muted);font-size:.75rem;font-weight:800}.approval-timeline{display:flex;flex-direction:column;gap:3px}.approval-timeline small{color:var(--muted)}
@media(max-width:700px){.record-bulk-toolbar{align-items:stretch;flex-direction:column}.record-selected-info{margin-left:0}.record-bulk-toolbar .btn{width:100%}.approval-summary-grid{grid-template-columns:1fr}}
.notification-page-item{position:relative}.notification-single-delete{flex:0 0 34px;margin:0 10px 0 0;align-self:center}.notification-page-link{min-width:0}
@media(max-width:980px){.mobile-nav{grid-template-columns:repeat(6,1fr)}}
@media(max-width:700px){.notification-single-delete{margin-right:6px}.notification-page-item{align-items:stretch}}
/* Final notification row layout with individual delete action */
.notification-page-item{grid-template-columns:48px minmax(0,1fr) 48px}
@media(max-width:767.98px){.notification-page-item{grid-template-columns:38px minmax(0,1fr) 40px}}
form[data-record-bulk-form]:not(:has([data-bulk-select])) .select-column{display:none}
form[data-record-bulk-form]:not(:has([data-bulk-select])) .record-bulk-toolbar{display:none}

/* Shared-hosting installer */
.install-section-title{display:flex;align-items:center;gap:8px;margin:24px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line);font-size:1rem;color:var(--navy);letter-spacing:-.01em}.install-section-title:first-of-type{margin-top:18px}.install-card .alert.info strong{overflow-wrap:anywhere}.install-card .password-toggle{cursor:pointer}.install-card .form-grid+.install-section-title{margin-top:26px}

/* ================================================================
   Kondisi barang pada seluruh transaksi — 17 Juli 2026
   ================================================================ */
.transaction-row{
  grid-template-columns:minmax(220px,1.25fr) minmax(150px,.72fr) 110px minmax(190px,1fr) 42px;
}
.stock-condition-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid currentColor;
  border-radius:10px;
  background:#fff;
  font-size:.72rem;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
  vertical-align:middle;
}
.stock-condition-badge i{font-size:.78rem;line-height:1}
.stock-condition-stack{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.stock-condition-badge.condition-baik,.condition-baik{color:#075ce5!important}
.stock-condition-badge.condition-rusak-ringan,.condition-rusak-ringan{color:#e87500!important}
.stock-condition-badge.condition-usang,.condition-usang{color:#7c3aed!important}
.stock-condition-badge.condition-rusak-berat,.condition-rusak-berat{color:#dc2626!important}
.stock-condition-badge.condition-other,.condition-other{color:#52647d!important}
.stock-condition-badge.condition-baik{background:#f3f7ff}
.stock-condition-badge.condition-rusak-ringan{background:#fff8ef}
.stock-condition-badge.condition-usang{background:#f8f4ff}
.stock-condition-badge.condition-rusak-berat{background:#fff5f6}
.stock-condition-badge.condition-other{background:#f6f8fb}

@media(max-width:700px){
  .transaction-row{grid-template-columns:minmax(0,1fr) 100px 42px;align-items:end}
  .transaction-row>.field:first-child{grid-column:1/-1}
  .transaction-row>.field:nth-child(2){grid-column:1/2}
  .transaction-row>.field:nth-child(3){grid-column:2/3}
  .transaction-row>.note-field{grid-column:1/3!important;grid-row:auto!important}
  .transaction-row>.remove-row{grid-column:3;grid-row:2}
  .stock-condition-badge{min-height:26px;padding:4px 7px;font-size:.68rem}
}

/* Super Admin override controls: tetap tampil pada data terkunci/approved. */
.superadmin-override-box{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:13px 15px;border:1px solid #ffd4dc;border-radius:15px;background:linear-gradient(135deg,#fff8f9,#fff)}
.superadmin-override-copy{display:flex;align-items:center;gap:11px;min-width:0}.superadmin-override-copy>div{min-width:0}.superadmin-override-copy strong{display:block;color:#8f1730;font-size:.84rem}.superadmin-override-copy small{display:block;margin-top:3px;color:#78616a;font-size:.72rem;line-height:1.45}
.dashboard-card-title-icon.red{background:#ffedf0;color:#c62e45}.inline-action-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inline-action-form .btn{min-height:36px;padding:0 13px;font-size:.78rem}
@media(max-width:700px){.superadmin-override-box{align-items:stretch;flex-direction:column}.superadmin-override-box .panel-actions,.inline-action-form{width:100%}.superadmin-override-box .panel-actions>a,.inline-action-form .btn{flex:1}}

/* Foto/dokumen transaksi dan stok opname — 19 Juli 2026 */
.evidence-upload-box{margin:18px 0 4px;padding:16px;border:1px solid #dce5f5;border-radius:18px;background:linear-gradient(145deg,#fbfdff,#f4f8ff);box-shadow:0 8px 24px rgba(31,70,145,.05)}
.evidence-upload-grid{align-items:end}.evidence-file-field input[type=file]{min-height:45px;padding:9px;background:#fff}.opname-evidence-box{border-color:#e3dcfa;background:linear-gradient(145deg,#fdfcff,#f7f4ff)}
.document-preview i{font-size:2.15rem}.document-preview span{font-weight:850;font-size:.72rem;letter-spacing:.04em}.document-preview.word{background:linear-gradient(145deg,#eef5ff,#dfeaff);color:#185abd}.document-preview.excel{background:linear-gradient(145deg,#ebfff4,#d8f8e6);color:#107c41}.document-preview.file{background:linear-gradient(145deg,#f3f5f9,#e7ebf2);color:#516078}.document-preview.image{background:#edf3ff}
.compact-document-upload{margin-bottom:16px}.opname-document-section{margin-top:18px}.opname-transaction-row{grid-template-columns:minmax(220px,1.25fr) minmax(150px,.72fr) 110px minmax(180px,.85fr) minmax(210px,1fr) 42px}
@media(max-width:900px){.opname-transaction-row{grid-template-columns:repeat(2,minmax(0,1fr)) 42px}.opname-transaction-row>.field:first-child{grid-column:1/-1}.opname-transaction-row>.note-field{grid-column:1/3}.opname-transaction-row>.remove-row{grid-column:3;grid-row:2}}
@media(max-width:700px){.evidence-upload-box{padding:12px}.evidence-upload-grid{grid-template-columns:1fr}.opname-transaction-row{grid-template-columns:minmax(0,1fr) 92px 42px}.opname-transaction-row>.field:first-child{grid-column:1/-1}.opname-transaction-row>.field:nth-child(2){grid-column:1/2}.opname-transaction-row>.field:nth-child(3){grid-column:2/3}.opname-transaction-row>.field:nth-child(4),.opname-transaction-row>.note-field{grid-column:1/3!important}.opname-transaction-row>.remove-row{grid-column:3;grid-row:2}}


/* Ringkasan dashboard: seluruh card tetap satu baris dan responsif melalui scroll horizontal. */
.dashboard-metrics{
  display:flex!important;
  flex-wrap:nowrap!important;
  grid-template-columns:none!important;
  gap:9px!important;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px 8px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#c8d4ea transparent;
}
.dashboard-metrics::-webkit-scrollbar{height:6px}
.dashboard-metrics::-webkit-scrollbar-thumb{background:#c8d4ea;border-radius:999px}
.dashboard-metrics::-webkit-scrollbar-track{background:transparent}
.dashboard-metric{
  flex:1 1 0;
  min-width:145px;
  max-width:none;
  height:122px;
  padding:14px 12px;
  gap:10px;
  scroll-snap-align:start;
}
.dashboard-metric-icon{width:54px;height:54px;flex:0 0 54px;font-size:1.4rem}
.dashboard-metric p strong{font-size:1.5rem}
.dashboard-metric>div>span{font-size:.72rem}
.dashboard-metric em{font-size:.62rem}

.student-source-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:7px}
.student-source-option{position:relative;cursor:pointer}
.student-source-option>input{position:absolute;opacity:0;pointer-events:none}
.student-source-option>span{min-height:88px;padding:14px;border:1px solid #dce4f1;border-radius:16px;background:#f8faff;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;transition:.18s}
.student-source-option i{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:#e4edff;color:#1558db;display:grid;place-items:center;font-size:1.05rem}
.student-source-option strong{color:#182b53;font-size:.86rem}
.student-source-option small{color:#6d7890;font-size:.7rem;line-height:1.35}
.student-source-option>input:checked+span{border-color:#2d6fec;background:#eef4ff;box-shadow:0 0 0 3px rgba(45,111,236,.1)}
.student-source-panel{padding:14px;border:1px solid #e4e9f3;border-radius:16px;background:#fbfcff}
.student-source-panel[hidden]{display:none!important}
.manual-student-grid{margin:0}
.pickup-evidence-panel{margin-top:20px}
.pickup-status-flow{overflow-x:auto;white-space:nowrap;padding-bottom:4px}

@media(max-width:900px){
  .dashboard-metric{flex:0 0 160px;min-width:160px;height:108px;padding:12px}
  .dashboard-metric-icon{width:48px;height:48px;flex-basis:48px;font-size:1.2rem}
  .dashboard-metric p strong{font-size:1.3rem}
}
@media(max-width:600px){
  .dashboard-metric{flex-basis:154px;min-width:154px;height:102px}
  .student-source-options{grid-template-columns:1fr}
}

/* Distribusi penerima: modal input manual, indikator stok, dan rekonsiliasi. */
body.modal-open{overflow:hidden}
.app-modal[hidden]{display:none!important}
.app-modal{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:18px}
.app-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.58);backdrop-filter:blur(4px);cursor:default}
.app-modal-card{position:relative;width:min(820px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border:1px solid #dbe5f5;border-radius:22px;box-shadow:0 28px 80px rgba(15,23,42,.25);padding:22px}
.app-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #e8eef8}
.app-modal-header h3{margin:0 0 5px;display:flex;align-items:center;gap:9px;color:#10224a}
.app-modal-header p{margin:0;color:#64748b}
.app-modal-close{width:38px;height:38px;border:0;border-radius:12px;background:#eef3fb;color:#334155;display:grid;place-items:center;cursor:pointer}
.app-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #e8eef8}
.manual-student-summary{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid #bfe8db;background:#f1fbf7;border-radius:16px}
.manual-student-summary>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.manual-student-summary strong{color:#12335b}
.manual-student-summary small{color:#617089;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-availability{display:block;margin-top:5px;color:#0f766e;font-weight:700}
.reconciliation-summary{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;margin:16px 0 20px;overflow-x:auto;padding-bottom:4px}
.reconciliation-summary article{min-width:150px;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:14px;border:1px solid #e1e9f5;border-radius:16px;background:#fff}
.reconciliation-summary article>i{grid-row:1/3;width:40px;height:40px;border-radius:13px;background:#e9f1ff;color:#2563eb;display:grid;place-items:center;font-size:19px}
.reconciliation-summary article span{font-size:12px;color:#64748b}.reconciliation-summary article strong{font-size:23px;color:#132650}
.reconciliation-summary article.success>i{background:#dcfce7;color:#15803d}.reconciliation-summary article.warning>i{background:#fff3d7;color:#d97706}.reconciliation-summary article.danger>i{background:#fee2e2;color:#dc2626}
.reconciliation-actions{display:grid;gap:8px;min-width:235px}.reconciliation-actions form{display:grid;grid-template-columns:1fr auto;gap:7px}.reconciliation-actions input{min-width:0;border:1px solid #d8e2f0;border-radius:9px;padding:8px 9px}
@media(max-width:760px){.app-modal{padding:0;align-items:end}.app-modal-card{width:100%;max-height:92vh;border-radius:22px 22px 0 0;padding:18px}.app-modal-actions{position:sticky;bottom:-18px;background:#fff;padding-bottom:18px}.manual-student-summary{align-items:flex-start;flex-wrap:wrap}.manual-student-summary .btn{width:100%}.reconciliation-summary{grid-template-columns:repeat(5,150px)}.reconciliation-actions{min-width:210px}}/* bast */
/* =========================================================
   PATCH KOP SURAT BAST UNIVERSITAS JEMBER
   Menyesuaikan desain dengan contoh kop resmi terlampir
   Tidak memerlukan perubahan struktur HTML/PHP
   ========================================================= */

.bast-auto-document .bast-letterhead {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) 0 !important;
    column-gap: 12px !important;
    align-items: start !important;

    width: 100% !important;
    min-height: 143px !important;
    margin: 0 0 20px !important;
    padding: 9px 0 11px !important;

    border: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;

    font-family: "Times New Roman", Times, serif !important;
    color: #000000 !important;
}

/*
 * Garis ganda bagian bawah kop:
 * garis atas tebal dan garis bawah tipis.
 */
.bast-auto-document .bast-letterhead::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    height: 5px !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   LOGO UNIVERSITAS JEMBER
   ========================================================= */

.bast-auto-document .bast-letterhead-logo {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 145px !important;
    height: 128px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bast-auto-document .bast-letterhead-logo img {
    display: block !important;
    width: 128px !important;
    height: 128px !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Kolom penyeimbang kanan tidak dipakai pada desain contoh. */
.bast-auto-document .bast-letterhead-balance {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
}

/* =========================================================
   AREA TEKS KOP
   ========================================================= */

.bast-auto-document .bast-letterhead-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;

    text-align: center !important;
    font-family: "Times New Roman", Times, serif !important;
    color: #000000 !important;
}

/*
 * Teks asli disembunyikan secara visual dan diganti melalui CSS
 * agar sama dengan contoh tanpa mengubah struktur PHP.
 */
.bast-auto-document .bast-ministry {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    font-weight: 400 !important;
    color: #000000 !important;
}

.bast-auto-document .bast-ministry::before {
    content: "KEMENTERIAN PENDIDIKAN TINGGI,\A SAINS DAN TEKNOLOGI" !important;
    display: block !important;
    white-space: pre-line !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
}

/* Nama universitas */
.bast-auto-document .bast-university {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #000000 !important;
}

/* Alamat dibuat sama dengan gambar contoh. */
.bast-auto-document .bast-address {
    display: block !important;
    width: 100% !important;

    margin: 1px 0 0 !important;
    padding: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    color: #000000 !important;
}

.bast-auto-document .bast-address::before {
    content: "Jalan Kalimantan 37 - Kampus Bumi Tegal Boto – Jember 68121" !important;
    display: block !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    color: #000000 !important;
}

/* Kontak dibuat dua baris seperti kop contoh. */
.bast-auto-document .bast-contact {
    display: block !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    color: #000000 !important;
}

/* Sembunyikan simbol bullet pada HTML lama. */
.bast-auto-document .bast-contact .bast-contact-separator {
    display: none !important;
}

.bast-auto-document .bast-contact::before {
    content: "Telepon 0331-330224, 333147\A Laman : " !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.12 !important;
    white-space: pre !important;
    color: #000000 !important;
}

.bast-auto-document .bast-contact::after {
    content: "unej.ac.id" !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.12 !important;

    color: #0070c0 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 1px !important;
}

/* =========================================================
   PENYESUAIAN JUDUL SETELAH KOP
   ========================================================= */

.bast-auto-document .bast-document-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   TAMPILAN RESPONSIF
   ========================================================= */

@media screen and (max-width: 760px) {
    .bast-auto-document .bast-letterhead {
        grid-template-columns: 105px minmax(0, 1fr) 0 !important;
        column-gap: 7px !important;
        min-height: 112px !important;
        padding-top: 7px !important;
    }

    .bast-auto-document .bast-letterhead-logo {
        width: 105px !important;
        height: 96px !important;
    }

    .bast-auto-document .bast-letterhead-logo img {
        width: 96px !important;
        height: 96px !important;
    }

    .bast-auto-document .bast-ministry::before {
        font-size: 14px !important;
    }

    .bast-auto-document .bast-university {
        font-size: 16px !important;
    }

    .bast-auto-document .bast-address::before,
    .bast-auto-document .bast-contact::before,
    .bast-auto-document .bast-contact::after {
        font-size: 12px !important;
    }

    .bast-auto-document .bast-address::before {
        white-space: normal !important;
    }
}

@media screen and (max-width: 520px) {
    .bast-auto-document .bast-letterhead {
        grid-template-columns: 76px minmax(0, 1fr) 0 !important;
        column-gap: 5px !important;
        min-height: 94px !important;
        margin-bottom: 15px !important;
    }

    .bast-auto-document .bast-letterhead-logo {
        width: 76px !important;
        height: 70px !important;
    }

    .bast-auto-document .bast-letterhead-logo img {
        width: 70px !important;
        height: 70px !important;
    }

    .bast-auto-document .bast-ministry::before {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .bast-auto-document .bast-university {
        font-size: 12px !important;
    }

    .bast-auto-document .bast-address::before,
    .bast-auto-document .bast-contact::before,
    .bast-auto-document .bast-contact::after {
        font-size: 9px !important;
    }
}

/* =========================================================
   HASIL CETAK / SIMPAN PDF
   ========================================================= */

@media print {
    .bast-auto-document .bast-letterhead {
        display: grid !important;
        grid-template-columns: 36mm minmax(0, 1fr) 0 !important;
        column-gap: 3mm !important;

        min-height: 37mm !important;
        margin: 0 0 5mm !important;
        padding: 2mm 0 3mm !important;

        break-inside: avoid !important;
        page-break-inside: avoid !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bast-auto-document .bast-letterhead::after {
        height: 1.4mm !important;
        border-top-width: 0.8mm !important;
        border-bottom-width: 0.3mm !important;
    }

    .bast-auto-document .bast-letterhead-logo {
        width: 36mm !important;
        height: 33mm !important;
    }

    .bast-auto-document .bast-letterhead-logo img {
        width: 33mm !important;
        height: 33mm !important;
    }

    .bast-auto-document .bast-ministry::before {
        font-size: 15pt !important;
        line-height: 1.08 !important;
    }

    .bast-auto-document .bast-university {
        font-size: 16pt !important;
        line-height: 1.05 !important;
    }

    .bast-auto-document .bast-address::before,
    .bast-auto-document .bast-contact::before,
    .bast-auto-document .bast-contact::after {
        font-size: 12.5pt !important;
        line-height: 1.08 !important;
    }

    .bast-auto-document .bast-address::before {
        white-space: nowrap !important;
    }

    .bast-auto-document .bast-contact::after {
        color: #0070c0 !important;
    }
}


/* =========================================================
   PATCH TAMBAHAN KONTEN BAST
   Gaya dokumen formal seperti contoh terlampir
   Struktur HTML/PHP dan format tabel tidak diubah
   ========================================================= */

/* ---------------------------------------------------------
   LEMBAR DOKUMEN
   --------------------------------------------------------- */

body:has(.bast-auto-document) {
    margin: 0 !important;
    padding: 0 !important;
    background: #e8e8e8 !important;
}

.bast-auto-document {
    display: block !important;
    position: relative !important;

    width: 210mm !important;
    max-width: calc(100% - 24px) !important;
    min-height: 297mm !important;

    margin: 18px auto !important;
    padding: 10mm 14mm 12mm !important;

    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.16) !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9.5pt !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;
}

/* Semua elemen isi menggunakan Times New Roman. */
.bast-auto-document,
.bast-auto-document p,
.bast-auto-document span,
.bast-auto-document strong,
.bast-auto-document small,
.bast-auto-document div,
.bast-auto-document table,
.bast-auto-document th,
.bast-auto-document td {
    font-family: "Times New Roman", Times, serif !important;
}

/* ---------------------------------------------------------
   TOMBOL CETAK
   --------------------------------------------------------- */

.bast-auto-document .print-tools {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;

    margin: 0 0 12px !important;
    padding: 0 !important;
}

.bast-auto-document .print-tools .btn {
    min-height: 34px !important;
    padding: 7px 13px !important;
    border-radius: 4px !important;

    font-family: "Roboto Condensed", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* ---------------------------------------------------------
   JUDUL DOKUMEN
   --------------------------------------------------------- */

.bast-auto-document .bast-document-title {
    display: block !important;
    width: 100% !important;

    margin: 4mm 0 3.2mm !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    text-align: center !important;
    color: #000000 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .bast-document-title h1 {
    display: block !important;

    margin: 0 0 0.8mm !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;

    color: #000000 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.bast-auto-document .bast-document-number {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: #000000 !important;
    text-align: center !important;
}

.bast-auto-document .bast-document-reference {
    display: block !important;

    margin: 0.8mm 0 0 !important;
    padding: 0 !important;

    font-size: 8.3pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    color: #000000 !important;
    text-align: center !important;
}

/* ---------------------------------------------------------
   PARAGRAF DOKUMEN
   --------------------------------------------------------- */

.bast-auto-document > p {
    display: block !important;

    margin: 2.2mm 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.16 !important;

    color: #000000 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    text-indent: 0 !important;

    orphans: 3 !important;
    widows: 3 !important;
}

.bast-auto-document > p strong {
    font-size: inherit !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Paragraf setelah judul dibuat sedikit lebih rapat. */
.bast-auto-document .bast-document-title + p {
    margin-top: 1.5mm !important;
}

/* ---------------------------------------------------------
   IDENTITAS PIHAK PERTAMA DAN KEDUA
   --------------------------------------------------------- */

.bast-auto-document .document-meta {
    display: grid !important;
    grid-template-columns: 42mm 4mm minmax(0, 1fr) !important;
    align-items: start !important;

    width: 100% !important;
    margin: 2mm 0 2.5mm !important;
    padding: 0 0 0 5mm !important;

    column-gap: 1mm !important;
    row-gap: 1.2mm !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;

    color: #000000 !important;
    counter-reset: bast-party !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .document-meta > * {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
}

/* Label pihak dibuat tegas. */
.bast-auto-document .document-meta > :nth-child(1),
.bast-auto-document .document-meta > :nth-child(7) {
    position: relative !important;
    font-weight: 700 !important;
}

/* Nomor urut pihak seperti format surat contoh. */
.bast-auto-document .document-meta > :nth-child(1)::before {
    content: "1." !important;
    position: absolute !important;
    left: -5mm !important;
    top: 0 !important;

    width: 4mm !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.bast-auto-document .document-meta > :nth-child(7)::before {
    content: "2." !important;
    position: absolute !important;
    left: -5mm !important;
    top: 0 !important;

    width: 4mm !important;
    font-weight: 400 !important;
    text-align: left !important;
}

/* Tanda titik dua. */
.bast-auto-document .document-meta > b {
    font-weight: 400 !important;
    text-align: center !important;
}

/* Nama pihak. */
.bast-auto-document .document-meta > strong {
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
}

/* ---------------------------------------------------------
   TABEL RINCIAN BARANG
   Format tujuh kolom tetap dipertahankan
   --------------------------------------------------------- */

.bast-auto-document .document-table {
    width: 100% !important;
    max-width: 100% !important;

    margin: 2.5mm 0 2.5mm !important;
    padding: 0 !important;

    border: 1px solid #000000 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;

    background: #ffffff !important;
    color: #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.3pt !important;
    line-height: 1.1 !important;
}

/* Lebar setiap kolom tanpa mengubah jumlah/format kolom. */
.bast-auto-document .document-table th:nth-child(1),
.bast-auto-document .document-table td:nth-child(1) {
    width: 6% !important;
}

.bast-auto-document .document-table th:nth-child(2),
.bast-auto-document .document-table td:nth-child(2) {
    width: 13% !important;
}

.bast-auto-document .document-table th:nth-child(3),
.bast-auto-document .document-table td:nth-child(3) {
    width: 29% !important;
}

.bast-auto-document .document-table th:nth-child(4),
.bast-auto-document .document-table td:nth-child(4) {
    width: 10% !important;
}

.bast-auto-document .document-table th:nth-child(5),
.bast-auto-document .document-table td:nth-child(5) {
    width: 13% !important;
}

.bast-auto-document .document-table th:nth-child(6),
.bast-auto-document .document-table td:nth-child(6) {
    width: 15% !important;
}

.bast-auto-document .document-table th:nth-child(7),
.bast-auto-document .document-table td:nth-child(7) {
    width: 14% !important;
}

/* Header tabel. */
.bast-auto-document .document-table thead {
    display: table-header-group !important;
}

.bast-auto-document .document-table thead tr {
    background: #f0f0f0 !important;
}

.bast-auto-document .document-table th {
    height: 8mm !important;
    padding: 1.2mm 1mm !important;

    border: 1px solid #000000 !important;
    background: #f0f0f0 !important;
    color: #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8pt !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    text-align: center !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Isi tabel. */
.bast-auto-document .document-table td {
    height: 6.2mm !important;
    padding: 1mm 1.1mm !important;

    border: 1px solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.3pt !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;

    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Perataan isi kolom. */
.bast-auto-document .document-table th:nth-child(1),
.bast-auto-document .document-table th:nth-child(4),
.bast-auto-document .document-table th:nth-child(5),
.bast-auto-document .document-table th:nth-child(6),
.bast-auto-document .document-table td:nth-child(1),
.bast-auto-document .document-table td:nth-child(4),
.bast-auto-document .document-table td:nth-child(5),
.bast-auto-document .document-table td:nth-child(6) {
    text-align: center !important;
}

.bast-auto-document .document-table th:nth-child(2),
.bast-auto-document .document-table th:nth-child(3),
.bast-auto-document .document-table th:nth-child(7) {
    text-align: center !important;
}

.bast-auto-document .document-table td:nth-child(2),
.bast-auto-document .document-table td:nth-child(3),
.bast-auto-document .document-table td:nth-child(7) {
    text-align: left !important;
}

/* Kondisi barang tidak dibuat terlalu tebal. */
.bast-auto-document .document-table td:nth-child(6) strong {
    font-size: inherit !important;
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Mencegah satu baris tabel terpotong antarhalaman. */
.bast-auto-document .document-table tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* ---------------------------------------------------------
   AREA TANDA TANGAN
   --------------------------------------------------------- */

.bast-auto-document .signature-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;

    width: 100% !important;
    margin: 5mm 0 0 !important;
    padding: 0 !important;

    column-gap: 30mm !important;

    border: 0 !important;
    background: transparent !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .signature-box {
    display: block !important;
    position: relative !important;

    min-height: 39mm !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: left !important;
}

/* Kolom tanda tangan sebelah kanan. */
.bast-auto-document .signature-box:nth-child(2) {
    padding-left: 8mm !important;
}

/* Nama penandatangan ditempatkan setelah ruang tanda tangan. */
.bast-auto-document .signature-box .signature-name {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;

    margin: 20mm 0 0 !important;
    padding: 0 0 0.5mm !important;

    border: 0 !important;
    border-bottom: 1px solid #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

/* Identitas/NIP di bawah nama. */
.bast-auto-document .signature-box small {
    display: block !important;

    margin: 1mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.5pt !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;

    color: #000000 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

/* ---------------------------------------------------------
   SAKSI
   --------------------------------------------------------- */

.bast-auto-document .witness-box {
    display: block !important;

    width: 72mm !important;
    min-height: 35mm !important;

    margin: 0 auto 2mm !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: center !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .witness-box .signature-name {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;

    margin: 18mm auto 0 !important;
    padding: 0 0 0.5mm !important;

    border-bottom: 1px solid #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: center !important;
}

/* ---------------------------------------------------------
   STATUS DOKUMEN
   --------------------------------------------------------- */

.bast-auto-document .bast-status-line {
    display: block !important;

    width: 100% !important;
    margin: 3mm 0 0 !important;
    padding: 2mm 0 0 !important;

    border: 0 !important;
    border-top: 0.3mm solid #000000 !important;
    border-radius: 0 !important;
    background: transparent !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: left !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .bast-status-line strong {
    font-weight: 700 !important;
}

/* ---------------------------------------------------------
   LAMPIRAN FOTO
   --------------------------------------------------------- */

.bast-auto-document .bast-photo-appendix {
    display: block !important;

    margin: 8mm 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    break-before: page !important;
    page-break-before: always !important;
}

.bast-auto-document .bast-photo-appendix h2 {
    margin: 0 0 5mm !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.bast-auto-document .bast-photo-print-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6mm !important;
}

.bast-auto-document .bast-photo-print-grid figure {
    margin: 0 !important;
    padding: 2mm !important;

    border: 1px solid #000000 !important;
    background: #ffffff !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .bast-photo-print-grid img {
    display: block !important;

    width: 100% !important;
    height: 65mm !important;

    object-fit: contain !important;
    object-position: center !important;

    border: 0 !important;
    background: #ffffff !important;
}

.bast-auto-document .bast-photo-print-grid figcaption {
    margin: 2mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.5pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: center !important;
}

/* =========================================================
   RESPONSIF UNTUK LAYAR KECIL
   ========================================================= */

@media screen and (max-width: 760px) {
    body:has(.bast-auto-document) {
        background: #ffffff !important;
    }

    .bast-auto-document {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 12px !important;

        box-shadow: none !important;
        font-size: 9pt !important;
    }

    .bast-auto-document .print-tools {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;

        margin: -12px -12px 12px !important;
        padding: 9px 12px !important;

        background: #ffffff !important;
        border-bottom: 1px solid #dddddd !important;
    }

    .bast-auto-document .document-meta {
        grid-template-columns: 35% 12px minmax(0, 1fr) !important;
        padding-left: 18px !important;
    }

    .bast-auto-document .document-meta > :nth-child(1)::before,
    .bast-auto-document .document-meta > :nth-child(7)::before {
        left: -18px !important;
    }

    .bast-auto-document .document-table {
        min-width: 720px !important;
    }

    .bast-auto-document .document-table {
        font-size: 8pt !important;
    }

    .bast-auto-document .signature-grid {
        column-gap: 16px !important;
    }

    .bast-auto-document .signature-box:nth-child(2) {
        padding-left: 0 !important;
    }
}

/* Tabel dapat digeser horizontal pada perangkat kecil. */
@media screen and (max-width: 640px) {
    .bast-auto-document {
        overflow-x: auto !important;
    }

    .bast-auto-document .signature-grid {
        grid-template-columns: 1fr 1fr !important;
        min-width: 520px !important;
    }
}

/* =========================================================
   HASIL CETAK / SIMPAN PDF
   ========================================================= */

@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html,
    body {
        width: 210mm !important;
        min-height: 297mm !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }

    body:has(.bast-auto-document) {
        background: #ffffff !important;
    }

    .bast-auto-document {
        width: 210mm !important;
        max-width: 210mm !important;
        min-height: 297mm !important;

        margin: 0 !important;
        padding: 9mm 14mm 10mm !important;

        border: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;

        font-size: 9pt !important;

        overflow: visible !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .bast-auto-document .print-tools,
    .bast-auto-document .print-hide {
        display: none !important;
    }

    .bast-auto-document .bast-document-title {
        margin-top: 3mm !important;
        margin-bottom: 2.5mm !important;
    }

    .bast-auto-document > p {
        margin-top: 1.8mm !important;
        margin-bottom: 1.8mm !important;
        font-size: 8.8pt !important;
        line-height: 1.12 !important;
    }

    .bast-auto-document .document-meta {
        margin-top: 1.5mm !important;
        margin-bottom: 2mm !important;
        row-gap: 0.8mm !important;
    }

    .bast-auto-document .document-table {
        margin-top: 2mm !important;
        margin-bottom: 2mm !important;
    }

    .bast-auto-document .document-table th {
        height: 7mm !important;
        padding: 1mm 0.8mm !important;
        font-size: 7.5pt !important;
    }

    .bast-auto-document .document-table td {
        height: 5.6mm !important;
        padding: 0.8mm 1mm !important;
        font-size: 8pt !important;
    }

    .bast-auto-document .signature-grid {
        margin-top: 4mm !important;
    }

    .bast-auto-document .signature-box {
        min-height: 36mm !important;
    }

    .bast-auto-document .signature-box .signature-name {
        margin-top: 18mm !important;
    }

    .bast-auto-document .witness-box {
        min-height: 32mm !important;
    }

    .bast-auto-document .witness-box .signature-name {
        margin-top: 16mm !important;
    }

    .bast-auto-document .bast-status-line {
        font-size: 7.7pt !important;
    }

    .bast-auto-document .document-table,
    .bast-auto-document .signature-grid,
    .bast-auto-document .witness-box,
    .bast-auto-document .bast-status-line {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* =========================================================
   PENYESUAIAN SCRIPT BAST FORMAL V3
   ========================================================= */

.bast-auto-document .signature-heading,
.bast-auto-document .signature-subheading,
.bast-auto-document .signature-location,
.bast-auto-document .witness-title,
.bast-auto-document .witness-role {
    margin: 0;
    padding: 0;
    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt;
    font-weight: 400;
    line-height: 1.15;
    color: #000;
}

.bast-auto-document .signature-subheading {
    margin-top: 1mm;
}

.bast-auto-document .signature-location {
    margin-bottom: 1mm;
}

.bast-auto-document .witness-title {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 1px;
}

.bast-auto-document .witness-role {
    margin-top: 0.5mm;
}

.bast-auto-document .bast-opening-paragraph,
.bast-auto-document .bast-agreement-paragraph,
.bast-auto-document .bast-receipt-paragraph,
.bast-auto-document .bast-notes-paragraph,
.bast-auto-document .bast-closing-paragraph {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    line-height: 1.16 !important;
    text-align: justify !important;
    color: #000 !important;
}

.bast-auto-document .bast-closing-paragraph {
    margin-bottom: 0 !important;
}

@media print {
    .bast-auto-document .signature-heading,
    .bast-auto-document .signature-subheading,
    .bast-auto-document .signature-location,
    .bast-auto-document .witness-title,
    .bast-auto-document .witness-role {
        font-size: 8.8pt !important;
    }
}


/* =========================================================
   PATCH PENANDATANGANAN BAST
   Format: Pihak Pertama, Pihak Kedua dan Mengetahui
   ========================================================= */

.bast-auto-document .bast-signature-section {
    display: block !important;
    width: 100% !important;

    margin: 5mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    background: transparent !important;
    border: 0 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* =========================================================
   DUA KOLOM PENANDATANGAN
   ========================================================= */

.bast-auto-document .bast-signature-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 38mm !important;
    align-items: start !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .bast-signature-column {
    display: block !important;
    position: relative !important;

    min-width: 0 !important;
    min-height: 42mm !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: left !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.bast-auto-document .bast-signature-left {
    padding-left: 0 !important;
}

.bast-auto-document .bast-signature-right {
    padding-left: 4mm !important;
}

/* =========================================================
   JUDUL DAN JABATAN
   ========================================================= */

.bast-auto-document .bast-signature-caption,
.bast-auto-document .bast-signature-place,
.bast-auto-document .bast-signature-position {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: left !important;
}

.bast-auto-document .bast-signature-position {
    margin-top: 0.5mm !important;
}

.bast-auto-document .bast-signature-place {
    margin-bottom: 0.5mm !important;
}

/* =========================================================
   RUANG TANDA TANGAN
   ========================================================= */

.bast-auto-document .bast-signature-space {
    display: block !important;
    width: 100% !important;
    height: 20mm !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Garis titik-titik seperti gambar contoh. */
.bast-auto-document .bast-signature-dotted-line {
    display: block !important;
    position: relative !important;

    width: 55mm !important;
    min-height: 4.5mm !important;

    margin: 0 !important;
    padding: 0 0 0.7mm !important;

    border: 0 !important;
    border-bottom: 1px dotted #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.8pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

.bast-auto-document .bast-signature-dotted-line span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.8pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
}

/* NIP atau NIM di bawah garis. */
.bast-auto-document .bast-signature-identity {
    display: block !important;

    margin: 1mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.8pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: left !important;
}

/* =========================================================
   BAGIAN MENGETAHUI
   ========================================================= */

.bast-auto-document .bast-signature-approval {
    display: block !important;

    width: 76mm !important;
    min-height: 42mm !important;

    margin: 0 auto !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: center !important;

    background: transparent !important;
    border: 0 !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.bast-auto-document .bast-approval-title,
.bast-auto-document .bast-approval-position,
.bast-auto-document .bast-approval-institution {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 9pt !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: center !important;
}

.bast-auto-document .bast-approval-title {
    text-decoration: underline !important;
    text-decoration-thickness: 0.3mm !important;
    text-underline-offset: 0.5mm !important;
}

.bast-auto-document .bast-approval-position {
    margin-top: 0.6mm !important;
    text-decoration: underline !important;
    text-decoration-thickness: 0.2mm !important;
    text-underline-offset: 0.4mm !important;
}

.bast-auto-document .bast-approval-institution {
    margin-top: 0.3mm !important;
}

/* Ruang tanda tangan Kepala Bagian Akademik. */
.bast-auto-document .bast-approval-space {
    display: block !important;

    width: 100% !important;
    height: 18mm !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Nama Kepala Bagian Akademik. */
.bast-auto-document .bast-approval-name {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 0 0.5mm !important;

    border: 0 !important;
    border-bottom: 1px solid #000000 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.8pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: center !important;
}

.bast-auto-document .bast-approval-nip {
    display: block !important;

    margin: 1mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8.8pt !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;

    color: #000000 !important;
    text-align: center !important;
}

/* =========================================================
   CATATAN DI BAWAH TANDA TANGAN
   ========================================================= */

.bast-auto-document .bast-signature-note {
    display: block !important;

    width: 100% !important;
    margin: 4mm 0 0 !important;
    padding: 0 !important;

    font-family: "Times New Roman", Times, serif !important;
    font-size: 8pt !important;
    font-weight: 400 !important;
    font-style: italic !important;
    line-height: 1.15 !important;

    color: #000000 !important;
    text-align: left !important;

    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

/* =========================================================
   RESPONSIF
   ========================================================= */

@media screen and (max-width: 700px) {
    .bast-auto-document .bast-signature-top {
        column-gap: 20px !important;
    }

    .bast-auto-document .bast-signature-column {
        min-height: 180px !important;
    }

    .bast-auto-document .bast-signature-space {
        height: 80px !important;
    }

    .bast-auto-document .bast-signature-dotted-line {
        width: 90% !important;
    }

    .bast-auto-document .bast-signature-approval {
        width: 70% !important;
    }

    .bast-auto-document .bast-approval-space {
        height: 72px !important;
    }
}

/* =========================================================
   HASIL CETAK
   ========================================================= */

@media print {
    .bast-auto-document .bast-signature-section {
        margin-top: 5mm !important;
        font-size: 8.8pt !important;
    }

    .bast-auto-document .bast-signature-top {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 38mm !important;
    }

    .bast-auto-document .bast-signature-column {
        min-height: 40mm !important;
        font-size: 8.8pt !important;
    }

    .bast-auto-document .bast-signature-caption,
    .bast-auto-document .bast-signature-place,
    .bast-auto-document .bast-signature-position,
    .bast-auto-document .bast-signature-identity,
    .bast-auto-document .bast-signature-dotted-line,
    .bast-auto-document .bast-signature-dotted-line span {
        font-size: 8.8pt !important;
    }

    .bast-auto-document .bast-signature-space {
        height: 19mm !important;
    }

    .bast-auto-document .bast-signature-dotted-line {
        width: 55mm !important;
    }

    .bast-auto-document .bast-signature-approval {
        width: 76mm !important;
        min-height: 40mm !important;
    }

    .bast-auto-document .bast-approval-title,
    .bast-auto-document .bast-approval-position,
    .bast-auto-document .bast-approval-institution,
    .bast-auto-document .bast-approval-name,
    .bast-auto-document .bast-approval-nip {
        font-size: 8.8pt !important;
    }

    .bast-auto-document .bast-approval-space {
        height: 17mm !important;
    }

    .bast-auto-document .bast-signature-note {
        margin-top: 3mm !important;
        font-size: 8pt !important;
    }
}

/* Hilangkan underline pada bagian Mengetahui */
.bast-auto-document .bast-approval-title,
.bast-auto-document .bast-approval-position {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: 0 !important;
}

/* Penataan teks bagian mengetahui */
.bast-auto-document .bast-approval-title {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.bast-auto-document .bast-approval-position {
    margin: 0.5mm 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.bast-auto-document .bast-approval-institution {
    margin: 0.3mm 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.campus-brand-logo {
    display: inline-flex;
    align-items: center;
    width: min(100%, 280px);
    padding: 0;
    text-decoration: none;
}

.campus-brand-logo-img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* Tablet */
@media (max-width: 991.98px) {
    .campus-brand-logo {
        width: min(100%, 240px);
    }

    .campus-brand-logo-img {
        max-width: 240px;
    }
}

/* HP */
@media (max-width: 575.98px) {
    .campus-brand-logo {
        width: min(100%, 200px);
        justify-content: center;
    }

    .campus-brand-logo-img {
        width: 100%;
        max-width: 200px;
        object-position: center;
    }
}