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

/* Hamburger button - only visible on mobile */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333;
    padding: 4px 8px;
    cursor: pointer;
}

/* Sidebar overlay backdrop */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
}
.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Mobile top bar (below top-navbar) */
.mobile-topbar {
    display: none;
}

/* ===== TABLET & MOBILE (max-width: 992px) ===== */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 200 !important;
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important;
    }
    .top-navbar {
        position: relative;
        z-index: 101;
        flex-wrap: wrap;
    }
    .hamburger-btn {
        display: inline-flex;
        align-items: center;
    }
    .content-area {
        padding: 20px 16px !important;
    }
    .top-navbar {
        padding: 12px 16px !important;
    }
    .top-navbar h5 {
        font-size: 0.95rem;
    }
    /* Stat cards */
    .stat-card .stat-number {
        font-size: 1.5rem;
    }
    .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
    .stat-card .card-body {
        padding: 16px;
    }
    /* Quick action cards */
    .quick-action {
        padding: 14px;
    }
    .quick-action .qa-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    /* Tables */
    .table-custom th,
    .table-custom td {
        font-size: 0.8rem;
        padding: 8px 10px !important;
    }
    .btn-action {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    /* Search boxes */
    .search-box {
        width: 100% !important;
        font-size: 0.85rem;
    }
    .card-header .position-relative {
        width: 100% !important;
    }
    /* Forms */
    .form-card .card-body {
        padding: 20px !important;
    }
    .form-label {
        font-size: 0.85rem;
    }
    .form-control {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    /* Page card */
    .page-card .card-header {
        padding: 14px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-card .card-body {
        padding: 16px !important;
    }
    /* Laporan charts */
    #chartBulan {
        height: 200px !important;
    }
    #chartKategori {
        height: 180px !important;
    }
    .d-flex.justify-content-between.mb-3 {
        flex-direction: column;
        gap: 10px;
    }
    /* Tambah pinjam form sections */
    .section-divider {
        font-size: 0.8rem;
    }
}

/* ===== SMALL MOBILE (max-width: 576px) ===== */
@media (max-width: 576px) {
    .top-navbar {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    .top-navbar h5 {
        font-size: 0.9rem;
    }
    .top-navbar .btn {
        font-size: 0.78rem;
    }
    /* Alert welcome */
    .alert-info {
        font-size: 0.82rem;
        padding: 10px 14px;
    }
    .alert-info span {
        display: block;
    }
    /* Stat cards - stack vertically */
    .stat-card .card-body {
        padding: 14px;
    }
    .stat-card .stat-number {
        font-size: 1.3rem;
    }
    /* Quick action cards */
    .quick-action {
        padding: 12px;
        gap: 12px;
    }
    .quick-action .qa-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .quick-action .fw-semibold {
        font-size: 0.85rem;
    }
    /* Tables */
    .table-custom th {
        font-size: 0.75rem;
        padding: 6px 8px !important;
    }
    .table-custom td {
        font-size: 0.78rem;
        padding: 6px 8px !important;
    }
    .btn-action {
        padding: 3px 6px;
        font-size: 0.7rem;
    }
    /* Form buttons full width */
    .d-flex.gap-2 .btn-submit {
        flex: 1;
    }
    .d-flex.gap-2 {
        flex-direction: column;
    }
    /* Content area */
    .content-area {
        padding: 14px 12px !important;
    }
    /* Laporan filter row */
    .d-flex.justify-content-between.mb-3 .d-flex.gap-2 {
        flex-wrap: wrap;
    }
    /* Login card */
    .login-card {
        padding: 28px 20px;
    }
    .role-pick {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    /* Tampil buku search form */
    .row.g-2 .col-md-2 {
        width: 100%;
    }
    .row.g-2 .col-md-2 .btn {
        width: 100%;
    }
}

/* ===== EXTRA SMALL (max-width: 400px) ===== */
@media (max-width: 400px) {
    .stat-card .stat-number {
        font-size: 1.1rem;
    }
    .stat-card .stat-label {
        font-size: 0.78rem;
    }
    .table-custom th,
    .table-custom td {
        font-size: 0.72rem;
        padding: 5px 6px !important;
    }
    .btn-action {
        padding: 2px 5px;
        font-size: 0.68rem;
    }
}