/* Custom styling for Inventarisasi Aset */

/* Login Page */
.login-page {
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: #f8f9fc;
}

.login-form {
    max-width: 400px;
    width: 100%;
    padding: 30px;
    background: white;
    border-radius: 5px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo img {
    max-height: 100px;
}

/* Dashboard Cards */
.info-card {
    border-left: 4px solid var(--primary-color);
}

.info-card.primary {
    border-left-color: var(--primary-color);
}

.info-card.success {
    border-left-color: var(--success-color);
}

.info-card.warning {
    border-left-color: var(--warning-color);
}

.info-card.danger {
    border-left-color: var(--danger-color);
}

/* Asset Detail */
.asset-detail-card {
    margin-bottom: 20px;
}

.asset-detail-card .card-header {
    background-color: var(--primary-color);
    color: white;
}

/* QR Code Scanner */
#qr-reader {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

#result-container {
    margin-top: 30px;
}

/* User Avatar Upload */
.avatar-upload {
    position: relative;
    max-width: 150px;
    margin: 0 auto;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 5px;
    z-index: 1;
    top: 5px;
}

.avatar-upload .avatar-preview {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 100%;
    overflow: hidden;
    border: 3px solid #ddd;
}

.avatar-upload .avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom Theme Colors */
.bg-custom-primary {
    background-color: var(--primary-color) !important;
}

.text-custom-primary {
    color: var(--primary-color) !important;
}

.border-custom-primary {
    border-color: var(--primary-color) !important;
}

/* Layout tanpa sidebar */
.wrapper-no-sidebar {
    display: block;
    width: 100%;
}

#content-wrapper-full {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    position: relative;
}

/* Styling untuk menu horizontal */
.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item.active .nav-link {
    color: var(--primary-color);
    font-weight: bold;
}

.navbar-nav .dropdown-menu {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

/* Responsive menu */
@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
        background: white;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        padding: 1rem;
        display: none; /* Tambahkan ini untuk menyembunyikan menu secara default */
    }
    
    .navbar-collapse.show {
        display: block; /* Tampilkan menu saat memiliki class 'show' */
    }
    
    .navbar-nav {
        display: flex;
        flex-direction: column; /* Ubah ke column untuk tampilan mobile */
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        width: 100%;
    }
    
    .navbar-nav .nav-item {
        width: 100%;
        margin-bottom: 5px;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        width: 100%;
        display: block;
    }
    
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0;
        border: 0;
        box-shadow: none;
        padding-left: 1.5rem;
        display: none; /* Sembunyikan dropdown secara default */
    }
    
    .navbar-nav .dropdown-menu.show {
        display: block; /* Tampilkan dropdown saat memiliki class 'show' */
    }
    
    .navbar-nav .dropdown-item {
        padding: 0.5rem 1rem;
    }
    
    /* Fix untuk user dropdown */
    .navbar-nav.ml-auto {
        margin-top: 1rem;
        border-top: 1px solid #eee;
        padding-top: 1rem;
    }
}

/* Styling untuk tombol burger menu */
.navbar-toggler {
    padding: 0.5rem;
    font-size: 1.25rem;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    background-color: white;
    color: var(--primary-color);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Tambahkan variabel RGB untuk primary color */
:root {
    --primary-color-rgb: 0, 123, 255; /* Sesuaikan dengan warna tema Anda dalam format RGB */
}

/* Mobile Bottom Menu */
.mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #0066cc; /* Warna biru seperti pada gambar */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 10px 0;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 5px;
}

.bottom-nav-link i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.bottom-nav-link:hover,
.bottom-nav-link:focus {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

/* Tambahkan padding pada body untuk menghindari konten tertutup oleh bottom menu */
@media (max-width: 768px) {
    body {
        padding-bottom: 70px;
    }
    
    /* Sesuaikan posisi scroll-to-top button */
    .scroll-to-top {
        bottom: 80px;
    }
}

/* Flying Sticky Menu */
.flying-sticky-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #03182a; /* Warna biru seperti gambar */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1030;
    padding: 0;
    display: none;
    height: 60px; /* Tinggi tetap */
}

.flying-sticky-menu .container-fluid {
    height: 100%;
    padding: 0;
}

.flying-sticky-menu .row {
    height: 100%;
    margin: 0;
}

.flying-sticky-menu .col {
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Separator vertikal antar item */
.flying-sticky-menu .col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.sticky-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    padding: 8px 4px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s ease;
    position: relative;
}

.sticky-nav-link i {
    font-size: 1.2rem; /* Ukuran ikon proporsional */
    margin-bottom: 2px;
    display: block;
}

.sticky-nav-link span {
    font-size: 0.65rem; /* Ukuran teks kecil tapi terbaca */
    font-weight: 500;
    text-align: center;
    line-height: 1;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sticky-nav-link:hover,
.sticky-nav-link:focus {
    color: white;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.1);
}

.sticky-nav-link:active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Tampilkan hanya pada mobile */
@media (max-width: 768px) {
    .flying-sticky-menu {
        display: block;
    }
    
    body {
        padding-bottom: 60px; /* Sesuai tinggi menu */
    }
    
    /* Sesuaikan posisi scroll-to-top button */
    .scroll-to-top {
        bottom: 70px;
    }
}

/* Responsif untuk layar sangat kecil */
@media (max-width: 360px) {
    .sticky-nav-link span {
        font-size: 0.6rem;
    }
    
    .sticky-nav-link i {
        font-size: 1.1rem;
    }
}

/* Untuk layar lebih besar dalam mode mobile */
@media (min-width: 480px) and (max-width: 768px) {
    .sticky-nav-link span {
        font-size: 0.7rem;
    }
    
    .sticky-nav-link i {
        font-size: 1.3rem;
    }
}

.sticky-nav-link:hover,
.sticky-nav-link:focus {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

/* Tampilkan hanya pada mobile */
@media (max-width: 768px) {
    .flying-sticky-menu {
        display: block;
    }
    
    body {
        padding-bottom: 50px; /* Padding lebih kecil karena menu lebih proporsional */
    }
    
    /* Sesuaikan posisi scroll-to-top button */
    .scroll-to-top {
        bottom: 70px;
    }
}

/* Sticky Header */
.navbar.static-top {
    position: sticky;
    top: 0;
    z-index: 1040; /* Lebih tinggi dari flying menu */
}

/* Tambahkan padding pada body untuk menghindari konten tertutup oleh sticky header */
body {
    padding-top: 10px;
}

/* Styling untuk avatar di samping burger menu pada mobile dan di samping menu pada desktop */
.img-profile {
    border: 2px solid var(--primary-color);
}

/* Untuk desktop dan tablet, avatar berada di samping kanan menu */
@media (min-width: 992px) {
    .navbar-nav {
        margin-right: 60px; /* Memberikan ruang untuk avatar di sebelah kanan */
    }
    
    .d-flex.align-items-center.ms-auto {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .navbar-toggler {
        display: none; /* Menyembunyikan burger menu pada desktop */
    }
}

/* Untuk mobile, avatar berada di samping burger menu dengan jarak */
@media (max-width: 991px) {
    .navbar-toggler {
        margin-left: 15px; /* Jarak antara avatar dan burger menu */
    }
    
    .dropdown-menu-end {
        right: 0;
        left: auto;
    }
}

/* Pastikan dropdown user muncul dengan benar pada mobile */
@media (max-width: 768px) {
    .dropdown-menu-end {
        right: 0;
        left: auto;
    }
    
    /* Tambahkan jarak antara avatar dan burger menu pada mobile */
    .navbar-toggler {
        margin-left: 15px; /* Jarak antara avatar dan burger menu */
    }
}

/* Untuk desktop dan tablet, avatar tetap di pojok kanan atas */
@media (min-width: 769px) {
    .nav-item.dropdown.no-arrow {
        margin-left: auto;
    }
}

/* Menyamakan ukuran font menu dan submenu */
.navbar-nav .dropdown-item {
    font-size: 0.9em; /* Samakan dengan ukuran font menu utama */
}

/* Jika diperlukan, sesuaikan juga ukuran font pada menu utama */
.navbar-nav .nav-link {
    font-size: 0.9em;
}

/* Standardisasi ukuran font - versi yang lebih komprehensif */

/* Reset semua ukuran font ke ukuran yang sama */
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.btn,
.form-control,
input,
select,
textarea,
.form-label,
.form-text,
.card-header,
.card-title,
.card-body,
.table,
.alert,
.breadcrumb,
.pagination,
.badge,
.list-group-item,
.dropdown-menu,
.modal-body,
.modal-title,
.tooltip,
.popover,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.sidebar ul li a,
.sidebar ul ul a,
.theme-modern .form-control,
.theme-modern .btn,
.bottom-nav-link,
.sticky-nav-link,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    /* Gunakan !important untuk mengesampingkan semua aturan lain */
    font-size: 0.9rem !important;
}

/* Pengecualian untuk judul dengan ukuran relatif */
h1, .h1 {
    font-size: 1.6rem !important;
}

h2, .h2 {
    font-size: 1.4rem !important;
}

h3, .h3 {
    font-size: 1.3rem !important;
}

h4, .h4 {
    font-size: 1.2rem !important;
}

h5, .h5 {
    font-size: 1.1rem !important;
}

/* Pastikan ukuran font konsisten pada tampilan mobile */
@media (max-width: 768px) {
    .bottom-nav-link,
    .sticky-nav-link {
        font-size: 0.9rem !important;
    }
}

/* Pastikan Bootstrap tidak mengganti ukuran font */
.fs-1, .fs-2, .fs-3, .fs-4, .fs-5, .fs-6 {
    font-size: 1rem !important;
}

/* Pastikan semua elemen form memiliki ukuran yang sama */
.form-control-lg, .form-control-sm,
.btn-lg, .btn-sm,
.input-group-text,
.form-select,
.form-select-lg,
.form-select-sm {
    font-size: 1rem !important;
}

/* Tambahkan CSS ini di bagian akhir file atau setelah baris 577 */

/* Responsive Header untuk Mobile */
@media (max-width: 768px) {
    /* Kurangi ukuran logo pada mobile */
    .navbar-brand img {
        height: 30px !important; /* Dari 40px menjadi 28px */
        max-height: 30px;
    }
    
    /* Kurangi padding navbar untuk memberikan lebih banyak ruang */
    .topbar {
        padding: 0.5rem 0.75rem; /* Kurangi padding horizontal */
    }
    
    /* Sesuaikan navbar brand padding */
    .navbar-brand {
        padding: 0.25rem 0.5rem;
        margin-right: 0.5rem;
    }
    
    /* Kurangi ukuran avatar user */
    .img-profile {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Sesuaikan spacing untuk dropdown user */
    .nav-item.dropdown.no-arrow {
        margin-right: 0.25rem;
    }
    
    /* Kurangi padding pada navbar toggler */
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
    }
}

/* Untuk layar yang sangat kecil (di bawah 576px) */
@media (max-width: 576px) {
    .navbar-brand img {
        height: 24px !important; /* Lebih kecil lagi untuk layar sangat kecil */
        max-height: 24px;
    }
    
    .topbar {
        padding: 0.25rem 0.5rem; /* Padding lebih kecil */
    }
    
    .navbar-brand {
        padding: 0.125rem 0.25rem;
    }
}

/* Tambahkan di bagian akhir file */

/* Perbesar logo header untuk desktop */
.navbar-brand img {
    height: 50px !important;
    max-height: 50px;
    width: auto;
}

/* Sesuaikan untuk tablet */
@media (max-width: 992px) {
    .navbar-brand img {
        height: 45px !important;
        max-height: 45px;
    }
}

/* Tetap responsif untuk mobile */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 35px !important;
        max-height: 35px;
    }
}

/* Untuk layar sangat kecil */
@media (max-width: 576px) {
    .navbar-brand img {
        height: 30px !important;
        max-height: 30px;
    }
}

/* Sesuaikan tinggi navbar jika diperlukan */
.topbar {
    min-height: 70px; /* Sesuaikan dengan ukuran logo yang lebih besar */
}

/* Pastikan elemen lain dalam navbar tetap center */
.topbar .d-flex {
    align-items: center;
}

/* Hilangkan semua margin dan padding default */
html, body {
    margin: 0;
    padding: 0;
}

/* Pastikan navbar menempel di atas */
.topbar {
    margin-top: 0;
    margin-bottom: 0;
}

/* Untuk mobile, pastikan tidak ada jarak atas */
@media (max-width: 768px) {
    body {
        padding-top: 0;
    }
    
    .topbar {
        margin-top: 0;
    }
}

/* Tambahkan styling untuk field yang disabled */
.form-control:disabled,
.form-select:disabled {
    background-color: #f8f9fa !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Visual feedback untuk field yang tidak aktif */
.bg-light {
    background-color: #f8f9fa !important;
}