/* ===========================
   GLOBAL & BASE STYLE
=========================== */

@-ms-viewport {
    width: device-width;
}

html, body {
    scroll-behavior: smooth;
    background: var(--bg-color) !important;
    font-family: "Poppins", "Nunito", sans-serif;
    color: var(--text-color) !important;
    width: 100%;
}

body {
    font-size: 14px;
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
}

/* ===========================
   NAVBAR CUSTOM MODERN
=========================== */

.navbar-custom {
    background-color: var(--nav-bg) !important;
    backdrop-filter: blur(12px);
    color: var(--text-color) !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: 0.3s ease-in-out;
    z-index: 99;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: var(--text-color) !important;
    font-weight: 600;
}

.navbar-custom .navbar-nav .nav-link {
    color: var(--text-color) !important;
    margin-left: 5px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 13pt;
    transition: 0.3s;
}

.navbar-custom .navbar-nav .nav-link:hover {
    color: #0d6efd !important;
}

.navbar-custom .navbar-nav .nav-link.active {
    font-weight: 700;
    color: #0d6efd !important;
    background-color: rgba(61, 115, 168, 0.15);
    border-radius: 30px;
}

/* Ensure links that use Bootstrap bg/text utility classes remain readable */
.navbar-custom .navbar-nav .nav-link.bg-primary,
.navbar-custom .navbar-nav .nav-link.text-white,
.navbar-custom .navbar-nav .nav-link.bg-primary.active,
.navbar-custom .navbar-nav .nav-link.text-white.active {
    color: #ffffff !important;
}

/* More explicit styles to ensure Dashboard/Login pill is readable */
.navbar-custom .navbar-nav .nav-link.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
    padding: 0.45rem 1.1rem !important;
    border-radius: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px;
    text-align: center !important;
    line-height: 1 !important;
}

.navbar-custom .navbar-nav .nav-link.bg-primary:hover {
    background-color: #0b5ed7 !important;
    color: #fff !important;
}

/* Dropdown */
.navbar-custom .dropdown-menu {
    background-color: var(--bg-color) !important;
    border-radius: 10px;
}

.navbar-custom .dropdown-item {
    color: var(--text-color) !important;
}

.navbar-custom .dropdown-item:hover {
    background-color: #3c73a8;
    color: #ffffff !important;
    border-radius: 8px;
}

/* ===== Fade Animation ===== */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===========================
   SIDEBAR ADMIN
=========================== */

.sidebar {
    width: 230px;
    min-height: 100vh;
    background: #1f2937;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 20px;
    transition: 0.3s ease;
}

.sidebar.collapsed {
    margin-left: -230px;
}

.sidebar a {
    color: #fff;
    display: block;
    padding: 12px 20px;
    text-decoration: none;
}

.sidebar a:hover,
.sidebar a.active {
    background: #374151;
    border-radius: 8px;
}

/* ===========================
   CONTENT AREA
=========================== */

.content {
    margin-left: 230px;
    padding: 20px;
    transition: 0.3s ease;
}

.content.collapsed {
    margin-left: 0;
}

/* ===========================
   COMPONENTS (Card, Button)
=========================== */

.card {
    background: var(--bg-color);
    color: var(--text-color);
}

.card-rounded {
    border-radius: 8px !important;
    box-shadow: 1px 7px 20px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.btn-primary { background-color: #0c4e68 !important; border: none; }
.btn-primary:hover { background-color: #136788 !important; }

.btn-success { background-color: #47993a !important; }
.btn-success:hover { background-color: #52b842 !important; }

.btn-danger { background-color: #d12c24 !important; }
.btn-danger:hover { background-color: #e23930 !important; }

/* ===========================
   RESPONSIVE SLIDER
=========================== */

#gambar_slider {
    height: 750px !important;
    object-fit: cover;
}

@media only screen and (min-width: 671px) and (max-width: 960px) {
    #gambar_slider {
        height: 350px !important;
    }
}

@media only screen and (max-width: 670px) {
    #gambar_slider {
        height: 175px !important;
    }
}

/* ===========================
   THEME VARIABLES
=========================== */

/* Light Mode */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --nav-bg: #f8f9fa;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-color: #111827;
    --text-color: #e5e7eb;
    --nav-bg: #1f2937;
}

[data-theme="dark"] .sidebar {
    background: #0f172a !important;
}

[data-theme="dark"] .sidebar a {
    color: #e5e7eb !important;
}

[data-theme="dark"] .sidebar a:hover,
[data-theme="dark"] .sidebar a.active {
    background: #1e293b !important;
}

[data-theme="dark"] .navbar-custom {
    background: rgba(18,18,18,0.85) !important;
    border-bottom: 1px solid #333;
}

[data-theme="dark"] .content {
    background: #111827 !important;
}

[data-theme="dark"] .card {
    background: #1f2937 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

/* ===========================
   MODAL UPGRADE
=========================== */

.modal-content {
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.modal-header {
    background: #f8f9fa;
    border-bottom: none;
}

/* ===========================
   FOOTER ELEGANT
=========================== */

.footer {
    background: #f9f9f9;
    padding: 2.5rem 0;
}

.footer h4 {
    font-weight: 700;
}

.footer i {
    font-size: 1.4rem;
    margin-right: 13px;
    color: #444;
    transition: 0.3s;
}

.footer i:hover {
    color: #0d6efd;
}

[data-theme="dark"] .footer {
    background: #191919 !important;
    color: #ccc;
}

/* ===========================
   SPACING
=========================== */

.main {
    margin-top: 90px;
}

/* ===========================
   FLOATING WHATSAPP BUTTON
=========================== */

.btn-wa {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #25d366;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0px 8px 25px rgba(0,0,0,0.25);
    z-index: 2000;
    transition: 0.3s;
}

.btn-wa:hover {
    transform: scale(1.13);
    color: #fff;
}

/* ===========================
   CUSTOM SCROLLBAR
=========================== */

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #b5b5b5;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #555;
}

/* ===========================
   THEME TOGGLE BUTTON
=========================== */

#theme-toggle {
    border-radius: 10px;
    transition: 0.3s;
}

#theme-toggle:hover {
    transform: scale(1.08);
}