html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}


/* ================================
   SIDEBAR
================================ */

.sidebar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}


/* ================================
   MODAL
================================ */

.modalbg,
.modal,
.modalbody {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modalbg::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modalbody::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

button,
input,
select,
textarea {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
:root{
 --navy:#072c4b;--navy2:#0c426c;--blue:#087ff5;--blue2:#176de8;--bg:#f4f7fb;
 --card:#fff;--text:#19334a;--muted:#7b8b9b;--line:#e3ebf3;--green:#19b77a;
 --orange:#f59b19;--red:#ed4d4d;--purple:#7356e8;--shadow:0 5px 18px rgba(25,65,100,.08)
}

*{box-sizing:border-box}html,body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{min-height:100vh}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;background:linear-gradient(180deg,#062843,#0a375b);color:#fff;z-index:50;transition:.22s;overflow:auto}
.sidebar.closed{width:0}.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(5,25,42,.48);z-index:45}.drawer-backdrop.show{display:block}.brand{height:68px;padding:0 18px;display:flex;gap:10px;align-items:center;font-weight:800;border-bottom:1px solid #ffffff13}
.logo{width:33px;height:33px;border-radius:9px;background:#1285ef;display:grid;place-items:center}.user{padding:14px 17px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #ffffff12}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(#fff,#ccd6df);color:#607183;display:grid;place-items:center;font-weight:800}.user small{display:block;color:#a9bfd0;font-size:10px;margin-top:2px}
.nav{padding:9px}.nav a{height:40px;margin:2px 0;border-radius:7px;display:flex;align-items:center;gap:10px;padding:0 11px;color:#dbe9f3;text-decoration:none;font-size:12px}.nav a:hover{background:#ffffff10}.nav a.active{background:#087ff5;color:#fff}.nav .ico{width:18px;text-align:center;display:grid;place-items:center}.nav .ico.mdi{font-size:18px}
.main{margin-left:248px;transition:.22s}.main.expanded{margin-left:0}.topbar{height:68px;background:linear-gradient(135deg,#062843,#0b416a);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 20px;position:sticky;top:0;z-index:30}.hamb{border:0;background:none;font-size:21px;color:#fff}.search{height:37px;width:360px;border:1px solid var(--line);border-radius:7px;padding:0 12px;outline:none;color:var(--text)}.top-right{margin-left:auto;display:flex;gap:17px;align-items:center;font-size:12px}.company b{display:block;color:#fff;}.company small{color:#fff}
.content{padding:20px}.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.head h1{margin:0;font-size:20px}.head p{margin:5px 0 0;color:var(--muted);font-size:11px}.date{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:7px;font-size:10px;text-align:right}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px;box-shadow:var(--shadow)}.kpi-top{display:flex;justify-content:space-between;font-size:10px;color:#657b8e}.kico{width:29px;height:29px;border-radius:7px;display:grid;place-items:center}.kico .mdi{font-size:16px}.kpi strong{display:block;margin:9px 0 3px;font-size:15px}.kpi small{font-size:9px;color:var(--muted)}.blue{background:#e7f2ff;color:#087ff5}.green{background:#e3f9ef;color:#11a66e}.orange{background:#fff2de;color:#df8500}.red{background:#ffeaea;color:#e74343}.purple{background:#eeeaff;color:#7151e6}
.grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:11px;margin-top:11px}.panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:var(--shadow)}.title{font-weight:800;font-size:12px;margin-bottom:11px}.chart{height:170px;position:relative}.chart svg{width:100%;height:135px}.axis{display:flex;justify-content:space-between;color:#94a2af;font-size:8px;padding:0 4%}.donutbox{height:170px;display:flex;align-items:center;gap:17px}.donut{width:125px;height:125px;border-radius:50%;background:conic-gradient(#087ff5 0 42%,#19b77a 42% 64%,#f59b19 64% 78%,#7356e8 78% 90%,#ed4d4d 90%);position:relative}.donut:after{content:"Rp 186 jt";position:absolute;inset:29px;background:#fff;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px}.legend{font-size:9px;line-height:2.1}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.room{border-radius:7px;padding:10px 7px;text-align:center;font-size:9px;border:1px solid #dfe8ef}.room b{display:block;font-size:11px;margin-bottom:5px}.available{background:#e4f9ef;color:#109c69}.occupied{background:#e8f2ff;color:#0874df}.clean{background:#fff2df;color:#ce7d00}.dirty{background:#ffeaea;color:#d83d3d}.maintenance{background:#eeeaff;color:#6e50db}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:10px}.table th,.table td{padding:8px 7px;border-bottom:1px solid #edf1f5;text-align:left;white-space:nowrap}.table th{color:#738496;font-size:9px;background:#fbfcfd}.badge{display:inline-block;border-radius:20px;padding:4px 7px;font-size:8px}.bgreen{background:#dff8ed;color:#0c9b68}.bblue{background:#e5f1ff;color:#086ed2}.borange{background:#fff0d8;color:#ca7900}.bred{background:#ffe9e9;color:#d83d3d}.actions button{border:1px solid var(--line);background:#fff;border-radius:5px;padding:4px 6px;margin-right:2px}.quickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;gap:9px;align-items:center}.quick .qico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center}.qico .mdi{font-size:16px}.quick b{font-size:10px}.quick small{display:block;color:var(--muted);font-size:8px;margin-top:2px}.quick button{margin-left:auto;border:0;background:#087ff5;color:#fff;border-radius:5px;padding:6px 9px;font-size:9px}
.btn{border:0;border-radius:6px;padding:8px 13px;font-size:10px}.primary{background:#087ff5;color:#fff}.secondary{background:#edf2f6;color:#496276}.danger{background:#ed4d4d;color:#fff}.head-actions{display:flex;gap:7px}.mobile-backup{display:none}.mobile-back,.mobile-add{display:none}
.crudbar{display:flex;gap:8px;align-items:center;margin-bottom:11px}.crudbar .search{width:240px;height:34px}.crudbar select{height:34px;border:1px solid var(--line);border-radius:6px;padding:0 9px;color:#607588}.crudbar .right{margin-left:auto}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:9px;font-weight:800}.field input,.field select,.field textarea{border:1px solid #dce6ef;border-radius:6px;padding:9px;font-size:10px;outline:none}.field textarea{height:70px;resize:none}
.modalbg{
 position:fixed;inset:0;background:rgba(4,22,38,.58);backdrop-filter:blur(3px);
 display:none;align-items:center;justify-content:center;padding:22px;z-index:100
}
.modalbg.show{display:flex;animation:fadeIn .16s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
 background:#fff;width:min(760px,100%);max-height:calc(100vh - 44px);border-radius:14px;
 overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.25);animation:modalIn .18s ease;
 display:flex;flex-direction:column
}
@keyframes modalIn{from{transform:translateY(10px) scale(.985);opacity:.7}to{transform:none;opacity:1}}
.modalhead{
 min-height:68px;padding:13px 18px;border-bottom:1px solid var(--line);
 display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff
}
.modal-title-wrap{display:flex;align-items:center;gap:11px}
.modal-title-icon{width:38px;height:38px;border-radius:9px;background:#e7f2ff;color:#087ff5;display:grid;place-items:center;font-size:17px}
.modalhead b{font-size:14px;display:block}.modalhead small{display:block;color:var(--muted);font-size:9px;font-weight:500;margin-top:3px}
.modal-close{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#718496;font-size:20px;line-height:1}
.modal-close:hover{background:#f4f7fb;color:#18354c}
.modalbody{padding:18px;overflow:auto;background:#fbfcfe}
.form-section{margin-bottom:17px}.form-section:last-child{margin-bottom:0}
.form-section-title{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;color:#26445b;margin-bottom:9px}
.form-section-title:after{content:"";height:1px;background:#e8eef3;flex:1}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}
.field label{font-size:9px;font-weight:800;color:#536b7d}.field label .req{color:#ed4d4d}
.field input,.field select,.field textarea{
 width:100%;border:1px solid #dbe5ed;border-radius:7px;background:#fff;padding:10px 11px;
 font-size:10px;outline:none;color:var(--text);transition:.15s
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#72b5fa;box-shadow:0 0 0 3px #087ff512}
.field textarea{height:76px;resize:vertical;min-height:65px}
.field .hint{font-size:8px;color:#94a2af}
.input-prefix{position:relative}.input-prefix span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#91a1ae;font-size:10px}.input-prefix input{padding-left:27px}

/* Premium Add/Edit Modal */
.form-modal{width:min(820px,100%);border-radius:16px}
.form-modal .modalhead{min-height:76px;padding:14px 18px;background:linear-gradient(135deg,#062843,#0b416a);color:#fff;border-bottom:0}
.form-modal .modal-title-icon{width:42px;height:42px;border-radius:12px;background:#ffffff18;border:1px solid #ffffff2b;color:#fff;font-size:19px}
.form-modal .modalhead b{font-size:15px}.form-modal .modalhead small{color:#c9dceb}
.form-modal .modal-close{border-color:#ffffff30;background:#ffffff12;color:#fff}.form-modal .modal-close:hover{background:#ffffff22;color:#fff}
.form-modal .modalbody{padding:18px;background:#f5f8fb}
.form-modal .form-section{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:11px;box-shadow:0 4px 16px rgba(19,55,78,.045)}
.form-modal .form-section:last-child{margin-bottom:0}
.form-modal .form-section-title{font-size:10px;color:#29465b;margin-bottom:12px}
.form-modal .form-section-title>span{width:26px;height:26px;border-radius:8px;background:#e7f2ff;color:#087ff5;display:grid;place-items:center;font-size:12px}
.form-modal .form-section-title:after{background:#e5edf3}
.form-modal .field label{font-size:9px;color:#526b7d}
.form-modal .field input,.form-modal .field select,.form-modal .field textarea{border-color:#d8e4ec;border-radius:8px;padding:10px 11px;background:#fbfdff}
.form-modal .field input:hover,.form-modal .field select:hover,.form-modal .field textarea:hover{border-color:#b9cedd}
.form-modal .modalfoot{background:#fff;padding:12px 18px;min-height:66px}
.form-modal .modal-actions .btn{min-width:100px;padding:9px 14px;border-radius:8px;font-weight:700}
.form-modal .modal-actions .primary{box-shadow:0 5px 12px #087ff526}
.form-modal .form-note{display:flex;align-items:center;gap:6px;color:#8b9aa8;font-size:8px}
.form-modal .form-note span{width:22px;height:22px;border-radius:7px;background:#eef6ff;color:#087ff5;display:grid;place-items:center}

/* Dashboard Akses Cepat — Android app style */
.quick-title{display:flex;align-items:center;justify-content:space-between}.quick-title small{font-size:8px;font-weight:600;color:var(--muted)}
.dashboard-quick-panel .quick{transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;min-height:66px}
.dashboard-quick-panel .quick:active{transform:scale(.98);box-shadow:0 3px 12px rgba(25,65,100,.10)}
.dashboard-quick-panel .quick-copy{min-width:0}.dashboard-quick-panel .quick b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-quick-panel .quick small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-quick-panel .quick button{width:28px;height:28px;padding:0;margin-left:auto;border-radius:50%;font-size:18px;line-height:1;display:grid;place-items:center}
@media(max-width:700px){.form-modal{border-radius:17px 17px 0 0;max-height:96dvh}.form-modal .modalhead{min-height:68px;padding:11px 13px}.form-modal .modal-title-icon{width:36px;height:36px}.form-modal .modalbody{padding:10px 11px 12px}.form-modal .form-section{padding:11px;border-radius:12px;margin-bottom:8px}.form-modal .formgrid{grid-template-columns:1fr;gap:9px}.form-modal .field.full{grid-column:auto}.form-modal .modalfoot{padding:9px 11px;min-height:60px}.form-modal .form-note{display:none}.form-modal .modal-actions{width:100%}.form-modal .modal-actions .btn{flex:1}}

/* Premium CRUD Detail Modal */
.detail-modal .modalbody{padding:0;background:#f6f9fc}
.detail-hero{padding:18px;background:linear-gradient(135deg,#062843,#0b416a);color:#fff;display:flex;align-items:center;gap:13px}
.detail-avatar{width:48px;height:48px;border-radius:13px;background:#ffffff18;border:1px solid #ffffff2b;display:grid;place-items:center;font-size:20px;font-weight:800}
.detail-hero b{display:block;font-size:14px}.detail-hero small{display:block;margin-top:4px;color:#c9dceb;font-size:9px}
.detail-status{margin-left:auto;align-self:flex-start;border:1px solid #ffffff35;background:#ffffff14;color:#fff;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:800;white-space:nowrap}
.detail-content{padding:15px 18px 18px}
.detail-section{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.detail-section:last-child{margin-bottom:0}.detail-section-title{font-size:10px;font-weight:800;color:#29465b;margin-bottom:10px;display:flex;align-items:center;gap:7px}.detail-section-title span{width:24px;height:24px;border-radius:7px;background:#e7f2ff;color:#087ff5;display:grid;place-items:center}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-item{min-width:0}.detail-item label{display:block;color:#8a99a7;font-size:8px;margin-bottom:3px}.detail-item b{display:block;font-size:10px;color:#263f53;word-break:break-word}.detail-item.full{grid-column:1/-1}
.detail-total{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:9px;background:#eef6ff;margin-top:10px}.detail-total span{font-size:9px;color:#60788b}.detail-total b{font-size:14px;color:#087ff5}
.detail-timeline{position:relative;padding-left:17px}.detail-timeline:before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:#dbe6ee}.detail-event{position:relative;padding:0 0 11px 10px}.detail-event:last-child{padding-bottom:0}.detail-event:before{content:"";position:absolute;left:-16px;top:3px;width:7px;height:7px;border-radius:50%;background:#087ff5;box-shadow:0 0 0 3px #e7f2ff}.detail-event b{font-size:9px}.detail-event small{display:block;color:#8b9aa8;font-size:8px;margin-top:2px}
.detail-actions{display:flex;gap:7px}.detail-actions .btn{min-width:90px}
@media(max-width:700px){.detail-modal .modalbody{padding:0}.detail-hero{padding:15px 14px}.detail-content{padding:11px 12px 14px}.detail-section{border-radius:12px;padding:11px}.detail-grid{gap:9px}.detail-modal .modalfoot{padding:9px 12px}.detail-actions .btn{min-width:0}.detail-actions{width:100%}}
.modalfoot{
 min-height:62px;padding:11px 18px;border-top:1px solid var(--line);background:#fff;
 display:flex;align-items:center;justify-content:space-between;gap:8px
}
.modalfoot .foot-note{font-size:8px;color:#94a2af}.modal-actions{display:flex;justify-content:flex-end;gap:7px}
.modalfoot .btn{min-width:82px}

.mobile-nav{display:none}
.mobile-list{display:none}

@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr 1fr}.grid .panel:first-child{grid-column:1/-1}.quickgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
 .sidebar{display:block!important;transform:translateX(-105%);width:248px;transition:transform .25s ease;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:100dvh;z-index:80}
 .sidebar.mobile-open{transform:translateX(0);box-shadow:10px 0 30px rgba(0,0,0,.28)}
 .sidebar.closed{width:248px}
 body{padding-bottom:64px}.sidebar{width:248px;overflow-y:auto;overscroll-behavior:contain}.sidebar.mobile-open{box-shadow:10px 0 30px #0004}.main,.main.expanded{margin-left:0}.topbar{height:58px;padding:0 12px;background:linear-gradient(90deg,#062843,#0b416a);color:#fff}.hamb{color:#fff}.search{display:none}.top-right{display:none}.mobile-top-title{display:none;font-weight:800;font-size:14px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{padding:11px}.head{display:none}.head h1{font-size:16px}.head p{font-size:9px}.date{display:none}.head-actions{display:none}.mobile-back,.mobile-add{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0!important;border:1px solid #ffffff33!important;background:#ffffff12!important;color:#fff!important;border-radius:8px!important;font-size:17px!important;gap:0}.mobile-add{font-size:20px;background:#087ff5!important;border-color:#087ff5!important}.mobile-back{order:2}.topbar:after{order:3;flex:1}.mobile-add{order:4}.mobile-search-btn{order:5;margin-left:0}
 .kpis{grid-template-columns:repeat(2,1fr);gap:7px}.kpi{padding:10px}.kpi strong{font-size:12px}.kpi-top{font-size:8px}.kpi small{font-size:7px}.kpis .kpi:first-child{grid-column:1/-1;background:#087ff5;color:#fff}.kpis .kpi:first-child small{color:#dceeff}.grid{display:block;margin-top:7px}.grid .panel{margin-bottom:7px}.grid .panel:nth-child(2),.grid .panel:nth-child(3){display:none}.panel{padding:10px}.rooms{grid-template-columns:repeat(3,1fr)}.room:nth-child(n+7){display:none}.two{display:block;margin-top:7px}.two .panel{margin-bottom:7px}.two .panel:nth-child(2){display:none}.quickgrid{grid-template-columns:1fr 1fr;gap:8px}.dashboard-quick-panel{padding:11px;margin-top:8px!important}.dashboard-quick-panel .quickgrid{gap:8px}.dashboard-quick-panel .quick{padding:11px 9px;min-height:82px;display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:8px;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(25,65,100,.055)}.dashboard-quick-panel .quick .qico{width:34px;height:34px;border-radius:10px;margin:0;font-size:14px}.dashboard-quick-panel .quick-copy{align-self:center}.dashboard-quick-panel .quick b{font-size:9px}.dashboard-quick-panel .quick small{font-size:7px;margin-top:3px}.dashboard-quick-panel .quick button{display:grid;width:24px;height:24px;background:#eef5fb;color:#087ff5;font-size:17px}.quick:not(.dashboard-quick-panel .quick){padding:9px;display:block}.quick:not(.dashboard-quick-panel .quick) button{display:none}.quick:not(.dashboard-quick-panel .quick) .qico{margin-bottom:6px}.quick b{font-size:9px}.quick small{font-size:7px}.tablewrap{display:none}.mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;height:63px;background:#fff;border-top:1px solid var(--line);z-index:60}.mobile-nav a{flex:1;text-align:center;text-decoration:none;color:#738496;font-size:8px;padding-top:8px}.mobile-nav a.active{color:#087ff5;font-weight:800}.mobile-nav span{display:block;font-size:18px;margin-bottom:1px}.mobile-nav .mdi{font-size:20px}.modalbg{align-items:flex-end;padding:0}.modal{width:100%;border-radius:16px 16px 0 0;max-height:94dvh}.modalhead{min-height:62px;padding:11px 13px}.modal-title-icon{width:34px;height:34px}.modalhead b{font-size:13px}.modalbody{padding:14px}.modalfoot{padding:10px 13px;min-height:58px}.modalfoot .foot-note{display:none}.modal-actions{width:100%}.modal-actions .btn{flex:1}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.form-section{margin-bottom:14px}.mobile-list{display:block}.mobile-item{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:7px;display:flex;align-items:center;gap:9px}.mobile-item .mi{width:40px;height:40px;border-radius:7px;display:grid;place-items:center}.mobile-item b{font-size:10px}.mobile-item small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.mobile-item strong{margin-left:auto;font-size:9px}
}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;font-size:9px;color:#7b8b9b}
.pagination .pages{display:flex;gap:4px;align-items:center}
.pagination button{min-width:28px;height:28px;border:1px solid #dfe7ee;background:#fff;color:#50677a;border-radius:5px;font-size:9px}
.pagination button.active{background:#087ff5;color:#fff;border-color:#087ff5}
.pagination button:disabled{opacity:.45;cursor:not-allowed}
.pagination .info{font-size:9px}
@media(max-width:700px){
 .pagination{padding-bottom:2px}
 .pagination .info{font-size:8px}
}

/* V3.1 — Mobile Global Quick Search */
.mobile-search-btn{display:none}
.mobile-search-overlay{display:none}
.mobile-search-overlay.show{display:block}
.mobile-search-panel{position:fixed;left:0;right:0;top:0;background:#fff;z-index:95;padding:10px 12px 12px;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.mobile-search-row{display:flex;gap:8px;align-items:center}
.mobile-search-row button{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#48647a;font-size:18px}
.mobile-search-input{flex:1;height:38px;border:1px solid #cfdde8;border-radius:7px;padding:0 11px;outline:none;font-size:12px}
.mobile-search-input:focus{border-color:#72b5fa;box-shadow:0 0 0 3px #087ff512}
.mobile-search-results{margin-top:8px;max-height:62vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.mobile-search-result{padding:10px;border-bottom:1px solid #edf1f5;display:flex;gap:9px;align-items:center}
.mobile-search-result:last-child{border-bottom:0}
.mobile-search-result .msr-icon{width:34px;height:34px;border-radius:7px;background:#e7f2ff;color:#087ff5;display:grid;place-items:center;font-size:15px}
.mobile-search-result b{font-size:10px;display:block}
.mobile-search-result small{font-size:8px;color:var(--muted);display:block;margin-top:2px}
.mobile-search-section{padding:8px 10px 5px;font-size:8px;font-weight:800;color:#7b8b9b;text-transform:uppercase;background:#fbfcfd}
@media(max-width:700px){
 .mobile-search-btn{display:grid;place-items:center;border:0;background:transparent;color:#fff;font-size:19px;width:34px;height:34px;margin-left:auto}
 .mobile-top-title{display:block;order:3;flex:1}
 .topbar .hamb{order:1}
 .top-right{display:none}
}




/* Desktop: mobile-only controls stay hidden */
@media(min-width:701px){
 .mobile-back,.mobile-add,.mobile-search-btn,.mobile-top-title{display:none!important}
 .topbar:after{display:none!important;content:none!important}
}
/* Android-style CRUD enhancement */
@media(max-width:700px){
 .mobile-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
 .mobile-item{position:relative;display:block!important;margin:0!important;padding:12px!important;border:1px solid #e6ebf1!important;border-radius:14px!important;background:#fff;box-shadow:0 2px 8px rgba(20,45,70,.06);min-height:126px}
 .mobile-item .mi{width:36px!important;height:36px!important;border-radius:11px!important;margin-bottom:9px}
 .mobile-item b{display:block;font-size:11px!important;line-height:1.35}
 .mobile-item small{display:block;font-size:8.5px!important;line-height:1.5;margin-top:5px!important;color:#738496}
 .mobile-item strong{display:inline-flex!important;margin:10px 0 0!important;padding:4px 7px;border-radius:999px;background:#eef7ff;color:#087ff5;font-size:8px!important;font-weight:700}
 .mobile-item .card-actions{display:flex;gap:5px;margin-top:9px}
 .mobile-item .card-actions button{flex:1;border:1px solid #e2e8ef;background:#f8fafc;border-radius:8px;padding:6px 4px;font-size:8px;color:#52687a}
 .mobile-item .card-actions .edit{color:#087ff5}
 .crudbar{position:sticky;top:56px;z-index:20;background:#fff;padding:8px 0!important}
 .crudbar .search{min-width:0!important;flex:1!important;border-radius:11px!important;height:38px!important}
 .crudbar select{height:38px!important;border-radius:11px!important}
 .pagination{font-size:8px!important}
 .panel{border-radius:14px!important}
}
@media(max-width:390px){.mobile-list{grid-template-columns:1fr}.mobile-item{min-height:auto}}

/* Android-style Menu Lainnya */
.more-mobile-head{display:none}
.more-card{position:relative;transition:transform .15s ease,box-shadow .15s ease}
.more-card .more-arrow{display:none}
@media(max-width:700px){
 .more-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 10px;padding:12px 13px;border-radius:16px;background:linear-gradient(135deg,#f3f8ff,#ffffff);border:1px solid #e3edf6;box-shadow:0 3px 12px rgba(22,65,100,.06)}
 .more-welcome{display:flex;align-items:center;gap:10px;min-width:0}
 .more-app-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#087ff5,#35a0ff);color:#fff;font-size:18px;box-shadow:0 5px 12px #087ff52e}
 .more-welcome b{display:block;font-size:11px;color:#203d53}
 .more-welcome small{display:block;margin-top:3px;font-size:8px;color:#7b8b9b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .more-count{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#eaf4ff;color:#087ff5;font-size:7.5px;font-weight:800}
 .more-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:0!important}
 .more-card{display:flex!important;align-items:center!important;min-height:76px!important;padding:11px!important;border-radius:15px!important;background:#fff!important;border:1px solid #e4ebf1!important;box-shadow:0 3px 10px rgba(25,55,80,.055)!important;gap:9px!important}
 .more-card:active{transform:scale(.98);box-shadow:0 1px 5px rgba(25,55,80,.08)!important}
 .more-card .qico{width:37px!important;height:37px!important;min-width:37px!important;margin:0!important;border-radius:12px!important;display:grid!important;place-items:center!important;font-size:14px!important;font-weight:800}
 .more-card-copy{min-width:0;flex:1}
 .more-card b{font-size:9.5px!important;line-height:1.25!important;display:block!important;color:#29465b!important}
 .more-card small{font-size:7.2px!important;line-height:1.35!important;margin-top:3px!important;color:#8493a0!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .more-card .more-arrow{display:grid;width:19px;height:19px;place-items:center;border-radius:50%;background:#f3f7fa;color:#7c8e9d;font-size:14px;flex:0 0 19px}
}
@media(max-width:390px){
 .more-grid{grid-template-columns:1fr!important}
 .more-card{min-height:70px!important}
}

/* =========================
   TOAST NOTIFICATION
========================= */

.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    min-width: 320px;
    max-width: 420px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    gap: 13px;
    pointer-events: auto;

    opacity: 0;
    transform: translateX(40px);
    animation: toastIn .35s ease forwards;
}

.toast.hide {
    animation: toastOut .3s ease forwards;
}

.toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 19px;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2px;
}

.toast-message {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.toast-close {
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
}

.toast-close:hover {
    color: #374151;
}

/* SUCCESS */
.toast-success .toast-icon {
    background: #ecfdf5;
    color: #10b981;
}

/* ERROR */
.toast-error .toast-icon {
    background: #fef2f2;
    color: #ef4444;
}

/* WARNING */
.toast-warning .toast-icon {
    background: #fffbeb;
    color: #f59e0b;
}

/* INFO */
.toast-info .toast-icon {
    background: #eff6ff;
    color: #3b82f6;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@media (max-width: 600px) {
    .toast-container {
        top: 15px;
        left: 15px;
        right: 15px;
    }

    .toast {
        min-width: 0;
        width: 100%;
    }
}

/* =================================
   GLOBAL CONFIRM MODAL
================================= */

#globalConfirmModal {
    position: fixed;
    inset: 0;

    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

#globalConfirmModal.show {
    visibility: visible;
    opacity: 1;
}


.confirm-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 23, 42, .48);

    backdrop-filter: blur(3px);
}


.confirm-dialog {
    position: relative;

    width: 100%;
    max-width: 410px;

    background: #fff;

    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .22);

    transform: scale(.94) translateY(10px);

    transition:
        transform .25s ease;
}

#globalConfirmModal.show .confirm-dialog {
    transform: scale(1) translateY(0);
}


.confirm-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;
}


.confirm-icon.danger {
    background: #fef2f2;
    color: #ef4444;
}

.confirm-icon.warning {
    background: #fffbeb;
    color: #f59e0b;
}

.confirm-icon.info {
    background: #eff6ff;
    color: #3b82f6;
}


.confirm-content {
    text-align: center;
}


.confirm-title {
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 700;

    color: #172033;
}


.confirm-message {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #6b7280;
}


.confirm-actions {
    display: flex;

    gap: 10px;

    margin-top: 24px;
}


.confirm-btn {
    flex: 1;

    height: 44px;

    border: 0;

    border-radius: 10px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;
}


.confirm-btn.cancel {
    background: #f1f5f9;
    color: #475569;
}

.confirm-btn.cancel:hover {
    background: #e2e8f0;
}


.confirm-btn.danger {
    background: #ef4444;
    color: #fff;
}

.confirm-btn.danger:hover {
    background: #dc2626;
}


@media (max-width: 600px) {

    #globalConfirmModal {
        padding: 16px;
    }

    .confirm-dialog {
        max-width: 100%;

        border-radius: 18px;

        padding: 24px 20px;
    }

    .confirm-actions {
        flex-direction: column-reverse;
    }

    .confirm-btn {
        width: 100%;
    }

}

/* =========================================================
   SIDEBAR SECTION
========================================================= */

.nav-section {
    margin: 18px 14px 7px;
    padding: 0 8px 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-label {
    display: block;

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: 0.08em;

    text-transform: uppercase;

    opacity: .45;
}


.sidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
}



.mobile-nav {
    display: none;
}

@media (max-width: 700px) {

    .mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;

        height: 64px;
        padding: 5px 8px;
    }

    .mobile-nav a {
        flex: 1;
        height: 54px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        padding: 0;
        margin: 0;

        font-size: 11px;
        line-height: 1;
        text-decoration: none;
    }

    .mobile-nav a .mdi {
        display: block;
        font-size: 21px;
        line-height: 1;
    }
}