/* assets/style.css */
/* Tema visual aplikasi Cuti Pegawai PN Jaksel, versi modern dengan fix iPhone bottom-nav */

/* ===========================
   Variabel tema
=========================== */
:root {
    --brand-green: #00a859;
    --brand-green-2: #00c26a;
    --bg-body: #f5f7f9;
    --radius-card: 1rem;
    --navbar-height: 60px;
}

/* ===========================
   Base body / typography
=========================== */
body {
    background-color: var(--bg-body);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color:#000;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing: antialiased;
}

/* small text helpers */
.small,
.small * {
    font-size:.85rem;
    line-height:1.4;
}
.text-muted.small {
    font-size:.8rem;
}

/* ===========================
   NAVBAR HEADER
=========================== */
.main-navbar {
    background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green-2) 100%);
    color:#fff;
    border-bottom:0;
    min-height: var(--navbar-height);
    padding-top:.5rem;
    padding-bottom:.5rem;
}

.brand-circle-sm {
    width:2.5rem;
    height:2.5rem;
    border-radius:.9rem;
    background:#fff;
    color:var(--brand-green);
    font-size:1.2rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 20px rgba(0,0,0,.15);
}

.brand-text-wrap .brand-title {
    line-height:1.3;
    font-size:1rem;
    color:#fff;
    font-weight:600;
}
.brand-text-wrap .brand-sub {
    line-height:1.3;
    font-size:.8rem;
    color:rgba(255,255,255,.85);
    font-weight:500;
}

.navbar-nav .nav-link {
    font-size:.95rem;
    line-height:1.4;
    color:#fff;
    display:flex;
    align-items:center;
    font-weight:600;
    padding-top:.5rem;
    padding-bottom:.5rem;
}
.navbar-nav .nav-link .bi {
    font-size:1.15rem;
}

.navbar-nav .dropdown-menu-dark {
    background:#212529;
    border-radius:.9rem;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.navbar-nav .dropdown-menu-dark .dropdown-item {
    color:#fff;
    font-size:.85rem;
    line-height:1.4;
    font-weight:600;
}
.navbar-nav .dropdown-menu-dark .dropdown-item .bi {
    font-size:1.1rem;
}

/* user dropdown di kanan navbar */
.user-mini-link {
    color:#fff !important;
    text-decoration:none;
}
.user-mini-circle {
    width:3rem;
    height:3rem;
    border-radius:1rem;
    background:rgba(0,0,0,.2);
    color:#fff;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 16px 30px rgba(0,0,0,.4);
}
.user-mini-wrap {
    max-width:200px;
}
.user-mini-name {
    font-size:.9rem;
    font-weight:600;
    color:#fff;
    max-width:200px;
    line-height:1.4;
}
.user-mini-role {
    font-size:.8rem;
    max-width:200px;
    line-height:1.4;
    color:rgba(255,255,255,.8);
}

/* hamburger icon */
.navbar-toggler {
    color:#fff;
    border-color:transparent;
}
.navbar-toggler-icon {
    filter: invert(1) brightness(10);
}

/* dropdown menu general */
.dropdown-menu {
    border-radius:.9rem;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.1);
    font-size:.9rem;
}
.dropdown-item {
    font-size:.85rem;
    line-height:1.4;
    font-weight:600;
}

/* ===========================
   PAGE WRAPPER
=========================== */
/* trik:
   - padding-bottom besar supaya konten ga ketutup bottom-nav
   - env(safe-area-inset-bottom) buat iPhone notch
*/
.main-container {
    max-width: 640px;
    margin-left:auto;
    margin-right:auto;
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

.alert.small,
.small .alert {
    font-size:.85rem;
    padding:.6rem .8rem;
    border-radius:.7rem;
}

/* ===========================
   GENERIC CARDS
=========================== */
.app-card {
    background:#fff;
    border-radius: var(--radius-card);
    box-shadow: 0 22px 40px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.05);
    padding:1rem 1rem;
    margin-bottom:1.25rem;
}
.app-card-header {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:1rem;
}
.icon-circle {
    width:3rem;
    height:3rem;
    border-radius:1rem;
    background: var(--brand-green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    font-weight:600;
    flex-shrink:0;
    box-shadow:0 16px 30px rgba(0,0,0,.15);
}

/* ===========================
   TABLES & FORMS
=========================== */
.table > :not(caption) > * > * {
    padding:.6rem .6rem;
    vertical-align: middle;
    font-size:.9rem;
    line-height:1.4;
}
.form-control,
.form-select {
    border-radius:.7rem;
    font-size:.9rem;
    line-height:1.4;
}
.form-control-sm,
.form-select-sm {
    border-radius:.7rem;
    font-size:.85rem;
    line-height:1.4;
}
.btn {
    border-radius:.8rem;
    font-size:.9rem;
    line-height:1.4;
    font-weight:600;
}
.btn.btn-lg {
    border-radius:1rem;
    font-size:1rem;
    line-height:1.4;
}
.btn-sm {
    border-radius:.7rem;
    font-size:.8rem;
    line-height:1.4;
    padding:.5rem .7rem;
}

/* ===========================
   STATUS BADGES
=========================== */
.badge-status-approved {
    background:#198754;
    color:#fff;
}
.badge-status-reject {
    background:#dc3545;
    color:#fff;
}
.badge-status-wait {
    background:#ffc107;
    color:#000;
}

/* ===========================
   BOTTOM NAV (MOBILE)
=========================== */
/* Perbaikan iPhone:
   - position fixed + bottom:0 + width:100vw
   - z-index tinggi
   - padding bawah pakai env(safe-area-inset-bottom)
*/
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vw;
    max-width: 100vw;
    margin: 0;

    background:#fff;
    border-top:1px solid rgba(0,0,0,.08);

    display:flex;
    align-items:flex-end;
    justify-content:space-around;

    /* tinggi minimum bar */
    min-height:70px;

    /* jarak dalam nav */
    padding: .5rem 0 calc(env(safe-area-inset-bottom, 0px) + .4rem);

    box-shadow:0 -16px 30px rgba(0,0,0,.08);
    z-index:9999;
}

.bottom-nav-link {
    flex:1 1 auto;
    text-align:center;
    text-decoration:none;
    color:#000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    font-size:.85rem;
    line-height:1.4;
    font-weight:600;
}
.bottom-nav-link .icon {
    font-size:1.3rem;
    line-height:1;
}
.bottom-nav-link .txt {
    font-size:.8rem;
    margin-top:.3rem;
    line-height:1.4;
}

/* ===========================
   DESKTOP FOOTER
=========================== */
.desktop-footer {
    color:#6c757d;
    text-align:center;
}
.desktop-footer .fw-semibold {
    font-weight:600;
    font-size:.9rem;
    line-height:1.4;
}
.desktop-footer .text-muted {
    font-size:.8rem;
    line-height:1.4;
}

/* ===========================
   RESPONSIVE TWEAKS
=========================== */
@media (min-width:768px){
    .main-container {
        /* di desktop/tablet konten ga ketutup bottom nav,
           jadi padding bawah kecil */
        padding-bottom:2rem;
    }
}

@media (min-width:992px){
    .navbar-nav .nav-link {
        padding-right: .75rem;
        padding-left: .75rem;
    }
    .navbar-nav .dropdown-menu-dark {
        min-width: 240px;
    }
    .user-mini-circle {
        width:3rem;
        height:3rem;
        font-size:1.4rem;
    }
    .user-mini-wrap {
        max-width:240px;
    }
    .user-mini-name {
        font-size:.95rem;
        max-width:240px;
    }
    .user-mini-role {
        font-size:.8rem;
        max-width:240px;
    }
}

/* =========================================================
   TAMBAHAN: Khusus Dashboard biar gak kopong kiri/kanan
   ========================================================= */

/* Halaman dashboard nanti kita kasih class extra "dashboard-wide"
   di element <main>. Ini bikin max-width nya jauh lebih lebar di desktop.
   Halaman lain tetep 640px rapet (mobile-first). */
.main-container.dashboard-wide {
    max-width:1200px;
}

/* layar gede banget (>=1400px), agak dilebarin dikit lagi */
@media(min-width:1400px){
    .main-container.dashboard-wide {
        max-width:1320px;
    }
}

/* =========================================================
   TAMBAHAN: Grid 2 kolom di dashboard (saldo vs statistik,
   pending vs riwayat) biar rapih sejajar di desktop.
   ========================================================= */

.dash-row {
    display:block;
    margin-bottom:1.25rem;
}

/* child container untuk setiap kartu dalam dash-row */
.dash-col-card {
    margin-bottom:1.25rem;
}

/* mulai layar >=992px kita bikin sejajar */
@media(min-width:992px){
    .dash-row {
        display:flex;
        flex-wrap:nowrap;
        gap:1rem;
        align-items:stretch;
    }
    .dash-col-card {
        flex:1 1 0;
        min-width:0;
        margin-bottom:0;
        display:flex;
        flex-direction:column;
    }
}

/* === FIX: rapat ke bawah & matikan bottom-nav lama (iPhone safe) === */

/* 1) Kecilkan padding bawah konten — nav-island NON-FIXED jadi ga melayang */
.main-container {
  padding-bottom: 1rem !important; /* override padding bawah lama (100px) */
}

/* 2) Matikan seluruh gaya .bottom-nav legacy yang masih fixed */
.bottom-nav,
.bottom-nav * {
  position: static !important;
  display: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 3) Dashboard wide tetap aman (tidak perlu diubah) */
/* .main-container.dashboard-wide { max-width: inherit } — gunakan yang sudah ada */