/* /config/assets/css/style.css */
:root {
    --brand-primary: #1e3a8a; /* Deep Blue */
    --brand-secondary: #facc15; /* Accent Yellow */
    --bg-light: #f8fafc;
}

body {
    /* A soft, premium creamy texture color */
    background-color: #FAF8F5 !important; 
    position: relative;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    
    /* UPDATE THIS PATH TO YOUR ACTUAL LOGO */
    background-image: url('../../image/icon/logo.png'); 
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 400px; /* Adjust size based on your logo shape */
    
    /* 5% opacity for a subtle watermark effect */
    opacity: 0.05; 
    
    z-index: -100; /* Keeps it strictly in the deepest background */
    pointer-events: none; /* Prevents the invisible box from blocking mouse clicks */
}

.border-start-lg {
    @media (min-width: 992px) {
        border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
}

.navbar-brand-logo {
    height: 40px;
    width: auto;
    margin-right: 10px;
}

.app-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

.app-card:hover {
    transform: translateY(-2px);
}

.profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

.cursor-pointer {
    cursor: pointer;
}
.like-btn {
    transition: all 0.2s ease;
}
.like-btn:hover {
    transform: scale(1.1);
}

/* Clean up the default Bootstrap accordion */
.accordion-button:not(.collapsed) {
    color: var(--brand-primary);
    background-color: #f8fafc;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}


/* ==========================================
   PREMIUM NAVBAR STYLING
   ========================================== */
.custom-nav-links .nav-link {
    color: #495057;
    transition: all 0.25s ease-in-out;
}

/* Beautiful hover effect for standard tabs */
.custom-nav-links .nav-link:hover,
.custom-nav-links .nav-link:focus {
    background-color: rgba(13, 110, 253, 0.08); /* Soft blue highlight */
    color: #0d6efd !important;
}

/* Special styling for the premium CBT tab */
.custom-nav-links .premium-tab {
    color: #d97706; /* Dark golden/warning color */
}

.custom-nav-links .premium-tab:hover {
    background-color: rgba(245, 158, 11, 0.1);
    color: #b45309 !important;
}

/* Make Dropdown items pop */
.dropdown-menu .dropdown-item {
    transition: background-color 0.2s;
    color: #495057;
    font-weight: 500;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(13, 110, 253, 0.06);
    color: #0d6efd;
}

/* Keep the shadow subtle and elegant */
.navbar.shadow-sm {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}