body {
    background-color: #f8f9fa;
}

/* Watermark logo background */

body::before {
    content: "";

    background-image: url("/static/highk/thehighk.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1500px;

    opacity: 0.1;

    position: fixed;
    top: 40%;
    left: 60%;

    width: 100%;
    height: 100%;

    z-index: -1;
}

/* Navbar logo */

.navbar-logo {
    height: 80px;
    width: auto;
}

.navbar {
    background-color: #cfebc4fa   !important;
}

.navbar .btn {
    border-color: #6c757d;
    color: #6c757d;
}

.navbar .btn:hover {
    background-color: rgba(255,255,255,0.15);
    color: #6c757d;
}

.navbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ccc;
}

.placeholder-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #666;
    color: #6c757d;
    font-size: 18px;
}

.navbar-user {
    color: #6c757d;
    font-weight: 500;
}

.navbar-user a{
    color: #6c757d;
    font-weight: 500;
}

.navbar-user .a:hover {
    background-color: rgba(255,255,255,0.15);
    color: #6c757d;
}

.navbar-user i {
    margin-right: 5px;
}

/* Sidebar */

.sidebar {
    width: 220px;
    min-height: 100vh;
    background-color: #cfebc4fa;
}

/* Sidebar title */

.sidebar-title {
    color: #6c757d;
    margin-bottom: 20px;
}

/* Sidebar links */

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    margin-bottom: 5px;

    color: #6c757d;
    text-decoration: none;

    border-radius: 6px;

    transition: all 0.2s ease;

    background: none;
    border: none;
    width: 100%;
    text-align: left;

}

/* Hover highlight */

.sidebar-link:hover {
    background-color: rgba(255,255,255,0.15);
    transform: translateX(4px);
}

/* Hover Dark highlight option */

/* .sidebar-link:hover {
    background-color: rgba(0,0,0,0.15);
    transform: translateX(4px);
} */

/* Icons */

.sidebar-link i {
    font-size: 18px;
}

/* Logout link */

.logout-link:hover {
    background-color: rgba(255,255,255,0.15);
    color: #6c757d;    
}

.logout-link i {
    font-size: 18px;
}

.sidebar-link.active {
    background-color: rgba(255,255,255,0.25);
}


/* Dashboard cards */

.dashboard-card {

    background: white;

    padding: 25px;

    border-radius: 10px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    transition: all 0.2s ease;

}

.dashboard-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 8px 18px rgba(0,0,0,0.12);

}

.card-title {

    font-size: 14px;

    color: #666;

}

.card-value {

    font-size: 36px;

    font-weight: bold;

    margin-top: 10px;

}

/* Activity card */

.activity-card {

background: white;

padding: 25px;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}


/* Activity list */

.activity-list {

list-style: none;

padding: 0;

margin: 0;

}

.activity-list li {

padding: 10px 0;

border-bottom: 1px solid #eee;

font-size: 14px;

}

.activity-list li:last-child {

border-bottom: none;

}

/* PUBLIC PRODUCT CARD */

.product-card {

background: white;

border-radius: 14px;

padding: 30px;

max-width: 420px;

box-shadow: 0 10px 30px rgba(0,0,0,0.1);

text-align: center;

}

.product-title {

font-size: 28px;

font-weight: 600;

margin-bottom: 10px;

}

.product-meta {

color: #555;

font-size: 16px;

margin-bottom: 20px;

}

.product-image {

max-width: 100%;

border-radius: 10px;

margin-bottom: 20px;

}

.product-description {

font-size: 15px;

color: #444;

margin-bottom: 20px;

}

.product-footer {

border-top: 1px solid #eee;

padding-top: 15px;

font-size: 14px;

color: #666;

}

@media (max-width: 576px) {

.product-card {

margin-top: 20px;

padding: 20px;

}

.product-title {

font-size: 24px;

}

}