/* =========================================================
   BRIGIF TP 88 SIADM — Global UI Polish
   Coding Pt-3
   Tujuan: seluruh menu konsisten, modern, rapi, responsive,
   tanpa mengubah logic aplikasi.
   ========================================================= */

:root{
    --ui-army:#173f2d;
    --ui-army-2:#214d36;
    --ui-army-soft:#eef4ef;
    --ui-olive:#5f6d36;
    --ui-gold:#bda73a;
    --ui-gold-soft:#faf5dc;
    --ui-ink:#213027;
    --ui-muted:#718078;
    --ui-line:#e4e9e3;
    --ui-bg:#f4f6f2;
    --ui-card:#ffffff;
    --ui-danger:#a93d3d;
    --ui-shadow:0 12px 34px rgba(22,57,41,.075);
    --ui-shadow-hover:0 18px 42px rgba(22,57,41,.105);
    --ui-radius:18px;
    --ui-radius-sm:12px;
}

/* ---------- Global ---------- */
body.app-body{
    background:
        radial-gradient(circle at 8% 8%, rgba(189,167,58,.06), transparent 25%),
        radial-gradient(circle at 92% 16%, rgba(23,63,45,.055), transparent 28%),
        var(--ui-bg);
}

.main-shell{
    min-width:0;
}

.main-inner{
    width:100%;
    max-width:1680px;
    margin:0 auto;
}

.main-inner > .alert{
    border:0;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(30,50,37,.06);
}

.text-gold{ color:var(--ui-gold)!important; }

/* ---------- Sidebar ---------- */
.sidebar{
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%),
        linear-gradient(180deg, #173c2c 0%, #214832 55%, #173b2b 100%);
    box-shadow:8px 0 28px rgba(17,47,34,.07);
}

.sidebar .brand{
    min-height:86px;
    padding:18px 18px;
    background:rgba(255,255,255,.025);
}

.sidebar .brand-mark,
.sidebar .unit-emblem{
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.14));
}

.side-nav{
    padding:16px 12px 18px;
}

.side-nav .nav-sec{
    margin-top:16px;
    margin-bottom:8px;
    color:#9eb3a5;
    font-size:10px;
    letter-spacing:.16em;
}

.side-nav a{
    min-height:43px;
    border:1px solid transparent;
    border-radius:12px;
    padding:10px 12px;
    color:#d6e0d9;
}

.side-nav a i{
    width:22px;
    font-size:16px;
    opacity:.95;
}

.side-nav a:hover{
    border-color:rgba(255,255,255,.06);
    background:rgba(255,255,255,.065);
    transform:translateX(2px);
}

.side-nav a.active{
    color:#fff7cb;
    border-color:rgba(223,204,94,.18);
    background:
        linear-gradient(90deg, rgba(205,184,67,.22), rgba(255,255,255,.055));
    box-shadow:inset 3px 0 0 #d7c24d;
}

.sidebar-foot{
    background:rgba(0,0,0,.045);
}

.btn-logout{
    border-radius:12px;
    min-height:43px;
}

/* ---------- Topbar ---------- */
.topbar{
    min-height:74px;
    padding:11px 24px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(218,226,218,.9);
    box-shadow:0 5px 22px rgba(25,51,35,.035);
}

.topbar h1{
    color:var(--ui-ink);
    font-size:18px;
    line-height:1.25;
}

.topbar .sub{
    color:var(--ui-muted);
}

.topbar-icon,
.user-menu .chip{
    border-color:var(--ui-line);
    box-shadow:0 3px 12px rgba(30,57,39,.035);
}

.topbar-icon:hover,
.user-menu .chip:hover{
    border-color:#cbd6ca;
    background:#fbfcfa;
}

.user-menu .avatar{
    border-radius:11px;
    background:linear-gradient(145deg,var(--ui-army),var(--ui-army-2));
    box-shadow:0 5px 12px rgba(23,63,45,.16);
}

/* ---------- Page heading ---------- */
.page-head{
    margin-bottom:20px;
    padding:2px 2px 0;
}

.breadcrumb{
    --bs-breadcrumb-divider-color:#a2aca5;
    margin-bottom:6px;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a{
    font-size:12px;
    color:#829087;
}

.breadcrumb-item.active{
    color:#526058;
    font-weight:650;
}

.page-head h2{
    color:var(--ui-ink);
    font-size:24px;
    line-height:1.2;
    letter-spacing:-.025em;
}

.page-head h2 i{
    font-size:.9em;
}

.page-head .toolbar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

/* ---------- Buttons ---------- */
.btn{
    --bs-btn-border-radius:10px;
    font-weight:700;
    font-size:13px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-army{
    background:linear-gradient(145deg,var(--ui-army),var(--ui-army-2));
    border-color:var(--ui-army);
    color:#fff;
    box-shadow:0 6px 14px rgba(23,63,45,.13);
}

.btn-army:hover,
.btn-army:focus{
    background:#123725;
    border-color:#123725;
    color:#fff;
    box-shadow:0 8px 18px rgba(23,63,45,.18);
}

.btn-outline-army{
    border-color:#91a292;
    color:var(--ui-army);
    background:#fff;
}

.btn-outline-army:hover,
.btn-outline-army:focus{
    color:#fff;
    border-color:var(--ui-army);
    background:var(--ui-army);
}

.btn-danger{
    background:#a63e3e;
    border-color:#a63e3e;
}

.btn-ico{
    border-radius:10px!important;
}

.sc-tools .btn,
.toolbar .btn{
    box-shadow:none;
}

/* ---------- Cards shared by EVERY menu ---------- */
.section-card,
.card{
    border:1px solid var(--ui-line)!important;
    border-radius:var(--ui-radius)!important;
    background:rgba(255,255,255,.97);
    box-shadow:var(--ui-shadow);
}

.section-card{
    overflow:hidden;
    margin-bottom:20px;
}

.section-card:hover{
    border-color:#d9e1d8!important;
}

.section-card .sc-head,
.card .card-header{
    min-height:58px;
    padding:15px 18px;
    background:
        linear-gradient(135deg, rgba(23,63,45,.035), rgba(189,167,58,.025)),
        #fff;
    border-bottom:1px solid var(--ui-line);
}

.section-card .sc-head h3{
    color:var(--ui-ink);
    font-size:15px;
    letter-spacing:-.005em;
}

.section-card .sc-head h3 i{
    width:24px;
    color:var(--ui-gold);
    text-align:center;
}

.section-card .sc-body{
    padding:18px;
}

.section-card .sc-body-flush{
    background:#fff;
}

/* ---------- Dashboard ---------- */
.stat-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--ui-line);
    border-radius:17px;
    padding:18px;
    background:linear-gradient(145deg,#fff,#fbfcfa);
    box-shadow:var(--ui-shadow);
}

.stat-card::after{
    content:"";
    position:absolute;
    width:78px;
    height:78px;
    border-radius:50%;
    right:-30px;
    top:-30px;
    background:rgba(189,167,58,.055);
    pointer-events:none;
}

.stat-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--ui-shadow-hover);
    border-color:#d5ded3;
}

.stat-icon{
    width:52px;
    height:52px;
    border-radius:15px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.025);
}

.stat-card .val{
    color:var(--ui-ink);
    font-size:25px;
}

.stat-card .lbl{
    color:var(--ui-muted);
}

.quick-grid{
    gap:10px;
}

.quick-act{
    min-height:92px;
    border:1px solid var(--ui-line);
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#fafbf8);
    box-shadow:none;
}

.quick-act:hover{
    border-color:#cfd9cd;
    background:var(--ui-army-soft);
    transform:translateY(-2px);
}

.quick-act i{
    color:var(--ui-army);
}

/* ---------- Forms / filters / create-edit pages ---------- */
.form-label{
    margin-bottom:6px;
    color:#35433a;
    font-size:12.5px;
    font-weight:800;
}

.form-control,
.form-select{
    min-height:43px;
    border:1px solid #dbe2da;
    border-radius:11px;
    background-color:#fff;
    color:var(--ui-ink);
    font-size:13.5px;
    box-shadow:none!important;
}

textarea.form-control{
    min-height:110px;
    line-height:1.55;
}

.form-control::placeholder{
    color:#9aa49d;
}

.form-control:hover,
.form-select:hover{
    border-color:#cbd6ca;
}

.form-control:focus,
.form-select:focus{
    border-color:#7e9983;
    box-shadow:0 0 0 3px rgba(23,63,45,.085)!important;
}

.input-group-text{
    border-color:#dbe2da;
    background:#f7f8f5;
    color:#65726a;
}

.form-text{
    margin-top:6px;
    color:#879189;
    font-size:11.5px;
}

.form-check-input:checked{
    background-color:var(--ui-army);
    border-color:var(--ui-army);
}

/* Filter layouts look intentional instead of stretched randomly */
.section-card form.row{
    --bs-gutter-x:14px;
    --bs-gutter-y:14px;
}

.section-card .sc-body > form > .d-flex:last-child,
.section-card form .justify-content-end{
    border-top:1px dashed #e3e8e2;
    padding-top:15px;
}

/* ---------- Tables all menus ---------- */
.table-wrap{
    background:#fff;
}

.table{
    --bs-table-bg:transparent;
    --bs-table-hover-bg:#f7f9f6;
    color:#2d3931;
    font-size:12.9px;
}

.table thead th{
    padding:12px 11px;
    background:#f3f2e9;
    color:#667267;
    font-size:10.5px;
    letter-spacing:.055em;
    line-height:1.35;
    border-bottom:1px solid #dfe4dc;
    vertical-align:middle;
}

.table tbody td{
    padding:13px 11px;
    border-color:#e8ece7;
    line-height:1.45;
    vertical-align:middle;
}

.table tbody tr:last-child td{
    border-bottom:0;
}

.table tbody tr{
    transition:background-color .16s ease;
}

.table tbody tr:hover{
    background:#f8faf7;
}

.table td .d-flex{
    min-width:0;
}

.table .btn{
    min-height:34px;
    min-width:34px;
    padding:6px 8px;
}

.table .btn-ico{
    width:34px;
    height:34px;
    padding:0;
}

.table td.wrap,
.table td{
    overflow-wrap:anywhere;
}

/* keep action columns tidy */
.table th:last-child,
.table td:last-child{
    text-align:center;
}

.table td:last-child .d-flex,
.table td:last-child > div{
    justify-content:center;
}

/* ---------- Badges ---------- */
.badge{
    border-radius:999px;
    padding:5px 9px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.01em;
    line-height:1.15;
}

.badge.b-label,
.badge.bg-secondary{
    background:#eef1ed!important;
    color:#56625a!important;
}

.badge.b-masuk,
.badge.b-diterima,
.badge.b-selesai{
    background:#e9f3e9!important;
    color:#416246!important;
}

.badge.b-keluar,
.badge.b-dikirim,
.badge.b-penting{
    background:#f6efd3!important;
    color:#75631e!important;
}

.badge.b-menunggu,
.badge.b-diproses{
    background:#edf0da!important;
    color:#68722e!important;
}

.badge.b-segera,
.badge.b-rahasia{
    background:#f6e4e1!important;
    color:#95493f!important;
}

/* ---------- Detail pages ---------- */
.info-list{
    display:grid;
    gap:0;
}

.info-list li{
    display:grid;
    grid-template-columns:minmax(120px, .42fr) minmax(0, 1fr);
    gap:16px;
    padding:12px 0;
}

.info-list .k{
    width:auto;
    color:#7b877f;
    font-size:12px;
    font-weight:700;
}

.info-list .v{
    min-width:0;
    color:#2b3830;
    overflow-wrap:anywhere;
}

.pdf-box{
    border:1px dashed #ccd7cb;
    background:linear-gradient(145deg,#f8faf7,#f3f6f1);
    border-radius:15px;
}

iframe{
    background:#f8faf7;
}

/* ---------- Disposisi ---------- */
.dispo-timeline{
    padding-left:28px;
}

.dtl-item{
    padding-bottom:18px;
}

.dtl-item .dot{
    box-shadow:0 0 0 5px rgba(23,63,45,.08);
}

/* ---------- Empty states ---------- */
.empty-state{
    padding:44px 18px;
    color:var(--ui-muted);
    text-align:center;
}

.empty-state i{
    display:inline-grid;
    place-items:center;
    width:56px;
    height:56px;
    border-radius:17px;
    margin-bottom:12px;
    background:var(--ui-army-soft);
    color:var(--ui-army);
    font-size:25px;
}

.empty-state h5{
    color:var(--ui-ink);
    font-size:15px;
    font-weight:800;
    margin-bottom:5px;
}

.empty-state p{
    font-size:12.5px;
}

/* ---------- Pagination ---------- */
.pagination{
    gap:5px;
    flex-wrap:wrap;
}

.page-link{
    min-width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:4px 8px;
    border-radius:9px!important;
    border-color:#dce3db;
    color:var(--ui-army);
    font-size:12px;
    font-weight:700;
}

.page-item.active .page-link{
    background:var(--ui-army);
    border-color:var(--ui-army);
}

/* ---------- Modal ---------- */
.modal-content{
    border:0;
    border-radius:18px;
    box-shadow:0 26px 70px rgba(14,43,31,.22);
    overflow:hidden;
}

.modal-header{
    padding:16px 18px;
    border-bottom:1px solid var(--ui-line);
    background:#fbfcfa;
}

.modal-title{
    font-size:16px;
    font-weight:800;
}

.modal-body{
    padding:18px;
}

.modal-footer{
    padding:13px 18px;
    border-top:1px solid var(--ui-line);
    background:#fbfcfa;
}

/* ---------- Dropdown ---------- */
.dropdown-menu{
    border:1px solid var(--ui-line);
    border-radius:13px;
    padding:7px;
    box-shadow:0 16px 38px rgba(26,54,36,.12);
}

.dropdown-item{
    border-radius:9px;
    padding:8px 10px;
    font-size:12.5px;
}

.dropdown-item:hover{
    background:var(--ui-army-soft);
    color:var(--ui-army);
}

/* ---------- Alerts ---------- */
.alert-success{
    background:#eef7ef;
    color:#355d3d;
}

.alert-danger{
    background:#fbefed;
    color:#843b36;
}

/* ---------- Progress ---------- */
.progress{
    height:7px;
    background:#edf0eb;
    border-radius:999px;
}

.progress-bar{
    border-radius:999px;
    background:var(--ui-army);
}

/* ---------- Footer ---------- */
.app-footer{
    background:rgba(255,255,255,.88);
    border-top:1px solid #e2e7e1;
    color:#7b877f;
}

/* ---------- Arsip page harmony ---------- */
.archive-filter-card,
.archive-result-card{
    border-color:var(--ui-line)!important;
    box-shadow:var(--ui-shadow)!important;
}

.archive-item{
    box-shadow:0 3px 12px rgba(31,56,39,.025);
}

/* ---------- Auth / login ---------- */
body.auth-page{
    background:#eef2ec;
}

.auth-wrap{
    background:
        radial-gradient(circle at 18% 18%, rgba(215,194,77,.10), transparent 28%),
        #eef2ec;
}

.auth-info{
    background:
        linear-gradient(155deg, rgba(255,255,255,.035), transparent 28%),
        linear-gradient(145deg,#123524,#1f5338);
}

.auth-card{
    background:
        radial-gradient(circle at 80% 10%, rgba(189,167,58,.08), transparent 25%),
        #f5f6f2;
}

.auth-card .ac-inner{
    border:1px solid #e0e6df;
    border-radius:20px;
    background:#fff;
    box-shadow:0 24px 60px rgba(25,55,37,.10);
    padding:32px;
}

.auth-card h2{
    color:var(--ui-ink);
    letter-spacing:-.025em;
}

.auth-card .lead{
    color:var(--ui-muted);
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-bottom:20px;
    color:var(--ui-army);
    font-size:12px;
    font-weight:750;
}

/* ---------- Responsiveness ---------- */
@media (max-width: 1199.98px){
    .main-inner{
        max-width:none;
    }

    .page-head h2{
        font-size:22px;
    }

    .section-card .sc-head{
        padding:14px 16px;
    }

    .section-card .sc-body{
        padding:16px;
    }

    .table{
        font-size:12.2px;
    }

    .table thead th,
    .table tbody td{
        padding-left:9px;
        padding-right:9px;
    }
}

@media (max-width: 991.98px){
    .topbar{
        min-height:66px;
        padding:10px 15px;
    }

    .main-inner{
        padding:18px;
    }

    .stat-card{
        padding:16px;
    }
}

@media (max-width: 767.98px){
    .main-inner{
        padding:13px;
    }

    .page-head{
        gap:11px;
        margin-bottom:15px;
    }

    .page-head h2{
        font-size:19px;
    }

    .page-head .toolbar{
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .page-head .toolbar .btn{
        width:100%;
        min-width:0;
        padding-left:8px;
        padding-right:8px;
    }

    .section-card,
    .card{
        border-radius:15px!important;
        margin-bottom:14px;
    }

    .section-card .sc-head{
        min-height:52px;
        padding:12px 13px;
    }

    .section-card .sc-head .sc-tools{
        width:100%;
    }

    .section-card .sc-body{
        padding:13px;
    }

    .stat-card{
        min-height:82px;
        border-radius:15px;
    }

    .stat-icon{
        width:46px;
        height:46px;
        border-radius:13px;
    }

    .quick-act{
        min-height:78px;
    }

    .table{
        font-size:11.4px;
    }

    .table thead th{
        font-size:9.3px;
        padding:9px 6px;
    }

    .table tbody td{
        padding:10px 6px;
        line-height:1.35;
    }

    .table .btn,
    .table .btn-ico{
        min-width:30px;
        width:30px;
        height:30px;
        min-height:30px;
        padding:0;
    }

    .badge{
        font-size:9.3px;
        padding:4px 6px;
    }

    .info-list li{
        grid-template-columns:1fr;
        gap:4px;
        padding:10px 0;
    }

    .info-list .k{
        font-size:10.5px;
        text-transform:uppercase;
        letter-spacing:.035em;
    }

    .auth-card .ac-inner{
        padding:22px 18px;
        border-radius:17px;
    }

    .modal-dialog{
        margin:12px;
    }

    .modal-body{
        padding:15px;
    }
}

@media (max-width: 520px){
    .page-head .toolbar{
        grid-template-columns:1fr;
    }

    .section-card .sc-head .sc-tools{
        display:grid;
        grid-template-columns:1fr;
    }

    .section-card .sc-head .sc-tools .btn,
    .section-card .sc-head .sc-tools a{
        width:100%;
    }

    .app-footer{
        text-align:center;
        justify-content:center;
    }

    .table th:first-child,
    .table td:first-child{
        width:36px!important;
    }

    .table th:last-child,
    .table td:last-child{
        width:58px!important;
    }
}

/* Accessibility / reduced motion */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}