:root{--navy:#0f2742;--navy2:#173c62;--blue:#3478f6;--sky:#edf5ff;--green:#17a673;--red:#dc554a;--amber:#f3a928;--ink:#182333;--muted:#708095;--line:#dfe7f0;--bg:#f4f7fb;--card:#fff;--shadow:0 14px 40px rgba(18,42,70,.08)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:258px;background:linear-gradient(180deg,#0d2239,#123458);color:#fff;padding:22px 16px;flex-direction:column;z-index:1030;box-shadow:14px 0 40px rgba(12,35,60,.08)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.03em;padding:8px 9px 24px}.brand small{display:block;font-weight:600;font-size:10px;letter-spacing:.04em;opacity:.62;margin-top:2px}.brand-icon{width:41px;height:41px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#4f93ff,#42c8b4);box-shadow:0 10px 24px #0003;font-size:19px}.brand.dark{color:var(--navy);padding:0}.side-nav{display:grid;gap:6px}.side-nav a,.mobile-nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;text-decoration:none;color:#cbd9e8;font-weight:750;transition:.18s}.side-nav a i,.mobile-nav a i{font-size:17px;width:22px;text-align:center}.side-nav a:hover,.side-nav a.active{background:rgba(255,255,255,.12);color:#fff;transform:translateX(2px)}.sidebar-note{margin-top:auto;border:1px solid #ffffff1f;background:#ffffff0d;padding:13px;border-radius:13px;display:flex;gap:10px;color:#c6d8e8;font-size:11px;line-height:1.5}.main-area{margin-left:258px;min-height:100vh}.topbar{height:76px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:1020}.topbar h1{font-size:20px;margin:0;font-weight:850;letter-spacing:-.02em}.top-eyebrow{font-size:9px;letter-spacing:.16em;font-weight:900;color:var(--blue);margin-bottom:2px}.topbar-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:1px solid var(--line);background:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;color:var(--navy);box-shadow:0 5px 14px #23344c0a}.date-chip{align-items:center;gap:8px;background:#f5f8fc;border:1px solid var(--line);padding:9px 12px;border-radius:11px;color:var(--muted);font-size:12px;font-weight:700}.content-wrap{padding:24px 26px 94px;max-width:1700px;margin:auto}.app-alert{border:0;border-radius:13px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}.page-heading h2{font-size:28px;font-weight:900;letter-spacing:-.035em;margin:0 0 5px}.page-heading p{margin:0;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:.13em;font-weight:900;color:var(--blue);margin-bottom:5px}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border-radius:11px;font-weight:800;padding:.65rem .95rem}.btn-primary{background:linear-gradient(135deg,#3478f6,#2e68d5);border:0;box-shadow:0 8px 18px #3478f626}.btn-success{background:linear-gradient(135deg,#17a673,#10805a);border:0}.btn-danger{background:linear-gradient(135deg,#e05a4f,#c94238);border:0}.btn-light{border:1px solid var(--line);background:#fff}.btn-sm{border-radius:9px;padding:.4rem .65rem}.card-soft{background:var(--card);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}
.hero{background:radial-gradient(circle at 80% 20%,#4e8cff66,transparent 28%),linear-gradient(130deg,#0f2742,#174b79);color:#fff;border-radius:23px;padding:27px;box-shadow:0 18px 50px #12345820;display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:180px;height:180px;border:28px solid #ffffff0d;border-radius:50%;right:-55px;bottom:-85px}.hero h2{font-size:31px;font-weight:900;letter-spacing:-.04em;margin:0 0 7px}.hero p{max-width:680px;color:#dbe9f6;margin:0}.year-box{position:relative;z-index:1;background:#ffffff13;border:1px solid #ffffff25;padding:9px 10px 9px 13px;border-radius:13px;display:flex;align-items:center;gap:9px}.year-box label{font-size:10px;font-weight:900;letter-spacing:.09em;color:#cfe0ee}.year-box select{border:0;background:#fff;color:var(--navy);font-weight:900;border-radius:9px;padding:8px 28px 8px 10px;outline:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.stat-card{padding:17px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #1f36500a}.stat-card .label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:900}.stat-card strong{display:block;font-size:24px;letter-spacing:-.04em;margin-top:5px}.stat-card .sub{font-size:11px;color:var(--muted);margin-top:3px}.finance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.finance-card{position:relative;overflow:hidden;color:#fff;border-radius:17px;padding:18px 19px;box-shadow:0 12px 28px #1b355418}.finance-card:after{content:"";position:absolute;width:90px;height:90px;border:17px solid #ffffff16;border-radius:50%;right:-22px;top:-25px}.finance-card.income{background:linear-gradient(135deg,#0f8d62,#1db77d)}.finance-card.expense{background:linear-gradient(135deg,#b63c35,#e26458)}.finance-card.net{background:linear-gradient(135deg,#12325b,#337ab8)}.finance-card.negative{background:linear-gradient(135deg,#862e2a,#bc4138)}.finance-card span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;opacity:.85}.finance-card strong{display:block;font-size:23px;margin-top:6px}.finance-card small{opacity:.82}
.table-panel{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}.table-toolbar{padding:14px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.table-toolbar h3{font-size:14px;font-weight:900;margin:0}.search-box{position:relative;max-width:360px;width:100%}.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a0b0}.search-box input,.form-control,.form-select{border:1px solid #d7e1eb;border-radius:11px;padding:.67rem .8rem}.search-box input{width:100%;padding-left:36px;background:#f9fbfd}.form-control:focus,.form-select:focus,.search-box input:focus{border-color:#7aa7ff;box-shadow:0 0 0 .22rem #3478f61a;outline:0}.table-wrap{overflow:auto}.table{margin:0;min-width:850px}.table>:not(caption)>*>*{padding:.78rem .86rem;border-bottom-color:#edf1f5;vertical-align:middle}.table thead th{background:#f6f9fc;color:#5e6e81;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;white-space:nowrap}.table tbody td{font-size:12.5px}.table tbody tr:hover td{background:#fbfdff}.cell-title{font-weight:850;color:var(--ink)}.cell-sub{font-size:11px;color:var(--muted);margin-top:2px}.badge-soft{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;white-space:nowrap}.badge-soft.success{background:#e4f7ef;color:#08714e}.badge-soft.danger{background:#feeae8;color:#a73128}.badge-soft.warning{background:#fff3d8;color:#835900}.badge-soft.info{background:#e8f1ff;color:#315f9a}.badge-soft.muted{background:#edf1f5;color:#687688}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}.room-card{padding:17px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 10px 28px #1c35500c;transition:.18s}.room-card:hover{transform:translateY(-2px);box-shadow:0 18px 35px #1c355016}.room-top{display:flex;justify-content:space-between;gap:10px}.room-code{font-size:10px;letter-spacing:.08em;font-weight:900;color:var(--blue)}.room-card h3{font-size:18px;font-weight:900;margin:4px 0 10px}.price-main{font-size:22px;font-weight:900;letter-spacing:-.04em;margin:13px 0 5px}.price-main small{font-size:10px;color:var(--muted);font-weight:700}.price-list{display:grid;gap:4px;font-size:11px;color:var(--muted)}.facility{background:#f7f9fc;border-radius:11px;padding:10px 11px;color:#667589;font-size:11px;line-height:1.5;margin:12px 0}.card-actions{display:flex;gap:7px;flex-wrap:wrap}.empty-state{padding:42px 20px;text-align:center;color:var(--muted)}.empty-state i{font-size:36px;color:#b4c1cf;display:block;margin-bottom:8px}.empty-state h4{color:var(--ink);font-weight:850;font-size:16px}
.month-matrix{max-height:calc(100vh - 285px);min-height:310px}.dashboard-table{min-width:1510px}.dashboard-table th,.dashboard-table td{text-align:center;white-space:nowrap}.dashboard-table th:nth-child(-n+4),.dashboard-table td:nth-child(-n+4){position:sticky;background:#fff;z-index:2;text-align:left}.dashboard-table th:nth-child(-n+4){background:#edf4fb;z-index:5}.dashboard-table th:nth-child(1),.dashboard-table td:nth-child(1){left:0;min-width:155px}.dashboard-table th:nth-child(2),.dashboard-table td:nth-child(2){left:155px;min-width:190px}.dashboard-table th:nth-child(3),.dashboard-table td:nth-child(3){left:345px;min-width:105px}.dashboard-table th:nth-child(4),.dashboard-table td:nth-child(4){left:450px;min-width:105px;box-shadow:8px 0 12px -12px #0f2742}.legend{display:flex;gap:13px;flex-wrap:wrap;margin-top:11px;color:var(--muted);font-size:10px}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%}.dot-success{background:#17a673}.dot-danger{background:#dc554a}.dot-warning{background:#f3a928}.dot-info{background:#5c8fc4}.dot-muted{background:#9aa6b2}
.modal-content{border:0;border-radius:19px;box-shadow:0 24px 70px #0f274235}.modal-header,.modal-footer{border-color:#edf1f5;padding:16px 19px}.modal-body{padding:18px 19px}.modal-title{font-weight:900;font-size:17px}.form-label{font-size:11px;font-weight:850;color:#58687a;margin-bottom:5px}.form-hint{font-size:10px;color:var(--muted);margin-top:5px}.month-check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.month-check{border:1px solid var(--line);border-radius:10px;padding:9px 8px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;background:#fbfcfe}.month-check:has(input:checked){border-color:#7ba7ff;background:#eef5ff;color:#2255a0}.month-check input{accent-color:var(--blue)}.mobile-drawer{width:min(310px,88vw)}.mobile-nav{display:grid;gap:5px}.mobile-nav a{color:#52657a}.mobile-nav a.active{background:#edf4ff;color:#255dac}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:#ffffffed;backdrop-filter:blur(12px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px #102d4c0d}.mobile-bottom-nav a{display:grid;place-items:center;gap:1px;color:#7a8998;text-decoration:none;padding:5px 2px;border-radius:10px}.mobile-bottom-nav i{font-size:18px}.mobile-bottom-nav small{font-size:8.5px;font-weight:800}.mobile-bottom-nav a.active{color:var(--blue);background:#eef4ff}.quick-fab{display:grid;place-items:center;text-decoration:none;position:fixed;right:18px;bottom:78px;z-index:1025;width:54px;height:54px;border-radius:17px;border:0;color:#fff;background:linear-gradient(135deg,#3478f6,#1f66e1);box-shadow:0 12px 30px #3478f650;font-size:21px}
@media(max-width:1199px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991.98px){.main-area{margin-left:0}.content-wrap{padding:18px 16px 88px}.topbar{height:68px;padding:0 15px}.hero{padding:22px}.hero h2{font-size:26px}.finance-grid{grid-template-columns:1fr}.month-matrix{max-height:none}.dashboard-table th:nth-child(-n+4),.dashboard-table td:nth-child(-n+4){position:static}.page-heading{align-items:flex-start}.page-heading h2{font-size:24px}}
@media(max-width:767.98px){.page-heading{flex-direction:column}.page-heading .actions{width:100%}.page-heading .actions .btn{flex:1}.hero{align-items:flex-start;flex-direction:column}.year-box{width:100%;justify-content:space-between}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat-card{padding:14px}.stat-card strong{font-size:20px}.month-check-grid{grid-template-columns:repeat(2,1fr)}.responsive-cards{min-width:0!important}.responsive-cards thead{display:none}.responsive-cards,.responsive-cards tbody,.responsive-cards tr,.responsive-cards td{display:block;width:100%}.responsive-cards tbody{padding:9px}.responsive-cards tr{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;padding:7px 10px;box-shadow:0 5px 16px #12335c08}.responsive-cards td{border:0!important;padding:7px 2px!important;display:grid;grid-template-columns:105px 1fr;gap:8px;align-items:start}.responsive-cards td:before{content:attr(data-label);font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;color:#8996a6}.responsive-cards td[data-label="Aksi"]{display:flex;gap:7px;padding-top:10px!important}.responsive-cards td[data-label="Aksi"]:before{display:none}.table-panel.mobile-transparent{background:transparent;border:0;box-shadow:none}.table-panel.mobile-transparent .table-wrap{overflow:visible}.table-toolbar{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:9px}.search-box{max-width:none}}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr 1fr}.finance-card strong{font-size:20px}.content-wrap{padding-left:12px;padding-right:12px}.hero{border-radius:19px}.topbar h1{font-size:18px}}