:root{
    --bg:#f5f7fb;
    --card:#fff;
    --text:#172033;
    --muted:#738096;
    --line:#e6eaf0;
    --primary:#3b5bdb;
    --danger:#d64545;
    --success:#178a55
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-text-size-adjust:100%;
}

button,input,select,textarea{
    font-family:inherit;
}

a{
    text-decoration:none;
    color:inherit
}

.app{
    display:flex;
    min-height:100vh
}

.sidebar{
    width:250px;
    background:#111827;
    color:#dbe4f2;
    position:fixed;
    inset:0 auto 0 0;
    overflow:auto;
    z-index:10
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
    padding:22px 18px;
    border-bottom:1px solid #263044
}

.logo,
.login-logo{
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,#6c7df5,#3b5bdb);
    display:grid;
    place-items:center;
    font-weight:800;
    color:white
}

.brand small{
    display:block;
    color:#8f9aae;
    margin-top:3px;
    font-size:11px
}

.sidebar nav{
    padding:12px;
    font-family:Inter,Segoe UI,Arial,sans-serif;
}

.sidebar nav a,
.sidebar nav button,
.navgroup-toggle,
.nav-subgroup-toggle{
    font-family:inherit;
    -webkit-appearance:none;
    appearance:none;
}

.sidebar nav a{
    font-size:13px;
    line-height:1.35;
}




/* =========================================================
   MENU UTAMA
   ========================================================= */

.sidebar nav > a,
.navgroup-content > a,
.nav-subgroup-content > a{
    display:flex;
    gap:12px;
    align-items:center;
    padding:10px 12px;
    border-radius:9px;
    margin:2px 0;
    color:#bdc7d8;
    transition:background .15s ease,color .15s ease
}

.sidebar nav > a:hover,
.navgroup-content > a:hover,
.nav-subgroup-content > a:hover{
    background:#20283a;
    color:white
}

.sidebar nav a.active{
    background:#26345a;
    color:white;
    font-weight:600
}

.nav-icon{
    width:18px;
    min-width:18px;
    text-align:center;
    display:inline-flex;
    justify-content:center;
    align-items:center
}


/* =========================================================
   GROUP UTAMA
   ========================================================= */

.nav-section{
    margin-top:5px
}

.navgroup-toggle{
    width:100%;
    border:0;
    background:transparent;
    color:#68758b;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 12px 8px;
    cursor:pointer;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-align:left
}

.navgroup-toggle > span:first-child{
    display:flex;
    align-items:center;
    gap:8px
}

.navgroup-toggle:hover{
    color:#aeb9cb
}

.navgroup-toggle.has-active{
    color:#aeb9cb
}

.nav-arrow{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    font-size:18px;
    line-height:1;
    transition:transform .18s ease
}

.navgroup-toggle[aria-expanded="true"] .nav-arrow,
.nav-subgroup-toggle[aria-expanded="true"] .nav-arrow{
    transform:rotate(90deg)
}


/* =========================================================
   ISI GROUP
   ========================================================= */

.navgroup-content{
    display:none;
    padding:0 0 4px
}

.navgroup-content.expanded{
    display:block
}


/* =========================================================
   SUB GROUP
   ========================================================= */

.nav-subsection{
    margin:2px 0
}

.nav-subgroup-toggle{
    width:100%;
    border:0;
    background:transparent;
    color:#9ca8bb;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 12px 9px 24px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    text-align:left;
    border-radius:8px
}

.nav-subgroup-toggle:hover{
    background:#1a2232;
    color:#fff
}

.nav-subgroup-toggle.has-active{
    color:#fff
}

.nav-subgroup-toggle > span:first-child{
    display:flex;
    align-items:center;
    gap:9px
}

.nav-sub-icon{
    width:17px;
    min-width:17px;
    text-align:center
}

.nav-subgroup-content{
    display:none;
    padding-left:12px;
    margin-left:12px;
    border-left:1px solid #263044
}

.nav-subgroup-content.expanded{
    display:block
}

.nav-subgroup-content a{
    font-size:12px;
    padding:9px 10px
}


/* =========================================================
   TOPBAR
   ========================================================= */

.main{
    margin-left:250px;
    flex:1;
    min-width:0
}

.topbar{
    height:64px;
    background:white;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    padding:0 28px;
    gap:18px;
    position:sticky;
    top:0;
    z-index:5
}

.crumb{
    font-weight:600;
    flex:1
}

.userbox{
    display:flex;
    gap:16px;
    align-items:center;
    color:var(--muted);
    font-size:13px
}

.userbox a{
    color:var(--danger)
}

.hamb{
    display:none
}


/* =========================================================
   CONTENT
   ========================================================= */

.content{
    width:100%;
    max-width:1600px;
    min-width:0;
    padding:28px;
    margin:0 auto
}

.pagehead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px
}

.pagehead h1{
    margin:0 0 5px;
    font-size:26px
}

.pagehead p,
.muted{
    color:var(--muted);
    margin:0
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:20px
}

.card{
    min-width:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:20px;
    box-shadow:0 4px 18px #17203308
}

.stat span{
    display:block;
    color:var(--muted);
    font-size:13px
}

.stat strong{
    display:block;
    font-size:23px;
    margin-top:10px
}

.grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.big{
    font-size:32px;
    font-weight:800;
    margin:12px 0
}

.btn{
    border:1px solid var(--line);
    background:white;
    border-radius:8px;
    padding:9px 13px;
    cursor:pointer;
    font-weight:600;
    color:var(--text)
}

.btn.primary{
    background:var(--primary);
    color:white;
    border-color:var(--primary)
}

.btn.success{
    background:#eaf8f1;
    color:var(--success);
    border-color:#bfe9d2
}

.btn.danger{
    background:#fff0f0;
    color:var(--danger);
    border-color:#f3c4c4
}

.btn.sm{
    padding:6px 9px;
    font-size:12px
}

.btn.full{
    width:100%
}

button:disabled{
    opacity:.45;
    cursor:not-allowed
}

.alert{
    padding:12px 15px;
    border-radius:10px;
    margin-bottom:15px
}

.alert.ok{
    background:#eaf8f1;
    color:#16754a
}

.alert.err{
    background:#fff0f0;
    color:#b62e2e
}

.tablewrap{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:650px
}

th,
td{
    text-align:left;
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    white-space:nowrap
}

th{
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.5px
}

.badge{
    display:inline-block;
    padding:5px 8px;
    border-radius:20px;
    background:#eef1f6;
    color:#5d687a;
    font-size:11px
}

.badge.active{
    background:#eaf8f1;
    color:#168052
}

.badge.inactive{
    background:#fff0f0;
    color:#b62e2e
}

.inline{
    display:inline
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:#11182780;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:30
}

.modal.show{
    display:flex
}

.modalbox{
    background:white;
    width:min(520px,100%);
    max-height:92vh;
    overflow:auto;
    border-radius:16px;
    padding:22px
}

.modalbox.wide{
    width:min(800px,100%)
}

.modalbox.xwide{
    width:min(1200px,100%)
}

.modalhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}

.modalhead h3{
    margin:0
}

.modalhead button{
    border:0;
    background:transparent;
    font-size:26px;
    cursor:pointer
}

.formgrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px
}

.formgrid .fullcol{
    grid-column:1/-1
}

label{
    display:block;
    font-size:12px;
    color:#647084;
    font-weight:600
}

input,
select,
textarea{
    display:block;
    width:100%;
    margin-top:6px;
    border:1px solid #dce1e8;
    border-radius:8px;
    padding:10px;
    background:white;
    color:var(--text);
    font:inherit
}

textarea{
    min-height:85px;
    resize:vertical
}

.actions,
.subhead{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px
}

.subhead h4{
    margin:0
}

.permgrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin:18px 0
}

.perm{
    border:1px solid var(--line);
    border-radius:9px;
    padding:10px;
    display:flex;
    gap:7px;
    align-items:center
}

.perm input{
    width:auto;
    margin:0
}

.filter{
    display:flex;
    align-items:end;
    gap:12px;
    margin-bottom:20px
}

.filter label{
    min-width:180px
}


/* =========================================================
   LOGIN
   ========================================================= */

.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#eef2ff,#f8fafc)
}

.login-card{
    width:min(410px,calc(100% - 30px));
    background:white;
    padding:32px;
    border-radius:18px;
    box-shadow:0 20px 50px #17203318
}

.login-logo{
    margin:auto
}

.login-card h1{
    text-align:center;
    margin:15px 0 3px
}

.login-card p{
    text-align:center;
    color:var(--muted);
    margin:0 0 25px
}

.login-card form{
    display:grid;
    gap:15px
}

.login-card small{
    display:block;
    text-align:center;
    margin-top:18px;
    color:var(--muted)
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1050px){

    .cards{
        grid-template-columns:repeat(2,1fr)
    }

    .permgrid{
        grid-template-columns:repeat(2,1fr)
    }

}


@media(max-width:780px){

    html,body{
        max-width:100%;
        overflow-x:hidden;
    }

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

    .sidebar{
        width:min(290px,88vw);
        transform:translateX(-100%);
        transition:transform .2s ease;
        box-shadow:12px 0 30px rgba(0,0,0,.18);
    }

    .sidebar.open{
        transform:none
    }

    .main{
        margin-left:0
    }

    .hamb{
        display:block;
        border:0;
        background:transparent;
        font-size:22px;
        cursor:pointer
    }

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

    .content{
        width:100%;
        min-width:0;
        padding:16px;
    }

    .card,
    .tablewrap{
        min-width:0;
        max-width:100%;
    }

    .topbar{
        width:100%;
        min-width:0;
        padding:0 14px;
        gap:10px;
    }

    .crumb{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:13px;
    }

    .userbox span{
        display:none
    }

    .grid2,
    .formgrid{
        grid-template-columns:1fr
    }

    .formgrid .fullcol{
        grid-column:auto
    }

    .cards{
        grid-template-columns:1fr 1fr
    }

    .filter{
        flex-wrap:wrap
    }

    .filter label{
        min-width:130px
    }

}


@media(max-width:480px){

    .content{
        padding:12px;
    }

    .card{
        padding:15px;
        border-radius:12px;
    }

    .pagehead{
        flex-wrap:wrap;
    }

    .cards{
        grid-template-columns:1fr
    }

    .pagehead{
        align-items:flex-start;
        gap:10px
    }

    .pagehead h1{
        font-size:21px
    }

    .pagehead .btn{
        white-space:nowrap
    }

    .modalbox{
        padding:16px
    }

}
/* =========================================================
   UNIFIED ACCOUNTING / MOBILE REPORTS
   ========================================================= */
.rm-journal-modalbox{width:min(960px,96vw);max-height:90vh;overflow:auto}
.rm-journal-card{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin-bottom:14px;background:#fff}
.rm-journal-card:last-child{margin-bottom:0}
.rm-journal-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.rm-journal-meta strong{font-size:15px}
.rm-journal-table{width:100%;border-collapse:collapse}
.rm-journal-table th,.rm-journal-table td{padding:8px;border-bottom:1px solid #edf0f4}
.rm-journal-table .num{text-align:right;white-space:nowrap}
.ledger-filter{align-items:flex-start}
.ledger-coa-field{min-width:330px}
.ledger-coa-field select{width:100%;min-height:180px}
.ledger-filter-actions{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.ledger-account-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.ledger-account-head h3{margin:0 0 3px}
.ledger-closing{text-align:right;white-space:nowrap}
.ledger-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.ledger-summary>div{border:1px solid #e7ebf0;border-radius:10px;padding:10px;background:#fafbfc}
.ledger-summary span,.balance-control-card span{display:block;font-size:11px;color:var(--muted)}
.ledger-summary strong{display:block;margin-top:4px;white-space:nowrap}
.ledger-empty,.balance-empty{padding:15px;border-radius:10px;background:#f8fafc;color:var(--muted)}
.balance-control-card{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.balance-control-card>div{background:#fff;border:1px solid #e5e9ef;border-radius:12px;padding:13px}
.balance-control-card strong{display:block;margin-top:4px;white-space:nowrap}
.balance-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.balance-section{padding:18px}
.balance-section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:2px solid #eef1f5;padding-bottom:12px;margin-bottom:12px}
.balance-section-head h2{font-size:16px;margin:0}
.balance-section-head strong{white-space:nowrap}
.balance-subtitle{font-size:13px;margin:16px 0 8px;padding-bottom:7px;border-bottom:1px solid #eef1f5}
.balance-account-list{display:flex;flex-direction:column}
.balance-account-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f2f5}
.balance-account-row>div{min-width:0}
.balance-account-row strong{display:block;overflow:hidden;text-overflow:ellipsis}
.balance-account-row>b{white-space:nowrap;text-align:right}
.coa-code{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.balance-total{display:flex;justify-content:space-between;gap:12px;padding-top:14px;margin-top:5px;font-weight:800}
.balance-total strong{white-space:nowrap}
.balance-check{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:16px}
.balance-check>div span{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.balance-check.ok{border-left:4px solid #16a34a}.balance-check.bad{border-left:4px solid #dc2626}
.balance-ok{color:#15803d}.balance-bad{color:#b91c1c}

@media(max-width:780px){
    .ledger-filter{display:grid;grid-template-columns:1fr 1fr}
    .ledger-coa-field{grid-column:1/-1;min-width:0}
    .ledger-filter-actions{grid-column:1/-1}
    .ledger-account-head{align-items:flex-start}
    .ledger-summary{grid-template-columns:1fr 1fr}
    .ledger-tablewrap{overflow-x:auto}
    .balance-control-card{grid-template-columns:1fr 1fr}
    .balance-columns{grid-template-columns:1fr}
    .balance-section{padding:14px}
    .balance-account-row{grid-template-columns:minmax(0,1fr) auto}
    .balance-account-row>b{font-size:13px}
    .rm-journal-table{min-width:650px}
}
@media(max-width:480px){
    .ledger-filter{grid-template-columns:1fr}
    .ledger-filter-actions{grid-column:auto}
    .ledger-summary{grid-template-columns:1fr 1fr}
    .ledger-summary strong{font-size:12px}
    .ledger-closing{font-size:12px}
    .ledger-closing strong{font-size:13px}
    .balance-control-card{grid-template-columns:1fr 1fr}
    .balance-control-card>div{padding:10px}
    .balance-control-card strong{font-size:12px}
    .balance-section-head{align-items:flex-start}
    .balance-section-head h2{font-size:14px}
    .balance-section-head strong{font-size:13px}
    .balance-account-row{padding:9px 0}
    .balance-account-row strong{font-size:13px}
    .balance-account-row>b{font-size:12px}
    .balance-check{align-items:flex-start;flex-direction:column}
}
[data-journal-url],[data-journal-ref-type][data-journal-ref-id]{cursor:context-menu}

/* Laba Rugi: readable on phones without forcing the page itself wider. */
.report-profit-card .filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.report-profit-card .filter .btn{white-space:nowrap}
.profit-tablewrap table{min-width:560px}
.profit-tablewrap th,.profit-tablewrap td{padding:9px 10px}
@media(max-width:480px){
  .report-profit-card .filter label{width:100%}
  .report-profit-card .filter .btn{flex:1 1 calc(33.333% - 8px);text-align:center;padding-left:8px;padding-right:8px}
  .profit-tablewrap{margin-left:-4px;margin-right:-4px;width:calc(100% + 8px)}
  .profit-tablewrap table{font-size:12px;min-width:520px}
  .profit-tablewrap th,.profit-tablewrap td{padding:8px 7px}
}


/* =========================================================
   FORM TRANSAKSI FULL SCREEN
   ========================================================= */
.rm-transaction-form-page{
    width:100%;
    max-width:none;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px;
    box-sizing:border-box;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.rm-transaction-form-page .form-page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
}
.rm-transaction-form-page .form-page-head h2{margin:0}
.rm-transaction-form-page .form-page-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.rm-transaction-form-page .tablewrap{max-width:100%}
.rm-n2-input{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:780px){
    .rm-transaction-form-page{padding:14px;border-radius:12px}
    .rm-transaction-form-page .form-page-head{align-items:flex-start;flex-direction:column}
}