/* public/css/orchid-orange.css - Versi DARK ORANGE Premium Optimized */

:root {
    --bs-primary: #ff8c00;
    --sidebar-bg: #1a1a1a;
    --sidebar-hover: #262626;
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --transition-speed: 0.3s;
}

/* 0. Global Fix - Mencegah scroll horizontal di mobile */
html, body {
    overflow-x: hidden !important;
    position: relative;
}

/* 1. Reset & Sidebar Background */
.bg-dark, .sidebar, .aside, .header.bg-dark {
    background-color: var(--sidebar-bg) !important;
}

/* Sidebar Base */
.sidebar, .aside {
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    width: var(--sidebar-width) !important;
    z-index: 1030;
}

/* Sidebar Collapsed State */
.sidebar.collapsed, .aside.collapsed {
    width: var(--sidebar-collapsed-width) !important;
    min-width: var(--sidebar-collapsed-width) !important;
}

/* Sembunyikan elemen teks saat mengecil */
.collapsed .nav-link span,
.collapsed .info-text,
.collapsed .brand-name,
.collapsed .badge,
.collapsed .text-muted {
    display: none !important;
}

/* Garis pemisah minimalis saat sidebar mengecil */
.collapsed .nav-item.mt-3.mb-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.collapsed small.text-muted.ms-4 {
    display: block !important;
    width: 20px;
    height: 1px;
    background: rgba(255, 140, 0, 0.3);
    text-indent: -9999px;
    margin: 0 !important;
}

.collapsed .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    height: 50px;
}

/* 2. MENU NAVIGASI */
.sidebar .nav-link, .aside .nav-link {
    color: #b3b3b3 !important;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar .nav-link:hover {
    color: #ff8c00 !important;
    background-color: var(--sidebar-hover) !important;
}

.sidebar .nav-link.active {
    color: #ff8c00 !important;
    background-color: rgba(255, 140, 0, 0.08) !important;
    border-left: 3px solid #ff8c00 !important;
}

/* 3. PROFILE & TOGGLE ARROW */
.profile-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px !important;
}

.collapsed .profile-container {
    flex-direction: column !important;
    padding: 10px 0 !important;
    justify-content: center !important;
}

.collapsed .profile-link {
    justify-content: center !important;
    margin: 0 auto !important;
}

.toggle-arrow-container {
    color: #ff8c00 !important;
    background: rgba(255, 140, 0, 0.1);
    border-radius: 4px;
    padding: 5px;
}

.collapsed .toggle-arrow-container {
    margin: 10px auto !important;
    width: 35px;
    height: 35px;
}

/* 4. OPTIMASI LAYOUT DESKTOP (Koreksi Grid) */
.workspace-limit {
    max-width: 100% !important;
    width: 100% !important;
}

/* Pastikan konten utama mengambil sisa ruang dengan benar */
.admin-wrapper .mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Table Responsive */

.table-responsive {
    width: 100%;
    border-radius: 8px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 5. UI ELEMENTS */
.btn-primary {
    background-color: #ff8c00 !important;
    border-color: #ff8c00 !important;
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
}

/* 6. MEDIA QUERY UNTUK MOBILE (Hapus Margin Kanan-Kiri) */
@media (max-width: 991.98px) {
    /* Hilangkan gutter/celah antar kolom */
    .row {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hilangkan efek centering yang bikin margin besar */
    .row.justify-content-center {
        justify-content: flex-start !important;
    }

    /* Pastikan kolom konten memenuhi lebar layar */
    .col-12, .col-lg-9, .col-xl-9 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Beri padding hanya di area kerja agar teks tidak nempel layar */
    .workspace {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Header & Breadcrumb */
    header.p-3, .breadcrumb {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Sidebar di mobile harus 100% jika aktif */
    .aside {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Menghilangkan padding utama agar benar-benar mepet ke tepi layar */
.container-fluid[data-controller="base"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Menghilangkan celah (gutter) pada baris utama */
.row.justify-content-center.d-md-flex {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important; /* Standar Bootstrap 5 */
}

/* KOREKSI KRITIKAL: Menghilangkan paksaan 'tengah' pada konten utama */
.col-xxl, .col-lg-9, .col-xl-9 {
    margin-left: 0 !important;   /* Menimpa mx-auto */
    margin-right: 0 !important;  /* Menimpa mx-auto */
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;  /* Membiarkan konten mengambil sisa ruang */
}

/* Pastikan area kerja (workspace) tetap memiliki sedikit napas agar teks tidak nempel kaca */
.workspace {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.container-xl {
    max-width: 95% !important; /* Menggunakan 95% dari lebar layar */
    padding-left: 15px !important;
    padding-right: 15px !important;
}