/* user_styles.css */

/* New background for authentication pages (login, register, etc.) */
.auth-page-bg {
    --color-auth-bg-start: #1e3a8a; /* A deep blue */
    --color-auth-bg-end: #111827;   /* A very dark blue-gray */
    background-image: radial-gradient(ellipse at top, var(--color-auth-bg-start), var(--color-auth-bg-end) 75%) !important;
    background-color: var(--color-auth-bg-end) !important;
}

:root {
    --color-cool-gray-bg: #262c3a; /* A lighter, cooler gray for backgrounds */
    --color-cool-gray-hover: #374151; /* A slightly darker version for hover/active */
}

/* General List Group Items */
.list-group-item {
    background-color: transparent; /* Inherit from parent tab-content */
    border-color: rgba(140, 130, 115, 0.13);
}

/* Profile Sidebar */
.profile-sidebar {
    background-color: var(--color-cool-gray-bg);
    padding: 20px;
    border-radius: 5px;
    color: #f0f0f0;
}
.profile-sidebar .profile-avatar {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 4px solid var(--color-accent);
    box-shadow: 0 0 15px rgba(109, 40, 217, 0.5);
}
.profile-sidebar h3 {
    margin-top: 15px;
}
.profile-details {
    margin-bottom: 20px;
}

/* Bootstrap 5 Tabs (Dark Mode) */
.nav-tabs {
    border-bottom: 1px solid var(--color-cool-gray-hover); /* Optional underline below tabs */
}
.nav-tabs .nav-link {
    background-color: transparent;
    color: #f0f0f0;
    border: none;
    margin-right: 5px;
}
.nav-tabs .nav-link:hover {
    background-color: var(--color-cool-gray-hover);
    color: #fff;
}
.nav-tabs .nav-link.active {
    background-color: var(--color-cool-gray-hover);
    color: #fff;
    border: none;
}

/* Tab Content Container */
.tab-content {
    background-color: var(--color-cool-gray-bg);
    padding: 20px;
    border-radius: 5px;
    color: #f0f0f0;
}

/* Follower/Following Counts */
.follow-counts {
    display: flex;
    justify-content: center;
    gap: 30px;  /* Increased gap; adjust as needed */
    margin-top: 10px;
}

.follow-counts a {
    text-decoration: none !important;
    color: #fff !important;
}

.follow-counts a:hover {
    /* Remove underline on hover */
    text-decoration: none !important;
    color: #ccc !important;
}

.follow-counts .number {
    font-weight: bold;
    font-size: 1.2em;
    color: #fff !important;
}

.follow-counts .label {
    font-size: 0.9em;
    color: #ccc !important;
}

/* Follow/Unfollow Buttons */

/* Button for NOT following – green filled */
.btn-follow {
    background-color: #28a745;
    border: 1px solid #28a745;
    color: #fff;
}
.btn-follow:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Button for FOLLOWING state – transparent with white outline and light (grey) text */
.btn-following {
    background-color: transparent;
    border: 1px solid #fff;
    color: #ccc;  /* Lighter grey for text */
}
.btn-following:hover {
    background-color: #dc3545; /* Red on hover */
    border-color: #dc3545;
    color: #fff;
}

/* --- Auth Page Card Styling --- */
.auth-card {
    background-color: rgba(17, 24, 39, 0.8); /* Dark blue-gray with transparency */
    border: 1px solid rgba(55, 65, 81, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.auth-card .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
    padding: 1.5rem;
}

.auth-card .card-header h2 {
    color: #fff;
    font-weight: 600;
}

/* New blue button style for auth pages */
.btn-auth {
    --color-auth-btn: #2563eb; /* A modern, vibrant blue */
    --color-auth-btn-hover: #1d4ed8; /* A slightly darker blue for hover */
    background-color: var(--color-auth-btn);
    border-color: var(--color-auth-btn);
    color: #fff;
    font-weight: 600;
}
.btn-auth:hover {
    background-color: var(--color-auth-btn-hover);
    border-color: var(--color-auth-btn-hover);
    color: #fff;
}